gao1021514
4 years ago
32 changed files with 981 additions and 36 deletions
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<view class="userDetail"> |
|||
<view class="avatar-box"> |
|||
<view class="avatar-top"> |
|||
<view class="avatar-left-box"> |
|||
<image :src="userMsg.img" mode=""></image> |
|||
<text>{{userMsg.username}}</text> |
|||
</view> |
|||
<view class="avatar-right-box"> |
|||
<image src="../../static/img/share.svg" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="avatar-box-text"> |
|||
个性签名 |
|||
</view> |
|||
<view class="avatar-box-tag"> |
|||
<view class="avatar-box-tag-left"> |
|||
<view class="tag-left-box"> |
|||
<text>112</text> |
|||
<text>作品</text> |
|||
</view> |
|||
<view class="tag-left-box"> |
|||
<text>112</text> |
|||
<text>收藏</text> |
|||
</view> |
|||
<view class="tag-left-box"> |
|||
<text>112</text> |
|||
<text>喜欢</text> |
|||
</view> |
|||
</view> |
|||
<view class="avatar-box-tag-right"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="middle"> |
|||
<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text" |
|||
activeColor="#11A8FD"></uni-segmented-control> |
|||
</view> |
|||
<view class="bottom"> |
|||
<image :src="item.imgUrl" mode="" v-for="(item,index) in userMsg.imgList" :key="index" |
|||
:style="'width:'+imgWidth+';height:'+imgHeight"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
tiktokUserDetails |
|||
} from '@/api/creator.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
userMsg: {}, |
|||
current: 0, |
|||
arrList: ['背景图', '头像', '表情包'], |
|||
imgWidth: 0, // 图片宽 |
|||
imgHeight: 0, // 图片高 |
|||
} |
|||
}, |
|||
created() { |
|||
uni.getSystemInfo({ |
|||
success: res => { |
|||
console.log(res) |
|||
this.imgWidth = res.windowWidth - 60 + 'rpx' |
|||
this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx' |
|||
} |
|||
}) |
|||
uni.getStorage({ |
|||
key: 'userDetail', |
|||
success: res => { |
|||
console.log('getStorage', res) |
|||
this.userMsg = res.data |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
onClickItem(e) { |
|||
console.log('点击', e) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.userDetail { |
|||
.avatar-box { |
|||
padding: 20rpx 20rpx; |
|||
background: #11A8FD; |
|||
|
|||
.avatar-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 120rpx; |
|||
|
|||
.avatar-left-box { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 80rpx; |
|||
} |
|||
|
|||
text { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.avatar-right-box { |
|||
image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.avatar-box-text { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.avatar-box-tag { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 24rpx; |
|||
|
|||
.avatar-box-tag-left { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
|
|||
.tag-left-box { |
|||
width: 120rpx; |
|||
|
|||
text { |
|||
display: block; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
text:last-child { |
|||
margin-top: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.middle { |
|||
.segmented-control { |
|||
border-radius: 8rpx 8rpx 0 0; |
|||
background-color: rgba(17, 168, 253, 0.1); |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
image { |
|||
margin-top: 40rpx; |
|||
margin-left: 40rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@ |
|||
{ |
|||
"navigationBarTitleText": "", |
|||
"enablePullDownRefresh": true, |
|||
"usingComponents": { |
|||
"uni-segmented-control": "/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control" |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
<view class="userDetail"><view class="avatar-box"><view class="avatar-top"><view class="avatar-left-box"><image src="{{userMsg.img}}" mode></image><text>{{userMsg.username}}</text></view><view class="avatar-right-box"><image src="../../static/img/share.svg" mode></image></view></view><view class="avatar-box-text">个性签名</view><view class="avatar-box-tag"><view class="avatar-box-tag-left"><view class="tag-left-box"><text>112</text><text>作品</text></view><view class="tag-left-box"><text>112</text><text>收藏</text></view><view class="tag-left-box"><text>112</text><text>喜欢</text></view></view><view class="avatar-box-tag-right"></view></view></view><view class="middle"><uni-segmented-control vue-id="b78c2d26-1" current="{{current}}" values="{{arrList}}" styleType="text" activeColor="#11A8FD" data-event-opts="{{[['^clickItem',[['onClickItem']]]]}}" bind:clickItem="__e" bind:__l="__l"></uni-segmented-control></view><view class="bottom"><block tt:for="{{userMsg.imgList}}" tt:for-item="item" tt:for-index="index" tt:key="index"><image style="{{('width:'+imgWidth+';height:'+imgHeight)}}" src="{{item.imgUrl}}" mode></image></block></view></view> |
|||
@ -0,0 +1,71 @@ |
|||
.userDetail .avatar-box { |
|||
padding: 20rpx 20rpx; |
|||
background: #11A8FD; |
|||
} |
|||
.userDetail .avatar-box .avatar-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 120rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-top .avatar-left-box { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
.userDetail .avatar-box .avatar-top .avatar-left-box image { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 80rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-top .avatar-left-box text { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
margin-left: 20rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-top .avatar-right-box image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-text { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-tag { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 24rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box { |
|||
width: 120rpx; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box text { |
|||
display: block; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
} |
|||
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box text:last-child { |
|||
margin-top: 8rpx; |
|||
} |
|||
.userDetail .middle .segmented-control { |
|||
border-radius: 8rpx 8rpx 0 0; |
|||
background-color: rgba(17, 168, 253, 0.1); |
|||
} |
|||
.userDetail .bottom { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
.userDetail .bottom image { |
|||
margin-top: 40rpx; |
|||
margin-left: 40rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
<view class="container"><view class="top"><image class="back-img" src="../../static/img/start.gif" mode></image><view class="top-bottom"></view><uni-search-bar class="uni-mt-10" vue-id="8dda190e-1" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar><text>大家都在搜</text><view class="user-list"><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block></view></view><view class="middle"><text>近期精选</text><image src="../../static/img/slide-top.svg" mode></image></view></view> |
|||
<view class="container"><view class="top"><image class="back-img" src="../../static/img/start.gif" mode></image><view class="top-bottom"></view><uni-search-bar class="uni-mt-10" vue-id="8dda190e-1" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar><text>大家都在搜</text><view class="user-list"><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view data-event-opts="{{[['tap',[['goUserDetail',['$0'],[[['userList','id',item.id,'scanCode']]]]]]]}}" class="user-list-box" bindtap="__e"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block></view></view><view class="middle"><text>近期精选</text><image src="../../static/img/slide-top.svg" mode></image></view></view> |
|||
@ -1,8 +1,13 @@ |
|||
{ |
|||
"setting": { |
|||
"urlCheck": false, |
|||
"es6": true |
|||
}, |
|||
"appid": "ttc408b2b55b364f6601", |
|||
"projectname": "app" |
|||
} |
|||
"setting": { |
|||
"urlCheck": false, |
|||
"es6": true |
|||
}, |
|||
"appid": "ttc408b2b55b364f6601", |
|||
"projectname": "app", |
|||
"condition": { |
|||
"miniprogram": { |
|||
"current": -1 |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"component": true |
|||
} |
|||
@ -0,0 +1 @@ |
|||
<view class="{{(('segmented-control')+' '+(styleType==='text'?'segmented-control--text':'segmented-control--button'))}}" style="{{'border-color:'+(styleType==='text'?'':activeColor)+';'}}"><block tt:for="{{values}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view data-event-opts="{{[['tap',[['_onClick',[index]]]]]}}" class="{{((((('segmented-control__item')+' '+(styleType==='text'?'':'segmented-control__item--button'))+' '+(index===currentIndex&&styleType==='button'?'segmented-control__item--button--active':''))+' '+(index===0&&styleType==='button'?'segmented-control__item--button--first':''))+' '+(index===values.length-1&&styleType==='button'?'segmented-control__item--button--last':''))}}" style="{{'background-color:'+(index===currentIndex&&styleType==='button'?activeColor:'')+';'+('border-color:'+(index===currentIndex&&styleType==='text'||styleType==='button'?activeColor:'transparent')+';')}}" bindtap="__e"><view><text class="{{(('segmented-control__text')+' '+(styleType==='text'&&index===currentIndex?'segmented-control__item--text':''))}}" style="{{'color:'+(index===currentIndex?styleType==='text'?activeColor:'#fff':styleType==='text'?'#000':activeColor)+';'}}">{{item}}</text></view></view></block></view> |
|||
@ -0,0 +1,45 @@ |
|||
@charset "UTF-8"; |
|||
/* 水平间距 */ |
|||
/* 水平间距 */ |
|||
.segmented-control { |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
flex-direction: row; |
|||
height: 36px; |
|||
overflow: hidden; |
|||
} |
|||
.segmented-control__item { |
|||
display: inline-flex; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
flex: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.segmented-control__item--button { |
|||
border-style: solid; |
|||
border-top-width: 1px; |
|||
border-bottom-width: 1px; |
|||
border-right-width: 1px; |
|||
border-left-width: 0; |
|||
} |
|||
.segmented-control__item--button--first { |
|||
border-left-width: 1px; |
|||
border-top-left-radius: 5px; |
|||
border-bottom-left-radius: 5px; |
|||
} |
|||
.segmented-control__item--button--last { |
|||
border-top-right-radius: 5px; |
|||
border-bottom-right-radius: 5px; |
|||
} |
|||
.segmented-control__item--text { |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 2px; |
|||
padding: 6px 0; |
|||
} |
|||
.segmented-control__text { |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
Loading…
Reference in new issue