实现一进入页面就开始进行读秒操作，读秒尚未结束时，按钮处于禁止状态且颜色变灰。
读秒完毕后方可进行业务操作。
效果如下图：
<template><div><el-card class="boxCard"><h1 style="text-align: center">考生须知</h1><div class="buttons"><button class="btnCancel" @click="backPage">不同意</button><button v-show="show" class="agreeBtn" @click="handleExamApply">同意</button><button v-show="!show" class="agreeBtn" disabled="disabled">同意 ({{count }}s)</button></div></el-card></div></template><script>export default {data() {return {timer: null,count: null,show: true}},mounted() {this.getSeconds()},methods: {// 按钮读秒定时器getSeconds() {this.show = falseconst seconds = 1if (!this.timer) {this.count = secondsthis.show = falsethis.timer = setInterval(() => {if (this.count > 1 && this.count <= seconds) {this.count--} else {this.show = trueclearInterval(this.timer)this.timer = null}}, 1000)}},// 同意按钮handleExamApply() {let id = this.$route.params.idlet subId = this.$route.params.subIdthis.$router.push(`/personalCenter/examApplyDetail/${id}/${subId}`)},// 不同意backPage() {this.$router.push({name: 'ExamApply'})}}}</script><style scoped>.boxCard {padding: 0 20px;margin: 20px;}.buttons {padding: 50px 0;width: 180px;margin: auto;display: flex;flex-direction: row;}.txtColor {color: #f5222d;}p {line-height: 28px;}.btnCancel {width: 110px;height: 32px;background: #ffffff;border: 1px solid #d9d9d9;border-radius: 4px;margin-right: 14px;}button {&.agreeBtn {width: 110px;height: 32px;background: #0080ff;border: 1px solid #d9d9d9;border-radius: 4px;&:hover {background: #66b1ff;}&:disabled {opacity: 1 !important;color: #fff;&:hover {cursor: not-allowed;}}}}</style>
