153 lines
2.9 KiB
Vue
153 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view class="user-card-box">
|
||
|
|
<view class="user-card">
|
||
|
|
<view class="title">
|
||
|
|
<view class="icon">
|
||
|
|
<u-icon name="tuijian" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||
|
|
</view>
|
||
|
|
<text class="text">新人推荐</text>
|
||
|
|
</view>
|
||
|
|
<scroll-view class="scroll-box" scroll-x>
|
||
|
|
<view class="user-swiper">
|
||
|
|
<view @click="detail(item)" class="user-box" v-for="(item,i) in newList">
|
||
|
|
<view class="avatar-box">
|
||
|
|
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||
|
|
<view v-if="item.onlineStatus" class="badge"></view>
|
||
|
|
</view>
|
||
|
|
<view class="nickname">{{item.nickname}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="user-card">
|
||
|
|
<view class="title">
|
||
|
|
<view class="icon">
|
||
|
|
<u-icon name="huo" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||
|
|
</view>
|
||
|
|
<text class="text">人气达人</text>
|
||
|
|
</view>
|
||
|
|
<scroll-view class="scroll-box" scroll-x>
|
||
|
|
<view class="user-swiper">
|
||
|
|
|
||
|
|
<view @click="detail(item)" class="user-box" v-for="(item,i) in hotList">
|
||
|
|
<view class="avatar-box">
|
||
|
|
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||
|
|
<view v-if="item.onlineStatus" class="badge"></view>
|
||
|
|
</view>
|
||
|
|
<view class="nickname">{{item.nickname}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
newList: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
hotList: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
detail(e) {
|
||
|
|
this.$u.route({
|
||
|
|
url: 'pages/clerk/detail/index',
|
||
|
|
params: {
|
||
|
|
id: e.id,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.user-card-box {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-card {
|
||
|
|
padding: 10px 0;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
padding: 10px;
|
||
|
|
padding-top: 0;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
background-color: #ddd;
|
||
|
|
width: 36rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-swiper {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.avatar-box {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.badge {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
background-color: var(--ui-BG-Main);
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border-radius: 100%;
|
||
|
|
border: 2px solid #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 10px;
|
||
|
|
|
||
|
|
.nickname {
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
max-width: 140rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|