rt-sim-training-client/src/views/display/menuSystemTime.vue

<template>
  <div v-if="isShowSystemTime" class="display-card" :style="{top: offset+'px', right: right+'px'}">
    <template v-if="pause">
      <span class="display-pause">{{ $t('display.systemTime.timePause') }}</span>
    </template>
    <template v-else>
      <system-time
        class="display-time"
        :time="time"
        :zoom="4"
        :fine="1.5"
      />

    </template>
  </div>
</template>
<script>
import { prefixIntrger } from '@/utils/date';
import SystemTime from '@/views/components/systemTime/index';

export default {
	name: 'MenuSystemTime',
	components: {
		SystemTime
	},
	props: {
		offset: {
			type: Number,
			required: true
		},
		right: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			time: '00:0000'
		};
	},
	computed: {
		isShowSystemTime() {
			return this.$route.params.mode == 'demon' ||
					this.$route.params.mode == 'dp' ||
					this.$route.params.mode == 'plan' ||
					this.$route.params.mode == 'script' ||
					!this.$route.params.mode;
		},
		pause() {
			return this.$store.state.scriptRecord.simulationPause;
		}
	},
	watch: {
		'$store.state.training.initTime': function (initTime) {
			const date = new Date(initTime);
			this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline;
        position: absolute;
    }

	.display-pause {
		font-size: 21px;
		font-weight: bold;
		color: yellow;
	}

	.display-time{
		padding: 5px;
		box-shadow: 0px 0px 5px #eee;
        border-radius: 3px;
	}

    .display-card .el-row {
        line-height: 32px !important;
    }

</style>