|
|
|
@ -1,7 +1,70 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
|
|
|
|
<view class="beijin"> |
|
|
|
|
|
|
|
<view class=" profile"> |
|
|
|
<view class="o"> |
|
|
|
<view class="headImage"> |
|
|
|
<!-- <img src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg" |
|
|
|
alt="" /> --> |
|
|
|
<image |
|
|
|
src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg" |
|
|
|
mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="setUp"> |
|
|
|
设置 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="account"> |
|
|
|
<view class="number"> |
|
|
|
狐友1712378974678376 |
|
|
|
</view> |
|
|
|
<view class="gender"> |
|
|
|
<uv-icon name="man" size="34rpx" color="rgb(127 200 239)"></uv-icon> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="authentication"> |
|
|
|
未认证 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="Days"> |
|
|
|
你已经成为狐友133天啦~ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="followWithnterest"> |
|
|
|
<view class="digit"> |
|
|
|
2 |
|
|
|
</view> |
|
|
|
<view class="close"> |
|
|
|
关注 |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="shut"> |
|
|
|
|
|
|
|
| |
|
|
|
</view> |
|
|
|
<view class="fenst"> |
|
|
|
<view class="digit"> |
|
|
|
0 |
|
|
|
</view> |
|
|
|
<view class="fans"> |
|
|
|
粉丝 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="Content"> |
|
|
|
<uv-tabs :list="list" @click="click" lineColor="black" lineWidth="35" lineHeight="5" ></uv-tabs> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<tabber select="3" /> |
|
|
|
</view> |
|
|
|
@ -9,274 +72,118 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import { |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
import userShopCommission from '@/components/userShop/userShopCommission.vue' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
userShopCommission, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(['userShop']), |
|
|
|
customStyle1() { |
|
|
|
return { |
|
|
|
height: '60rpx', |
|
|
|
background: '#FFF', |
|
|
|
color: '#000000', |
|
|
|
fontSize: '36rpx', |
|
|
|
borderRadius: '40rpx', //圆角 |
|
|
|
|
|
|
|
// nvue中必须是下方的写法 |
|
|
|
'border-top-right-radius': '40rpx', |
|
|
|
'border-bottom-left-radius': '40rpx', |
|
|
|
'border-bottom-right-radius': '40rpx', |
|
|
|
'width': '150rpx', |
|
|
|
} |
|
|
|
}, |
|
|
|
customStyle2() { |
|
|
|
return { |
|
|
|
height: '60rpx', |
|
|
|
background: '#fd5100', |
|
|
|
color: '#FFF', |
|
|
|
fontSize: '34px', |
|
|
|
borderRadius: '40rpx', //圆角 |
|
|
|
// nvue中必须是下方的写法 |
|
|
|
'border-top-right-radius': '40rpx', |
|
|
|
'border-bottom-left-radius': '40rpx', |
|
|
|
'border-bottom-right-radius': '40rpx', |
|
|
|
'width': '150rpx', |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
show: false, |
|
|
|
list: [{ |
|
|
|
name: '关注', |
|
|
|
}, { |
|
|
|
name: '评论', |
|
|
|
}] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
headBtn() { |
|
|
|
let self = this |
|
|
|
uni.showModal({ |
|
|
|
title: '演示切换角色之后的效果', |
|
|
|
success(res) { |
|
|
|
if (res.confirm) { |
|
|
|
self.$store.state.shop = !self.$store.state.shop |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 联系客服按钮回调 |
|
|
|
contactUs() { |
|
|
|
this.show = true |
|
|
|
}, |
|
|
|
confirm() { |
|
|
|
this.show = false |
|
|
|
}, |
|
|
|
|
|
|
|
cancle() { |
|
|
|
this.show = false |
|
|
|
}, |
|
|
|
|
|
|
|
click(item) { |
|
|
|
console.log('item', item); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
.beijin { |
|
|
|
background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73)); |
|
|
|
background-color: black; |
|
|
|
color: white; |
|
|
|
|
|
|
|
.warp { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.rect { |
|
|
|
width: 600rpx; |
|
|
|
height: 300rpx; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.title { |
|
|
|
padding: 10rpx 0 0 15rpx; |
|
|
|
background-color: #fd5100; |
|
|
|
color: #FFF; |
|
|
|
text-align: left; |
|
|
|
width: 100%; |
|
|
|
height: 18%; |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.center { |
|
|
|
height: 40%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
gap: 50rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.profile { |
|
|
|
padding: 40rpx; |
|
|
|
padding-top: 160rpx; |
|
|
|
|
|
|
|
.box { |
|
|
|
padding: 5rpx 10rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.followWithnterest { |
|
|
|
.digit { |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
padding: 40rpx 20rpx; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
background-image: url(/static/image/center/3.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
.close { |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
.vip { |
|
|
|
background-color: #FCCC92; |
|
|
|
color: #FA6239; |
|
|
|
width: 100rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 40rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.shut{ |
|
|
|
margin: 0rpx 20rpx; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.fenst { |
|
|
|
.digit { |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.fans { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
.account { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.tips { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ABABAB; |
|
|
|
} |
|
|
|
} |
|
|
|
.number { |
|
|
|
letter-spacing: 2rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.headBtn { |
|
|
|
margin-left: auto; |
|
|
|
padding: 15rpx 20rpx; |
|
|
|
background-color: $uni-color; |
|
|
|
color: #fff; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-top: 50rpx; |
|
|
|
} |
|
|
|
.gender { |
|
|
|
|
|
|
|
.setting { |
|
|
|
position: absolute; |
|
|
|
right: 50rpx; |
|
|
|
top: 50rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
margin: 20rpx 10rpx; |
|
|
|
|
|
|
|
.userShop { |
|
|
|
.userList { |
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 900; |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
.authentication { |
|
|
|
font-size: 20rpx; |
|
|
|
|
|
|
|
.item { |
|
|
|
width: 270rpx; |
|
|
|
margin: 20rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 40rpx 30rpx; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 30rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
|
|
|
|
.name {} |
|
|
|
|
|
|
|
.num { |
|
|
|
color: $uni-color; |
|
|
|
font-weight: 600; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user { |
|
|
|
.line { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
.item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
border-right: 1px solid #00000013; |
|
|
|
.Days { |
|
|
|
margin-top: 15rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
letter-spacing: 2rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.image { |
|
|
|
width: 100rpx; |
|
|
|
height: 70rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
.o { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
image { |
|
|
|
height: 100px; |
|
|
|
width: 100px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.setUp { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.grid { |
|
|
|
flex-direction: column; |
|
|
|
font-size: 26rpx; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
margin-bottom: 30rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.image { |
|
|
|
width: 70rpx; |
|
|
|
height: 70rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
text { |
|
|
|
text-align: center; |
|
|
|
width: 120rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.Content {} |
|
|
|
} |
|
|
|
</style> |
