项目初始化

pages/tabbar/components/home/userCard.vue

@@ -0,0 +1,153 @@
+<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>