zz--front/pages2/wd/level.vue

<template>
	<view  >
		<view style="margin: 20rpx;">
			<u-row gutter="16" justify="center">
				<u-col span="9">
					<view style="vertical-align: middle;display: flex;">
						<image src="/static/avatar.png" style="width: 80rpx;height: 80rpx;"></image>
						<view class="r_t2">李宏杰</view>
					</view>
				</u-col>
				<u-col span="3" text-align="right">
					<view style="height: 80rpx;display: flex;justify-content: center;flex-direction: column;">
						<view class="rule">
							<text>查看规则</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="sv_box">
			<scroll-view class="r_sliper" scroll-x="true" >
				<view v-for="(item,index) in list" :key="index" class="sv_item_box item_bac1" :style="'background:'+item.bac">
					<view style="display: flex;">
						<view class="left_t" >
							当前等级
						</view>
						<view style="position: relative;">
							<view style="width: 280rpx;text-align: center;margin-top: 30rpx;">
								<text class="left_t2" :style="'color:'+item.title_color">{{item.name}}</text>
							</view>
							<image :src="item.img" class="level_flower"></image>
						</view>
					</view>
					<view class="progress_box">
						<view class="progress_text">349/1000</view>
						<u-line-progress height="8" inactive-color="rgba(47, 67, 121, 0.1)" :active-color="item.title_color" :percent="70" :show-percent="false"></u-line-progress>
						<view class="tip">{{item.tip}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="padding: 20rpx;">
			<view class="box1">
				<u-row >
					<u-col span="3">
						<view class="menu_p">
							<view class="menu_box">
								<image src="/static/level/menu1.png" class="menu_img"></image>
								<view class="menu_t">优惠券</view>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="menu_p">
							<view class="menu_box">
								<image src="/static/level/menu2.png" class="menu_img"></image>
								<view class="menu_t">折扣券</view>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="menu_p">
							<view class="menu_box">
								<image src="/static/level/menu3.png" class="menu_img"></image>
								<view class="menu_t">解锁题库</view>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="menu_p">
							<view class="menu_box">
								<image src="/static/level/menu4.png" class="menu_img"></image>
								<view class="menu_t">解锁课程</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="box2">
				<view >
					<u-row >
						<u-col >
							<view class="box2_title">做任务得经验</view>
						</u-col>
					</u-row>
					<view style="margin-top: 15rpx;">
						<u-row >
							<u-col  span="2">
								<image class="box2_img" src="/static/level/qiandao.png"></image>
							</u-col>
							<u-col span="5">
								<view class="box_qd1">
									<view style="width: 95rpx;">签到</view>
									<text style="margin-left: 20rpx;">经验 +2</text>
								</view>
								<view class="box_qd">每日签到</view>
							</u-col>
							<u-col offset="2" span="3" text-align="right">
								<view class="box2_btn">去完成</view>
							</u-col>
						</u-row>
					</view>
					<view style="margin-top: 15rpx;">
						<u-row >
							<u-col  span="2">
								<image class="box2_img" src="/static/level/spxuexi.png"></image>
							</u-col>
							<u-col span="5">
								<view class="box_qd1">
									<view style="width: 95rpx;">视频学习</view>
									<text style="margin-left: 20rpx;">经验 +2</text>
								</view>
								<view class="box_qd">观看课程视频5分钟</view>
							</u-col>
							<u-col offset="2" span="3" text-align="right">
								<view class="box2_btn">去完成</view>
							</u-col>
						</u-row>
					</view>
					<view style="margin-top: 15rpx;">
						<u-row >
							<u-col  span="2">
								<image class="box2_img" src="/static/level/wsziliao.png"></image>
							</u-col>
							<u-col span="5">
								<view class="box_qd1">
									<view style="width: 95rpx;">完善资料</view>
									<text style="margin-left: 20rpx;">经验 +1</text>
								</view>
								<view class="box_qd">完善学习档案信息</view>
							</u-col>
							<u-col offset="2" span="3" text-align="right">
								<view class="box2_btn">去完成</view>
							</u-col>
						</u-row>
					</view>
					<view style="margin-top: 15rpx;">
						<u-row >
							<u-col  span="2">
								<image class="box2_img" src="/static/level/zffenxiang.png"></image>
							</u-col>
							<u-col span="5">
								<view class="box_qd1">
									<view style="width: 95rpx;">转发分享</view>
									<text style="margin-left: 20rpx;">经验 +5</text>
								</view>
								<view class="box_qd">转发分享给好友</view>
							</u-col>
							<u-col offset="2" span="3" text-align="right">
								<view class="box2_btn">去完成</view>
							</u-col>
						</u-row>
					</view>
					<view style="margin-top: 15rpx;">
						<u-row >
							<u-col  span="2">
								<image class="box2_img" src="/static/level/hdbaoming.png"></image>
							</u-col>
							<u-col span="5">
								<view class="box_qd1">
									<view style="width: 95rpx;">活动报名</view>
									<text style="margin-left: 20rpx;">经验 +100</text>
								</view>
								<view class="box_qd">报名参加一次活动</view>
							</u-col>
							<u-col offset="2" span="3" text-align="right">
								<view class="box2_btn">去完成</view>
							</u-col>
						</u-row>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						title_color:'#0046AB',
						name:'初出茅庐',
						img:'/static/level/flower_1.png',
						tip:'还需 651 经验可升级成为「崭露头角」',
						bac:'linear-gradient(45deg, rgba(99, 163, 255, 0.8), rgba(182, 220, 255, 0.8), rgba(114, 190, 255, 0.8));'
					},
					{
						title_color:'#6724BD',
						name:'崭露头角',
						img:'/static/level/flower_2.png',
						tip:'还需 651 经验可升级成为「自成一派」',
						bac:'linear-gradient(45deg, rgba(152, 14, 188, 0.4), rgba(173, 108, 254, 0.4));'
					},
					{
						title_color:'#27BA27',
						name:'自成一派',
						img:'/static/level/flower_3.png',
						tip:'还需 651 经验可升级成为「小有名气」',
						bac:'linear-gradient(45deg, rgba(8, 202, 96, 0.4), rgba(66, 254, 64, 0.4));'
					},
					{
						title_color:'#E17713',
						name:'小有名气',
						img:'/static/level/flower_4.png',
						tip:'还需 651 经验可升级成为「惊艳四座」',
						bac:'linear-gradient(45deg, rgba(231, 105, 45, 0.4), rgba(255, 169, 90, 0.4));'
					},
					{
						title_color:'#C21A7A',
						name:'惊艳四座',
						img:'/static/level/flower_5.png',
						tip:'还需 651 经验可升级成为「初露锋芒」',
						bac:'linear-gradient(45deg, rgba(148, 38, 117, 0.4), rgba(228, 83, 165, 0.4));'
					},
					{
						title_color:'#D1B214',
						name:'初露锋芒',
						img:'/static/level/flower_6.png',
						tip:'您已解锁所有成就！',
						bac:'linear-gradient(45deg, rgba(240, 157, 9, 0.4), rgba(251, 218, 56, 0.4));'
					}
				]
			}
		},
		onLoad(option) {
			
		},
		onShow(){
		},
		methods: {
			
		
		},
		
	}
</script>
<style>
	::-webkit-scrollbar{
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
<style scope>
	.level_flower{
		width: 280rpx;
		height: 160rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.menu_p{
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 130rpx;
	}
	.menu_box{
		width: 100%;
		text-align: center;
	}
	.menu_t{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #32467B;
		margin-top: 10rpx;
	}
	.menu_img{
		width: 44rpx;
		height: 38rpx;
	}
	.box_jy{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	.box_qd1{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
	}
	.box_qd{
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}
	.box2_btn{
		width: 132rpx;
		height: 40rpx;
		background: rgba(249, 96, 10, 0.6);
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
	}
	.box2_img{
		width: 83rpx;
		height: 83rpx;
	}
	.box2_title{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #32467B;
	}
	.box2{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 30rpx;
	}
	.box1{
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		margin-top: 20rpx;
	}
	.tip{
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #32467B;
		margin-top: 8rpx;
	}
	.progress_box{
		padding: 40rpx;
		margin-top: 40rpx;
	}
	.progress_text{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #2F4379;
		position: relative;
		top: 15rpx;
	}
	.left_t2{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.left_t{
		width: 118rpx;
		height: 40rpx;
		background: rgba(50, 70, 123, 0.5);
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		color: #FEFEFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
		margin-top: 30rpx;
	}
	.item_bac1{
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
	}
	.sv_item_box{
		margin-right: 20rpx;
		display:inline-block;
		width: 678rpx;
		height: 296rpx;
	}
	.sv_box{
		width: 100%;
		height: 296rpx;
		background: #FFFFFF;
		white-space:nowrap;
		overflow: hidden;
		margin-left: 20rpx;
	}
	.rule{
		width: 132rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0.5);
		border: 1rpx solid #32467B;
		border-radius: 20rpx;
		color: #2F4379;
		opacity: 0.5;
		font-size: 24rpx;
		text-align: center;
	}
	
page {
		background: #FFFFFF;
	}
	.r_t2{
		font-size: 32rpx;
		font-weight: bold;
		color: #32467B;
		line-height: 80rpx;
		padding-left: 20rpx;
	}
</style>