提交

src/components/liu-indexed-list/liu-indexed-list.vue

@@ -0,0 +1,358 @@
+<template>
+	<view class="liu-list">
+		<scroll-view class="liu-scroll-left" scroll-y="true" :scroll-with-animation="true"
+			:scroll-into-view="scrollIntoView">
+			<view class="liu-search" id="TOP">
+				<image class="liu-search-img" src="../../static/image/mine/search.png"></image>
+				<input class="liu-input" @input="search" v-model="searchStr" placeholder="请输入搜索信息" maxlength="50"
+					placeholder-class="liu-placeholder" />
+			</view>
+			<view class="left-list" v-for="(item,index) of scrollLeftObj" :key="index" :id="index!='#'?index:'BOTTOM'">
+				<view class="left-item-title" v-if="item && item.length">{{index}}</view>
+				<view class="left-item-card" v-for="(mess,inx) in item" @click.stop="chooseItem(mess)">
+					<view class="left-item-card-info"
+						:style="inx<item.length-1?'border-bottom: solid #F4F4F4 1rpx;':''">
+						<view class="left-item-card-name" :class="{ actived: mess[idKey] == current }">
+              {{mess[nameKey] || ''}}
+            </view>
+            <u-icon class="mr30" v-if="mess[idKey] == current" color="#05C341" size="16px" name="checkmark"></u-icon>
+					</view>
+				</view>
+			</view>
+			<view class="no-data" v-if="!hasData">
+				<image class="no-data-img" src="../../static/image/mine/noData.png"></image>
+				<view class="no-data-name">暂无数据</view>
+			</view>
+		</scroll-view>
+		<view class="liu-scroll-right" v-if="hasData">
+			<image class="liu-scroll-right-top" src="../../static/image/mine/top.png" @click.stop="scrollIntoView = 'TOP'"></image>
+			<view :class="{'liu-scroll-right-name':true,'liu-scroll-right-select':item==scrollIntoView}"
+				v-for="(item,index) in scrollRightList" :key="index" @click.stop="chooseType(item)">{{item}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		pinyinUtil
+	} from './pinyinUtil.js';
+	export default {
+		props: {
+			//数据源
+			dataList: {
+				type: Array,
+				required: true,
+				default: () => {
+					return []
+				}
+			},
+			//显示的主键key值
+			idKey: {
+				type: String,
+				default: 'id'
+			},
+			//显示的名字key值
+			nameKey: {
+				type: String,
+				default: 'name'
+			},
+			//显示的电话key值
+			phoneKey: {
+				type: String,
+				default: 'phone'
+			},
+			//显示的头像key值
+			imgKey: {
+				type: String,
+				default: 'img'
+			},
+			//头像圆角(rpx、px、%)
+			radius: {
+				type: String,
+				default: '6rpx'
+			},
+      current: {
+        type: [String,Number],
+        default: ''
+      }
+		},
+		data() {
+			return {
+				searchStr: '',
+				scrollIntoView: '',
+				scrollLeftObj: {},
+				oldObj: {},
+				scrollRightList: [],
+				hasData: true
+			};
+		},
+		watch: {
+			dataList: {
+				immediate: true,
+				deep: true,
+				handler(newList) {
+					if (newList && newList.length) this.cleanData(newList)
+				},
+			},
+		},
+		methods: {
+			search() {
+				if (this.searchStr) {
+					let has = false
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+					for (let i in this.scrollLeftObj) {
+						this.scrollLeftObj[i] = this.scrollLeftObj[i].filter(item => {
+							return (item[this.nameKey].indexOf(this.searchStr) != -1) || item[this.phoneKey]
+								.indexOf(this.searchStr) != -1
+						})
+						if (this.scrollLeftObj[i].length) has = true
+					}
+					if (has) this.hasData = true
+					else this.hasData = false
+				} else {
+					this.hasData = true
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+				}
+			},
+			cleanData(list) {
+				this.scrollRightList = this.getLetter()
+				let newList = []
+				list.forEach(res => {
+					let initial = pinyinUtil.getFirstLetter(res[this.nameKey].trim())
+					let firsfirs = initial ? initial.substring(0, 1) : ''
+					if (!newList[firsfirs]) newList[firsfirs] = []
+					newList[firsfirs].push({
+						[this.idKey]: res[this.idKey] || '',
+						[this.nameKey]: res[this.nameKey].trim() || '',
+						[this.phoneKey]: res[this.phoneKey] || '',
+						[this.imgKey]: res[this.imgKey] || ''
+					})
+				})
+				this.scrollRightList.forEach(t => {
+					if (newList[t]) {
+						this.$set(this.scrollLeftObj, t, newList[t])
+					} else {
+						this.$set(this.scrollLeftObj, t, [])
+					}
+				})
+				let surplusList = []
+				for (var i in newList) {
+					let han = this.scrollRightList.find(v => {
+						return v == i
+					})
+					if (!han) surplusList.push(newList[i])
+				}
+				surplusList.forEach(item => {
+					this.scrollLeftObj['#'] = this.scrollLeftObj['#'].concat(item)
+				})
+				this.oldObj = JSON.parse(JSON.stringify(this.scrollLeftObj))
+			},
+			getLetter() {
+				let list = []
+				for (var i = 0; i < 26; i++) {
+					list.push(String.fromCharCode(65 + i))
+				}
+				list.push('#')
+				return list
+			},
+			chooseType(item) {
+				if (item == '#') item = 'BOTTOM'
+				this.scrollIntoView = item
+			},
+			preview(img) {
+				uni.previewImage({
+					current: 0,
+					urls: [img]
+				})
+			},
+			chooseItem(item) {
+        this.$emit('update:current', item[this.idKey])
+				this.$emit('click', item)
+			}
+		},
+    emits: ['update:current']
+	};
+</script>
+<style>
+	/deep/ ::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		color: transparent;
+		display: none;
+	}
+</style>
+<style lang="scss" scoped>
+	.liu-list {
+		width: 100%;
+		height: 100vh;
+		background-color: #F4F4F4;
+		box-sizing: border-box;
+		padding-top: 1px;
+
+		.liu-scroll-left {
+			height: 100%;
+
+			.liu-search {
+				width: 100%;
+				height: 106rpx;
+				background-color: #FFFFFF;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+
+				.liu-search-img {
+					width: 32rpx;
+					height: 32rpx;
+					position: absolute;
+					left: 64rpx;
+				}
+
+				.liu-input {
+					width: calc(100% - 64rpx);
+					height: 72rpx;
+					background: #EEEEEE;
+					border-radius: 36rpx;
+					padding: 0 32rpx 0 80rpx;
+					box-sizing: border-box;
+					color: #333333;
+				}
+
+				.liu-placeholder {
+					color: #777777;
+				}
+			}
+
+			.left-list {
+				height: auto;
+
+				.left-item-title {
+					width: calc(100% - 24rpx);
+					height: 60rpx;
+					padding-left: 24rpx;
+					text-align: left;
+					line-height: 60rpx;
+					font-size: 30rpx;
+					color: #666666;
+				}
+
+				.left-item-card {
+					width: 100%;
+					height: 112rpx;
+					background-color: #FFFFFF;
+					box-sizing: border-box;
+					padding-left: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+
+					.left-item-card-img {
+						width: 80rpx;
+						min-width: 80rpx;
+						height: 80rpx;
+						background-color: #CFCFCF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 36rpx;
+						font-weight: bold;
+						color: #FFFFFF;
+					}
+
+					.img-info {
+						background: none;
+						border: solid #f0f0f0 1rpx;
+					}
+
+					.left-item-card-info {
+						width: 100%;
+						margin-left: 32rpx;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						.left-item-card-name {
+							font-size: 30rpx;
+							line-height: 30rpx;
+							color: #333333;
+						}
+
+						.left-item-card-phone {
+							margin-top: 14rpx;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+
+			.no-data {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-items: center;
+				flex-direction: column;
+				margin-top: 25%;
+
+				.no-data-img {
+					width: 200rpx;
+					height: 200rpx;
+				}
+
+				.no-data-name {
+					margin-top: 20rpx;
+					font-size: 28rpx;
+					color: #666666;
+				}
+			}
+		}
+
+		.liu-scroll-right {
+			position: fixed;
+			right: 0rpx;
+			top: 50%;
+			transform: translateY(-47%);
+			z-index: 999 !important;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			.liu-scroll-right-top {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 14rpx;
+				z-index: 999 !important;
+			}
+
+			.liu-scroll-right-name {
+				width: 32rpx;
+				padding-right: 14rpx;
+				height: 28rpx;
+				font-size: 22rpx;
+				color: #333333;
+				line-height: 22rpx;
+				margin-top: 8rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.liu-scroll-right-select {
+				padding: 0;
+				margin-right: 14rpx;
+				width: 28rpx;
+				height: 28rpx;
+				border-radius: 50%;
+				background: #2991FF;
+				color: #FFFFFF;
+			}
+		}
+	}
+  .actived {
+    color: #05C341;
+  }
+</style>

src/components/sunny-video/function.js

@@ -0,0 +1,39 @@
+/**
+ * @description 用于获取用户传递值的px值  如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
+ * @param {number|string} value 用户传递值的px值
+ * @param {boolean} unit 
+ * @returns {number|string}
+ */
+export const getPx = (value, unit = false)=> {
+	if (testNumber(value)) {
+		return unit ? `${value}px` : Number(value)
+	}
+	// 如果带有rpx，先取出其数值部分，再转为px值
+	if (/(rpx|upx)$/.test(value)) {
+		return unit ? `${uni.upx2px(parseInt(value))}px` : Number(uni.upx2px(parseInt(value)))
+	}
+	return unit ? `${parseInt(value)}px` : parseInt(value)
+}
+/**
+ * @description 添加单位，如果有rpx，upx，%，px等单位结尾或者值为auto，直接返回，否则加上px单位结尾
+ * @param {string|number} value 需要添加单位的值
+ * @param {string} unit 添加的单位名 比如px
+ */
+export const addUnit =(value = 'auto', unit = 'px')=> {
+	value = String(value)
+	// 用uView内置验证规则中的number判断是否为数值
+	return testNumber(value) ? `${value}${unit}` : value
+}
+/**
+ * 验证十进制数字
+ */
+function testNumber(value) {
+    return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
+}
+/**
+ * @description 获取系统信息同步接口
+ * @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync 
+ */
+export const sys=()=> {
+	return uni.getSystemInfoSync()
+}

src/components/sunny-video/sunny-video.vue

@@ -0,0 +1,345 @@
+<template>
+	<view class="sunny-video">
+		<video class="video" :style="{height:elVideoHeight.strNum}" id="sunnyVideo" ref="sunnyVideo" :title="title" :src="src" :show-center-play-btn="false" :controls="isPlay" @timeupdate="timeupdate" enable-play-gesture :show-mute-btn="showMuteBtn" @play="play" @pause="pause" @ended="ended" @error="playError" @fullscreenchange="fullscreenchange">
+			<!-- <cover-view class="video-view">
+				<cover-image class="img" src="static/left.png" @click="onBack"></cover-image>
+			</cover-view> -->
+			<cover-view v-if="!isPlay" class="banner-view" :style="{height:elVideoHeight.strNum}">
+				<cover-image v-if="poster" class="banner" :style="{height:elVideoHeight.strNum}" :src="poster" mode="" @click="onPlayChange"></cover-image>
+				<cover-image class="imgPal" :style="{width:playBtnHeight.strNum,height:playBtnHeight.strNum,top:`${elVideoHeight.intNum/2}px`,transform:`translate(-${playBtnHeight.intNum/2}px,-${playBtnHeight.intNum/2}px)`}" @click="onPlayChange" :src="playImg"></cover-image>
+			</cover-view>
+			
+			<cover-view v-if="isPlay&&!isShowRateBox" class="speedText" :style="{top:`${isFullScreen?(screenInfo.width/2) - 14.5 +'px':(elVideoHeight.intNum/2)- 14.5+'px'}`}" @click="isShowRateBox = true">
+				<!-- #ifndef MP-WEIXIN || APP-NVUE -->
+				<cover-view class="text" @click="isShowRateBox = true">{{rateText}}X</cover-view>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+				<text class="text">{{rateText}}X</text>
+				<!-- #endif -->
+				<!-- #ifdef MP-WEIXIN -->
+				{{rateText}}X
+				<!-- #endif -->
+			</cover-view>
+			
+			<cover-view v-if="isFullScreen&&isShowRateBox" class="vertical vertical-full"  :style="{width:`${screenInfo.height}px`,height:`${isShowRateBox? screenInfo.width : screenInfo.width-40}px`}">
+				<!-- #ifdef APP-NVUE -->
+				<view class="options" :style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}" @click="isShowRateBox=false"></view>
+				<view class="speed-box" :style="{height:`${screenInfo.width}px`}">
+					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</text>
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<cover-view class="options" :style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}" @click="isShowRateBox=false"></cover-view>
+				<cover-view class="speed-box" :style="{height:`${screenInfo.width}px`}">
+					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
+				</cover-view>
+				<!-- #endif -->
+			</cover-view>
+			<cover-view v-if="!isFullScreen&&isShowRateBox" class="vertical" :style="{height:`${isShowRateBox ? elVideoHeight.intNum:elVideoHeight.intNum - 44}px`}">
+				<!-- #ifdef APP-NVUE -->
+				<view class="options" :style="{height:elVideoHeight.strNum}" @click="isShowRateBox=false"></view>
+				<view class="speed-box" :style="{height:elVideoHeight.strNum}">
+					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</text>
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<cover-view class="options" :style="{height:elVideoHeight.strNum}" @click="isShowRateBox=false"></cover-view>
+				<cover-view class="speed-box" :style="{height:elVideoHeight.strNum}">
+					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
+				</cover-view>
+				<!-- #endif -->
+			</cover-view>
+		</video>
+	</view>
+</template>
+
+<script>
+	import {getPx,addUnit,sys} from './function.js'
+	import playImgs from '../../static/image/index/play.png'
+	export default {
+		props:{
+			// 视频地址
+			src:{
+				type:String,
+				default:''
+			},
+			// 视频标题
+			title:{
+				type:String,
+				default:''
+			},
+			// 视频封面
+			poster:{
+				type:String,
+				default:''
+			},
+			// 视频高度
+			videoHeight:{
+				type: [String, Number],
+				default: '230px'
+			},
+			// 播放图片按钮宽高
+			playImgHeight:{
+				type: [String, Number],
+				default: '70rpx'
+			},
+			// 暂停按钮
+			playImg:{
+				type:String,
+				default:playImgs
+			},
+			// 是否显示静音按钮
+			showMuteBtn:{
+				type:Boolean,
+				default:false
+			},
+			// 播放完毕是否退出全屏
+			isExitFullScreen:{
+				type:Boolean,
+				default:true
+			}
+		},
+		data() {
+			return {
+				videoCtx:'', //视频上下文
+				isPlay:false,// 视频是否播放过
+				isShowRateBox:false,// 是否显示倍速盒子
+				rateText:'1.0',// 当前倍速
+				rateList: [{
+					name:'0.5',
+					isTo:false
+				},{
+					name:'0.8',
+					isTo:false
+				},{
+					name:'1.0',
+					isTo:true
+				},{
+					name:'1.25',
+					isTo:false
+				},{
+					name:'1.5',
+					isTo:false
+				}
+				// #ifdef MP-WEIXIN
+				,{
+					name:'2.0',
+					isTo:false
+				}
+				// #endif
+				], //倍数
+				isFullScreen: false, //全屏状态
+				// 屏幕信息
+				screenInfo:{
+					width:0,
+					height:0,
+					options:getPx('160rpx'),// 遮罩要减去的高度
+				}
+			}
+		},
+		computed:{
+			// 视频单位高度信息
+			elVideoHeight() {
+				return {
+					intNum:getPx(this.videoHeight ? this.videoHeight : 230),
+					strNum:addUnit(this.videoHeight ? this.videoHeight : 230)
+				}
+			},
+			// 播放图片按钮宽高信息
+			playBtnHeight(){
+				return {
+					intNum:getPx(this.playImgHeight ? this.playImgHeight : '70rpx'),
+					strNum:addUnit(this.playImgHeight ? this.playImgHeight : '70rpx')
+				}
+			}
+		},
+		mounted() {
+			this.videoCtx = uni.createVideoContext('sunnyVideo', this)
+			this.getScreenInfo()
+		},
+		methods: {
+			// 获取元素信息
+			getDomInfo(elId){
+				return new Promise(resolve => {
+					const view = uni.createSelectorQuery().select(`#${elId}`)
+					view.boundingClientRect(data=>{
+						resolve(data.height)
+					}).exec()
+				})
+			},
+			//监听开始播放
+			play(e){
+				this.isPlay=true
+				this.$emit('play')
+			},
+			// 监听视频暂停
+			pause(){
+				this.$emit('pause')
+			},
+			// 视屏播放出错
+			playError(e){
+				this.$emit('playError',e)
+			},
+			// 监听视频结束
+			ended(){
+				this.$emit('videoEnded')
+				if(!this.isExitFullScreen)return
+				this.videoCtx.exitFullScreen(); //退出全屏
+			},
+			onBack(){
+				uni.navigateBack()
+			},
+			// 播放进度
+			timeupdate(e) {
+				this.$emit('timeupdate',e)
+			},
+			// 切换倍速
+			changeRate(item,index){
+				if(item.isTo)return this.isShowRateBox = false
+				this.rateList.forEach((v,i)=>{
+					i==index?v.isTo=true:v.isTo=false
+				})
+				this.videoCtx.playbackRate(item.name*1)
+				this.rateText = item.name
+				this.isShowRateBox = false
+			},
+			// 播放视频
+			onPlayChange(){
+				this.$nextTick(()=>{
+					this.videoCtx.play()
+					/* this.rateText ='1.0'
+					this.videoCtx.playbackRate(1) */
+				})
+			},
+			// 全屏操作
+			fullscreenchange(){
+				this.isFullScreen=!this.isFullScreen
+				this.$emit('fullscreenchange',this.isFullScreen)
+			},
+			// 获取屏幕信息
+			getScreenInfo(){
+				const res = sys()
+				this.screenInfo.width = res.screenWidth
+				this.screenInfo.height = res.screenHeight
+			},
+		}
+	}
+	
+</script>
+
+<style lang="scss">
+	$sunny-primary: #00B74F;
+	.sunny-video{
+		position: relative;
+		z-index: 0;
+		.speedText{
+			position: absolute;
+			top: 240rpx;
+			right: 30rpx;
+			z-index: 5;
+			padding: 10rpx;
+			padding-right: 0;
+			font-size: 30rpx;
+			color: $sunny-primary;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			.text{
+				font-size: 30rpx;
+				color: $sunny-primary;
+			}
+		}
+	}
+	.video {
+		width: 750rpx;
+		height: 230px;
+	}
+	.video-view{
+		position: absolute;
+		z-index:999;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 750rpx;
+		/* #ifndef APP-NVUE */
+		padding: var(--status-bar-height) 32rpx 0;
+		/* #endif */
+
+		.img{
+			width: 56rpx;
+			height: 56rpx;
+		}
+	}
+	.banner-view{
+		position: relative;
+		width: 750rpx;
+		height: 230px;
+		.banner{
+			width: 750rpx;
+			height: 230px;
+		}
+		.imgPal{
+			position: absolute;
+			z-index: 2;
+			top: 240rpx;
+			left: 375rpx;
+			transform: translate(-35rpx,-35rpx);
+			width: 70rpx;
+			height: 70rpx;
+		}
+	}
+	.vertical{
+		position: relative;
+		width: 750rpx;
+		height: 410rpx;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		&.vertical-full{
+			position: relative;
+			.speed-box{
+				padding: 50rpx 0;
+			}
+		}
+		.options{
+			width: 590rpx;
+		}
+		.speed-text{
+			position: absolute;
+			top: 240rpx;
+			right: 30rpx;
+			font-size: 30rpx;
+			color: #fff;
+		}
+		.speed-box{
+			position: absolute;
+			right: 0;
+			top: 0;
+			width: 160rpx;
+			height: 230px;
+			/* #ifndef APP-NVUE */
+			display: flex;
+			box-sizing: border-box;
+			/* #endif */
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+			padding: 10px 0;
+			background-color: rgba(0, 0, 0, 0.7);
+			.speeds{
+				/* #ifndef APP-NVUE */
+				box-sizing: border-box;
+				/* #endif */
+				width: 160rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #fff;
+				padding: 10px 0px;
+				&.act{
+					color: $sunny-primary;
+				}
+			}
+		}
+	}
+	
+</style>

src/pages.json

@@ -1,97 +1,136 @@
 {
-	"easycom": {
-		"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
-		"^j-(.*)": "@/components/j-$1/j-$1.vue"
-	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+  "easycom": {
+    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+    "^j-(.*)": "@/components/j-$1/j-$1.vue"
+  },
+  "pages": [
+    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "金武联驾考"
+      }
+    },
+    {
+      "path": "pages/me/index",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
+    },
+    {
+      "path": "pages/questionBank/questionBank",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/questionBank/practiceResult",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/questionBank/practiceExams",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/questionBank/examResult",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/questionBank/exclusiveExercise",
+      "style": {
+        "navigationBarTitleText": "专项练习"
+      }
+    },
+    {
+      "path": "pages/questionBank/wrongQuestion",
+      "style": {
+        "navigationBarTitleText": "错题收藏"
+      }
+    },
+    {
+      "path": "pages/questionBank/baseOperate",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/questionBank/videoDetail",
+      "style": {
+        "navigationBarTitleText": "详情"
+      }
+    },
+    {
+      "path": "pages/me/vip",
+      "style": {
+        "navigationBarTitleText": "会员中心",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/me/info",
+      "style": {
+        "navigationBarTitleText": "我的资料",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/me/tijian",
+      "style": {
+        "navigationBarTitleText": "我的体检",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/me/school",
+      "style": {
+        "navigationBarTitleText": "绑定驾校",
+        "enablePullDownRefresh": false
+      }
+    },
 		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "金武联驾考"
-			}
-		},
-		{
-			"path": "pages/me/index",
-			"style": {
-				"navigationBarTitleText": "我的"
-			}
-		}, {
-			"path": "pages/questionBank/questionBank",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": false
-			}
-
-		},{
-			"path": "pages/questionBank/practiceResult",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": false
-			}
-		},
-		{
-			"path": "pages/questionBank/practiceExams",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": false
-			}
-		},
-		{
-			"path": "pages/questionBank/examResult",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": false
-			}
-		},
-		{
-			"path": "pages/questionBank/exclusiveExercise",
-			"style": {
-					"navigationBarTitleText": "专项练习"
-			}
-		},
-		{
-			"path": "pages/questionBank/wrongQuestion",
-			"style": {
-					"navigationBarTitleText": "错题收藏"
-			}
-		},
-		{
-			"path": "pages/questionBank/baseOperate",
-			"style": {
-					"navigationStyle": "custom"
-			}
-		},{
-			"path": "pages/questionBank/videoDetail",
-			"style": {
-					"navigationBarTitleText": "详情"
-			}
+		  "path": "pages/index/videoVip",
+		  "style": {
+		    "navigationBarTitleText": "视频精品课",
+		    "enablePullDownRefresh": false
+		  }
 		}
-	],
+  ],
 
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "通用模板",
-		"navigationBarBackgroundColor": "#FFF",
-		"backgroundColor": "#FFF"
-	},
-	"tabBar": {
-		"borderStyle": "white",
-		"selectedColor": "#333333",
-		"backgroundColor": "#FFFFFF",
-		"color": "#999999",
-		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "static/image/tabbar/tab-home.png",
-				"selectedIconPath": "static/image/tabbar/tab-home-selected.png",
-				"text": "首页"
-			},
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "通用模板",
+    "navigationBarBackgroundColor": "#FFF",
+    "backgroundColor": "#FFF"
+  },
+  "tabBar": {
+    "borderStyle": "white",
+    "selectedColor": "#333333",
+    "backgroundColor": "#FFFFFF",
+    "color": "#999999",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "static/image/tabbar/tab-home.png",
+        "selectedIconPath": "static/image/tabbar/tab-home-selected.png",
+        "text": "首页"
+      },
 
-			{
-				"pagePath": "pages/me/index",
-				"iconPath": "static/image/tabbar/tab-mine.png",
-				"selectedIconPath": "static/image/tabbar/tab-mine-selected.png",
-				"text": "我的"
-			}
-		]
-	}
+      {
+        "pagePath": "pages/me/index",
+        "iconPath": "static/image/tabbar/tab-mine.png",
+        "selectedIconPath": "static/image/tabbar/tab-mine-selected.png",
+        "text": "我的"
+      }
+    ]
+  }
 }

src/pages/index/components/Subject1.vue

@@ -23,7 +23,7 @@
 		</view>
 		<view style="padding: 0 28rpx;margin-top: 60rpx;">
 			<view class="tabs-box">
-				<view class="wp33 flex ai-c jc-c">
+				<view class="wp33 flex ai-c jc-c" @tap="toVip">
 					<view class="text-center wp100">
 						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
 							src="../../static/image/index/vipicon.png">
@@ -97,6 +97,11 @@
 			return {}
 		},
 		methods: {
+			toVip(){
+				uni.navigateTo({
+					url:"/pages/index/videoVip"
+				})
+			},
 			toClass(){
 				uni.navigateTo({
 					url:"/pages/questionBank/baseOperate"

src/pages/index/components/Subject2.vue

@@ -22,13 +22,12 @@
 					<video style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
 				</view>
 			</view>
-			<view class="video_box">
-				<view class="flex ai-c jc-sb">
-					<text class="fs18 fw600 cor-000">合肥科三真实考场</text>
-					<view>
-						<text class="fs14 cor-666">全部8个考场</text>
-						<u-icon color="#666" name="arrow-right" size="16"></u-icon>
-					</view>
+			<view class="video_box mt10">
+				<text class="fs18 cor-000">驾驶方法</text>
+				<view class="text-center mt10" style="width: 200rpx;" @tap="toDetail">
+					<image style="width: 200rpx;height: 200rpx;margin-bottom: 5px;" src="../../../static/image/index/base_operate.png"></image>
+					<text class="fs16 cor-000">基础操作讲解</text>
+					<view class="fs14 cor-999 mt5">操作方法精讲</view>
 				</view>
 			</view>
 		</view>
@@ -59,6 +58,11 @@ export default {
 	methods:{
 		checkVideo(val){
 			this.videoIndex=val
+		},
+		toDetail(){
+			uni.navigateTo({
+				url:"/pages/questionBank/baseOperate"
+			})
 		}
 	}
 }

src/pages/index/videoVip.vue

@@ -0,0 +1,146 @@
+<template>
+	<view class="relative" style="height: 100vh;">
+		<image style="width: 100%;height: 600rpx;" src="../../static/image/index/vip_bg.png"></image>
+		<view class="p14">
+			<view class="flex jc-sb ai-c">
+				<view class="option_tem relative" :class="checkedPrice===item.priceId?'checked_item':''" v-for="(item,index) of priceList" :key="index" @click="checkPrice(item.priceId,item.money)">
+					<text class="fw600 fs16 cor-333">{{item.title}}</text>
+					<view class="mt5">
+						<text class="fs14" style="color: #FF6E02;">¥</text>
+						<text class="fs30 fw600" style="color: #FF6E02;">{{item.money}}</text>
+					</view>
+					<text class="fs12 cor-999">长期有效</text>
+					<view class="bottom_box fs12 cor-333" :class="checkedPrice===item.priceId?'checked_bottom':''">赠送vip题库</view>
+					<view class="tag" v-if="item.all">
+						<text style="transform:scale(0.83);">合买更优惠</text>
+						</view>
+				</view>
+			</view>
+			<view class="mt15 intr_box">
+				<view class="fw600 fs16 cor-000">免费获赠<text style="color: #FF6E02;">价值68元</text>的VIP题库</view>
+				<view class="flex ai-c jc-sb mt15">
+					<view class="flex ai-c">
+						<image style="width: 63rpx;height: 63rpx;margin-right: 5px;" src="../../static/image/index/vip500.png"></image>
+						<view class="vip_item">含精简500题</view>
+					</view>
+					<view class="flex ai-c">
+						<image style="width: 63rpx;height: 63rpx;margin-right: 5px;" src="../../static/image/index/vipmijuan.png"></image>
+						<view class="vip_item">含考前密卷2套</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="wp100 p14" style="position: absolute;left: 0;bottom:20px">
+			<view class="sub_btn flex ai-c jc-sb">
+				<text class="cor-fff fs14">¥<text class="fs24 cor-fff">{{nowPrice}}</text></text>
+				<image style="width: 276rpx;height: 88rpx;margin-top: -5px;" src="../../static/image/index/buy.png"></image>
+			</view>
+		</view>
+		</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				nowPrice:168,
+				checkedPrice:0,
+				priceList:[{
+					priceId:0,
+					title:'科一精品课',
+					money:168,
+					all:false
+				},
+				{
+					priceId:1,
+					title:'科四精品课',
+					money:168,
+					all:false
+				},
+				{
+					priceId:2,
+					title:'科一+科四',
+					money:268,
+					all:true,
+				}]
+			}
+		},
+		methods:{
+			checkPrice(val,price){
+				this.checkedPrice=val
+				this.nowPrice=price
+			}
+		}
+		}
+</script>
+
+<style scoped>
+	.option_tem{
+		width: 220rpx;
+		height: 241rpx;
+		text-align: center;
+		background: #FFFFFF;
+		border: 2px solid #D8D8D8;
+		border-radius: 16rpx 46rpx 16rpx 16rpx;
+		padding: 14px;
+	}
+	.checked_item{
+		width: 228rpx;
+		background: #FFF0E5;
+		border: 4px solid #FF6E02;
+	}
+	.bottom_box{
+		width: 214rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		text-align: center;
+		background: rgb(239,239,239);
+		border-radius: 0 0 16rpx 16rpx;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	.checked_bottom{
+		width: 218rpx;
+		border-radius: 0 0 16rpx 12rpx;
+		background-color: #FF6E02;
+	}
+	.tag{
+		width: 122rpx;
+		height: 36rpx;
+		background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
+		border-radius: 8rpx 20rpx 8rpx 8rpx;
+		line-height: 36rpx;
+		text-align: center;
+		font-size: 12px;
+		color: #FFFC27;
+		position: absolute;
+		left: 10rpx;
+		top:-18rpx
+	}
+	.intr_box{
+		width: 100%;
+		text-align: center;
+		padding: 40rpx;
+		background: #FFF0E5;
+		border-radius: 16rpx;
+	}
+	.vip_item{
+		width: 208rpx;
+		height: 54rpx;
+		line-height: 54rpx;
+		text-align: center;
+		font-size: 14px;
+		background: #F3D7C2;
+		border-radius: 0rpx 10rpx 10rpx 10rpx;
+	}
+	.sub_btn{
+		width:100%;
+		height: 110rpx;
+		border: 4px solid #F59B26;
+		background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
+		box-shadow: 0rpx 16rpx 20rpx 1rpx rgba(245,155,38,0.78);
+		border-radius: 55rpx;
+		padding: 14rpx;
+	}
+</style>

src/pages/me/index.vue

@@ -6,23 +6,43 @@
       <view class="info flex ai-c">
         <u-avatar class="br-p50 overflow-h" :size="64" :src="user.avatar" mp-avatar  shape="circle"></u-avatar>
         <view class="ml12">
-          <view class="fs18 cor-333 fwb">{{user.name}}</view>
+          <view class="flex ai-c fs18 cor-333 fwb">
+            <text class="mr10">{{user.name}}</text>
+            <image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;"></image>
+          </view>
           <view class="mt5 fs14 cor-666">陪您学车 第{{user.count}}天</view>
         </view>
       </view>
     </view>
     <view class="p15lr" style="transform: translateY(-90px);">
-      <view class="mb10" v-if="user.vip">
+      <view class="relative mb10" @tap="handleVip">
         <image src="/static/image/mine/vip_bg.png" mode="widthFix" style="width: 100%;"></image>
+        <view class="absolute p15lr p10tb flex ai-c jc-sb" style="left: 0;top: 0;right: 0;height: 40px;">
+          <view class="flex ai-c">
+            <view class="p3 br-p50" style="background-color: #873E1D;">
+              <image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;height: 15px;"></image>
+            </view>
+            <text class="ml5 fs16 fwb" style="color: #7E4012FF;">VIP会员</text>
+          </view>
+          <text class="fs12" style="color: #7E4012FF;">2024-12-12到期</text>
+        </view>
+        <view class="absolute flex ai-c jc-c" style="left: 0;top: 40px;right: 0;bottom: 0;">
+          <view class="text-center">
+            <view class="fs18 fwb" style="color: #7E4012FF;">尊享科目一二三四全部付费权益</view>
+            <view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">
+              马上学习
+            </view>
+          </view>
+        </view>
       </view>
       <view class="br8 bc-fff p15 z-index2">
         <text class="fs16 cor-333">我的驾校</text>
         <div class="mt12 flex ai-c jc-sb">
           <text class="fs18 cor-000 fwb">合肥八一驾校</text>
-          <u-button text="切换驾校" shape="circle"></u-button>
+          <u-button text="切换驾校" shape="circle" @click="handleChangeSchool"></u-button>
         </div>
         <u-line margin="14px 0 18px 0"></u-line>
-        <view class="flex ai-c">
+        <view class="flex ai-c" @tap="handleCallPhone">
           <view class="flex ai-c jc-c phone">
             <img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;">
             <text class="ml2 fs12 cor-fff">客服热线</text>
@@ -32,12 +52,12 @@
       </view>
       <view class="mt12 bc-fff br8">
         <u-cell-group>
-        	<u-cell size="large" title="我的资料" value="修改" isLink>
+        	<u-cell size="large" title="我的资料" value="修改" isLink url="/pages/me/info">
             <template #icon>
               <img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;">
             </template>
           </u-cell>
-        	<u-cell size="large" title="我的体检" value="查看报告" isLink>
+        	<u-cell size="large" title="我的体检" value="查看报告" isLink url="/pages/me/tijian">
             <template #icon>
               <img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;">
             </template>
@@ -74,6 +94,21 @@
 
 		},
 		methods: {
+      handleVip() {
+        uni.navigateTo({
+          url: '/pages/me/vip'
+        })
+      },
+      handleCallPhone() {
+        uni.makePhoneCall({
+          phoneNumber: '17318531354'
+        })
+      },
+      handleChangeSchool() {
+        uni.navigateTo({
+          url: '/pages/me/school'
+        })
+      }
 		}
 	}
 </script>
@@ -90,4 +125,11 @@
   background: #05C341;
   border-radius: 16px 16px 0px 16px;
 }
+.study {
+  width: 200px;
+  height: 35px;
+  line-height: 35px;
+  background: #7E4012;
+  border-radius: 35px;
+}
 </style>

src/pages/me/info.vue

@@ -0,0 +1,40 @@
+<template>
+  <view class="p15 bc-f5">
+    <view class="br8 bc-fff p15lr">
+      <view class="flex ai-c bb1" style="height: 110rpx;">
+        <view class="title">联系电话</view>
+        <view class="m30lr fs14 cor-333 fl1">15122305568</view>
+        <u-icon name="arrow-right" color="#999" />
+      </view>
+      <view class="flex ai-c" style="height: 110rpx;">
+        <view class="title">地址</view>
+        <view class="m30lr fs14 cor-333 fl1">安徽省合肥市包河区</view>
+        <u-icon name="arrow-right" color="#999" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.title {
+  width: 120rpx;
+  font-size: 14px;
+  color: #666;
+}
+.bb1 {
+  border-bottom: 1px solid #eee;
+}
+</style>

src/pages/me/school.vue

@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <IndexList :dataList="dataList" nameKey="schoolName" v-model:current="current" @click="click"></IndexList>
+  </view>
+</template>
+
+<script>
+  import IndexList from '@/components/liu-indexed-list/liu-indexed-list.vue'
+  export default {
+    components: {
+      IndexList
+    },
+    data() {
+      return {
+        current: '1',
+        dataList: [{
+          id: '1',
+          schoolName: '爱尚学车驾校长安分校',
+        },{
+          id: '2',
+          schoolName: '八一驾校',
+        },{
+          id: '3',
+          schoolName: '八零驾校',
+        },{
+          id: '4',
+          schoolName: '畅通驾校',
+        },{
+          id: '5',
+          schoolName: '金灵驾校',
+        },{
+          id: '6',
+          schoolName: '通顺驾校',
+        }]
+      }
+    },
+    methods: {
+      click() {
+        // 设置用户驾校
+        
+        // 然后返回
+        uni.navigateBack()
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>

src/pages/me/tijian.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="p15 bc-f5">
+    <view class="br8 bc-fff p15lr">
+      <view class="flex ai-c bb1" style="height: 110rpx;">
+        <view class="title">体检结果</view>
+        <view class="ml30 fs14 cor-333 fl1">通过</view>
+      </view>
+      <view class="flex ai-c" style="height: 110rpx;">
+        <view class="title">体检时间</view>
+        <view class="ml30 fs14 cor-333 fl1">2023-08-10 14:35:23</view>
+      </view>
+      <view class="flex ai-fs" style="height: 110rpx;">
+        <view class="title">体检时间</view>
+        <image class="ml30" src="/static/image/mine/tijian.png" style="width: 333rpx;" mode="widthFix"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.title {
+  width: 120rpx;
+  font-size: 14px;
+  color: #666;
+}
+.bb1 {
+  border-bottom: 1px solid #eee;
+}
+</style>

src/pages/me/vip.vue

@@ -0,0 +1,226 @@
+<template>
+  <view class="flex fld-c p15">
+    <u-sticky>
+      <view class="flex ai-c">
+        <view v-for="(item,index) in list" :key="index" class="km-item" :class="{ actived: index==current }"
+          @click="current=index">
+          {{ item.name }}
+        </view>
+      </view>
+    </u-sticky>
+    <view class="mt15">
+      <swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
+        :disable-programmatic-animation="true" @change="onChange">
+        <swiper-item v-for="(item,index) in list" :key="index">
+          <view class="relative">
+            <image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
+            <view class="vip-info">
+              <u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
+              <view class="ml10">
+                <view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
+                  {{item.name}}尊享VIP
+                </view>
+                <view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
+                  2024-12-12到期
+                </view>
+              </view>
+            </view>
+            <view class="corner">
+              VIP已开通
+            </view>
+            <view class="renew">
+              98元立即续费
+            </view>
+          </view>
+        </swiper-item>
+        <swiper-item>
+        </swiper-item>
+      </swiper>
+    </view>
+    <view class="mt20">
+      <swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
+        :disable-programmatic-animation="true" @change="onChange">
+        <swiper-item v-for="(item,index) in list" :key="index">
+          <view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
+            <view class="fs18 cor-000 fwb">
+              3步轻松学{{item.name}}
+            </view>
+            <view class="mt25 flex ai-c jc-sb">
+              <view class="flex ai-c">
+                <image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
+                <view class="ml7">
+                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
+                    精简500题
+                  </view>
+                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
+                    题目全部做对，视为完成
+                  </view>
+                </view>
+              </view>
+              <view class="study">
+                去学习
+              </view>
+            </view>
+            <view class="mt45 flex ai-c jc-sb">
+              <view class="flex ai-c">
+                <image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
+                <view class="ml7">
+                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
+                    真实考场模拟
+                  </view>
+                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
+                    10次95分以上，视为完成
+                  </view>
+                </view>
+              </view>
+              <view class="study">
+                去学习
+              </view>
+            </view>
+            <view class="mt45 flex ai-c jc-sb">
+              <view class="flex ai-c">
+                <image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
+                <view class="ml7">
+                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
+                    考前密卷
+                  </view>
+                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
+                    2套试卷95分以上，视为完成
+                  </view>
+                </view>
+              </view>
+              <view class="study">
+                去学习
+              </view>
+            </view>
+          </view>
+          <view v-else style="margin-top: 30rpx;">
+            <view class="video-box">
+              <view class="flex jc-sb ai-c wp100">
+                <text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
+                <text class="cor-666 fs12">全部 ></text>
+              </view>
+              <view class="flex ai-c mt20">
+                <image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
+                <view class="ml18 text-center">
+                  <u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
+                    text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle">
+                  </u-button>
+                  <view class="cor-333 fs15 mt17">真实考场模拟</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </swiper-item>
+        <swiper-item>
+        </swiper-item>
+      </swiper>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [{
+          name: '科一'
+        }, {
+          name: '科二'
+        }, {
+          name: '科三'
+        }, {
+          name: '科四'
+        }],
+        current: 0
+      }
+    },
+    methods: {
+      onChange(e) {
+        this.current = e.detail.current
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .km-item {
+    margin-right: 8px;
+    width: 72px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    color: #333;
+    text-align: center;
+    border-radius: 15px;
+    border: 1px solid #CCCCCC;
+  }
+
+  .actived {
+    background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
+    color: #fff;
+  }
+
+  .km-item:last-of-type {
+    margin-right: 0;
+  }
+
+  .vip-info {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .corner {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 77px;
+    height: 23px;
+    background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
+    opacity: 0.86;
+    border-radius: 0px 8px 0px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #fff;
+  }
+
+  .renew {
+    position: absolute;
+    right: 10%;
+    bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 185rpx;
+    height: 52rpx;
+    background: #873E1D;
+    border-radius: 26rpx;
+    font-size: 12px;
+    color: #F6E99F;
+  }
+
+  .study {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 161rpx;
+    height: 67rpx;
+    background: #F6E99F;
+    border-radius: 34rpx;
+    font-size: 12px;
+    color: #873E1D;
+  }
+  .video-box {
+  	padding: 20rpx;
+  	width: 694rpx;
+  	height: 369rpx;
+  	background: #F9F3E7;
+  	border: 2rpx solid #CF8B6D;
+  	border-radius: 16rpx;
+  }
+</style>

src/pages/questionBank/practiceResult.vue

@@ -38,7 +38,7 @@
 						<text class="fs16 cor-000 fw600">精简500题</text>
 					</view>
 					<view style="width: 220rpx;">
-											<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
+							<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
 					</view>
 				</view>
 			</view>

src/pages/questionBank/videoDetail.vue

@@ -1,20 +1,51 @@
 <template>
 	<view>
-		<video style="width: 100%;height: 422rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
+		<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" />
 		<view class="p14 bc-fff">
-			<view class="flex ai-c jc-sb mt10">
+			<view class="flex ai-c jc-sb mt10 wp100">
 				<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</text>
-				<view class="flex">
+				<view class="flex" @tap="popupShow=true">
 					<text class="fs14 cor-666">更多</text>
 					<u-icon color="#666" name="arrow-right" size="18"></u-icon>
 				</view>
-				<swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true"	@change="onChange" @animationfinish="onAnimationfinish" @touchend="touchEnd" >
-				</swiper>
 			</view>
 			<view>
-				
 			</view>
 		</view>
+		<view class="pl14 bc-fff">
+			<u-scroll-list :indicator="false" class="mr15">
+			      <view v-for="(item, index) in videoList" :key="index" class="mr15" @click="checkVideo(item.id)">
+							<view>
+								<view class="mb10 relative">
+									<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
+									<view v-if="nowVideo===item.id" class="playLogo">播放中</view>
+									<image class="play_btn" src="../../static/image/index/play.png" />
+									<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
+								</view>
+								<text :style="{color:nowVideo===item.id?'#FF6E02':'#333'}">正确的驾驶姿势</text>
+							</view>
+			      </view>
+			  </u-scroll-list>
+		</view>
+		<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
+			<view class="p14 flex ai-c jc-sb">
+				<text class="fs16 fw600 cor-000">课程目录</text>
+				<text class="fs16 cor-666" @tap="popupShow=false">收起</text>
+			</view>
+			<view style="max-height: 800rpx;overflow-y: scroll;" class="p14lr">
+				<view class="flex bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
+					<view class="pic relative">
+						<image class="pic" src="../../static/image/index/index_bg.png"></image>
+						<image class="play_btn_2" src="../../static/image/index/play.png" />
+						<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
+					</view>
+					<view class="ml10">
+						<text class="fs16 cor-000 fw600">上车、下车的方法</text>
+						<view class="fs14 mt5 cor-666">上车、下车的方法</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -22,11 +53,81 @@
 	export default{
 		data(){
 			return{
-				
+				popupShow:false,
+				nowVideo:0,
+				videoList:[{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:0
+				},{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:1
+				},{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:2
+				},{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:3
+				},{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:4
+				},{
+					title:'正确的驾驶姿势',
+					time:'13:14',
+					id:5
+				}]
+			}
+		},
+		methods:{
+			checkVideo(val){
+				this.nowVideo=val
 			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+	.contain-box {
+		width: 260rpx;
+		height: 146rpx;
+		background: #00B74F;
+		border-radius: 8rpx;
+	}
+	.playLogo{
+		width: 90rpx;
+		height: 40rpx;
+		background: #FF6E02;
+		border-radius: 8rpx 0rpx 8rpx 0rpx;
+		line-height: 40rpx;
+		text-align: center;
+		color: #fff;
+		font-size: 12px;
+		position: absolute;
+		left: 0;
+		top:0
+	}
+	.play_btn{
+		width: 65rpx;
+		height: 65rpx;
+		position: absolute;
+		left: 97.5rpx;
+		top:39.5rpx
+	}
+	.play_btn_2{
+		width: 65rpx;
+		height: 65rpx;
+		position: absolute;
+		left: 117.5rpx;
+		top:52rpx
+	}
+	.pic{
+		width: 300rpx;
+		height: 169rpx;
+		background: #00B74F;
+		border-radius: 8rpx;
+	}
 </style>

src/static/style/base.scss

@@ -298,15 +298,12 @@ body,
 }
 .relative {
   position: relative;
-  z-index: 1;
 }
 .absolute {
   position: absolute;
-  z-index: 2;
 }
 .absolute-full {
   position: absolute;
-  z-index: 2;
   top: 0;
   left: 0;
   right: 0;
@@ -314,7 +311,6 @@ body,
 }
 .fixed {
   position: fixed;
-  z-index: 9;
 }
 .break-all {
   display: block;