waterDelivery/pages/user/model/phb.vue

<template>
	<view class="content">
		<view class="nav flex">
			<view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
				:class="{'action': index == currentIndex}">
				{{item.title}}
			</view>
		</view>
		<image :src="top_bg" mode="" class="top-bg"></image>
		<view class="bd-wrap flex">
			<view class="bd">
				<image :src="tit_bg" mode="widthFix" class="bd-tit"></image>
				<view class="bd-top flex">
					<view class="top-item">
						<view class="top-logo yp">
							
						</view>
						<view class="top-name">
							李小图
						</view>
						<view class="top-visit">
							86.4W
						</view>
					</view>
					<view class="top-item-center">
						<view class="top-logo  jp">
							
						</view>
						<view class="top-name">
							李小图
						</view>
						<view class="top-visit">
							86.4W
						</view>
					</view>
					<view class="top-item">
						<view class="top-logo tp">
							
						</view>
						<view class="top-name">
							李小图
						</view>
						<view class="top-visit">
							86.4W
						</view>
					</view>
				</view>
				<view class="bd-btm-item flex" v-for="item in 3">
					<image src="" mode="" class="item-img"></image>
					<view class="flex item-info">
						<view class="item-name">
							杨阿姨 <image :src="rz" mode=""></image>
						</view>
						<view class="item-zy">
							育儿嫂
						</view>
						<view class="item-where">
							48岁 丨 甘肃人
						</view>
						<view class="" style="flex-grow: 1;">
							
						</view>
						<view class="item-vist">
							浏览量:2362
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 60rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top_bg: this.$store.state.baseURL + '/resource/icon/base/phb-bg.png',
				tit_bg: this.$store.state.baseURL + '/resource/icon/llph.png',
				rz: this.$store.state.baseURL + '/resource/icon/rz.png',
				navList: [{
					title: '周排行',
					state: 0
				}, {
					title: '月排行',
					state: 1
				}],
				currentIndex: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(this.$store.state.baseURL)
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			navClick(index) {
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		height: auto;
		min-height: 100%;
		background-color: #900408;
	}

	.nav {
		width: 750rpx;
		height: 88rpx;

		.nav-item {
			line-height: 88rpx;
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			height: 100%;
		}

		.action {
			font-weight: bold;
			position: relative;

			&::after {
				content: '';
				width: 50rpx;
				height: 6rpx;
				background: #FE5B38;
				border-radius: 3rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 6rpx;
				margin: auto;
			}
		}

		background-color: #fff;
	}

	.top-bg {
		width: 750rpx;
		height: 742rpx;
	}

	.bd-wrap {
		width: 699rpx;
		background: #F6E7E4;
		border-radius: 14rpx;
		justify-content: center;
		margin: -150rpx auto 0;
		position: relative;
		padding: 16rpx;
		.bd {
			width: 666rpx;
			background: #FFFFFF;
			border: 2px solid #A30F0E;
			border-radius: 14rpx;
			position: relative;
			padding: 35rpx;
			.bd-tit {
				width: 443rpx;
				height: 69rpx;
				position: absolute;
				top: -35rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
			.bd-top {
				height: 376rpx;
				width: 100%;
				
				padding-bottom: 47rpx;
				.jp,.yp,.tp {
					&::after {
						content: '';
						width: 58rpx;
						height: 66rpx;
						position: absolute;
						position: absolute;
						bottom: 10rpx;
						right: -10rpx;
						z-index: 999;
					}
				}
				.jp {
					&::after {
						
						background: url($base-url + '/resource/icon/jp.png') no-repeat;
						background-size: 100% 100%;
					}
				}
				.yp {
					&::after {
						right: -15rpx;
						background: url($base-url + '/resource/icon/yp.png') no-repeat;
						background-size: 100% 100%;
					}
				}
				.tp {
					&::after {
						right: -15rpx;
						background: url($base-url + '/resource/icon/tp.png') no-repeat;
						background-size: 100% 100%;
					}
				}
				.top-item, .top-item-center {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					.top-logo {
						border-radius: 50%;
						border: #900408 1px solid;
						position: relative;
					}
					.top-name {
						font-size: 26rpx;
						font-weight: bold;
						color: #A30F0E;
						margin: 15rpx 0;
					}
					.top-visit {
						font-size: 22rpx;
						font-weight: bold;
						color: #171717;
					}
				}
				.top-item {
					flex-grow: 3;
					.top-logo {
						width: 139rpx;
						height: 139rpx;
					}
				}
				.top-item-center {
					flex-grow: 4;
					.top-logo {
						width: 198rpx;
						height: 197rpx;
					}
				}
			}
			.bd-btm-item {
				height: 260rpx;
				border-top:  #f2f2f2 1px solid;
				justify-content: flex-start;
				.item-info {
					height: 100%;
					flex-grow: 1;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					padding: 34rpx 0 21rpx;
					
					.item-name {
						font-size: 31rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						image {
							width: 100rpx;
							height: 30rpx;
							margin-left: 10rpx;
						}
					}
					.item-zy {
						padding: 6rpx 20rpx;
						background: #fee7e4;
						border-radius: 5rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #F86859;
						margin: 16rpx 0 20rpx;
					}
					.item-vist,.item-where {
						font-weight: 500;
						color: #969696;
					}
					.item-vist {
						font-size: 22rpx;
						justify-items: flex-end;
					}
					.item-where {
						font-size: 24rpx;
					}
				}
				.item-img {
					flex-shrink: 0;
					width: 160rpx;
					height: 220rpx;
					margin-right: 22rpx;
					background-color: #eee;
				}
				
			}
		}
	}
</style>