You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
942 lines
23 KiB
942 lines
23 KiB
<template>
|
|
<view class="user" :style="{'padding-bottom': current == 2?'0rpx':'130rpx'}">
|
|
<view class="user-navbar">
|
|
<u-navbar :title="title" back-icon-color="#333333" :immersive="true" :background="background"></u-navbar>
|
|
</view>
|
|
<view class="user-pic">
|
|
<image mode="widthFix" v-if="userInfo.faceFlag==0" :src="baseUrl+userInfo.img"></image>
|
|
<image mode="widthFix" v-else :src="userInfo.faceImage"></image>
|
|
</view>
|
|
<view class="user-hd">
|
|
<view class="a">
|
|
<view class="title">{{userInfo.realname?userInfo.nickname:userInfo.nickname}}</view>
|
|
<view class="vip" v-if="userInfo.memberflag>=1">VIP{{userInfo.memberflag}}</view>
|
|
<image class="sex" v-if="userInfo.sex ==2" src="@/static/peiwan-nv.png"></image>
|
|
<image class="sex" v-else src="@/static/peiwan-nan.png"></image>
|
|
<view class="city" v-if="userInfo.province"><image class="location" src="@/static/dingwei2.png"></image>{{userInfo.province+"-"+userInfo.city}}</view>
|
|
</view>
|
|
<view class="b">
|
|
<view class="tag" v-if="userInfo.age">{{userInfo.age}}岁</view>
|
|
<view class="tag" v-if="userInfo.height">{{userInfo.height}}</view>
|
|
<view class="tag" v-if="userInfo.weight">{{userInfo.weight}}</view>
|
|
<view class="tag" v-if="userInfo.post">{{userInfo.post}}</view>
|
|
</view>
|
|
<view class="c" v-if="userInfo.declaration">
|
|
#交友宣言：{{userInfo.declaration}}
|
|
</view>
|
|
<view class="d" :class="isPlay?'d-on':''" v-if="userInfo.voice" @click="toToggle()">
|
|
{{userInfo.voiceTime}}″
|
|
</view>
|
|
</view>
|
|
<view class="user-tab">
|
|
<view class="tab">
|
|
<u-tabs :list="list" bg-color="transparent" :is-scroll="false" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="user-bd" v-if="current == 0">
|
|
<view class="xiangce" v-if="userInfo.xiangce && userInfo.xiangce.length > 0">
|
|
<view class="title">相册
|
|
<view class="more" v-if="userInfo.xiangce && userInfo.xiangce.length > 0" @click="openPage(7,userInfo.id)">{{userInfo.xiangce.length}}张<image src="@/static/icon-arrow.png"></image></view>
|
|
</view>
|
|
<view class="list" v-if="userInfo.xiangce && userInfo.xiangce.length > 0">
|
|
<image v-for="(a,i) in userInfo.xiangce" @click="openPage(8,i)" :key="i" :src="a"></image>
|
|
</view>
|
|
</view>
|
|
<view class="xiangce">
|
|
<view class="title">认证状态
|
|
</view>
|
|
<view class="list">
|
|
<view class="tag" v-if="userInfo.phoneFlag == 1">手机号认证</view>
|
|
<view class="tag" v-if="userInfo.realnameFlag == 1">实名认证</view>
|
|
<view class="tag" v-if="userInfo.faceFlag == 1">真人认证</view>
|
|
</view>
|
|
</view>
|
|
<view class="xiangce">
|
|
<view class="title">情感喜好
|
|
</view>
|
|
<view class="qinggan">
|
|
<view class="dd">情感状态：<text>{{userInfo.emotion}}</text></view>
|
|
<view class="dd">喜欢什么样的异性：
|
|
<view class="b">
|
|
<view class="tag" v-for="(a,i) in userInfo.sexFlag" :key="i">{{a}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="xiangce">
|
|
<view class="title">个人信息
|
|
</view>
|
|
<view class="qinggan">
|
|
<view class="li">年收入：<text>{{userInfo.annualIncome}}</text></view>
|
|
<view class="li">家乡：<text>{{userInfo.home}}</text></view>
|
|
<view class="li">学历：<text>{{userInfo.xueli}}</text></view>
|
|
<view class="li">星座：<text>{{userInfo.constellation}}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="user-bd" v-if="current==1">
|
|
<view class="yuewan">
|
|
<view class="title">约玩项目
|
|
<view class="location">
|
|
<image src="@/static/dingwei.png"></image>距离{{distance}}km
|
|
</view>
|
|
</view>
|
|
<view class="list" v-if="sellerServiceList && sellerServiceList.length > 0">
|
|
<view class="item" :class="clickIndex == idx?'item-active':(a.type==1?'item-on':'')" v-for="(a,idx) in sellerServiceList" :key="idx">
|
|
<view class="name">{{a.name}}</view>
|
|
<view class="price">{{a.price}}起</view>
|
|
</view>
|
|
<view class="empty" v-if="isShow">
|
|
<image src="@/static/empty.png"></image>
|
|
<view class="txt">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="user-bd" v-if="current==2">
|
|
<view class="dongtai">
|
|
<view class="empty" v-if="isShow">
|
|
<image src="@/static/empty.png"></image>
|
|
<view class="txt">暂无数据</view>
|
|
</view>
|
|
<view class="item" v-for="(a,i) in articleList" :key="i" @click="openPage(5,a.id)">
|
|
<view class="a">
|
|
<view class="fl">
|
|
<image :src="a.faceImage?a.faceImage:a.img"></image>
|
|
<view class="info">
|
|
<view class="name">{{a.nickname}}</view>
|
|
<view class="desc">{{a.createTime}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="b">{{a.content}}</view>
|
|
<view class="c">
|
|
<image mode="aspectFill" v-for="(b,idx) in a.imgurl" :key="idx" :src="b"></image>
|
|
</view>
|
|
<view class="d">
|
|
<view class="fl">
|
|
<view class="li">
|
|
<image src="@/static/xiaoxi.png"></image>{{a.pinglun}}
|
|
</view>
|
|
<view class="li">
|
|
<image v-if="a.isUserZan == 0" src="@/static/dianzan.png"></image>
|
|
<image v-else src="@/static/zandin2.png"></image>{{a.zan}}
|
|
</view>
|
|
<view class="li">
|
|
<image src="@/static/fenxiang.png"></image>分享
|
|
</view>
|
|
</view>
|
|
<view class="fr">搭讪</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="user-fd" v-if="current == 0">
|
|
<view class="item" @click="openPage(1)">{{userInfo.isCare== 1?'已关注':'+关注'}}</view>
|
|
<view class="item item-on" @click="openPage(3)">
|
|
<image src="@/static/dashan-xin.png"></image>搭讪
|
|
</view>
|
|
<view class="item item-on" @click="openPage(2)">
|
|
<image src="@/static/dashan-siliao.png"></image>私信
|
|
</view>
|
|
</view>
|
|
<view class="user-fd" v-if="current == 1 && (sellerServiceList && sellerServiceList.length >0)">
|
|
<view class="item" @click="openPage(1)">{{userInfo.isCare == 1?'已关注':'+关注'}}</view>
|
|
<view class="items" @click="openPage(4,userInfo.id)">
|
|
<image src="@/static/peiwan-rili.png"></image>立即约玩
|
|
</view>
|
|
</view>
|
|
<unverified :isPopup="isPopup" />
|
|
<dashan :isDashan="isDashan" :info="info"></dashan>
|
|
<insufficient :isCoins="isCoins" />
|
|
<share :isShare="isShare" :info="info" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const systemInfoSync=uni.getSystemInfoSync();
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: "",
|
|
userInfo: {},
|
|
clickIndex: -1,
|
|
isShare: false,
|
|
isCollect: false,
|
|
isCoins: false,
|
|
isPopup: false,
|
|
isDashan: false,
|
|
isPlay: false,
|
|
title: "",
|
|
info: {},
|
|
userMeInfo: {},
|
|
isScroll: false,
|
|
isShow: false,
|
|
background: {
|
|
// 导航栏背景图
|
|
background: 'transparent',
|
|
},
|
|
current: 0,
|
|
statusBarHeight: 0,
|
|
list:[{'name': '资料'},{'name': '陪玩'},{'name': '动态'}],
|
|
activeStyle: {'fontSize': '35rpx'},
|
|
articleList: [],
|
|
distance: 0,
|
|
sellerServiceList: [],
|
|
id: ""
|
|
};
|
|
},
|
|
onPageScroll(e) {
|
|
if(e.scrollTop<=10){
|
|
this.background = {
|
|
// 导航栏背景图
|
|
background: 'transparent',
|
|
}
|
|
this.title =""
|
|
}else{
|
|
const t = e.scrollTop>=44?1:(e.scrollTop/44).toFixed(2)
|
|
this.title = (this.userInfo.realname?this.userInfo.nickname:this.userInfo.nickname)+"主页"
|
|
this.background = {
|
|
// 导航栏背景图
|
|
background: 'rgba(255,255,255,'+t+')',
|
|
}
|
|
}
|
|
},
|
|
onLoad(o) {
|
|
const that = this;
|
|
that.statusBarHeight = systemInfoSync.statusBarHeight;
|
|
that.baseUrl = this.$baseUrl;
|
|
that.id = o.id;
|
|
uni.$on("closeSharePopup",res=>{
|
|
that.isShare = false;
|
|
that.isPopup = false;
|
|
that.isDashan= false;
|
|
that.isCoins= false;
|
|
})
|
|
|
|
uni.$on("openCoinsPopup",res=>{
|
|
that.isCoins = res
|
|
})
|
|
this.getUserInfo();
|
|
},
|
|
onShow() {
|
|
this.getMeUserInfo();
|
|
},
|
|
methods: {
|
|
//关注
|
|
async toCareOrCancel() {
|
|
const { code, data , msg } = await this.$api.careOrCancel({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
sellerId: this.id,
|
|
type: this.userInfo.isCare == 0?1:2
|
|
});
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: this.userInfo.isCare == 0?"关注成功":"取消关注"
|
|
})
|
|
setTimeout(()=>{
|
|
this.getUserInfo(1)
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
async userSellerServiceList() {
|
|
const { code, data , msg } = await this.$api.userSellerServiceList({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
sellerId: this.id,
|
|
lat: uni.getStorageSync("jingweiInfo").latitude,
|
|
lon: uni.getStorageSync("jingweiInfo").longitude
|
|
});
|
|
if(code == 200){
|
|
this.sellerServiceList = data.serviceList;
|
|
this.isShow = data.serviceList.length == 0?true:false;
|
|
this.distance = data.distance;
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
async userArticleList() {
|
|
const { code, data , msg } = await this.$api.userArticleList({userId: uni.getStorageSync("userInfo").id,limit:100,page:1});
|
|
if(code == 200){
|
|
let arr = [];
|
|
if(data.list && data.list.length > 0){
|
|
data.list.map(a=>{
|
|
if(a.imgurl){
|
|
a.imgurl = a.imgurl.split(",")
|
|
}
|
|
arr.push(a)
|
|
})
|
|
}
|
|
this.articleList = arr;
|
|
this.isShow = data.totalCount == 0?true:false;
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
async getMeUserInfo() {
|
|
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
|
|
if(code == 200){
|
|
this.userMeInfo = data;
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
async getUserInfo(type) {
|
|
const { code, data , msg } = await this.$api.findOtherUserInfo({userId: uni.getStorageSync("userInfo").id,sellerId: this.id,});
|
|
if(code == 200){
|
|
this.userInfo = data;
|
|
this.userInfo.xiangce = []
|
|
if(data.reserved1){
|
|
this.userInfo.xiangce = data.reserved1.split(",")
|
|
}
|
|
if(data.home){
|
|
this.userInfo.home = data.home.split("-")[0]+"-"+data.home.split("-")[1]
|
|
}
|
|
if(type==1){
|
|
return ;
|
|
}
|
|
this.getDictDataByType();
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
//字典查询
|
|
async getDictDataByType() {
|
|
const that = this;
|
|
let res1 = await that.$api.getDictDataByType({dictType: 'salary_type'});
|
|
let res2 = await that.$api.getDictDataByType({dictType: 'education_type'});
|
|
let res3 = await that.$api.getDictDataByType({dictType: 'constellation_type'});
|
|
let res4 = await that.$api.getDictDataByType({dictType: 'marriage_type'});
|
|
let res5 = await that.$api.getDictDataByType({dictType: that.userInfo.sex == 1?'sex_type_2':'sex_type_1'});
|
|
if(res1.data && res1.data.length > 0){
|
|
res1.data.map((a,index)=>{
|
|
if(that.userInfo.annualIncome == a.dictValue){
|
|
that.userInfo.annualIncome = a.dictLabel
|
|
}
|
|
})
|
|
}
|
|
if(res2.data && res2.data.length > 0){
|
|
res2.data.map((a,index)=>{
|
|
if(that.userInfo.xueli == a.dictValue){
|
|
that.userInfo.xueli = a.dictLabel
|
|
}
|
|
})
|
|
}
|
|
if(res3.data && res3.data.length > 0){
|
|
res3.data.map((a,index)=>{
|
|
if(that.userInfo.constellation == a.dictValue){
|
|
that.userInfo.constellation = a.dictLabel;
|
|
}
|
|
})
|
|
}
|
|
if(res4.data && res4.data.length > 0){
|
|
res4.data.map((a,index)=>{
|
|
if(that.userInfo.emotion == a.dictValue){
|
|
that.userInfo.emotion = a.dictLabel;
|
|
}
|
|
|
|
})
|
|
}
|
|
let sexFlag = "",arr=[],arr1=[];
|
|
if(res5.data && res5.data.length > 0){
|
|
res5.data.map(a=>{
|
|
if(that.userInfo.sexFlag ){
|
|
sexFlag = that.userInfo.sexFlag.split(",")
|
|
sexFlag.map(b=>{
|
|
if(b== a.dictValue){
|
|
arr.push(a.dictLabel)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
if(that.userInfo.sexFlag ){
|
|
that.userInfo.sexFlag = arr;
|
|
}
|
|
},
|
|
//去聊天
|
|
async toChat() {
|
|
const { code, data } = await this.$api.findZegoToken({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
sellerId: this.id
|
|
})
|
|
if(code == 200){
|
|
uni.setStorageSync("chatToken",data.token);
|
|
uni.navigateTo({
|
|
url: "/pages/users/chat?id="+this.id+"&roomId="+data.roomId
|
|
})
|
|
}
|
|
},
|
|
openPage(index,id){
|
|
if(index == 1){
|
|
if(this.userMeInfo.realnameFlag == 0){
|
|
this.isPopup = true
|
|
return ;
|
|
}
|
|
this.toCareOrCancel();
|
|
}else if(index == 2){
|
|
if(this.userMeInfo.realnameFlag == 0){
|
|
this.isPopup = true
|
|
return ;
|
|
}
|
|
this.toChat();
|
|
}else if(index == 3){
|
|
if(this.userMeInfo.realnameFlag == 0){
|
|
this.isPopup = true
|
|
return ;
|
|
}
|
|
this.info.userid = this.id;
|
|
this.isDashan = true
|
|
}else if(index == 4){
|
|
if(this.userMeInfo.realnameFlag == 0){
|
|
this.isPopup = true
|
|
return ;
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pages/peiwan/confirm?id="+id
|
|
})
|
|
}else if(index == 5){
|
|
uni.navigateTo({
|
|
url: "/pages/dongtai/detail?id="+id
|
|
})
|
|
}else if(index == 7){
|
|
uni.navigateTo({
|
|
url: "/pages/peiwan/xiangce?id="+id
|
|
})
|
|
}else if(index == 8){
|
|
uni.previewImage({
|
|
urls: this.userInfo.xiangce,
|
|
count: id
|
|
})
|
|
}
|
|
},
|
|
changeTabs(index){
|
|
this.current = index
|
|
if(index == 1){
|
|
this.userSellerServiceList();
|
|
}else if(index == 2){
|
|
this.userArticleList();
|
|
}
|
|
},
|
|
toToggle () {
|
|
this.isPlay = !this.isPlay
|
|
if(this.isPlay){
|
|
innerAudioContext.src = this.userInfo.voice;
|
|
innerAudioContext.play();
|
|
}else{
|
|
innerAudioContext.pause();
|
|
}
|
|
},
|
|
},
|
|
destroyed() {
|
|
if (innerAudioContext) {
|
|
try {
|
|
innerAudioContext.pause();
|
|
innerAudioContext.destroy()
|
|
innerAudioContext = null
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user{
|
|
padding-bottom: 130rpx;
|
|
overflow: hidden;
|
|
.empty{
|
|
padding: 150rpx 0;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
image{
|
|
display: block;
|
|
width: 460rpx;
|
|
height: 400rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
&-pic{
|
|
width: 100%;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
&-fd{
|
|
width: 100%;
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 21;
|
|
padding: 20rpx 25rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.item{
|
|
width: 220rpx;
|
|
display: flex;
|
|
line-height: 70rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
background: #FCFCFC;
|
|
border-radius: 70rpx;
|
|
border: 1px solid #000000;
|
|
color: #000000;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
&-on{
|
|
background: linear-gradient(0deg, #000000, #3D3B38);
|
|
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.items{
|
|
width: 462rpx;
|
|
display: flex;
|
|
line-height: 70rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
border-radius: 70rpx;
|
|
border: 1px solid #000000;
|
|
background: linear-gradient(0deg, #000000, #3D3B38);
|
|
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
|
|
color: #FFFFFF;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding: 0 25rpx;
|
|
overflow: hidden;
|
|
.xiangce{
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
.more{
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 20rpx;
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.tag{
|
|
padding: 0 30rpx;
|
|
line-height: 50rpx;
|
|
height: 50rpx;
|
|
background: #000000;
|
|
border-radius: 50rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 20rpx;
|
|
margin-top: 20rpx;
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
.qinggan{
|
|
background: #F7F7F7;
|
|
border-radius: 20rpx;
|
|
padding: 0 30rpx 30rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
overflow: hidden;
|
|
text{
|
|
color: #222222;
|
|
}
|
|
.dd{
|
|
margin-top: 30rpx;
|
|
}
|
|
.li{
|
|
width: 50%;
|
|
float: left;
|
|
margin-top: 30rpx;
|
|
}
|
|
.b{
|
|
display: flex;
|
|
align-items: center;
|
|
.tag{
|
|
padding: 0 20rpx;
|
|
height: 50rpx;
|
|
font-weight: 500;
|
|
border-radius: 50rpx;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
margin-left: 20rpx;
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
&:nth-child(1){
|
|
background: linear-gradient(0deg, #A348DA, #F090F2);
|
|
}
|
|
&:nth-child(2){
|
|
background: linear-gradient(0deg, #017CF9, #10D9F2);
|
|
}
|
|
&:nth-child(3){
|
|
background: linear-gradient(0deg, #7C58DB, #9AA4FF);
|
|
}
|
|
&:nth-child(4){
|
|
background: linear-gradient(0deg, #EC1C71, #FF8CAC);
|
|
}
|
|
&:nth-child(5){
|
|
background: linear-gradient(0deg, #FA7B0B, #F7D345);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yuewan{
|
|
overflow: hidden;
|
|
margin-top: 20rpx;
|
|
.list{
|
|
width: 110%;
|
|
overflow: hidden;
|
|
margin-top: 20rpx;
|
|
.item{
|
|
width: 240rpx;
|
|
height: 140rpx;
|
|
background: url(@/static/icon-xianxia.png) center top no-repeat;
|
|
background-size: contain;
|
|
float: left;
|
|
text-align: left;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #F3F4F5;
|
|
&-on{
|
|
background: url(@/static/icon-xianshang.png) center top no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&-active{
|
|
border: 1px solid #000;
|
|
}
|
|
.name{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.price{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #E70C0C;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
.location{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
image{
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dongtai{
|
|
padding-bottom: 20rpx;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.d{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
line-height: 42rpx;
|
|
margin-top: 20rpx;
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.fl{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
.li{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 120rpx;
|
|
image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.fr{
|
|
width: 90rpx;
|
|
line-height: 44rpx;
|
|
background: #000000;
|
|
border-radius: 44rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.c{
|
|
width: 110%;
|
|
margin-top: 20rpx;
|
|
overflow: hidden;
|
|
image{
|
|
width: 210rpx;
|
|
height: 210rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.b{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
line-height: 42rpx;
|
|
margin-top: 20rpx;
|
|
text-align: left;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 定义文本的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.a{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.fl{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
image{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #E6E9ED;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
}
|
|
.name{
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
}
|
|
.desc{
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #B6BCC2;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.fr{
|
|
width: 32rpx;
|
|
image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-tab{
|
|
display: flex;
|
|
margin-top: 10rpx;
|
|
overflow: hidden;
|
|
.tab{
|
|
width: 400rpx;
|
|
}
|
|
}
|
|
&-hd{
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 0px 0px 20rpx 20rpx;
|
|
padding: 25rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.d{
|
|
width: 165rpx;
|
|
height: 95rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
background: url(@/static/icon-bofang.png) center top no-repeat;
|
|
background-size: contain;
|
|
line-height: 88rpx;
|
|
text-indent: 90rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 5rpx;
|
|
z-index: 2;
|
|
&-on{
|
|
background: url(@/static/icon-zanting.png) center top no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.b{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
.tag{
|
|
padding: 0 20rpx;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
border-radius: 40rpx;
|
|
background: #F2F2F2;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.c{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
text-align: left;
|
|
margin-top: 30rpx;
|
|
}
|
|
.a{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.name{
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
}
|
|
.vip{
|
|
width: 60rpx;
|
|
line-height: 32rpx;
|
|
background: url(@/static/vip-bg.png) center top no-repeat;
|
|
background-size: contain;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
margin-left: 20rpx;
|
|
}
|
|
.sex{
|
|
margin-left: 20rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
.city{
|
|
padding: 0 20rpx;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
border-radius: 40rpx;
|
|
background: #F2F2F2;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|