zhxy-desk/pages/studentRanked/components/timer-clock.vue

<template>
    <el-dialog :visible.sync="show" title="计时器" custom-class="content" center :close-on-click-modal="false" destroy-on-close
        style="background-color: #00142f63;backdrop-filter: blur(4px);" width="640px">

        <!-- <u-subsection :list="['秒表','倒计时']" @change="tabChange" :current="current"></u-subsection> -->
        
        <view style="padding: 30px 30px 0 30px;">
        
            <view v-show="current == 0" style="min-height: 250px;">
                <led ref="led" v-if="show && start" :mode="3" :twinkle="start && !pause"></led>
                <view v-else>
                    <led :mode="4" :val-arr="[0,0,':',0,0]"></led>
                </view>
            </view>
            <view v-show="current == 1" style="min-height: 250px;">
                <!-- <led :mode="4" :val-arr="arr"></led> -->
            </view>
        
        </view>

        <view class="text-center ui-mt40">
            <el-button type="primary" round @click="setStart">{{ start ? '重新开始' : '开始计时'}}</el-button>
            <el-button round @click="setPause" v-if="start">{{ pause ? '恢复' : '暂停' }}</el-button>
        </view>
    </el-dialog>
</template>

<script>
    import led from '@/components/mehaotian-numled/mehaotian-numled.vue';

    export default {
        components: {
            led
        },
        data() {
            return {
                show: false,
                current : 0,
                arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
                start : false,
                pause : false,
            }
        },
        computed: {},
        methods: {
            open() {
                this.show = true;
                setTimeout(() => {
                    this.arr = [0, 9, ':', 8, 1];
                }, 2000);
            },
            tabChange(index){
                this.current = index;
            },
            setStart(){
                this.start = true;
                this.pause = false;
                this.$nextTick(() => {
                    this.$refs.led.restart();
                })
            },
            setPause(){
                if(this.pause){
                    this.pause = false;
                    this.$refs.led.recover();
                }else{
                    this.pause = true;
                    this.$nextTick(() => {
                        this.$refs.led.pause();
                    })
                }
            }
        }
    }
</script>

<style>
    /deep/ .content {
        background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
        background-size: auto;
        border: 1px solid #0d5396;
    }

    /deep/ .el-dialog__header {
        background: #022c5a80;
        border-bottom: 2px solid #051d37;
    }

    /deep/ .el-dialog__title {
        color: #fff;
    }

    /deep/ .el-dialog__body {
        /* background-color: rgba(255, 255, 255, 1); */
    }
</style>