78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="display-card" :style="{top: offset+'px'}" v-if="isShowSystemTime">
|
||
|
|
<system-time class="time" v-if="isShowSystemTime" :time="time" :zoom="1.3" :width="110" :height="32" :fine="2"
|
||
|
|
:top="2"></system-time>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from 'vuex';
|
||
|
|
import { prefixIntrger } from '@/utils/date';
|
||
|
|
import SystemTime from '@/views/components/systemTime/index';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MenuSystemTime',
|
||
|
|
props: {
|
||
|
|
offset: {
|
||
|
|
type: Number
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
SystemTime
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
time: '00:0000',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$store.state.training.initTime': function (initTime) {
|
||
|
|
let date = new Date(initTime);
|
||
|
|
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isShowSystemTime() {
|
||
|
|
return this.$route.params.mode == 'demon' || this.$route.params.mode == 'dp' || this.$route.params.mode == 'plan' || !this.$route.params.mode;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
|
|
@import "src/styles/mixin.scss";
|
||
|
|
|
||
|
|
.display-card {
|
||
|
|
z-index: 9;
|
||
|
|
display: inline;
|
||
|
|
position: absolute;
|
||
|
|
border: 2px solid white;
|
||
|
|
border-radius: 4px;
|
||
|
|
left: calc(50% - 55px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-card .el-row {
|
||
|
|
line-height: 32px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-score {
|
||
|
|
background-color: white;
|
||
|
|
display: -moz-inline-box;
|
||
|
|
display: inline-block;
|
||
|
|
text-align: left;
|
||
|
|
height: 32px;
|
||
|
|
line-height: 24px;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding-left: 2px;
|
||
|
|
margin-left: 10px;
|
||
|
|
font-family: "Microsoft" !important;
|
||
|
|
font-size: 18px !important;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-draft {
|
||
|
|
position: absolute;
|
||
|
|
float: right;
|
||
|
|
right: 40px;
|
||
|
|
bottom: 28px;
|
||
|
|
}
|
||
|
|
</style>
|