@ -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> |
@ -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() |
||||||
|
} |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
After Width: | Height: | Size: 128 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 143 KiB |
After Width: | Height: | Size: 983 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 112 KiB |