<template>
<div class="punch-the-clock">
<div class="rule" @click="punchClockClick()">
规则
</div>
<div class="punch-the-clock-name-image">
奖励名称
<div class="yiwancheng">{{ forthRate === 100 ? '已完成' : '进行中' }}</div>
</div>
<div class="punch-the-clock-name-bg">
<div class="punch-the-clock-name-content">
<!-- 倒计时 -->
<div class="punch-the-clock-name-content-timer">
<span>剩余完成时间</span>
<span class="timer">{{ countDownDay }}</span>
<span>天</span>
<span class="timer">{{ countDownhour }}</span>
<span>时</span>
<span class="timer">{{ countDownminu }}</span>
<span>分</span>
<span class="timer">{{ countDownsec }}</span>
<span>秒</span>
</div>
<!-- 完成率 -->
<div class="punch-the-clock-name-content-completion">
<div class="daka-fu">
<img :src="punchTheClock.dakaFu" alt="">
</div>
<div class="speed">
<span class="speed-baifen baifenbi">100%</span>
<span class="speed-list speed-list-completed speed-baifen" :style="{ width: forthRate <= 10 ? '10%' : forthRate + '%' }" v-show="forthRate !== 0">{{ forthRate }}%</span>
<span class="speed-list speed-list-be" :style="{ width: (secondRate + 3) >= 90 ? '91%' : (secondRate + 3) + '%' }"></span>
<span class="speed-list speed-list-card" :style="{ width: (thirdRate + 3) >= 90 ? '91%' : (thirdRate + 3) + '%' }"></span>
</div>
<div class="speed-content">
<div class="speed-content-list">
<span class="speed-content-list-color speed-content-list-completed"></span>
<span class="speed-content-list-text">已完成</span>
</div>
<div class="speed-content-list">
<span class="speed-content-list-color speed-content-list-be"></span>
<span class="speed-content-list-text">待完成</span>
</div>
<div class="speed-content-list">
<span class="speed-content-list-color speed-content-list-card"></span>
<span class="speed-content-list-text">待补卡</span>
</div>
<div class="speed-content-list">
<span class="speed-content-list-color speed-content-list-waiting"></span>
<span class="speed-content-list-text">待开课</span>
</div>
</div>
</div>
</div>
</div>
<!-- 恭喜您已获得奖励 快联系班主任领取吧! -->
<div class="punch-the-clock-reward" v-if="forthRate === 100">
<div class="punch-the-clock-reward-title">恭喜您已获得奖励</div>
<div class="punch-the-clock-reward-title">快联系班主任领取吧!</div>
<div class="punch-the-clock-reward-erweima">
<div class="punch-the-clock-reward-erweima-ma"></div>
</div>
</div>
<!-- 今日卡 -->
<div class="today-list" v-if="todayData.length !== 0 && forthRate !== 100">
<div class="punch-list-today" v-for="item in todayData">
<div class="punch-card-today">
<div class="day">今日</div>
<div class="small-title">HOT potato hhh…</div>
<div class="title">DAY 1 唱动体验</div>
</div>
<div class="punch-card-today">
<div class="punch-card-today-learning">
<img :src="punchTheClock.dakawancheng" alt="">
</div>
<div class="punch-card-today-xuexila">学习卡</div>
</div>
<div class="punch-card-today">
<div class="punch-card-today-learning">
<img :src="punchTheClock.dakawancheng" alt="">
</div>
<div class="punch-card-today-xuexila">成长卡</div>
</div>
</div>
</div>
<!-- 已完成人数 -->
<div class="punch-the-clock-completed-persons">
<div class="punch-the-clock-completed-persons-image">
<div class="yiwancheng">{{ countIndex }}人已完成</div>
<div class="portrait" v-for="(item, index) in avatarArr" :key="index">
<img :src="item" alt="">
</div>
</div>
</div>
<!-- 我的打卡记录 -->
<div class="punch-the-clock-record">
<div class="punch-the-clock-record-title">
<div class="punch-the-clock-record-title-image"></div>
<div class="punch-the-clock-record-title-text">我的打卡记录</div>
</div>
<!-- tab 导航 -->
<ul class="punch-the-clock-record-list">
<li @click="recordListClick(index)" :class="[ index === recordListIndex ? 'active' : '' ]" v-for="(item, index) in recordList" :key="index" >
{{ item.title }} <div class="xian" v-show="index === recordListIndex"></div>
</li>
</ul>
<!-- 我的打卡记录展示 -->
<div class="today-list">
<div class="today-list-xian" v-for="(item, index) in punchCardData" v-if="punchCardData.length !== 0" :key="index">
<!-- 日期 -->
<div class="punch-card-today">
<div class="day">{{ item.push_time.split('-')[1] }}月{{ item.push_time.split('-')[2] }}日</div>
<div class="small-title">{{ item.sub_title }}</div>
<div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
</div>
<!-- 去学习 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1">
<div class="punch-card-today-learning">
<img :src="item.xuexi_img" alt="">
</div>
<div class="punch-card-today-xuexila">学习卡</div>
</div>
<!-- 成长卡 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status, item.type1)" v-if="item.type1 == 2">
<div class="punch-card-today-learning">
<img :src="item.wancheng_img" alt="">
</div>
<div class="punch-card-today-xuexila">成长卡</div>
</div>
</div>
<!-- 数据为空 -->
<div class="today-list-null" v-if="punchCardData.length === 0">
<div class="null-tu">
<img :src="punchTheClock.nullTu" alt="">
</div>
<div class="today-list-null-text">啊哦，没有数据哦~</div>
</div>
</div>
</div>
<!-- 弹框 -->
<div class="punch-the-clock-model" v-show="punchClockModel" @click="punchClockModel = false">
<div class="punch-the-clock-model-yin" v-if="ruleShow != 2">
<div class="tishi" v-if="tishi">
<div class="tishi-image">
<img :src="punchTheClock.xiaolian" alt="">
</div>
<div class="text">恭喜你补卡成功啦~</div>
<div class="text">-20颗星星</div>
</div>
<div class="x-code">
<img :src="punchTheClock.x" alt="">
</div>
<div class="punch-the-clock-model-title">
<span>{{ typeStatus === 1 ? '学习卡' : '成长卡' }}</span>
</div>
<div class="title-text title-padd">课时：{{ modelData.sub_title }}</div>
<div class="title-text">课节：{{ modelData.aName }}</div>
<div class="title-text">开课日期：{{ modelData.push_time }}</div>
<div class="title-text">状态：<span :class="[ modelData.status === 2 || modelData.status === 3 ? 'small-title' : '' ]">{{ modelData.state }}</span></div>
<div class="title-text">{{ modelData.tishi }}</div>
<!-- 积分获取规则 -->
<div class="get-stars" v-if="modelData.status === 3 && lastValue <= 20">
<div class="get-stars-content">
<div class="get-stars-text">当前星星不足补卡哦，如何获得更多星星？</div>
<div class="get-stars-text get-stars-text-con">
<span class="get-stars-text-title">1、开始课程学习</span> <span class="get-stars-text-xingxing">+1星星</span>
</div>
<div class="get-stars-text get-stars-text-con">
<span class="get-stars-text-title">2、学完课节</span> <span class="get-stars-text-xingxing">+1星星</span>
</div>
<div class="get-stars-text get-stars-text-con">
<span class="get-stars-text-title">3、提交作业</span> <span class="get-stars-text-xingxing">+1星星</span>
</div>
</div>
</div>
<!-- 按钮点击 -->
<div :class="['get-stars-btn', {'get-stars-btn-clo' : modelData.status === 3 && lastValue <= 20}]" v-if="modelData.status !== 4" @click.stop="modelDataClick(modelData, typeStatus)">
{{ modelData.status === 2 ? ( goWhere == 1 ? '去学习' : '去提交' ) : modelData.status === 3 ? '去补卡' : '' }}
</div>
</div>
<!-- 规则 -->
<div class="punch-the-clock-model-yin punch-the-clock-rule-pad" v-if="ruleShow == 2">
<div class="x-code">
<img :src="punchTheClock.x" alt="">
</div>
<div class="punch-the-clock-rule">活动规则</div>
<div class="rule-content">
<div class="rule-content-list">
<span class="title">1.活动名称：</span>
<span class="con">全勤打卡赢奖励</span>
</div>
<div class="rule-content-list">
<span class="title">2.活动时间：</span>
<span class="con">课程开课时间-结课时间</span>
</div>
<div class="rule-content-list">
<span class="title">3.活动规则：</span><br />
<span class="con">需在课程开课日完成当日课程的学习卡和成长卡。学完当日课程即可完成学习卡。提交学习记录即可完成成长卡。如延期完成，需消耗星星进行补卡。每20颗星星可补一张待补卡卡片。</span>
</div>
<div class="rule-content-list">
<span class="title">4.如何补卡？</span><br />
<span class="con">未在当日完成学习卡和成长卡，需先完成。完成后可在补卡列表中，找到对应待补卡卡片。点击后，消耗星星进行补卡</span>
</div>
<div class="rule-content-list">
<span class="title">5.星星不足补卡时，如何获取更多星星？</span><br />
<span class="con">
可通过以下3种方式获取星星<br />
a. 打开未学习课程 星星+1<br />
b. 不限时间学习完成一节课程 星星+1<br />
c. 不限时提交成长记录 星星+1
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getReturnCashApi, getFinishUserApi, getCardGoApi, getUserIntegralApi, getUserWatchApi, getNewCashApi, getLessonDetailApi } from "../../service/api";
import { punchTheClock } from "../../util/imgUrl";
import { Toast } from "vant";
export default {
name: "index",
data() {
return {
avatarArr: [], // 头像
countIndex: 0, // 完成人数
countDown: '', // 倒计时
countDownDay: 0, // 倒计时天
countDownhour: 0, // 倒计时小时
countDownminu: 0, // 倒计时分
countDownsec: 0, // 倒计时秒
goWhere: 0, // 判断去学习按钮
lastValue: 0, // 积分
modelData: {}, // model数据
firstRate: 0, // 待开课率
ruleShow: 0, // 规则展示
status: 0, // 状态
secondRate: 0, // 待完成率
tishi: false,
thirdRate: 0, // 待补卡率
typeStatus: 0, // type
forthRate: 0, // 打卡完成率
punchTheClock: punchTheClock, // 图片
punchCardData: [], // 待开课、待完成、待补卡、打卡完成切换
punchClockModel: false, // 弹框
recordListIndex: 1, // 我的打卡记录切换
returnCashData: {}, // 总数据
todayData: [], // 当天卡
recordList: [{ title: '待开课' }, { title: '待完成' }, { title: '待补卡' }, { title: '打卡完成' }]
}
},
methods: {
/**
* 打卡数据
*/
returnCash() {
let periodsId = this.$route.query.periods_id,
newCash = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at }
getReturnCashApi(periodsId, newCash).then(res => {
this.returnCashData = res;
// 倒计时
let overTime = new Date(res.over_time).getTime();
setInterval(() => { this.restTime(overTime) }, 1000);
// 完成率
this.secondRate = res.second_rate;
this.thirdRate = res.third_rate;
this.forthRate = res.forth_rate;
// 当天卡
this.todayData = res.today;
// 默认待开课
this.punchCardData = this.integrationFn(res.second, 1)
})
},
/**
* 完成用户
*/
finishUser() {
let periodsId = this.$route.query.periods_id
getFinishUserApi(periodsId).then(res => {
this.avatarArr = res.avatar
this.countIndex = res.count
})
},
/**
* 倒计时方法
* @param time
*/
restTime(time) {
let restSec = time - new Date().getTime();
this.countDownDay = this.timerAddLing(parseInt(restSec / (60 * 60 * 24 * 1000)));
this.countDownhour = this.timerAddLing(parseInt(restSec / (60 * 60 * 1000) % 24));
this.countDownminu = this.timerAddLing(parseInt(restSec / (60 * 1000) % 60));
this.countDownsec = this.timerAddLing(parseInt(restSec / 1000 % 60));
},
/**
* 切换打卡记录
* @param index
*/
recordListClick(index) {
this.recordListIndex = index;
switch (index) {
case 0:
this.punchCardData = this.integrationFn(this.returnCashData.first, index);
break;
case 1:
this.punchCardData = this.integrationFn(this.returnCashData.second, index);
break;
case 2:
this.punchCardData = this.integrationFn(this.returnCashData.third, index);
break;
case 3:
this.punchCardData = this.integrationFn(this.returnCashData.forth, index);
}
},
/**
* 点击打卡记录
* @param index { number }
* @param status { number }
* @param type { number }
*/
punchCardClick(index, status, type) {
this.status = status;
this.typeStatus = type;
this.ruleShow = 0;
if(status !== 1) {
this.modelData = this.punchCardData[index];
// 课节
this.modelData.aName = this.modelData.name.split(' ')[0] + ' ' + this.modelData.name.split(' ')[1];
// 状态展示
let getCardGoData = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: this.modelData.push_time, type: type };
if(status === 2) {
getCardGoApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
this.goWhere = res.go_where;
this.modelData.state = status === 2 ? (res.go_where === 1 ? '待学习（已延期）' : '未提交（已延期）') : ''
})
}else {
this.modelData.state = status === 3 ? '待补卡' : '打卡完成'
}
// 提示信息
this.modelData.tishi = status === 2 ? '提示：学习卡与作业卡需在开课日完成哦，如延期完成，需消耗星星补卡' : status === 3 ? `补卡：消耗20星星补卡1次，当前共有${ this.lastValue }颗星星` : ''
this.punchClockModel = true;
}else {
Toast("您还未开课，请先去开课");
}
},
/**
* 点击打卡
* @param type
* @param dataObj
*/
modelDataClick(dataObj, type) {
let courseType = this.$route.query.course_type,
parentCategoryId = this.$route.query.parent_category_id;
let getCardGoData = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: dataObj.push_time, type: type };
if(dataObj.status === 2) {
// 点击去学习和去提交
if(this.goWhere === 1) {
// 进入课程
this.getLessonDetailFn(dataObj)
}else {
// 用户看课统计
getUserWatchApi({ category_id: dataObj.id }).then(res => {
this.$router.push({path: '/evaluate', query: res})
});
}
}else if(dataObj.status === 3) {
// 待不卡--补卡
if(this.lastValue >= 20) {
getNewCashApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
this.tishi = true
setTimeout(() => { this.tishi = false }, 1500)
document.querySelectorAll('.get-stars-btn')[0].style.display = 'none';
this.lastValue = this.lastValue - 20
this.modelData.tishi = `补卡：消耗20星星补卡1次，当前共有${ this.lastValue }颗星星`
let findIndex = this.punchCardData.findIndex(item => {
return item.ele_id === dataObj.ele_id
})
this.punchCardData = this.punchCardData.splice(findIndex, 1)
})
}
}
},
getLessonDetailFn(dataObj) {
getLessonDetailApi(dataObj.periods_id, dataObj.id, dataObj.ele_id).then(res=>{
res.content = JSON.parse(res.content);
this.thisLesson = res;
this.thisLesson.id = dataObj.ele_id.toString();
this.thisLesson.categoryId = dataObj.id;
this.thisLesson.domTitle = dataObj.name;
this.thisLesson.star_num = 0;
let query = {
periods_id: dataObj.periods_id,
category_id: dataObj.id,
elementId: dataObj.ele_id,
course_type: this.$route.query.course_type,
parent_category_id: this.$route.query.parent_category_id,
};
this.$store.dispatch('setClassQuery',query)
sessionStorage.setItem('classQuery',JSON.stringify(query))
let lessonData = JSON.parse(JSON.stringify(this.thisLesson));
lessonData.push_time = dataObj.push_time;
lessonData.themeID = this.$route.query.parent_category_id;
lessonData.goodsID= dataObj.goods_id;
lessonData.classID= dataObj.class_id;
lessonData.nowTime = Date.parse(new Date());
lessonData.course_title = this.$route.query.course_title
localStorage.setItem('lessonDetail', JSON.stringify(lessonData));
this.$router.push({name:'newLesson', query: query})
})
},
/**
* 积分
*/
getUserIntegral() {
getUserIntegralApi().then(res => {
this.lastValue = res.last_value;
})
},
/**
* 时间少于10 加 0
* @param n
* @returns {string}
*/
timerAddLing(n) {
return n < 10 ? '0' + n : n
},
/**
* 我的打卡记录封装数据
* @param arr { Array }
* @param index { index }
* @returns {[]}
*/
integrationFn(arr, index) {
let secondArr = []
for(let key in arr) {
// 排序
arr[key].sort((a, b) => { return parseInt(a.type) - parseInt(b.type) });
// 图片放入
arr[key][0].xuexi_img = index === 0 ? this.punchTheClock.kaike_xuexi : index === 1 ? this.punchTheClock.daiwanc : index === 2 ? this.punchTheClock.buka_xuexi : this.punchTheClock.dakawancheng
arr[key][0].wancheng_img = index === 0 ? this.punchTheClock.kaike_chengz : index === 1 ? this.punchTheClock.daiwanChangz : index === 2 ? this.punchTheClock.buka_changz : this.punchTheClock.wanchengChengz
if(arr[key].length === 2) {
// 当数据有两条时
arr[key][0].type1 = arr[key][1].type;
secondArr.push(arr[key][0])
}else {
if(arr[key][0].type == 2) {
arr[key][0].type1 = arr[key][0].type
delete arr[key][0].type
}
secondArr.push(arr[key][0])
}
}
return secondArr;
},
punchClockClick() {
this.punchClockModel = true;
this.ruleShow = 2
}
},
mounted() {
this.returnCash(); // 数据
this.finishUser(); // 已完成人数
this.getUserIntegral() // 积分
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.punch-the-clock {
width: 100%;
background: #FFD096;
padding: 28 * @toVw 0;
box-sizing: border-box;
position: relative;
.rule {
width: 54 * @toVw;
height: 30 * @toVw;
line-height: 30 * @toVw;
background: rgba(0, 0, 0, .5);
border-radius: 50px 0 0 50px;
position: fixed;
top: 48 * @toVw;
right: 0;
z-index: 80;
font-size: 13 * @toVw;
text-align: center;
color: #FFFFFF;
}
.punch-the-clock-name-bg {
width: 335 * @toVw;
padding: 160 * @toVw 23 * @toVw 20 * @toVw;
background: #F76D39;
border-radius: 10 * @toVw;
box-sizing: border-box;
.punch-the-clock-name-content {
width: 100%;
/* 倒计时 */
.punch-the-clock-name-content-timer {
padding: 8 * @toVw 0 15 * @toVw;
box-sizing: border-box;
font-size: 12 * @toVw;
color: #75290D;
span {
vertical-align: middle;
}
.timer {
width: 20 * @toVw;
height: 20 * @toVw;
line-height: 20 * @toVw;
margin: 0 3 * @toVw;
display: inline-block;
background: #FFEEED;
border-radius: 4 * @toVw;
text-align: center;
}
}
/* 完成率 */
.punch-the-clock-name-content-completion {
width: 288 * @toVw;
height: 90 * @toVw;
padding: 41 * @toVw 10 * @toVw 0 13 * @toVw;
position: relative;
background: #FFE4C1;
border-radius: 10 * @toVw;
box-sizing: border-box;
/* 图像 */
.daka-fu {
width: 28 * @toVw;
height: 33 * @toVw;
position: absolute;
top: 6 * @toVw;
right: 10 * @toVw;
img {
width: 100%;
height: 100%;
}
}
/* 进度条 */
.speed {
width: 99%;
height: 12 * @toVw;
line-height: 9 * @toVw;
background: #FFFFFF;
border-radius: 6 * @toVw;
position: relative;
text-align: right;
overflow: hidden;
.speed-baifen {
padding-right: 5 * @toVw;
font-size: 10 * @toVw;
color: #75290D;
}
.baifenbi {
position: absolute;
right: 0;
top: 1 * @toVw;
/*z-index: 10;*/
}
.speed-list {
width: 30%;
height: 12 * @toVw;
line-height: 12 * @toVw;
display: inline-block;
float: left;
border-radius: 6 * @toVw;
}
.speed-list-completed {
line-height: 12 * @toVw;
background: #60ADF0;
position: relative;
z-index: 4;
color: #FFFFFF;
}
.speed-list-be {
margin-left: -3%;
background: #FFD454;
position: relative;
z-index: 2;
}
.speed-list-card {
margin-left: -3%;
background: #FF7D77;
}
}
/* 解释进度文本 */
.speed-content {
width: 100%;
padding-top: 8 * @toVw;
font-size: 0;
.speed-content-list {
display: inline-block;
padding-right: 10 * @toVw;
.speed-content-list-color {
width: 10 * @toVw;
height: 10 * @toVw;
display: inline-block;
border-radius: 100px;
vertical-align: middle;
}
.speed-content-list-completed {
background: #60ADF0;
}
.speed-content-list-be {
background: #FFD454;
}
.speed-content-list-card {
background: #FF7D77;
}
.speed-content-list-waiting {
background: #FFFFFF;
}
.speed-content-list-text {
padding-left: 4 * @toVw;
vertical-align: middle;
font-size: 12 * @toVw;
color: #948145;
}
}
}
}
}
}
.punch-the-clock-name-image {
width: 100%;
height: 160 * @toVw;
background: url("./../../assets/punchTheClock/yezi_title.png") no-repeat;
background-size: 100% 100%;
padding-top: 9 * @toVw;
box-sizing: border-box;
position: absolute;
left: 0; top: 28 * @toVw;
text-align: center;
font-size: 18 * @toVw;
color: #FFFFFF;
.yiwancheng {
position: absolute;
bottom: 18 * @toVw;
right: 58 * @toVw;
font-size: 14 * @toVw;
color: #E68453;
}
}
/* 恭喜您已获得奖励 快联系班主任领取吧! */
.punch-the-clock-reward {
width: 335 * @toVw;
height: 275 * @toVw;
margin-top: 10 * @toVw;
padding-top: 15 * @toVw;
background: #FFFFFF;
border-radius: 10 * @toVw;
box-sizing: border-box;
text-align: center;
.punch-the-clock-reward-title {
font-size: 17 * @toVw;
font-weight: 500;
color: #BB3E00;
}
.punch-the-clock-reward-erweima {
width: 170 * @toVw;
height: 170 * @toVw;
margin-top: 5 * @toVw;
background: #FFE1AE;
border-right: 7 * @toVw;
position: relative;
.punch-the-clock-reward-erweima-ma {
width: 150 * @toVw;
height: 150 * @toVw;
background: #BDBDBD;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
}
}
/* 今日卡 */
.today-list-xian {
padding-top: 9 * @toVw;
padding-bottom: 10 * @toVw;
border-bottom: 1px solid #EFDFD4;
overflow: hidden;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
.today-list {
width: 335 * @toVw;
margin-top: 10 * @toVw;
padding: 19 * @toVw 20 * @toVw 14 * @toVw;
background: #FFFFFF;
border-radius: 10 * @toVw;
box-sizing: border-box;
overflow: hidden;
.punch-list-today {
overflow: hidden;
padding-top: 19 * @toVw;
padding-bottom: 14 * @toVw;
border-bottom: 1px solid #EFDFD4;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
.punch-card-today {
float: left;
text-align: left;
.day {
font-size: 15 * @toVw;
font-weight: 500;
color: #6B5617;
}
.small-title {
width: 97 * @toVw;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 12 * @toVw;
padding-top: 13 * @toVw;
color: #A6A59F;
}
.title {
width: 97 * @toVw;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 12 * @toVw;
padding-top: 9 * @toVw;
color: #A6A59F;
}
.punch-card-today-learning {
width: 87 * @toVw;
height: 57 * @toVw;
img {
width: 100%;
height: 100%;
}
}
.punch-card-today-xuexila {
padding-top: 8 * @toVw;
font-size: 12 * @toVw;
font-weight: 500;
color: #AF5D21;
text-align: center;
}
&:first-child {
padding-right: 14 * @toVw;
}
&:last-child {
padding-left: 8 * @toVw;
}
}
.today-list-null {
padding: 80 * @toVw 0 110 * @toVw;
.null-tu {
width: 100 * @toVw;
height: 100 * @toVw;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
.today-list-null-text {
padding-top: 11 * @toVw;
font-size: 13 * @toVw;
color: #666666;
}
}
}
/* 已完成人数 */
.punch-the-clock-completed-persons {
width: 100%;
padding-top: 5 * @toVw;
padding-bottom: 10 * @toVw;
text-align: right;
.punch-the-clock-completed-persons-image {
overflow: hidden;
}
.yiwancheng {
padding-right: 21 * @toVw;
padding-left: 3 * @toVw;
line-height: 20 * @toVw;
float: right;
font-size: 11 * @toVw;
color: #623F06;
vertical-align: middle;
}
.portrait {
width: 20 * @toVw;
height: 20 * @toVw;
margin-left: -10 * @toVw;
border-radius: 100px;
float: right;
vertical-align: middle;
img {
width: 100%;
height: 100%;
border-radius: 100px;
}
}
}
/* 我的打卡记录 */
.punch-the-clock-record {
width: 335 * @toVw;
padding-top: 24 * @toVw;
padding-bottom: 10 * @toVw;
background: #FFFFFF;
border-radius: 10 * @toVw;
text-align: center;
.punch-the-clock-record-title {
width: 100%;
position: relative;
.punch-the-clock-record-title-image {
width: 264 * @toVw;
height: 4 * @toVw;
background: url("./../../assets/punchTheClock/line.png") no-repeat;
background-size: 100% 100%;
}
.punch-the-clock-record-title-text {
position: absolute;
left: 0;
right: 0;
top: -10 * @toVw;
margin: auto;
}
}
.punch-the-clock-record-list {
width: 100%;
padding-top: 29 * @toVw;
display: flex;
li {
flex: 1;
font-size: 12 * @toVw;
text-align: center;
color: #948145;
}
.active {
font-weight: 500;
position: relative;
top: 3 * @toVw;
.xian {
width: 24 * @toVw;
height: 4 * @toVw;
margin-top: 2 * @toVw;
background: #FF8A5A;
border-radius: 3 * @toVw;
}
}
}
}
/* 弹框 */
.punch-the-clock-model {
width: 100%;
height: 100%;
padding-top: 50 * @toVw;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
z-index: 100;
.punch-the-clock-model-yin {
width: 307 * @toVw;
height: 485 * @toVw;
padding: 90 * @toVw 30 * @toVw 0;
position: relative;
box-sizing: border-box;
background: url("../../assets/punchTheClock/tankuang.png") no-repeat;
background-size: 100% 100%;
.x-code {
width: 27 * @toVw;
height: 27 * @toVw;
position: absolute;
top: 0;
right: 0;
img {
width: 100%;
height: 100%;
}
}
/* 我的打卡记录详情 */
.punch-the-clock-model-title {
width: 72 * @toVw;
height: 10 * @toVw;
background: url("../../assets/punchTheClock/beijing.png") no-repeat;
background-size: 100% 100%;
border-radius: 10px;
text-align: center;
span {
position: relative;
top: -10 * @toVw;
font-size: 15 * @toVw;
font-weight: 600;
color: #333333;
}
}
.title-text {
padding-top: 5 * @toVw;
font-size: 14 * @toVw;
color: #333333;
.small-title {
color: #ff7d7a;
font-weight: 500;
}
}
.title-padd {
padding-top: 20 * @toVw;
}
.get-stars {
width: 251 * @toVw;
height: 88 * @toVw;
margin-top: 10 * @toVw;
padding: 8 * @toVw;
border: 1px solid #FFD454;
box-sizing: border-box;
border-radius: 5 * @toVw;
.get-stars-text {
font-size: 12 * @toVw;
color: #666666;
}
.get-stars-text-xingxing {
float: right;
padding-right: 69 * @toVw;
}
.get-stars-text-con {
padding-top: 1 * @toVw;
}
}
.get-stars-btn {
width: 240 * @toVw;
height: 50 * @toVw;
line-height: 50 * @toVw;
background: #FFD454;
position: absolute;
left: 0;
right: 0;
bottom: 50 * @toVw;
border-radius: 100px;
font-size: 18 * @toVw;
font-weight: 500;
text-align: center;
color: #FFFFFF;
}
.get-stars-btn-clo {
background: #CCCCCC;
}
/* 规则 */
.punch-the-clock-rule {
width: 157 * @toVw;
height: 27 * @toVw;
line-height: 27 * @toVw;
background: url("../../assets/punchTheClock/rule_beijing.png") no-repeat;
background-size: 100% 100%;
font-size: 15 * @toVw;
color: #FFFFFF;
text-align: center;
}
.rule-content {
margin-top: 16 * @toVw;
height: 295 * @toVw;
line-height: 25 * @toVw;
overflow: auto;
.rule-content-list {
width: 100%;
font-size: 13 * @toVw;
.title {
font-weight: 500;
color: #333333;
}
.con {
color: #aaaaaa;
text-align: justify;
text-align-last: justify;
}
}
}
.tishi {
width: 141 * @toVw;
height: 126 * @toVw;
margin: auto;
background: rgba(0,0,0,.8);
border-radius: 10 * @toVw;
padding-top: 20 * @toVw;
position: absolute;
left: 0;
bottom: 15%;
right: 0;
text-align: center;
.tishi-image {
width: 26 * @toVw;
height: 26 * @toVw;
img {
width: 100%;
height: 100%;
}
}
.text {
padding-top: 15 * @toVw;
font-size: 12 * @toVw;
color: #FFFFFF;
}
}
}
.punch-the-clock-rule-pad {
padding-top: 102 * @toVw;
}
}
@media screen and (min-width: 600px) {
.punch-the-clock-model {
overflow: auto;
}
}
}
</style>