| @@ -11,12 +11,14 @@ | |||
| </div> | |||
| <div class="keyStatus"> | |||
| <span class="text" | |||
| >密钥状态:{{ keyStatus == 1 ? "正常" : "作废" }}</span | |||
| > | |||
| <span v-if="keyStatus == 1" class="success" @click="changeStatus(2)" | |||
| >密钥状态: | |||
| <span v-if="keyStatus == 1" style="color: #ff0000">作废</span> | |||
| <span v-else style="color: #36db43">正常</span> | |||
| </span> | |||
| <span v-if="keyStatus == 1" class="fail" @click="changeStatus(2)" | |||
| >恢复</span | |||
| > | |||
| <span v-if="keyStatus == 2" class="fail" @click="changeStatus(1)" | |||
| <span v-if="keyStatus == 2" class="success" @click="changeStatus(1)" | |||
| >作废</span | |||
| > | |||
| </div> | |||
| @@ -102,8 +104,8 @@ onMounted(() => { | |||
| border-radius: 30px 0 0 0; | |||
| overflow: hidden; | |||
| .card { | |||
| width: 70%; | |||
| height: 70%; | |||
| width: 60%; | |||
| height: 55%; | |||
| background-color: #f8f8f8; | |||
| margin-top: 10vh; | |||
| border-radius: 5vh; | |||
| @@ -111,14 +113,14 @@ onMounted(() => { | |||
| .title { | |||
| text-align: center; | |||
| font-size: 4vh; | |||
| padding: 5vh; | |||
| font-size: 3vh; | |||
| padding: 4vh; | |||
| } | |||
| .key { | |||
| text-align: center; | |||
| font-size: 4vh; | |||
| padding: 5vh; | |||
| font-size: 3vh; | |||
| padding: 4vh; | |||
| .copy { | |||
| color: #ffffff; | |||
| @@ -144,25 +146,31 @@ onMounted(() => { | |||
| } | |||
| .keyStatus { | |||
| text-align: center; | |||
| font-size: 4vh; | |||
| padding: 5vh; | |||
| font-size: 3vh; | |||
| padding: 4vh; | |||
| .success { | |||
| color: #ff0000; | |||
| color: #ffffff; | |||
| background-color: #ff0000; | |||
| margin-left: 2vh; | |||
| padding: 0.7vh; | |||
| border-radius: 15px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #36db43; | |||
| background-color: #36db43; | |||
| } | |||
| } | |||
| .fail { | |||
| color: #36db43; | |||
| color: #ffffff; | |||
| background-color: #36db43; | |||
| margin-left: 2vh; | |||
| padding: 0.7vh; | |||
| border-radius: 15px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #ff0000; | |||
| background-color: #ff0000; | |||
| } | |||
| } | |||
| } | |||