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