| @@ -9,10 +9,16 @@ | |||||
| >复制</span | >复制</span | ||||
| > | > | ||||
| </div> | </div> | ||||
| <div class="key"> | |||||
| <span class="text">密钥状态:{{ showCode }}</span> | |||||
| <span class="showOrHide" @click="changeStatus">{{ showText }}</span> | |||||
| <span class="showOrHide" @click="changeStatus">{{ showText }}</span> | |||||
| <div class="keyStatus"> | |||||
| <span class="text" | |||||
| >密钥状态:{{ keyStatus == 1 ? "正常" : "作废" }}</span | |||||
| > | |||||
| <span v-if="keyStatus == 1" class="success" @click="changeStatus(2)" | |||||
| >恢复</span | |||||
| > | |||||
| <span v-if="keyStatus == 2" class="fail" @click="changeStatus(1)" | |||||
| >作废</span | |||||
| > | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -70,8 +76,21 @@ const copyKey = () => { | |||||
| }); | }); | ||||
| }; | }; | ||||
| const keyStatus = ref(""); | |||||
| const getStatus = () => { | |||||
| // 1:正常;2:作废 | |||||
| const status = 1; | |||||
| keyStatus.value = status; | |||||
| }; | |||||
| const changeStatus = (num) => { | |||||
| keyStatus.value = num; | |||||
| }; | |||||
| onMounted(() => { | onMounted(() => { | ||||
| getKey(); | getKey(); | ||||
| getStatus(); | |||||
| }); | }); | ||||
| </script> | </script> | ||||
| @@ -123,6 +142,30 @@ onMounted(() => { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .keyStatus { | |||||
| text-align: center; | |||||
| font-size: 4vh; | |||||
| padding: 5vh; | |||||
| .success { | |||||
| color: #ff0000; | |||||
| margin-left: 2vh; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #36db43; | |||||
| } | |||||
| } | |||||
| .fail { | |||||
| color: #36db43; | |||||
| margin-left: 2vh; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #ff0000; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||