wx-fensisiyu/pages/index/index.vue

<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="index-navbar">
			<view class="" style="position: relative;;">
				<view class="back"></view>
				<u-navbar title-width='300' title='粉丝私域服务中心' :is-back="false" :border-bottom="false"
					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true"></u-navbar>
			</view>
		</view>
		<view class="swiper_box" style="padding: 0 0ch8rpx;">
			<swiper :autoplay='true' class="swiper" circular :indicator-dots="indicatorDots" :interval="interval"
				:duration="duration" indicator-active-color='#fff'>
				<swiper-item>
					<view class="swiper-item">A</view>
				</swiper-item>
				<swiper-item>
					<view class=" swiper-item">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">C</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 金刚区 -->
		<view class="u-flex u-row-around">
			<view class="u-flex-col u-col-center" @click="today">
				<image style="width: 54rpx;height: 54rpx;" src="/static/images/qiandao.png" mode=""></image>
				<view class="describe">每日签到</view>
			</view>
			<view class="u-flex-col u-col-center" @click="toShopping">
				<image style="width: 54rpx;height: 54rpx;" src="/static/images/jifen.png" mode=""></image>
				<view class="describe">积分商城</view>
			</view>
			<view class="u-flex-col u-col-center">
				<image style="width: 54rpx;height: 54rpx;" src="/static/images/gongzhonghao.png" mode=""></image>
				<view class="describe">公众号</view>
			</view>
			<view class="u-flex-col u-col-center" @click="toduihuan">
				<image style="width: 54rpx;height: 54rpx;" src="/static/images/duihuan.png" mode=""></image>
				<view class="describe">快手兑换积分</view>
			</view>
		</view>
		<!-- 直播预告 -->
		<view class="foreshow">
			<view class="u-flex">
				<text class="zhibo">直播预告</text>
				<view class="" @click="formerly">
					<text class="look">查看往期</text>
					<u-icon name="arrow-right" color="#5881C1" size="20"></u-icon>
				</view>
			</view>
			<view class=""
				style="margin-top: 16rpx;margin-bottom: 32rpx;width:664rpx;height: 280rpx;border-radius: 16rpx;overflow: hidden;">
				<image style="width:664rpx;height: 280rpx;" src="" mode=""></image>
			</view>
			<view class="u-flex u-row-between">
				<view class="">
					<image style="width: 31rpx; height: 21rpx;" src="" mode=""></image>
					<text>2021-08-17 </text>
					<text style="margin-left: 20rpx;">19:30:00开播</text>
				</view>
				<view class="button">
					预约直播
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="u-flex" style="margin: 34rpx 0 0 0;">
			<image style="width: 38rpx; height: 38rpx;" src="" mode=""></image>
			<text class="title">推荐商品</text>
		</view>
		<!-- 商品列表 -->
		<view class="u-flex u-row-between u-flex-wrap" style="width: 702rpx;">
			<view class="u-flex-col list" v-for="(item,index) in 6" :key='index'>
				<image style="width: 100% ;height: 238rpx;" src="" mode=""></image>
				<view class="">春季嫩滑保湿收缩毛孔美白提亮精华液</view>
				<view class="u-flex u-row-between">
					<view class="u-flex">
						<view class="money">
							￥
						</view>
						<view class="data">
							2986.2
						</view>
					</view>
					<view class="yuan">
						￥2986
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {

		},
		methods: {
			formerly() {
				uni.navigateTo({
					url: '/pageA/formerly'
				})
			},
			toShopping() {
				uni.navigateTo({
					url: '/pageA/shopping/shopping'
				})
			},
			today() {
				uni.navigateTo({
					url: '/pageA/everyday'
				})
			},
			toduihuan() {
				uni.navigateTo({
					url: '/pageA/duihuan'
				})
			}
		}
	}
</script>

<style lang="scss">
	.yuan {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #87898B;
		line-height: 48rpx;
	}

	.data {
		font-size: 32rpx;
		font-family: DIN Alternate, DIN Alternate;
		font-weight: bold;
		color: #F64016;
		line-height: 48rpx;
	}

	.money {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #F64016;
		line-height: 105rpx;
	}

	.list {
		width: 335rpx;
		margin-top: 30rpx;
		height: 400rpx;
	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #323337;
		line-height: 0rpx;
	}

	.look {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #5881C1;
		line-height: 0rpx;
		margin-left: 74rpx;
		margin-right: 14rpx;
	}

	.zhibo {
		font-size: 36rpx;
		font-family: DOUYU;
		font-weight: normal;
		line-height: 48rpx;
		color: #3B3C5B;
		margin-right: 20rpx;
	}

	.button {
		width: 174rpx;
		height: 60rpx;
		background: rgba(87, 194, 244, 1);
		opacity: 1;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.page {
		padding: 0 28rpx;
		width: 750rpx;
		min-height: 100vh;
		background: rgba(255, 255, 255, 1);
	}

	.foreshow {
		width: 702rpx;
		height: 464rpx;
		background: linear-gradient(135deg, #CFF4FE 0%, #D5E5FF 41%, #8FCCF1 100%);
		padding: 22rpx 19rpx;
		margin: 66rpx 0 22rpx;
		border-radius: 16rpx;
	}

	.describe {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #26303A;
		margin-top: 18rpx;
	}

	.swiper-item {
		height: 324rpx;
	}

	.swiper_box {
		width: 694rpx;
		height: 324rpx;
		background: rgba(255, 255, 255, 0.39);
		// border: 2px solid #707070;
		opacity: 1;
		border-radius: 10rpx;
		// padding:  0 28rpx;
	}


	.index-navbar {
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
		overflow: hidden;

		.back {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 750rpx;
			height: 542rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 1) 100%);
		}
	}
</style>