|
@@ -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; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|