4 changed files with 7477 additions and 44 deletions
File diff suppressed because it is too large
@ -0,0 +1,658 @@ |
|||||
|
<template> |
||||
|
<div class="appClass" v-if="isVip"> |
||||
|
<template v-for="(perItem, perIndex) in personList" :key="perIndex"> |
||||
|
<div :class="`parent${perIndex}`"> |
||||
|
<div :class="`avatar${perIndex}`"> |
||||
|
<el-avatar size="large" shape="square"> |
||||
|
<img :src="perItem.ava" alt="头像" /> |
||||
|
</el-avatar> |
||||
|
</div> |
||||
|
<div :class="`usetime${perIndex}`" style="display: inline-block"> |
||||
|
<el-progress type="circle" striped striped-flow :stroke-width="10" :color="colors" :width="80" |
||||
|
:percentage="timeObj[`time${perIndex}`]"> |
||||
|
<span style="color: #000; font-size: 3em">{{ timeObj[`time${perIndex}`] }}</span> |
||||
|
</el-progress> |
||||
|
</div> |
||||
|
<div :class="`result${perIndex}`" style="display: inline-block"> |
||||
|
<span v-if="perItem.time"> |
||||
|
耗时 {{ perItem.time / 100 }}秒，答对 |
||||
|
<el-text :type="type[_.compact(perItem.sure).length]" style="font-size: 1.2em"> |
||||
|
{{ _.compact(perItem.sure).length }} |
||||
|
</el-text> |
||||
|
道题 |
||||
|
</span> |
||||
|
<span v-else>第{{ perItem.currentTi + 1 }}题</span> |
||||
|
</div> |
||||
|
<div :id="`yanmo${perIndex}`"></div> |
||||
|
<template v-for="(item, index) in perItem.questionList" :key="index"> |
||||
|
<template v-if="perItem.currentTi === index"> |
||||
|
<div :class="`question${perIndex}`"> |
||||
|
<div class="title"> |
||||
|
{{ item.title }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="options"> |
||||
|
<div v-for="(optionItem, optionIndex) in item.options" :class="`option${perIndex}`" :key="optionIndex"> |
||||
|
<el-tag v-if="optionItem.disabled" :type="optionItem.type" effect="dark"> |
||||
|
{{ optionItem.text }} |
||||
|
</el-tag> |
||||
|
<el-check-tag :checked="optionItem.checked" :type="optionItem.type" v-else |
||||
|
@change="onChange1(optionItem, optionIndex, item, perItem, perIndex)" effect="dark"> |
||||
|
{{ optionItem.text }} |
||||
|
</el-check-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</template> |
||||
|
<div :class="`next${perIndex}`"> |
||||
|
<div> |
||||
|
<el-button size="large" type="primary" v-if="!perItem.time" @click="nextTi(perItem, perIndex)" :disabled="perItem.questionList[perItem.currentTi].answer === -1 || perItem.clickDisable |
||||
|
"> |
||||
|
<span style="font-size: 2em; margin: 18px 8px"> 确定 </span> |
||||
|
</el-button> |
||||
|
<el-button size="large" type="primary" v-else @click="submit(perItem, perIndex)" :disabled="!!perItem.time"> |
||||
|
<span style="font-size: 2em; padding: 8px"> 已结束 </span> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
<div v-else class="noVip"> |
||||
|
<h3> |
||||
|
<el-tag type="danger" class="noVipTag">体验已过期，请联系管理员。</el-tag> |
||||
|
</h3> |
||||
|
</div> |
||||
|
<el-dialog v-model="dialogInfo.show" :title="dialogInfo.title" width="80%" center :before-close="handleClose"> |
||||
|
<div> |
||||
|
<el-row> |
||||
|
<el-col :span="12" v-for="(perItem, perIndex) in personList" :key="perIndex" style="text-align: center"> |
||||
|
<div class="mt-10"> |
||||
|
<el-avatar size="large" shape="square"> |
||||
|
<img :src="perItem.ava" alt="头像" /> |
||||
|
</el-avatar> |
||||
|
</div> |
||||
|
<div class="mt-20"> |
||||
|
<span style="font-size: 3em"> |
||||
|
您一共耗时 {{ perItem.time / 100 }}秒，答对 |
||||
|
<el-text :type="type[_.compact(perItem.sure).length]"> |
||||
|
<span style="font-size: 3em"> |
||||
|
{{ _.compact(perItem.sure).length }} |
||||
|
</span> |
||||
|
</el-text> |
||||
|
道题 |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="mt-20"> |
||||
|
<el-progress type="circle" v-if="dialogInfo.winIndex === perIndex" :percentage="100" status="success"> |
||||
|
<span style="color: #000;font-size: 3em;">赢</span> |
||||
|
</el-progress> |
||||
|
<el-progress type="circle" v-else :percentage="100" status="exception"> |
||||
|
<span style="color: #000;font-size: 3em;">输</span> |
||||
|
</el-progress> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<div class="dialogFooter"> |
||||
|
<el-button type="primary" @click="continuePk" style="font-size: 2.5em;height: 2em;"> 继续比赛 </el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<div v-if="diolag" class="el-overlay-dialog" @click="handleCloseDialog" |
||||
|
style="text-align: center; align-content: center"> |
||||
|
<div><img src="/src/assets/bgimg/bgimg.gif" alt="pk" style="margin-top: 25vh" /></div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import config from './config.js' |
||||
|
import _ from 'lodash' |
||||
|
import useConfigStore from './stores/config.js' |
||||
|
import dayjs from 'dayjs' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
export default { |
||||
|
name: 'app', |
||||
|
data() { |
||||
|
return { |
||||
|
_: _, |
||||
|
ava0: '', |
||||
|
ava1: '', |
||||
|
timeObj: { |
||||
|
timer0: null, |
||||
|
timer1: null, |
||||
|
time0: 100, |
||||
|
time1: 100 |
||||
|
}, |
||||
|
personList: [], |
||||
|
colors: [ |
||||
|
{ color: '#ff0000', percentage: 3 }, |
||||
|
{ color: '#c45656', percentage: 10 }, |
||||
|
{ color: '#F56C6C', percentage: 20 }, |
||||
|
{ color: '#f89898', percentage: 30 }, |
||||
|
{ color: '#fab6b6', percentage: 40 }, |
||||
|
{ color: '#fde2e2', percentage: 50 }, |
||||
|
{ color: '#f3d19e', percentage: 60 }, |
||||
|
{ color: '#eebe77', percentage: 70 }, |
||||
|
{ color: '#95d475', percentage: 80 }, |
||||
|
{ color: '#67C23A', percentage: 90 }, |
||||
|
{ color: '#529b2e', percentage: 100 } |
||||
|
], |
||||
|
type: ['danger', 'warning', 'info', 'primary', 'success'], |
||||
|
isVip: true, |
||||
|
configStore: useConfigStore(), |
||||
|
dialogInfo: { |
||||
|
show: false, |
||||
|
title: '比赛结果', |
||||
|
winIndex: -1 |
||||
|
}, |
||||
|
diolag: true, |
||||
|
clickCount: 0, |
||||
|
avaList: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init(isc = false) { |
||||
|
this.dealData() |
||||
|
this.setTime('timer0', 'time0', isc) |
||||
|
this.setTime('timer1', 'time1', isc) |
||||
|
}, |
||||
|
setTime(name, time, isGo = true) { |
||||
|
this.timeObj[time] = 100 |
||||
|
if (this.timeObj[name]) { |
||||
|
clearInterval(this.timeObj[name]) |
||||
|
} |
||||
|
if (isGo) { |
||||
|
this.timeObj[name] = setInterval(() => { |
||||
|
this.timeObj[time] -= 1 |
||||
|
this.timeObj[time] = _.max([this.timeObj[time], 0]) |
||||
|
}, 1000) |
||||
|
} |
||||
|
}, |
||||
|
getAva() { |
||||
|
this.clickCount++ |
||||
|
console.log(777, this.clickCount, this.avaList) |
||||
|
if (this.clickCount % 2) { |
||||
|
let arr = _.values(config) |
||||
|
let random = _.shuffle(arr) |
||||
|
this.avaList = [random[0], random[1]] |
||||
|
} |
||||
|
}, |
||||
|
dealData() { |
||||
|
this.getAva() |
||||
|
this.personList = [] |
||||
|
for (let i = 0; i < 2; i++) { |
||||
|
let item = { |
||||
|
ava: this.avaList[i], |
||||
|
questionList: [ |
||||
|
{ |
||||
|
title: '衣服可以保暖，体现了产品层次模型中的哪一层次产品？', |
||||
|
options: [ |
||||
|
{ |
||||
|
text: 'A 核心产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'B 形式产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'C 期望产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'D 附加产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
} |
||||
|
], |
||||
|
answer: -1, |
||||
|
trueAnswer: 0, |
||||
|
startTime: parseInt(dayjs().valueOf() / 10), |
||||
|
endTime: 0 |
||||
|
}, |
||||
|
{ |
||||
|
title: '产品的五层次中，____是指产品的品质、样式、包装和商标等。', |
||||
|
options: [ |
||||
|
{ |
||||
|
text: 'A 核心产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'B 形式产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'C 延伸产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'D 潜在产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
} |
||||
|
], |
||||
|
answer: -1, |
||||
|
trueAnswer: 1, |
||||
|
startTime: 0, |
||||
|
endTime: 0 |
||||
|
}, |
||||
|
{ |
||||
|
title: |
||||
|
'顾客希望旅游景区能够呈现丰富的旅游资源、干净整洁的游园环境、完善的基础设施设备，体现了产品层次模型中的哪一层次产品？', |
||||
|
options: [ |
||||
|
{ |
||||
|
text: 'A 核心产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'B 期望产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'C 形式产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'D 潜在产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
} |
||||
|
], |
||||
|
answer: -1, |
||||
|
trueAnswer: 1, |
||||
|
startTime: 0, |
||||
|
endTime: 0 |
||||
|
}, |
||||
|
{ |
||||
|
title: |
||||
|
'在传统村落白虎村旅游地可以购买纪念品、旅游保险、拍摄个人照片等，增强了游客的旅游体验，这属于哪一层次产品？', |
||||
|
options: [ |
||||
|
{ |
||||
|
text: 'A 核心产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'B 形式产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'C 延伸产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'D 潜在产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
} |
||||
|
], |
||||
|
answer: -1, |
||||
|
trueAnswer: 2, |
||||
|
startTime: 0, |
||||
|
endTime: 0 |
||||
|
}, |
||||
|
{ |
||||
|
title: '传统皮影面临困境，正在向数字皮影转型，体现了产品五层次模型中的哪一层次产品？', |
||||
|
options: [ |
||||
|
{ |
||||
|
text: 'A 核心产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'B 形式产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'C 期望产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
}, |
||||
|
{ |
||||
|
text: 'D 潜在产品', |
||||
|
checked: false, |
||||
|
type: 'info', |
||||
|
disabled: false |
||||
|
} |
||||
|
], |
||||
|
answer: -1, |
||||
|
trueAnswer: 3, |
||||
|
startTime: 0, |
||||
|
endTime: 0 |
||||
|
} |
||||
|
], |
||||
|
currentTi: 0, |
||||
|
clickDisable: false, // 是否点击 |
||||
|
time: 0, |
||||
|
sure: [] |
||||
|
} |
||||
|
this.personList.push(_.cloneDeep(item)) |
||||
|
} |
||||
|
}, |
||||
|
onChange1(optionItem, optionIndex, item, perItem, perIndex) { |
||||
|
optionItem.checked = true |
||||
|
item.answer = optionIndex |
||||
|
for (let i = 0; i < item.options.length; i++) { |
||||
|
if (optionIndex !== i) { |
||||
|
item.options[i].checked = false |
||||
|
} |
||||
|
item.options[i].type = 'info' |
||||
|
} |
||||
|
optionItem.type = 'success' |
||||
|
}, |
||||
|
nextTi(perItem, perIndex) { |
||||
|
let duration = 1500 |
||||
|
perItem.clickDisable = true |
||||
|
let item = perItem.questionList[perItem.currentTi] |
||||
|
if (item.answer !== item.trueAnswer) { |
||||
|
item.options[item.answer].type = 'danger' |
||||
|
item.options[item.trueAnswer].type = 'success' |
||||
|
} else { |
||||
|
item.options[item.trueAnswer].type = 'success' |
||||
|
} |
||||
|
perItem.questionList[perItem.currentTi].endTime = parseInt(dayjs().valueOf() / 10) |
||||
|
for (let i = 0; i < perItem.questionList[perItem.currentTi].options.length; i++) { |
||||
|
let ele = perItem.questionList[perItem.currentTi].options[i] |
||||
|
ele.disabled = true |
||||
|
} |
||||
|
let _msg = -1 |
||||
|
if ( |
||||
|
perItem.questionList[perItem.currentTi].answer === |
||||
|
perItem.questionList[perItem.currentTi].trueAnswer |
||||
|
) { |
||||
|
_msg = ElMessage({ |
||||
|
type: 'info', |
||||
|
duration: duration - 500, |
||||
|
customClass: 'yanmo', |
||||
|
icon: 'check', |
||||
|
message: '恭喜你，答对了！', |
||||
|
appendTo: document.getElementById(`yanmo${perIndex}`) |
||||
|
}) |
||||
|
let rightAudio = document.getElementById('right') |
||||
|
rightAudio.play() |
||||
|
} else { |
||||
|
_msg = ElMessage({ |
||||
|
type: 'info', |
||||
|
duration: duration - 500, |
||||
|
customClass: 'yanmo', |
||||
|
icon: 'close', |
||||
|
message: '很遗憾，打错了！', |
||||
|
appendTo: document.getElementById(`yanmo${perIndex}`) |
||||
|
}) |
||||
|
let errorAudio = document.getElementById('error') |
||||
|
errorAudio.play() |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
if (_msg !== -1) { |
||||
|
_msg.close() |
||||
|
} |
||||
|
//加一防止出错循环取余 |
||||
|
if (perItem.currentTi == perItem.questionList.length - 1) { |
||||
|
this.submit(perItem, perIndex) |
||||
|
} |
||||
|
let count = perItem.questionList.length |
||||
|
perItem.currentTi += 1 |
||||
|
perItem.currentTi %= count |
||||
|
// 将下一题的初始时间定死 |
||||
|
perItem.questionList[perItem.currentTi].startTime = parseInt(dayjs().valueOf() / 10) |
||||
|
this.setTime(`timer${perIndex}`, `time${perIndex}`) |
||||
|
perItem.clickDisable = false |
||||
|
}, duration) |
||||
|
}, |
||||
|
//提交 |
||||
|
submit(perItem, perIndex) { |
||||
|
perItem.time = 0 |
||||
|
perItem.sure = [] |
||||
|
for (let i = 0; i < perItem.questionList.length; i++) { |
||||
|
let element = perItem.questionList[i] |
||||
|
perItem.time += element.endTime - element.startTime |
||||
|
perItem.sure.push(element.trueAnswer === element.answer) |
||||
|
} |
||||
|
let pass = true |
||||
|
let sure = [] |
||||
|
let time = [] |
||||
|
for (let i = 0; i < JSON.parse(JSON.stringify(this.personList)).length; i++) { |
||||
|
let ele = this.personList[i] |
||||
|
sure.push(_.compact(ele.sure)) |
||||
|
time.push(ele.time) |
||||
|
if (!ele.time) { |
||||
|
pass = false |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
if (_.compact(sure[0]).length > _.compact(sure[1]).length) { |
||||
|
this.dialogInfo.winIndex = 0 |
||||
|
} else if (_.compact(sure[0]).length === _.compact(sure[1]).length) { |
||||
|
if (time[0] > time[1]) { |
||||
|
this.dialogInfo.winIndex = 1 |
||||
|
} else { |
||||
|
this.dialogInfo.winIndex = 0 |
||||
|
} |
||||
|
} else { |
||||
|
this.dialogInfo.winIndex = 1 |
||||
|
} |
||||
|
if (pass) { |
||||
|
this.dialogInfo.show = true |
||||
|
} |
||||
|
this.setTime(`timer${perIndex}`, `time${perIndex}`, false) |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
done() |
||||
|
this.continuePk() |
||||
|
}, |
||||
|
continuePk() { |
||||
|
this.dialogInfo.show = false |
||||
|
this.diolag = true |
||||
|
this.init() |
||||
|
}, |
||||
|
handleCloseDialog() { |
||||
|
this.diolag = false |
||||
|
this.init(true) |
||||
|
} |
||||
|
}, |
||||
|
async mounted() { |
||||
|
let audio = document.getElementById('myAudio1') |
||||
|
audio.addEventListener('canplay', function () { |
||||
|
audio.volume = 0.1 |
||||
|
}) |
||||
|
let fiveDay = dayjs('2024-05-21T00:00:00').valueOf() |
||||
|
if (!this.isVip) { |
||||
|
if (dayjs().valueOf() > fiveDay) { |
||||
|
this.isVip = false |
||||
|
return |
||||
|
} else { |
||||
|
this.isVip = true |
||||
|
} |
||||
|
} |
||||
|
this.dealData() |
||||
|
}, |
||||
|
watch: {}, |
||||
|
computed: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.appClass { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
color: #000; |
||||
|
background-color: #d9ecff; |
||||
|
} |
||||
|
|
||||
|
.parent0 { |
||||
|
border-right: 20vw solid #fff; |
||||
|
display: inline-block; |
||||
|
width: 40vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.parent1 { |
||||
|
display: inline-block; |
||||
|
width: 40vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.avatar0 { |
||||
|
text-align: left; |
||||
|
margin: 6px 0 0 6px; |
||||
|
min-height: 10vh; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.avatar1 { |
||||
|
text-align: right; |
||||
|
margin: 6px 16px 0 0; |
||||
|
min-height: 10vh; |
||||
|
width: 99%; |
||||
|
} |
||||
|
|
||||
|
.usetime0 { |
||||
|
text-align: center; |
||||
|
height: 0; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.usetime1 { |
||||
|
text-align: center; |
||||
|
height: 0; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.result0 { |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
min-height: 8vh; |
||||
|
width: 100%; |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
|
||||
|
.result1 { |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
min-height: 8vh; |
||||
|
width: 100%; |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
|
||||
|
.question0 { |
||||
|
height: 20vh; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
} |
||||
|
|
||||
|
.question1 { |
||||
|
height: 20vh; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
top: -10vh; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
text-indent: 2em; |
||||
|
width: 76%; |
||||
|
margin-left: 10%; |
||||
|
height: 31vh; |
||||
|
color: #000; |
||||
|
padding: 1% 2% 0 2%; |
||||
|
font-size: 2.3em; |
||||
|
border-radius: 10px; |
||||
|
text-align: left; |
||||
|
align-content: center; |
||||
|
background-color: #4bc1ed; |
||||
|
} |
||||
|
|
||||
|
.options { |
||||
|
width: 80%; |
||||
|
border-radius: 30px; |
||||
|
margin-left: 10%; |
||||
|
height: 34vh; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
padding-top: 1vh; |
||||
|
margin-top: 3vh; |
||||
|
background-color: #4bc1ed; |
||||
|
} |
||||
|
|
||||
|
.option0 { |
||||
|
height: calc(9vh - 12px); |
||||
|
margin-top: 6px; |
||||
|
} |
||||
|
|
||||
|
.option1 { |
||||
|
height: calc(9vh - 12px); |
||||
|
margin-top: 6px; |
||||
|
} |
||||
|
|
||||
|
.next0 { |
||||
|
padding-top: 4vh; |
||||
|
min-height: 5vh; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.next1 { |
||||
|
padding-top: 4vh; |
||||
|
min-height: 5vh; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.mt-10 { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.mt-20 { |
||||
|
margin: 40px 0; |
||||
|
} |
||||
|
|
||||
|
.noVip { |
||||
|
text-align: center; |
||||
|
margin-top: 40vh; |
||||
|
} |
||||
|
|
||||
|
.noVipTag { |
||||
|
font-size: 3em; |
||||
|
line-height: 1.6em; |
||||
|
height: 1.6em; |
||||
|
} |
||||
|
</style> |
||||
Binary file not shown.
Loading…
Reference in new issue