|
|
|
@ -16,20 +16,21 @@
|
|
|
|
<div v-for="(item, idx) in dataSource.top" :key="idx" class="section-top-item">
|
|
|
|
<div v-for="(item, idx) in dataSource.top" :key="idx" class="section-top-item">
|
|
|
|
<img :src="item.url" alt="" />
|
|
|
|
<img :src="item.url" alt="" />
|
|
|
|
<div class="top-item-content">
|
|
|
|
<div class="top-item-content">
|
|
|
|
<div>{{ item.title }}</div>
|
|
|
|
<div> {{item.title}} </div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<span class="content-currentNum">{{ item.currentNum }}</span>
|
|
|
|
<span class="content-currentNum"> {{item.currentNum}} </span>
|
|
|
|
<span style="
|
|
|
|
<span style="
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
color: #11D1E9;
|
|
|
|
color: #11D1E9;
|
|
|
|
font-size: 22px;
|
|
|
|
font-size: 34px;
|
|
|
|
|
|
|
|
margin-left: 3px;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-style: italic;
|
|
|
|
font-style: italic;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
transform: translate(2px, -3px);
|
|
|
|
transform: translate(2px, -3px);
|
|
|
|
">
|
|
|
|
">
|
|
|
|
/</span>
|
|
|
|
/</span>
|
|
|
|
<span class="content-total">{{ item.total }}</span>
|
|
|
|
<span class="content-total"> {{item.total }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -37,9 +38,9 @@
|
|
|
|
<div class="section-bottom">
|
|
|
|
<div class="section-bottom">
|
|
|
|
<div v-for="(item, idx) in dataSource.bottom" :key="idx" class="section-bottom-item"
|
|
|
|
<div v-for="(item, idx) in dataSource.bottom" :key="idx" class="section-bottom-item"
|
|
|
|
@click="showAttack(item.title, item.type)">
|
|
|
|
@click="showAttack(item.title, item.type)">
|
|
|
|
<span class="bottom-title">{{ item.title }}</span>
|
|
|
|
<span class="bottom-title"> {{item.title}} </span>
|
|
|
|
<img :src="item.url" alt="" />
|
|
|
|
<img :src="item.url" alt="" />
|
|
|
|
<span class="bottom-num">{{ item.num | commaFilter }}</span>
|
|
|
|
<span class="bottom-num"> {{item.num | commaFilter}} </span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -51,10 +52,10 @@
|
|
|
|
<div v-for="(item, idx) in superviseObject" :key="idx" :class="['section-object-item', item.className]"
|
|
|
|
<div v-for="(item, idx) in superviseObject" :key="idx" :class="['section-object-item', item.className]"
|
|
|
|
@click="showAttack(item.title, item.type)">
|
|
|
|
@click="showAttack(item.title, item.type)">
|
|
|
|
<div class="item-content">
|
|
|
|
<div class="item-content">
|
|
|
|
<span class="item-content-num">{{
|
|
|
|
<span class="item-content-num">
|
|
|
|
item.num | commaFilter
|
|
|
|
{{item.num | commaFilter}}
|
|
|
|
}}</span>
|
|
|
|
</span>
|
|
|
|
<span class="item-content-title">{{ item.title }}</span>
|
|
|
|
<span class="item-content-title"> {{item.title}} </span>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -72,22 +73,22 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="monitortop">
|
|
|
|
<div class="monitortop">
|
|
|
|
<div class="monitor-info-des">
|
|
|
|
<div class="monitor-info-des">
|
|
|
|
<span class="info-des-title">{{ securityMonitor.title }}</span>
|
|
|
|
<span class="info-des-title"> {{securityMonitor.title}} </span>
|
|
|
|
<span class="info-des-total">{{ monitorForm.netAttack }}</span>
|
|
|
|
<span class="info-des-total"> {{monitorForm.netAttack}} </span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="monitor-detail">
|
|
|
|
<div class="monitor-detail">
|
|
|
|
<div v-for="(item, index) in securityMonitor.detail" v-show="index < 3" :key="index"
|
|
|
|
<div v-for="(item, index) in securityMonitor.detail" v-show="index < 3" :key="index"
|
|
|
|
class="monitor-detail-item">
|
|
|
|
class="monitor-detail-item">
|
|
|
|
<span class="detail-item-title">{{ item.title }}</span>
|
|
|
|
<span class="detail-item-title"> {{item.title}} </span>
|
|
|
|
<span class="detail-item-num">{{
|
|
|
|
<span class="detail-item-num">
|
|
|
|
item.title == "入侵攻击"
|
|
|
|
{{item.title == "入侵攻击"
|
|
|
|
? monitorForm.rqAttack
|
|
|
|
? monitorForm.rqAttack
|
|
|
|
: item.title == "恶意扫描"
|
|
|
|
: item.title == "恶意扫描"
|
|
|
|
? monitorForm.smAttack
|
|
|
|
? monitorForm.smAttack
|
|
|
|
: item.title == "僵木蠕病毒"
|
|
|
|
: item.title == "僵木蠕病毒"
|
|
|
|
? monitorForm.bdAttack
|
|
|
|
? monitorForm.bdAttack
|
|
|
|
: 0
|
|
|
|
: 0}}
|
|
|
|
}}</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -102,11 +103,11 @@
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<vue-seamless-scroll :data="tableData" :class-option="classOption" class="monitorScroll">
|
|
|
|
<vue-seamless-scroll :data="tableData" :class-option="classOption" class="monitorScroll">
|
|
|
|
<div v-for="(item, idx) in tableData" :key="idx" class="monitor-list" @click="getAttackSource(item)">
|
|
|
|
<div v-for="(item, idx) in tableData" :key="idx" class="monitor-list" @click="getAttackSource(item)">
|
|
|
|
<span :data-id="item.id">{{
|
|
|
|
<span :data-id="item.id">
|
|
|
|
$moment(item.startTime).format("YYYY-MM-DD")
|
|
|
|
$moment(item.startTime).format("YYYY-MM-DD")
|
|
|
|
}}</span>
|
|
|
|
</span>
|
|
|
|
<span :data-id="item.id">{{ item.attackyIp }}</span>
|
|
|
|
<span :data-id="item.id"> item.attackyIp </span>
|
|
|
|
<span :data-id="item.id">{{ item.attackType }}</span>
|
|
|
|
<span :data-id="item.id"> item.attackType </span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -121,14 +122,14 @@
|
|
|
|
<div class="table-body">
|
|
|
|
<div class="table-body">
|
|
|
|
<div class="table-row" v-for="(item, idx) in tableData" :key="idx"
|
|
|
|
<div class="table-row" v-for="(item, idx) in tableData" :key="idx"
|
|
|
|
:class="{ 'odd-row': idx % 2 === 0 }">
|
|
|
|
:class="{ 'odd-row': idx % 2 === 0 }">
|
|
|
|
<div class="cell" style="width: 220px"><span :data-id="item.id">{{
|
|
|
|
<div class="cell" style="width: 220px"><span :data-id="item.id">
|
|
|
|
$moment(item.startTime).format("YYYY-MM-DD")
|
|
|
|
{{ $moment(item.startTime).format("YYYY-MM-DD")}}
|
|
|
|
}}</span></div>
|
|
|
|
</span></div>
|
|
|
|
<div class="cell" style="width: 120px">
|
|
|
|
<div class="cell" style="width: 120px">
|
|
|
|
<span :data-id="item.id">{{ item.attackyIp }}</span>
|
|
|
|
<span :data-id="item.id"> {{item.attackyIp}} </span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="cell violation-text">
|
|
|
|
<div class="cell violation-text">
|
|
|
|
<span :data-id="item.id">{{ item.attackType }}</span>
|
|
|
|
<span :data-id="item.id"> {{item.attackType}} </span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -143,7 +144,7 @@
|
|
|
|
<div slot="operate" class="btn-wrap">
|
|
|
|
<div slot="operate" class="btn-wrap">
|
|
|
|
<div v-for="(item, idx) in attackList.options" :key="idx" class="btn"
|
|
|
|
<div v-for="(item, idx) in attackList.options" :key="idx" class="btn"
|
|
|
|
:class="{ active: currentIndex === idx }" @click="currentIndex = idx">
|
|
|
|
:class="{ active: currentIndex === idx }" @click="currentIndex = idx">
|
|
|
|
{{ item }}
|
|
|
|
{{item }}
|
|
|
|
<div :class="[idx === 0 ? 'topIP' : 'distributed']" />
|
|
|
|
<div :class="[idx === 0 ? 'topIP' : 'distributed']" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -162,7 +163,7 @@
|
|
|
|
<div class="dialog_little_title">攻击发起时间：</div>
|
|
|
|
<div class="dialog_little_title">攻击发起时间：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.startTime }}</div>
|
|
|
|
<div class="dialog_little_ctn"> {{tableDataPop.startTime}} </div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
@ -170,7 +171,7 @@
|
|
|
|
<div class="dialog_little_title">攻击源IP：</div>
|
|
|
|
<div class="dialog_little_title">攻击源IP：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.attackyIp }}</div>
|
|
|
|
<div class="dialog_little_ctn"> {{tableDataPop.attackyIp}} </div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
@ -179,7 +180,7 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
{{ tableDataPop.attackType }}
|
|
|
|
{{tableDataPop.attackType }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
@ -189,7 +190,7 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
{{ tableDataPop.attackIpArea }}
|
|
|
|
tableDataPop.attackIpArea
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
@ -198,7 +199,7 @@
|
|
|
|
<div class="dialog_little_title">攻击源IP省份：</div>
|
|
|
|
<div class="dialog_little_title">攻击源IP省份：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.type }}</div>
|
|
|
|
<div class="dialog_little_ctn"> {{tableDataPop.type}} </div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
@ -207,7 +208,7 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
{{ tableDataPop.sattackIp }}
|
|
|
|
{{tableDataPop.sattackIp}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
@ -216,7 +217,7 @@
|
|
|
|
<div class="dialog_little_title">受攻击IP国家：</div>
|
|
|
|
<div class="dialog_little_title">受攻击IP国家：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
|
|
<el-col :span="18">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.sattackIpArea }}</div>
|
|
|
|
<div class="dialog_little_ctn"> {{tableDataPop.sattackIpArea}} </div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
@ -225,14 +226,14 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
{{ tableDataPop.netLevel }}
|
|
|
|
{{tableDataPop.netLevel }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<div class="dialog_little_title">攻击状态：</div>
|
|
|
|
<div class="dialog_little_title">攻击状态：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.affUnit }}</div>
|
|
|
|
<div class="dialog_little_ctn"> {{tableDataPop.affUnit}} </div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
@ -241,14 +242,14 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
<div class="dialog_little_ctn">
|
|
|
|
{{ tableDataPop.affUnit }}
|
|
|
|
tableDataPop.affUnit
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col> -->
|
|
|
|
</el-col> -->
|
|
|
|
<!-- <el-col :span="6">
|
|
|
|
<!-- <el-col :span="6">
|
|
|
|
<div class="dialog_little_title">联系人：</div>
|
|
|
|
<div class="dialog_little_title">联系人：</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<div class="dialog_little_ctn">{{ tableDataPop.linkMan }}</div>
|
|
|
|
<div class="dialog_little_ctn"> tableDataPop.linkMan </div>
|
|
|
|
</el-col> -->
|
|
|
|
</el-col> -->
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -763,8 +764,8 @@ export default {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-radius: 4px;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-top: 44px;
|
|
|
|
height: 290px;
|
|
|
|
height: 345px;
|
|
|
|
|
|
|
|
|
|
|
|
.table-header {
|
|
|
|
.table-header {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
@ -777,7 +778,7 @@ export default {
|
|
|
|
.header-cell {
|
|
|
|
.header-cell {
|
|
|
|
padding: 12px;
|
|
|
|
padding: 12px;
|
|
|
|
color: #ffffff;
|
|
|
|
color: #ffffff;
|
|
|
|
font-size: 18px;
|
|
|
|
font-size: 24px;
|
|
|
|
font-weight: normal;
|
|
|
|
font-weight: normal;
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
@ -792,6 +793,7 @@ export default {
|
|
|
|
.table-body {
|
|
|
|
.table-body {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
font-family: AlibabaPuHuiTiM;
|
|
|
|
font-family: AlibabaPuHuiTiM;
|
|
|
|
|
|
|
|
|
|
|
|
.table-row {
|
|
|
|
.table-row {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
background-color: black;
|
|
|
|
background-color: black;
|
|
|
|
@ -810,9 +812,9 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cell {
|
|
|
|
.cell {
|
|
|
|
padding: 12px;
|
|
|
|
padding: 20px;
|
|
|
|
color: #B9CCDF;
|
|
|
|
color: #B9CCDF;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 26px;
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1016,9 +1018,9 @@ export default {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.module-container {
|
|
|
|
.module-container {
|
|
|
|
width: 1512px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
margin: 204px 0 0 100px;
|
|
|
|
margin: 204px 0 0 0px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
// justify-content: space-between;
|
|
|
|
// justify-content: space-between;
|
|
|
|
@ -1027,23 +1029,26 @@ export default {
|
|
|
|
.section-securityMonitor {
|
|
|
|
.section-securityMonitor {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
height: 50%;
|
|
|
|
height: 50%;
|
|
|
|
|
|
|
|
padding: 0px 50px 0px 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-dataSource {
|
|
|
|
.section-dataSource {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
height: 50%;
|
|
|
|
height: 50%;
|
|
|
|
|
|
|
|
padding: 50px 50px 50px 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section-attackRanking {
|
|
|
|
.section-attackRanking {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
height: 50%;
|
|
|
|
height: 50%;
|
|
|
|
|
|
|
|
padding: 0px 50px 0px 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-superviseObject {
|
|
|
|
.section-superviseObject {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
height: 50%;
|
|
|
|
height: 50%;
|
|
|
|
// margin-top: -7px;
|
|
|
|
padding: 50px 50px 50px 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -1171,10 +1176,10 @@ export default {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
.btn {
|
|
|
|
height: 43px;
|
|
|
|
height: 100%;
|
|
|
|
width: auto;
|
|
|
|
width: auto;
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-size: 18px;
|
|
|
|
font-size: 25px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
@ -1182,6 +1187,7 @@ export default {
|
|
|
|
color: #b7dfff;
|
|
|
|
color: #b7dfff;
|
|
|
|
// border: 1px solid #ccc;
|
|
|
|
// border: 1px solid #ccc;
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
&.active {
|
|
|
|
color: #fff;
|
|
|
|
color: #fff;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
@ -1223,9 +1229,9 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-top {
|
|
|
|
.section-top {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 122px;
|
|
|
|
height: 224px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
margin-top: 24px;
|
|
|
|
margin-top: 38px;
|
|
|
|
// margin-left: 12px;
|
|
|
|
// margin-left: 12px;
|
|
|
|
// margin-bottom: 20px;
|
|
|
|
// margin-bottom: 20px;
|
|
|
|
justify-content: flex-end;
|
|
|
|
justify-content: flex-end;
|
|
|
|
@ -1233,17 +1239,17 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-top-item {
|
|
|
|
.section-top-item {
|
|
|
|
width: 382px;
|
|
|
|
width: 382px;
|
|
|
|
height: 183%;
|
|
|
|
height: 224px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
gap: 35.44px;
|
|
|
|
gap: 25.44px;
|
|
|
|
background: url("~@/assets/privateOrder/general/数据来源bg.png");
|
|
|
|
background: url("~@/assets/privateOrder/general/数据来源bg.png");
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
align-items: flex-start;
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
img {
|
|
|
|
width: 75px;
|
|
|
|
width: 116px;
|
|
|
|
height: 104px;
|
|
|
|
height: 170px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-item-content {
|
|
|
|
.top-item-content {
|
|
|
|
@ -1256,7 +1262,7 @@ export default {
|
|
|
|
div {
|
|
|
|
div {
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-size: 18.62px;
|
|
|
|
font-size: 28.62px;
|
|
|
|
font-weight: normal;
|
|
|
|
font-weight: normal;
|
|
|
|
font-stretch: normal;
|
|
|
|
font-stretch: normal;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
@ -1266,7 +1272,7 @@ export default {
|
|
|
|
.content-total {
|
|
|
|
.content-total {
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-size: 28px;
|
|
|
|
font-size: 40px;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
font-stretch: normal;
|
|
|
|
font-stretch: normal;
|
|
|
|
letter-spacing: 0px;
|
|
|
|
letter-spacing: 0px;
|
|
|
|
@ -1289,15 +1295,15 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-bottom {
|
|
|
|
.section-bottom {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 192px;
|
|
|
|
height: 293px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
margin-top: 34px;
|
|
|
|
margin-top: 42px;
|
|
|
|
justify-content: flex-end;
|
|
|
|
justify-content: flex-end;
|
|
|
|
gap: 42px;
|
|
|
|
gap: 42px;
|
|
|
|
|
|
|
|
|
|
|
|
.section-bottom-item {
|
|
|
|
.section-bottom-item {
|
|
|
|
width: 240px;
|
|
|
|
width: 240px;
|
|
|
|
height: 293px;
|
|
|
|
height: 303px;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
@ -1307,31 +1313,31 @@ export default {
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
img {
|
|
|
|
width: 65px;
|
|
|
|
width: 116px;
|
|
|
|
height: 90px;
|
|
|
|
height: 160px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom-title {
|
|
|
|
.bottom-title {
|
|
|
|
// font-family: Adobe Heiti Std;
|
|
|
|
// font-family: Adobe Heiti Std;
|
|
|
|
font-size: 18.2px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #fff;
|
|
|
|
color: #fff;
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom-num {
|
|
|
|
.bottom-num {
|
|
|
|
font-size: 26px;
|
|
|
|
font-size: 40px;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 40px;
|
|
|
|
height: 60px;
|
|
|
|
color: #11D1E9;
|
|
|
|
color: #11D1E9;
|
|
|
|
margin-top: 14px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding-top: 3px;
|
|
|
|
align-items: center;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-style: italic;
|
|
|
|
font-style: italic;
|
|
|
|
background: url("~@/assets/privateOrder/general/数据来源BG3.png");
|
|
|
|
background: url("~@/assets/privateOrder/general/数据来源BG3.png");
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
// font-family: ConthraxSb-Regular;
|
|
|
|
// font-family: ConthraxSb-Regular;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1340,25 +1346,28 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
//监管对象
|
|
|
|
//监管对象
|
|
|
|
.section-object {
|
|
|
|
.section-object {
|
|
|
|
height: 364px;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
// justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.section-bg {
|
|
|
|
.section-bg {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
top: 33px;
|
|
|
|
// top: 33px;
|
|
|
|
left: 34px;
|
|
|
|
// left: 34px;
|
|
|
|
width: 90%;
|
|
|
|
width: 90%;
|
|
|
|
height: 370px;
|
|
|
|
height: 70%;
|
|
|
|
background: url("~@/assets/privateOrder/general/circle.png") no-repeat;
|
|
|
|
margin-top: 7%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background: url("~@/assets/privateOrder/general/circle.png") bottom;
|
|
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
background-size: 100% 79%;
|
|
|
|
|
|
|
|
|
|
|
|
.section-object-item {
|
|
|
|
.section-object-item {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
width: 250px;
|
|
|
|
width: 138px;
|
|
|
|
height: 100px;
|
|
|
|
height: 150px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
@ -1368,27 +1377,28 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item-content {
|
|
|
|
.item-content {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
background-image: url(~@/assets/privateOrder/general/底座.png);
|
|
|
|
background-image: url(~@/assets/privateOrder/general/底座.png);
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding-bottom: 35px;
|
|
|
|
margin-top: 42px;
|
|
|
|
margin-left: -32px;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item-content-title {
|
|
|
|
.item-content-title {
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
font-size: 18.2px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #E4F0FF;
|
|
|
|
color: #E4F0FF;padding-bottom: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item-content-num {
|
|
|
|
.item-content-num {
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 32px;
|
|
|
|
font-size: 40px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
color: #11D1E9;
|
|
|
|
color: #11D1E9;
|
|
|
|
font-style: italic;
|
|
|
|
font-style: italic;
|
|
|
|
@ -1397,10 +1407,10 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-center {
|
|
|
|
.section-center {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: -13px;
|
|
|
|
top: 23px;
|
|
|
|
left: 190px;
|
|
|
|
left: 208px;
|
|
|
|
width: 303px;
|
|
|
|
width: 343px;
|
|
|
|
height: 216.35px;
|
|
|
|
height: 279px;
|
|
|
|
background: url("~@/assets/privateOrder/general/盾牌.png");
|
|
|
|
background: url("~@/assets/privateOrder/general/盾牌.png");
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
@ -1466,7 +1476,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
//安全检测
|
|
|
|
//安全检测
|
|
|
|
.section-monitor {
|
|
|
|
.section-monitor {
|
|
|
|
height: 424px;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
@ -1474,12 +1484,12 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-monitor-top {
|
|
|
|
.section-monitor-top {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 120px;
|
|
|
|
height: 221px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
margin-top: 5px;
|
|
|
|
padding: 39px 0 0 0 ;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
background: url("~@/assets/privateOrder/general/安全检测底图.png") bottom no-repeat;
|
|
|
|
background: url("~@/assets/privateOrder/general/安全检测底图.png") bottom no-repeat;
|
|
|
|
background-size: 100% 50%;
|
|
|
|
background-size: 100% 30%;
|
|
|
|
|
|
|
|
|
|
|
|
.monitor-line {
|
|
|
|
.monitor-line {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
@ -1494,15 +1504,18 @@ export default {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
width: 254px;
|
|
|
|
width: 254px;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
.monitor-info img {
|
|
|
|
align-self: center;
|
|
|
|
align-self: flex-end;
|
|
|
|
width: 80%;
|
|
|
|
width: 80%;
|
|
|
|
height: 100%;
|
|
|
|
height: 70%;
|
|
|
|
}
|
|
|
|
margin-bottom: 5%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.monitortop {
|
|
|
|
.monitortop {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
@ -1510,7 +1523,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.monitor-info-des {
|
|
|
|
.monitor-info-des {
|
|
|
|
width: 88%;
|
|
|
|
width: 88%;
|
|
|
|
height: 33px;
|
|
|
|
height: 60px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
@ -1519,21 +1532,23 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.info-des-title {
|
|
|
|
.info-des-title {
|
|
|
|
font-family: AlibabaPuHuiTiM;
|
|
|
|
font-family: AlibabaPuHuiTiM;
|
|
|
|
font-size: 18.62px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #ffffff;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-des-total {
|
|
|
|
.info-des-total {
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 24px;
|
|
|
|
font-size: 36px;
|
|
|
|
color: #99F17A;
|
|
|
|
color: #99F17A;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.monitor-detail {
|
|
|
|
.monitor-detail {
|
|
|
|
width: 394px;
|
|
|
|
width: 600px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
margin-bottom: 1%;
|
|
|
|
|
|
|
|
|
|
|
|
.monitor-detail-item {
|
|
|
|
.monitor-detail-item {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
@ -1545,13 +1560,13 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.detail-item-title {
|
|
|
|
.detail-item-title {
|
|
|
|
// font-family: SourceHanSansCN-Regular;
|
|
|
|
// font-family: SourceHanSansCN-Regular;
|
|
|
|
font-size: 15.96px;
|
|
|
|
font-size: 24px;
|
|
|
|
color: #99A5BF;
|
|
|
|
color: #99A5BF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-item-num {
|
|
|
|
.detail-item-num {
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
font-size: 17.29px;
|
|
|
|
font-size: 26px;
|
|
|
|
color: #1ED1FF;
|
|
|
|
color: #1ED1FF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1560,7 +1575,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
.section-monitor-bottom {
|
|
|
|
.section-monitor-bottom {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 255px;
|
|
|
|
height: auto;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
|
