126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<span style="color: #dfe6ec;font-size: 20px;float: left;margin-left: 3%;margin-top: 2%">已探测目标</span>
|
|
<div class="box" id="show-loading" v-loading="loading">
|
|
<div class="card">
|
|
<div class="title">IPv6</div>
|
|
<div>
|
|
<span class="info-span">{{ target.v6dns }}</span>
|
|
<span class="unit-span">个</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">DNSSEC</div>
|
|
<div>
|
|
<span class="info-span">{{ target.dnssec }}</span>
|
|
<span class="unit-span">个</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">DoT</div>
|
|
<div>
|
|
<span class="info-span">{{ target.dot }}</span>
|
|
<span class="unit-span">个</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="title">DoH</div>
|
|
<div>
|
|
<span class="info-span">{{ target.doh }}</span>
|
|
<span class="unit-span">个</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { Loading } from 'element-ui'
|
|
import { getTargetsResponse } from './imageMock.js'
|
|
export default {
|
|
name: 'imageView',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
imageData: {},
|
|
target:{
|
|
dnssec:0,
|
|
doh:0,
|
|
dot:0,
|
|
v6dns:0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
mounted() {
|
|
// this.init()
|
|
},
|
|
methods: {
|
|
init () {
|
|
// this.imageData = getTargetsResponse?.result
|
|
this.loading = true
|
|
this.$axios.get(this.$http.api.sysNum).then(res => {
|
|
if (res.code == 200) {
|
|
this.target.dnssec=res?.target?.dnssec
|
|
this.target.doh=res?.target?.doh
|
|
this.target.dot=res?.target?.dot
|
|
this.target.v6dns=res?.target?.v6dns
|
|
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box {
|
|
width: 100%;
|
|
height: 80%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.card {
|
|
flex: 1;
|
|
.title {
|
|
color: #FFF;
|
|
font-family: PingFang HK;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
margin-bottom: 10px;
|
|
}
|
|
.info-span {
|
|
color: #03F4FA;
|
|
font-family: PingFang HK;
|
|
font-size: 32px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
padding: 5px;
|
|
}
|
|
.unit-span {
|
|
color: #FFF;
|
|
opacity: 0.7;
|
|
font-family: PingFang HK;
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
.box .card:not(:last-child) {
|
|
border-right: 1px solid rgba(216, 216, 216, 0.2);
|
|
}
|
|
</style> |