oil-station/gasStation-uni/pagesMy/VIP/vip.vue

<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
				<view class="my-text">会员</view>
				<view class="my-icons"></view>
			</view>
			<!-- 顶部区域 -->
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in 20" :key="index">
						<view class="top-box">

							<view class="b-top">
								<view style="width: 70%;">
									<view class="title-size">V{{index}}会员</view>
									<view class="min-size" style="margin-bottom: 20px;">升级会员享更多特权</view>
									<view class="min-size" style="margin-bottom: 10px;">在获得358可升级至钻石会员</view>
									<u-line-progress :percentage="30" activeColor="#2F72F7"></u-line-progress>
								</view>
								<view class="right-img">
									<image src="../../static/imgs/vipxz.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- qy -->
						<view class="c-box">
							<!-- <view class="title-bai">会员权益</view> -->
							<view class="wrap-box">


								<view class="box-ba" v-for="(item,index) in oilNameList" :key="index">
									<view class="min-box">
										<image src="../../static/imgs/vipxz.png" mode=""></image>
									</view>
									<view class="mu_">{{item}}</view>
								</view>


							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>



			<view style="height: 340px; width: 100%;"></view>
			<view class="bottom-box">
				<view class="bottom-bai-box">
					<view class="b-top-bt">
						<view class="title">优惠信息</view>
						<view class="times">每天04:00更新</view>
					</view>
				</view>
				<view class="bottom-bai-box">
					<view class="title">每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">200万</text> 元加<text
							style="margin: 0px 5px;color:#2c62cd ;">1%</text>成长值</view>

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

<script>
	export default {
		data() {
			return {
				title: '',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				oilNameList: [
					"汽油",
					"柴油",
					"天然气"
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0

			}
		},

		components: {

		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-box {
		height: 500px;
	}

	.content {
		background: #2F3648;
		height: 100vh;
	}

	.container {
		width: 100%;

		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;

		.my-icons {
			width: 20px;

		}

		position: fixed;
		top: 0px;
	}

	.top-box {
		width: 90%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		background: linear-gradient(90deg, #EEF4FF 0%, #AEC9FF 100%);
		margin: 10px auto;
	}

	.b-top {
		color: #2F72F7;
		display: flex;
		justify-content: space-between;
	}

	.right-img {
		width: 80px;
		height: 80px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title-size {
		font-weight: bold;
		font-size: 18px;
	}

	.min-size {
		font-size: 12px;
	}

	.c-box {
		width: 90%;
		box-sizing: border-box;
		padding: 15px;
		margin: 20px auto;
		height: 188px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 8px;
	}

	.title-bai {
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.box-ba {
		width: 33%;
		text-align: center;
		margin: 10px auto;
		color: #ffffff;
		font-size: 12px;
	}

	.min-box {
		width: 90%;
		height: 90px;
		margin: 5px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bottom-box {
		background: #F3F5F9;
		width: 100%;
		border-radius: 16px 16px 0px 0px;
		box-sizing: border-box;
		padding: 15px;
		position: fixed;
		bottom: 0px;
		height: 340px;

	}

	.bottom-bai-box {
		width: 100%;
		border-radius: 8px;
		background: #ffffff;
		box-sizing: border-box;
		padding: 10px;
		margin: 15px auto;



	}

	.b-top-bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.times {
		font-size: 12px;
		color: #999999;
	}

	.btimg {

		image {
			width: 44px;
			height: 44px;
		}

	}

	.anniu {
		width: 70px;
		height: 30px;
		background: #EB3E67;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
		font-weight: bold;

	}

	.disa {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.an-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-left: 5px;
	}

	.mu_ {
		font-size: 18px;
		font-weight: bold;
		margin: 15px auto;
	}
</style>