681 lines
21 KiB
Vue
681 lines
21 KiB
Vue
<template>
|
||
<view class="contrast-box">
|
||
<view class="head-box">
|
||
<view class="desc">
|
||
<text class="icon"></text>
|
||
<view class="txt-item">
|
||
{{allOptionStr}}
|
||
</view>
|
||
</view>
|
||
<view class="btn" @click="showContrastLayer">
|
||
数据对比
|
||
</view>
|
||
</view>
|
||
<!-- 数据对比 -->
|
||
<uni-popup @change="popupChange" ref="pop_contrast" type="bottom">
|
||
<view class="search-content">
|
||
<view class="head-title">数据对比</view>
|
||
<view class="content" v-if="platformType!=1">
|
||
<view class="title">我的报告</view>
|
||
<view class="sel-box" @click="selTimeList(1)">
|
||
{{optionStr1}}
|
||
<view class="iocn"></view>
|
||
</view>
|
||
<view class="s-line" style="display:none;"><text>对比</text></view>
|
||
<view class="title">时间维度</view>
|
||
<view class="sel-box" @click="selTimeList(2)">
|
||
{{optionStr2}}
|
||
<view class="iocn"></view>
|
||
</view>
|
||
<view class="title">群体维度</view>
|
||
<view class="options">
|
||
<view class="item" :class="[schoolLevel == 1?'on':'', gradeShow?'':'disable']" v-on:click="selectSchoolLevel(1)" >班级</view>
|
||
<view class="item" :class="[schoolLevel == 2?'on':'', gradeShow?'':'disable']" v-on:click="selectSchoolLevel(2)">年级</view>
|
||
<view class="item" v-on:click="selectSchoolLevel(3)" :class="schoolLevel == 3?'on':''">学校</view>
|
||
</view>
|
||
<view class="title" style="padding-top: 10rpx;">受测对象</view>
|
||
<view class="options">
|
||
<view class="item" v-on:click="selectSex(1)" :class="sexType == 1?'on':''">男</view>
|
||
<view class="item" v-on:click="selectSex(2)" :class="sexType == 2?'on':''">女</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" v-else>
|
||
<view class="title">我的报告</view>
|
||
<view class="sel-box" @click="selTimeList(1)">
|
||
{{optionStr1}}
|
||
<view class="iocn"></view>
|
||
</view>
|
||
<view class="s-line" style='position: relative;'><text>对比</text></view>
|
||
<view class="title">时间维度</view>
|
||
<view class="sel-box" @click="selTimeList(2)">
|
||
{{optionStr2}}
|
||
<view class="iocn"></view>
|
||
</view>
|
||
<view class="title">群体维度</view>
|
||
<view class="options">
|
||
<view v-for="(item, index) in departList" :key="index">
|
||
<view class="item" v-on:click="selectSchoolLevel(item)" :class="schoolLevel == item.DepartId?'on':''">
|
||
{{item.Name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">受测对象</view>
|
||
<view class="options">
|
||
<view class="item" v-on:click="selectSex(1)" :class="sexType == 1?'on':''">男</view>
|
||
<view class="item" v-on:click="selectSex(2)" :class="sexType == 2?'on':''">女</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-wrap">
|
||
<view class="btn" v-on:click="confirmCompute">
|
||
确认对比
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup @change="popupChange" ref="pop_time" type="bottom">
|
||
<view class="search-content">
|
||
<view class="head-title">选择时间</view>
|
||
<!-- 第一个时间 -->
|
||
<view class="time-content" v-if="timeType == 1">
|
||
<view class="left">
|
||
<view class="time-item" :class="item.id == selYTItem1.id?'on':''" v-for="(item,index) in treeList" :key="index" @click="changeYearTrem(item,1)">{{item.label}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="time-item" :class="item.id == selRepItem1.id?'on':''" v-for="(item,index) in childrenList" :key="index" @click="changeRepTime(item,1)">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 第二个对比时间 -->
|
||
<view class="time-content" v-if="timeType == 2">
|
||
<view class="left">
|
||
<view class="time-item" :class="item.id == selYTItem2.id?'on':''" v-for="(item,index) in treeList" :key="index" @click="changeYearTrem(item,2)">{{item.label}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="time-item" :class="[item.id == selRepItem2.id?'on':'',item.disabled ?'disabled':'']" v-for="(item,index) in childrenList" :key="index" @click="changeRepTime(item,2)">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-wrap">
|
||
<view class="btn" v-on:click="comfirmTime">
|
||
确认选择
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from "@/apiB/testManage.js";
|
||
export default {
|
||
props: {
|
||
testType: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
userId: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
recordId: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
value: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
platformType: 0, //高校/普教
|
||
showContrast: false, //显示对比
|
||
showTime: false, //显示时间选择
|
||
treeList: [], //时间列表
|
||
childrenList: [],//时间子级
|
||
selYTItem1: null,//临时选中的学年1
|
||
selRepItem1: null,//临时选中的报告1
|
||
selYTItem2: null,//临时选中的学年2
|
||
selRepItem2: null,//临时选中的报告2
|
||
checkedRepItem1: null,//确认选中报告1
|
||
checkedRepItem2: null,//确认选中报告2
|
||
timeType: 1,//时间类型，是报告时间1，还是对比时间2
|
||
optionStr1: "",//我的报告展示字段
|
||
optionStr2: "",//我的报告展示字段
|
||
allOptionStr: "",//全部条件展示字段
|
||
|
||
schoolLevel: 0,//群体
|
||
sexType: 0, //1男2女
|
||
gradeShow: false,//是否分班
|
||
|
||
departName: "",
|
||
departList:[],//高校群体对象
|
||
}
|
||
},
|
||
watch: {
|
||
recordId: {
|
||
handler(val) {
|
||
console.log(val);
|
||
if(val > 0) {
|
||
//this.recordId = val;
|
||
this.getCareerYearAndTermListNew()
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
methods: {
|
||
popupChange(e) {
|
||
console.log('当前模式:' + e.type + ',状态:' + e.show)
|
||
if (!e.show) {
|
||
// 弹窗关闭时的处理逻辑
|
||
this.$emit("updateValue", true);
|
||
}
|
||
},
|
||
//改变报告时间
|
||
changeRepTime(ITEM,INDEX){
|
||
if(INDEX == 1){
|
||
this.selRepItem1 = ITEM;
|
||
}else {
|
||
if(ITEM.disabled){
|
||
return
|
||
}
|
||
this.selRepItem2 = ITEM;
|
||
}
|
||
},
|
||
//确认选择时间
|
||
comfirmTime(){
|
||
if(this.timeType == 1){
|
||
if(this.selRepItem1 == null){
|
||
uni.showToast({
|
||
title: "请先选择报告时间",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
// 选了我的报告
|
||
if(this.checkedRepItem1.id == this.selRepItem1.id){
|
||
console.log("选了一样");
|
||
this.optionStr1 = this.selYTItem1.label + '/' + this.selRepItem1.label;
|
||
this.checkedRepItem1 = this.selRepItem1;
|
||
this.$refs.pop_contrast.open('bottom') //底部弹出 //底部弹出
|
||
this.$emit("updateValue", false);
|
||
//this.showContrast = true;
|
||
}else {
|
||
//this.showContrast = false;
|
||
this.$refs.pop_contrast.close() //底部弹出
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
const currentRoute = currentPage.route;
|
||
uni.redirectTo({
|
||
url: `/${currentRoute}?recordId=${this.selRepItem1.id}&year=${this.selRepItem1.Year}&term=${this.selRepItem1.Term}&testType=${this.testType}`
|
||
})
|
||
}
|
||
}else {
|
||
if(this.selRepItem2 == null){
|
||
uni.showToast({
|
||
title: "请先选择报告时间",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
//this.showContrast = true;
|
||
this.$refs.pop_contrast.open('bottom') //底部弹出
|
||
this.$emit("updateValue", false);
|
||
this.checkedRepItem2 = this.selRepItem2;
|
||
this.optionStr2 = this.selYTItem2.label + '/' + this.selRepItem2.label;
|
||
this.schoolLevel = 0;
|
||
this.sexType = 0;
|
||
}
|
||
//this.showTime = false;
|
||
this.$refs.pop_time.close();
|
||
},
|
||
//改变学年
|
||
changeYearTrem(ITEM,INDEX){
|
||
if(INDEX == 1){
|
||
this.selYTItem1 = ITEM;
|
||
this.selRepItem1 = null;
|
||
}else {
|
||
this.selYTItem2 = ITEM;
|
||
this.selRepItem2 = null;
|
||
}
|
||
this.childrenList = ITEM.children;
|
||
},
|
||
// 显示团队对比弹窗
|
||
showContrastLayer(){
|
||
this.$refs.pop_contrast.open('bottom') //底部弹出
|
||
this.$emit("updateValue", false);
|
||
//this.showContrast = true;
|
||
},
|
||
// 获取报告时间列表
|
||
getCareerYearAndTermListNew(){
|
||
api.getCareerYearAndTermListNew(this.testType, this.userId).then(res => {
|
||
if (res.Result === 1) {
|
||
this.treeList = res.Data.DataList.TreeDataList;
|
||
this.platformType = res.Data.DataList.PlatformType;
|
||
if(this.platformType == 1){
|
||
this.departList = res.Data.DepartList;
|
||
}
|
||
this.schoolId = res.Data.DataList.SchoolId;
|
||
let list = JSON.parse(JSON.stringify(res.Data.DataList.TreeDataList));
|
||
list.forEach(item => {
|
||
if (item.children) {
|
||
item.children.forEach(child => {
|
||
if (child.id == this.recordId) {
|
||
this.selYTItem1 = item;
|
||
this.checkedRepItem1 = this.selRepItem1 = child;
|
||
this.childrenList = item.children;
|
||
this.allOptionStr = this.optionStr1 = item.label + '/' + child.label
|
||
if(child.GradeId == 0 && res.Data.DataList.PlatformType == 0){
|
||
this.gradeShow = false;
|
||
}else {
|
||
this.gradeShow = true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.Message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//选时间
|
||
selTimeList(INDEX){
|
||
this.$refs.pop_time.open('bottom');
|
||
this.$refs.pop_contrast.close();
|
||
this.$emit("updateValue", false);
|
||
//this.showTime = true;
|
||
//this.showContrast = false;
|
||
this.timeType = INDEX;
|
||
if(INDEX == 1){
|
||
this.selRepItem1 = this.checkedRepItem1;
|
||
this.treeList.forEach(item => {
|
||
if (item.children) {
|
||
item.children.forEach(child => {
|
||
if (child.id == this.checkedRepItem1.id) {
|
||
this.selYTItem1 = item;
|
||
this.childrenList = item.children;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}else {
|
||
this.childrenList = []
|
||
this.selYTItem2 = [];
|
||
this.selRepItem2 = this.checkedRepItem2;
|
||
this.treeList.forEach(item => {
|
||
if (item.children) {
|
||
item.children.forEach(child => {
|
||
child.disabled = false;
|
||
if (child.id == this.checkedRepItem1.id) {
|
||
child.disabled = true;
|
||
}
|
||
if (this.checkedRepItem2 != null && child.id == this.checkedRepItem2.id) {
|
||
this.selYTItem2 = item;
|
||
this.childrenList = item.children;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 关闭选时间
|
||
closeTime(){
|
||
this.$refs.pop_contrast.open('bottom');
|
||
this.$refs.pop_time.close();
|
||
//this.showContrast = true;
|
||
//this.showTime = false;
|
||
},
|
||
//选中群体维度
|
||
selectSchoolLevel(info) {
|
||
console.log(info);
|
||
if (this.platformType == 1) {
|
||
this.departName = info.Name;
|
||
//高校
|
||
this.schoolLevel = info.DepartId;
|
||
this.sexType = 0;
|
||
} else {
|
||
if(!this.gradeShow && info < 3){
|
||
return uni.showToast({
|
||
title: "当前学期未进行分班,无法进行对比",
|
||
icon: "none"
|
||
})
|
||
}
|
||
//普教
|
||
this.schoolLevel = info;
|
||
this.sexType = 0;
|
||
}
|
||
this.optionStr2 = "";
|
||
this.selYTItem2 = null;
|
||
this.selRepItem2 = null;
|
||
this.checkedRepItem2 = null;
|
||
// this.$forceUpdate();
|
||
},
|
||
// 选男女
|
||
selectSex(INDEX) {
|
||
if (this.schoolLevel == 0) {
|
||
return uni.showToast({
|
||
title: '请先选择群体维度',
|
||
icon: "none"
|
||
})
|
||
}
|
||
if (this.sexType == INDEX) {
|
||
this.sexType = 0;
|
||
} else {
|
||
this.sexType = INDEX;
|
||
}
|
||
},
|
||
//关闭弹窗团体对比
|
||
closeContrast() {
|
||
//this.showContrast = false;
|
||
this.$refs.pop_contrast.close();
|
||
},
|
||
|
||
//确定对比
|
||
confirmCompute() {
|
||
if(this.schoolLevel == 0 && this.checkedRepItem2 == null){
|
||
uni.showToast({
|
||
title: "请选择对比数据",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
//this.showContrast = false;
|
||
this.$refs.pop_contrast.close();
|
||
let name1 = this.checkedRepItem1.label;
|
||
let name2 = "";
|
||
let year2 = "";
|
||
let term2 = "";
|
||
if (this.schoolLevel == 0) {
|
||
name2 = this.checkedRepItem2.label;
|
||
year2 = this.checkedRepItem2.Year;
|
||
term2 = this.checkedRepItem2.Term;
|
||
}else {
|
||
if (this.platformType == 1) {
|
||
name2 = `${this.departName}${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
|
||
} else {
|
||
if (this.schoolLevel == 1) {
|
||
name2 = `班级${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
|
||
} else if (this.schoolLevel == 2) {
|
||
name2 = `年级${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
|
||
} else if (this.schoolLevel == 3) {
|
||
name2 = `学校${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
|
||
}
|
||
}
|
||
}
|
||
this.allOptionStr = '已对比 | '+ this.optionStr1;
|
||
|
||
let gradeid = 0,
|
||
classid = 0,
|
||
departId = 0,
|
||
recordId= 0;
|
||
if(this.schoolLevel == 0){
|
||
recordId = this.checkedRepItem2.id;
|
||
}else{
|
||
if (this.platformType == 1) {
|
||
//高校
|
||
departId = this.schoolLevel;
|
||
}else {
|
||
if (this.schoolLevel == 1) {
|
||
classid = this.checkedRepItem1.ClassId;
|
||
} else if (this.schoolLevel == 2) {
|
||
gradeid = this.checkedRepItem1.GradeId;
|
||
}
|
||
}
|
||
}
|
||
|
||
let data = {
|
||
year: this.checkedRepItem1.Year,
|
||
term: this.checkedRepItem1.Term,
|
||
year2,
|
||
term2,
|
||
schoolId: this.schoolId,
|
||
gradeid,
|
||
classid,
|
||
sex: this.sexType,
|
||
departId,
|
||
recordId,
|
||
name1,
|
||
name2
|
||
}
|
||
this.$emit('compareParameters',data)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.uni-popup{z-index:9999 !important;}
|
||
.contrast-box {
|
||
|
||
.head-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 666rpx;
|
||
height: 76rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 0 20rpx;
|
||
background: #E7F1FF;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
.desc {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHfSURBVEiJ1Va9btswEP5OlBNr01JAMgpUeYNm7FDAeoP2Ddq1UzK5Roc6Q6AoS7auzps4QDt0i4fu1lYVWThFP7Z4HSIpspC4cCMmyLeQR+nu4/GOvAOeAwYn+dQ9zWf/o0vtBSdIvE0KBpkvmfg7AKyY3i5T85eckLzRZS/NICvZnrBdze8kdMN8AWAj4V1gVfgkxFcwhqX8EcAFGeISYPl7tLtXb7jl2dZkJTww7FoyzFelLRsgzwm4tmu0NbcBMz6tVtiPx9Z5kvR8VoXPqvDjUe+oUKI+yjRDPa+P1AkSjwyx2IZQAW/+jHZ+3vd9EGbvlFIyHlsX1dqDPPznhpSSTU+1EjpBMiRDzEwTM3vCdXy1eljC7u/eJpSpiyXN+nPLyiMAiMcUaSeUE5IS2Guvaz1SN1yeuWF+9iiETpAMAT4AcNDZxd+E+y6+NsKrLztzYpwD6rD5gGtLGgC4TnuH7WqhM4aeZS0XbpitPZc6s9RD19ViE54macDvWRV+M47Pq1oQY7/qgZwg8ZwgGb44zl+XcvfVggjfSIgpAJAQ05Lg0gmSD43f1qpFTRiPrQhAtDWputGpxgpp1p8DHAEcNavFg9vEq8+9H7e6621iZ3BP89ngJJ92alQX/gLMKt2XTOFMygAAAABJRU5ErkJggg==") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.txt-item {
|
||
width: 444rpx;
|
||
padding-left: 14rpx;
|
||
line-height: 21px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 24rpx;
|
||
color: #1677ff;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 160rpx;
|
||
height: 48rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
width: 0;
|
||
height: 0;
|
||
margin-left: 6rpx;
|
||
border-top: 12rpx solid #333;
|
||
border-left: 12rpx solid #fff;
|
||
border-right: 12rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-content {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-top-left-radius: 28rpx;
|
||
border-top-right-radius: 28rpx;
|
||
overflow: hidden;
|
||
|
||
.head-title {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
|
||
}
|
||
|
||
.content {
|
||
padding: 0 0 0 30rpx;
|
||
max-height: 800rpx;
|
||
overflow: auto;
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
padding: 30rpx 0 20rpx;
|
||
}
|
||
.sel-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 646rpx;
|
||
height: 76rpx;
|
||
padding: 0 20rpx;
|
||
margin-bottom: 10rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #EEEEEE;
|
||
font-size: 28rpx;
|
||
color: #303133;
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAOVJREFUWEftldENwiAQhg8mqaM4ifoCYQp1iqY8OYqbWAeBCIlNSEV6HCR9uT6Sy31ff+AQsPMnduYDC3ACnAAnkE3AWnt2zj2NMXOPQTWO4yClPGmt7+t+PwLf4hcAzN77Y6tE0g+894d1v2wC0zRdg+mtVSKFCyEuSqnHZgJLQasEBh5ZxVtAlcDCNwViQa1EDRwlUCNRC0cLYCQo8CqBkgQVXi2Qk4hrYcjEuQH/rlppmJHegvRgAsBAhZMSyMwJ0p8vfUgJpBIh9nduwmHfkCYBLKT7GegB7rIFPUR4CzgBTuAD9XGZISgQdkoAAAAASUVORK5CYII=") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
.s-line {
|
||
/*position: relative;*/
|
||
padding-top: 40rpx;
|
||
border-bottom: 2rpx dashed rgba(25,137,250,0.5);
|
||
margin-bottom: 30rpx;
|
||
width: calc(100% - 30rpx);
|
||
text {
|
||
position: absolute;
|
||
bottom: -30rpx;
|
||
left: 50%;
|
||
background: #fff;
|
||
z-index: 2;
|
||
transform: translateX(-50%);
|
||
display: block;
|
||
padding: 0 20rpx;
|
||
font-size: 36rpx;
|
||
color: rgba(25,137,250,0.5);
|
||
}
|
||
}
|
||
.options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.v-line {
|
||
border-bottom: 1px dotted #f1ececb8;
|
||
margin: 26rpx 0;
|
||
}
|
||
|
||
.item {
|
||
position: relative;
|
||
min-width: 170rpx;
|
||
margin-right: 30rpx;
|
||
height: 76rpx;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
background: #F3F4F6;
|
||
margin-bottom: 30rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
|
||
&.disable {
|
||
color: #C6C6C6;
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
&.on {
|
||
background: #EDF6FF;
|
||
color: #1677ff;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.time-content {
|
||
background: #fff;
|
||
z-index: 9;
|
||
display: flex;
|
||
padding: 20rpx 30rpx 40rpx;
|
||
.left,
|
||
.right{
|
||
min-height: 400rpx;
|
||
overflow: auto;
|
||
.time-item {
|
||
position: relative;
|
||
line-height: 80rpx;
|
||
height: 80rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-bottom: 2rpx solid #eee;
|
||
&.on {
|
||
color: #1b88ff;
|
||
&::after {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
content: "";
|
||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAZCAMAAACM5megAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUbiP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8AAAAx8hE2AAAAGHRSTlMAH0f2c0SVAfc7bv6JI/hS+UhR+1D0jxRK42VSAAAAAWJLR0QZ7G61iAAAAAd0SU1FB+YKFBEcF+FCm4sAAABsSURBVCjPzdHHDoAwDANQs1cLlJn//1KGEIKqrY+QY/QOiQ2QiRgA4iTlRCTjJC9+QsqPSMVJ3ShGdCuiwgToegu5zrWQ+6MX8j39QMaby41MILoLmWC6JzKkgGFHI+voQKxGTLMshACrdu83CdwKBKKZxqUAAAAASUVORK5CYII=") no-repeat;
|
||
background-size: 100%;
|
||
display: block;
|
||
width: 35rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
&.disabled {
|
||
color: #ddd;
|
||
}
|
||
}
|
||
}
|
||
.left {
|
||
width: calc(45% - 20rpx);
|
||
padding-left: 10rpx;
|
||
}
|
||
.right {
|
||
width: calc(55% - 20rpx);
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
.btn-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 10rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.btn {
|
||
width: 688rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
background: #1677ff;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
border-radius: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |