siyu_app/pages/index/video/index.vue

<template>
	<view>
		<es-nav-bg></es-nav-bg>
		<view class="es-p-r">
			<es-top></es-top>
			<view class="es-h-88"></view>
			<view class="es-h-100"></view>
			<view class="es-bc-white view es-br-40">
				<view class="es">
					<view class="es-icon-146 es-br es-ml-10" style="margin-top: -53rpx;">
						<image src="/static/logo.png"></image>
					</view>
					<view class="es-f1 es es-center es-ml-25 es-pt-10">
						<view class=" es es-ver es-ac es-pc">
							<view class="es-fs-22 es-c-99">粉丝</view>
							<view class="es-fs-30 es-fw-600">6235</view>
						</view>
						<view class=" es es-ver es-ac es-pc">
							<view class="es-fs-22 es-c-99">关注</view>
							<view class="es-fs-30 es-fw-600">6235</view>
						</view>
						<view class=" es es-ver es-ac es-pc">
							<view class="es-fs-22 es-c-99">收藏</view>
							<view class="es-fs-30 es-fw-600">6235</view>
						</view>
						<view class=" es es-ver es-ac es-pc">
							<view class="es-fs-22 es-c-99">获赞</view>
							<view class="es-fs-30 es-fw-600">6235</view>
						</view>
					</view>
				</view>

				<view class="es es-ac es-pt-25">
					<view class="es-fs-30 es-fw-600 ">健康达人</view>
					<view class="es-icon-49 es-icon-user-vip"></view>
					<view class="es-fs-22 es-c">LV2</view>
					<view class="es-f1"></view>
					<view class="es-ml-20 es-icon-40 es-icon-user-dy"></view>
					<view class="es-ml-20 es-icon-40 es-icon-user-ks"></view>
				</view>

				<view class="es-mt-15 es-fw-500 es-fs-22">人生没有白走的路，每一步都算数。</view>
				<view class="es es-fs-22 es-fw-500 es-pt-15 es-ac">
					<view class="es-icon-auto es-icon-user-label2 es es-ac es-mr-20 es-w-70 es-h-34 es es-ac es-pc">
						<view class="es-icon-15 es-h-22 es-icon-user-woman"></view>
						<view class="es-ml-10 es-c">女</view>
					</view>
					<view
						class="es-icon-auto es-bc-e6 es-br-4 es es-ac es-mr-20 es-pl-15 es-pr-15 es-h-34 es es-ac es-pc">
						<view class="es-icon-17 es-h-22 es-icon-user-address"></view>
						<view class="es-ml-10 es-omit es-c-66" style="max-width: 6em;">北京</view>
					</view>
					<view
						class="es-icon-auto es-icon-user-label es es-ac es-mr-20 es-pl-15 es-pr-15 es-h-40 es es-ac es-pc">
						<view class="es-c">健康管理师</view>
					</view>
					<view
						class="es-icon-auto es-icon-user-label es es-ac es-mr-20 es-pl-15 es-pr-15 es-h-40 es es-ac es-pc">
						<view class="es-c">执业药师</view>
					</view>
				</view>


				<view class="es es-center es-pt-30 item">
					<view class="es-w-196 es-h-100 es-icon-auto es-icon-user-video-bg-1 es es-ver es-pc">
						<view class="es-ml-17 es-fs-26 es-fw-500">达人推荐</view>
						<view class="es-ml-17 es-fs-22 es-mt-4 es-c-99">超多性价比好物</view>
					</view>
					<view class="es-w-196 es-h-100 es-icon-auto es-icon-user-video-bg-2 es es-ver es-pc">
						<view class="es-ml-17 es-fs-26 es-fw-500">我的钱包</view>
						<view class="es-ml-17 es-fs-22 es-mt-4 es-c-99">查看可提现佣金</view>
					</view>
					<view class="es-w-196 es-h-100 es-icon-auto es-icon-user-video-bg-3 es es-ver es-pc">
						<view class="es-ml-17 es-fs-26 es-fw-500">我的钱包</view>
						<view class="es-ml-17 es-fs-22 es-mt-4 es-c-99">查看可提现佣金</view>
					</view>
				</view>

				<view class="es es-fs-28 es-pt-30">
					<view class="es-wp-50 es es-ac es-pc es-ver ">
						<view class="es-p-r" :class="1?'es-c es-fw-600':'es-c-99'">
							主页
							<view class="icon es es-ac es-pc">
								<view class="es-icon-26 es-icon-user-nav-1"></view>
							</view>
						</view>
						<view class="es-br es-w-45 es-h-6 es-mt-4" :class="1?'es-bc':''"></view>
					</view>
					<view class="es-wp-50 es es-ac es-pc es-ver ">
						<view class="es-p-r" :class="0?'es-c es-fw-600':'es-c-99'">
							课程详情
							<view class="icon es es-ac es-pc" style="left:-42rpx;">
								<view class="es-icon-26 es-w-32 es-icon-user-nav-2 "></view>
							</view>
						</view>
						<view class="es-br es-w-45 es-h-6 es-mt-4" :class="0?'es-bc':''"></view>
					</view>

				</view>


				<view class="es-pt-20">
					<view class="es es-ac">
						<view class="es-f1 es-fw-500 es-fs-26">
							<text>短视频</text>
							<text class="es-c-99 es-ml-10">6</text>
						</view>
						<view class="es-w-100 es-h-21 es-icon-auto es-icon-user-more"></view>
					</view>
					<view class="con es-center">
						<block v-for="v,i in 10">
							<es-course-item></es-course-item>
						</block>
					</view>

				</view>


			</view>

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

<script>
	export default {
		data() {
			return {


			}
		},
		onLoad(options) {


		},
		methods: {


		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.view {
		padding-left: 30rpx;
		padding-right: 30rpx;
		min-height: 600rpx;
	}

	.con {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.es-icon-user-dy {
		background-image: url(/static/images/other/user/dy.png);
	}

	.es-icon-user-ks {
		background-image: url(/static/images/other/user/ks.png);
	}

	.es-icon-user-address {
		background-image: url(/static/images/other/user/address.png);
	}

	.es-icon-user-vip {
		background-image: url(/static/images/other/user/vip.png);
	}

	.es-icon-user-nav-1 {
		background-image: url(/static/images/other/user/nav-1.png);
	}

	.es-icon-user-nav-2 {
		background-image: url(/static/images/other/user/nav-2.png);
	}

	.es-icon-user-video-bg-1 {
		background-image: url(/static/images/other/user/video-bg-1.png);
	}

	.es-icon-user-video-bg-2 {
		background-image: url(/static/images/other/user/video-bg-2.png);
	}

	.es-icon-user-video-bg-3 {
		background-image: url(/static/images/other/user/video-bg-3.png);
	}

	.es-icon-user-woman {
		background-image: url(/static/images/other/user/woman.png);
	}

	.es-icon-user-address {
		background-image: url(/static/images/other/user/address.png);
	}

	.es-icon-user-label {
		background-image: url(/static/images/other/user/label.png);
	}

	.es-icon-user-label2 {
		background-image: url(/static/images/other/user/label2.png);
	}

	.es-icon-user-more {
		background-image: url(/static/images/other/user/video-more.png);
	}

	.item:nth-child(1) {
		color: #0B3A06;
	}

	.item:nth-child(2) {
		color: #3A1006;
	}

	.item:nth-child(3) {
		color: #06173A;
	}

	.icon {
		position: absolute;
		left: -35rpx;
		height: 100%;
		top: 0;
	}
</style>