bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式

This commit is contained in:
bb_pan 2025-11-24 18:27:40 +08:00
parent cfbe0e496b
commit 4396ba582d
20 changed files with 277 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/screen/gwScreen/components/left/index.vue
View File

@ -231,7 +231,8 @@ export default {
padding-top: 8px; padding-top: 8px;
padding-left: 40px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

3
src/views/screen/gwScreen/components/right/ProEquipSituationList.vue
View File

@ -176,7 +176,8 @@ export default {
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
.title-text { .title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

3
src/views/screen/gwScreen/components/right/index.vue
View File

@ -134,7 +134,8 @@ export default {
padding-top: 10px; padding-top: 10px;
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

14
src/views/screen/wsScreen/components/center/index.vue
View File

@ -312,7 +312,7 @@ export default {
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ] animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
}, },
label: { label: {
show: true, show: false,
color: '#FFF', color: '#FFF',
position: 'top', position: 'top',
fontSize: 18, fontSize: 18,
@ -456,13 +456,19 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
.btn:not(:last-child) { .btn:not(:last-child) {
margin-right: 80px; margin-right: 22px;
} }
.btn { .btn {
font-size: 18px; margin-top: 40px;
width: 84px;
height: 30px;
font-size: 13px;
text-align: center; text-align: center;
padding: 6px 15px; /* padding: 6px 15px; */
display: flex;
justify-content: center;
align-items: center;
font-family: DS-TITLE; font-family: DS-TITLE;
color: #ccc; color: #ccc;
background-image: url('../../img/btn.png'); background-image: url('../../img/btn.png');

11
src/views/screen/wsScreen/components/left/EquipItem.vue
View File

@ -75,6 +75,7 @@ export default {
const myChart = echarts.init(chartDom) const myChart = echarts.init(chartDom)
const option = { const option = {
color: ['#69A6C9', '#7DDBBA', '#6DD48C'],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
@ -87,7 +88,8 @@ export default {
label: { label: {
show: true, show: true,
formatter: '{b}\n{d}%', formatter: '{b}\n{d}%',
color: '#A3D6F8', color: 'inherit',
fontWeight: '900',
}, },
labelLine: { labelLine: {
show: true, show: true,
@ -112,7 +114,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
height: 30px;
display: flex;
align-items: center;
padding-left: 10px; padding-left: 10px;
font-size: 12px;
font-weight: 800; font-weight: 800;
background-image: url('../../img/equip-title.png'); background-image: url('../../img/equip-title.png');
background-size: 100% 100%; background-size: 100% 100%;
@ -120,7 +126,8 @@ export default {
cursor: pointer; cursor: pointer;
} }
.number { .number {
font-size: 16px; font-size: 18px;
font-weight: 800;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

59
src/views/screen/wsScreen/components/left/EquipStatus.vue
View File

@ -49,10 +49,56 @@ export default {
const yData = this.chartData.map((item) => item.value) const yData = this.chartData.map((item) => item.value)
const option = { const option = {
title: [
{
text: '单位：台',
left: '5%',
top: 0,
textStyle: {
color: '#ccc',
fontSize: 12,
},
},
],
graphic: [
{
type: 'group',
right: '6%', // 右边距
top: 0, // 顶部距离
children: [
{
type: 'rect',
z: 100,
left: 0,
top: 3.5,
shape: {
width: 10,
height: 5,
},
style: {
fill: '#3BA9DC', // 你想要的色块颜色
stroke: null,
},
},
{
type: 'text',
z: 100,
left: 20,
top: 0,
style: {
text: '装备状态数',
fill: '#ccc',
font: '12px sans-serif',
},
},
],
},
],
grid: { grid: {
left: '16%', left: '16%',
right: '6%', right: '6%',
top: '16%', top: '12%',
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
@ -62,7 +108,7 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
color: '#ccc', color: '#ccc',
fontSize: 12, fontSize: 14,
margin: 10, margin: 10,
}, },
}, },
@ -72,7 +118,7 @@ export default {
axisLine: { show: true }, axisLine: { show: true },
axisLabel: { axisLabel: {
color: '#ccc', color: '#ccc',
fontSize: 12, fontSize: 14,
}, },
}, },
series: [ series: [
@ -96,8 +142,9 @@ export default {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
fontSize: 12, fontSize: 16,
color: '#ccc', fontWeight: 'bold',
color: '#96C2D8',
formatter: (params) => { formatter: (params) => {
const proportion = this.chartData[params.dataIndex].proportion const proportion = this.chartData[params.dataIndex].proportion
return `${params.value}/${proportion}%` return `${params.value}/${proportion}%`
@ -141,7 +188,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-container { .chart-container {
width: 100%; /* 宽度 */ width: 100%; /* 宽度 */
height: 230px; /* 高度 */ height: 200px; /* 高度 */
margin: 0 auto; margin: 0 auto;
} }
</style> </style>

71
src/views/screen/wsScreen/components/left/UnitEquipmentConfig.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<div class="scroll-container"> <div class="scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center"> <!-- 表头 -->
<!-- 双层表头 --> <table class="table-head">
<thead> <thead>
<!-- 第一行：跨列合并 -->
<tr> <tr>
<th rowspan="2">序号</th> <th rowspan="2" style="width: 30px">序号</th>
<th rowspan="2">单位名称</th> <th rowspan="2" style="width: 110px">单位名称</th>
<th rowspan="2">装备价值（亿元）</th> <th rowspan="2" style="width: 60px">装备价值（亿元）</th>
<th colspan="4">装备数量（台）</th> <th colspan="4">装备数量（台）</th>
<th colspan="4">配置率</th> <th colspan="4">配置率</th>
</tr> </tr>
<!-- 第二行：子列 -->
<tr> <tr>
<th>总数</th> <th>总数</th>
<th>线路</th> <th>线路</th>
@ -23,25 +21,25 @@
<th>电缆</th> <th>电缆</th>
</tr> </tr>
</thead> </thead>
</table>
<!-- 表体：使用 v-for 渲染数据 --> <!-- 内容 -->
<table class="table-body">
<tbody> <tbody>
<tr v-for="(row, index) in tableData" :key="index"> <tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td> <td class="index-num" style="width: 30px">{{ index + 1 }}</td>
<td style="width: 180px">{{ row.deptName }}</td> <td style="width: 110px; font-size: 14px">{{ row.deptName }}</td>
<td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td> <td class="index-num" style="width: 60px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
<!-- 装备数量 --> <td class="index-num">{{ row.totalEquipmentQuantity }}</td>
<td>{{ row.totalEquipmentQuantity }}</td> <td class="index-num">{{ row.lineNum }}</td>
<td>{{ row.lineNum }}</td> <td class="index-num">{{ row.substationNum }}</td>
<td>{{ row.substationNum }}</td> <td class="index-num">{{ row.cableNum }}</td>
<td>{{ row.cableNum }}</td>
<!-- 配置率 --> <td class="index-num">{{ row.configRate }}</td>
<td>{{ row.configRate }}</td> <td class="index-num">{{ row.valueA }}</td>
<td>{{ row.valueA }}</td> <td class="index-num">{{ row.valueB }}</td>
<td>{{ row.valueB }}</td> <td class="index-num">{{ row.valueC }}</td>
<td>{{ row.valueC }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -67,6 +65,7 @@ export default {
console.log('🚀 ~ getList ~ res:', res) console.log('🚀 ~ getList ~ res:', res)
if (!res.data) return if (!res.data) return
this.tableData = res.data || [] this.tableData = res.data || []
if (this.tableData.length > 3) this.tableData = this.tableData.slice(0, 3)
} catch (error) { } catch (error) {
console.log('🚀 ~ getList ~ error:', error) console.log('🚀 ~ getList ~ error:', error)
} }
@ -76,8 +75,26 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
table { .table-head {
width: 100%;
border-collapse: collapse; border-collapse: collapse;
}
.table-body {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
}
.index-num {
/* width: 30px; */
font-size: 18px;
font-weight: 800;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN';
}
table {
width: 100%; width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular'; font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px; font-size: 11px;
@ -85,10 +102,10 @@ table {
th, th,
td { td {
padding: 9px 3px; /* padding: 9px 3px; */
text-align: center; text-align: center;
white-space: nowrap; /* white-space: nowrap; */
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */ border: 0.5px solid #254e7c; // 边框颜色可根据背景调整
} }
th { th {
@ -99,11 +116,15 @@ th {
thead { thead {
background-image: url('../../img/tableHeader.png'); background-image: url('../../img/tableHeader.png');
background-size: 100% 100%; background-size: 100% 100%;
height: 57px;
font-size: 12px;
color: #5A89BE;
} }
tbody tr { tbody tr {
background-image: url('../../img/tableTr.png'); background-image: url('../../img/tableTr.png');
background-size: 100% 100%; background-size: 100% 100%;
height: 44px;
} }
/* 奇偶行颜色区分 */ /* 奇偶行颜色区分 */

132
src/views/screen/wsScreen/components/left/index.vue
View File

@ -2,30 +2,40 @@
<div> <div>
<div class="left-warp"> <div class="left-warp">
<div class="top-box"> <div class="top-box">
<div class="title-tip"> <div class="title-tip title-all" @click="handleEquipOverview">
<div>装备总览</div> <!-- <div>装备总览</div>
<div class="more" @click="handleEquipOverview">更多 ></div> <div class="more" @click="handleEquipOverview">更多 ></div> -->
</div> </div>
<div class="equip-box"> <div class="equip-box">
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center">
<div class="equip-item-1">装备总数</div> <div class="equip-item-1">装备总数</div>
<div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div> <div @click="openSystemEquip">
<span class="equip-item-2 num-text">{{ equipData.total }}</span
><span class="unit">台</span></div
>
</div> </div>
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center; margin-left: 15px">
<div class="equip-item-3">总价值</div> <div class="equip-item-3">总价值</div>
<div class="equip-item-4" @click="openTotalPrice" <div @click="openTotalPrice">
>{{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span></div <span class="equip-item-4 num-text">{{ (equipData.totalPrice / 100000000).toFixed(4) }}</span>
<span class="unit">亿元</span></div
> >
</div> </div>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<el-row :gutter="20"> <el-row :gutter="3">
<el-col :span="8" :offset="0"> <el-col :span="8" :offset="0">
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" /> <EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" />
</el-col> </el-col>
<el-col :span="8" :offset="0"> <el-col :span="8" :offset="0">
<div style="display: flex; align-items: center">
<div class="item-line"></div>
<div style="margin: 0 4px;">
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" /> <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
</div>
<div class="item-line"></div>
</div>
</el-col> </el-col>
<el-col :span="8" :offset="0"> <el-col :span="8" :offset="0">
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" /> <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" />
@ -34,9 +44,9 @@
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
<div class="bottom-left"> <div class="bottom-left">
<div class="title-tip"> <div class="title-tip title-equip" @click="openEquipConfig">
<div class="tip-title">单位装备配置</div> <!-- <div class="tip-title">单位装备配置</div>
<div class="more" @click="openEquipConfig">更多 ></div> <div class="more" @click="openEquipConfig">更多 ></div> -->
</div> </div>
<div class="bottom-list"> <div class="bottom-list">
<UnitEquipmentConfig /> <UnitEquipmentConfig />
@ -45,11 +55,11 @@
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
<div class="bottom-right"> <div class="bottom-right">
<div class="title-tip"> <div class="title-tip title-status" @click="openStatusMore">
<div class="tip-title">装备状态</div> <!-- <div class="tip-title">装备状态</div>
<div class="more" @click="openStatusMore">更多 ></div> <div class="more" @click="openStatusMore">更多 ></div> -->
</div> </div>
<div class="equip-status"> <div>
<EquipStatus /> <EquipStatus />
</div> </div>
<div class="bottom-explain"> <div class="bottom-explain">
@ -185,20 +195,35 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.num-text {
font-family: 'DIN';
}
.left-warp { .left-warp {
height: calc(100vh - 100px); margin-left: 57px;
display: flex; width: 474px;
/* height: calc(100vh - 100px); */
/* display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between; */
.title-all {
background-image: url('../../img/装备总览.png');
background-size: 100% 100%;
}
.title-equip {
background-image: url('../../img/单位装备配置.png');
background-size: 100% 100%;
}
.title-status {
background-image: url('../../img/装备状态.png');
background-size: 100% 100%;
}
.title-tip { .title-tip {
display: flex; margin-bottom: 12px;
height: 32px;
/* display: flex;
justify-content: space-between; justify-content: space-between;
/* padding-top: 8px; */
padding-left: 40px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE; */
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more { .more {
margin-right: 20px; margin-right: 20px;
@ -209,53 +234,62 @@ export default {
} }
} }
.top-box { .top-box {
/* height: 350px; */ /* background-image: url('../../img/equipmentOverview.png'); */
height: 18%;
background-image: url('../../img/equipmentOverview.png');
background-size: 100% 100%; background-size: 100% 100%;
.equip-box { .equip-box {
padding-left: 20px; /* padding-left: 20px; */
/* margin-top: 20px; */ margin-bottom: 12px;
/* margin-bottom: 13px; */ height: 116px;
height: 100px;
background-image: url('../../img/equipmentOverviewData.png'); background-image: url('../../img/equipmentOverviewData.png');
background-size: 100% 100%; background-size: 100% 100%;
/* position: relative; */ /* position: relative; */
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.unit {
font-size: 15px;
color: #ccc;
}
.equip-item-1 { .equip-item-1 {
margin-bottom: 15px; margin-bottom: 10px;
} }
.equip-item-2 { .equip-item-2 {
color: #fefbdc; /* color: #fefbdc; */
font-size: 28px; font-size: 28px;
font-weight: 800; font-weight: 800;
cursor: pointer; cursor: pointer;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.equip-item-3 { .equip-item-3 {
margin-bottom: 15px; margin-bottom: 10px;
} }
.equip-item-4 { .equip-item-4 {
color: #fefbdc;
font-size: 28px; font-size: 28px;
font-weight: 800; font-weight: 800;
cursor: pointer; cursor: pointer;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.unit {
font-size: 10px;
color: #ccc;
} }
} }
} }
.item-box { .item-box {
padding: 0 20px; /* padding: 0 20px; */
margin-bottom: 12px;
}
.item-line {
background-image: url('../../img/item-line.png');
background-size: 100% 100%;
width: 3px;
height: 206px;
} }
.bottom-box { .bottom-box {
.bottom-explain { .bottom-explain {
margin-top: 15px;
color: #97aad6; color: #97aad6;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
@ -265,19 +299,17 @@ export default {
.bottom-tip { .bottom-tip {
} }
.bottom-left { .bottom-left {
height: 210px; /* height: 210px; */
background-image: url('../../img/unit-equip.png'); /* background-image: url('../../img/unit-equip.png'); */
background-size: 100% 100%; /* background-size: 100% 100%; */
.bottom-list { .bottom-list {
margin: 5px 0 10px; height: 240px;
height: 165px;
overflow: auto;
} }
} }
.bottom-right { .bottom-right {
/* height: 250px; */ /* height: 250px; */
background-image: url('../../img/equip-status.png'); /* background-image: url('../../img/equip-status.png');
background-size: 100% 100%; background-size: 100% 100%; */
} }
} }
} }

27
src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
View File

@ -5,11 +5,13 @@
<div class="more more-warp"> <div class="more more-warp">
<div> <div>
<el-select <el-select
popper-class="mySelect"
v-model="proCode" v-model="proCode"
placeholder="" placeholder=""
clearable clearable
filterable filterable
size="mini" size="mini"
:popper-append-to-body="false"
@change="getList" @change="getList"
style="width: 80px" style="width: 80px"
> >
@ -53,7 +55,7 @@
</div> </div>
<div class="table-list scroll-container"> <div class="table-list scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center"> <table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
<!-- 双层表头 --> <!-- 双层表头 -->
<thead> <thead>
<!-- 第一行：跨列合并 --> <!-- 第一行：跨列合并 -->
@ -162,7 +164,8 @@ export default {
padding-left: 40px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE;
.title-text { .title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -252,10 +255,11 @@ export default {
} }
table { table {
border-collapse: collapse;
width: 100%; width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular'; font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px; font-size: 11px;
border-collapse: separate;
border-spacing: 0 5px;
} }
th, th,
@ -289,4 +293,21 @@ tbody tr:hover {
background-color: #1f4a85 !important ; background-color: #1f4a85 !important ;
color: #fff !important; color: #fff !important;
} }
::v-deep .el-select-dropdown {
background-color: #1f4a85 !important;
left: -300px !important;
width: 400px !important;
height: 180px !important;
border: 1px solid #1f4a85 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
height: 182px !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background: #1f4a85 !important;
}
</style> </style>

5
src/views/screen/wsScreen/components/right/UsageRateSituationList.vue
View File

@ -6,7 +6,7 @@
</div> </div>
<div class="table-list scroll-container"> <div class="table-list scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center"> <table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
<!-- 双层表头 --> <!-- 双层表头 -->
<thead> <thead>
<!-- 第一行：跨列合并 --> <!-- 第一行：跨列合并 -->
@ -92,10 +92,11 @@ export default {
overflow: auto; overflow: auto;
} }
table { table {
border-collapse: collapse;
width: 100%; width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular'; font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px; font-size: 11px;
border-collapse: separate !important;
border-spacing: 0 5px;
} }
th, th,

5
src/views/screen/wsScreen/components/right/index.vue
View File

@ -123,6 +123,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.right-warp { .right-warp {
/* margin-right: 47px; */
width: 548px;
height: calc(100vh - 79px); height: calc(100vh - 79px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -134,7 +136,8 @@ export default {
padding-top: 10px; padding-top: 10px;
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

BIN
src/views/screen/wsScreen/img/equipmentOverviewData.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/views/screen/wsScreen/img/item-line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/views/screen/wsScreen/img/单位装备配置.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/views/screen/wsScreen/img/装备总览.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/views/screen/wsScreen/img/装备状态.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

20
src/views/screen/wsScreen/index.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div id="index" ref="appRef"> <div id="index" ref="appRef">
<div class="bg" id="app"> <div class="bg" id="app">
<el-row :gutter="20"> <!-- <left />
<center />
<right /> -->
<el-row :gutter="0">
<el-col :span="7" :offset="0"><left /></el-col> <el-col :span="7" :offset="0"><left /></el-col>
<el-col :span="10" :offset="0"><center /></el-col> <el-col :span="10" :offset="0"><center /></el-col>
<el-col :span="7" :offset="0"><right /></el-col> <el-col :span="7" :offset="0"><right /></el-col>
@ -42,12 +45,16 @@ export default {
font-family: 'Alibaba-PuHuiTi-Regular'; font-family: 'Alibaba-PuHuiTi-Regular';
src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf'); src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf');
} }
@font-face {
font-family: 'DIN';
src: url('../../../assets/font-family/DIN/DIN-Medium.otf');
}
#index { #index {
color: #d3d6dd; color: #d3d6dd;
width: 100%; /* width: 100%;
height: 100%; height: 100%; */
/* width: 1920px; width: 1920px;
height: 1080px; */ height: 1080px;
/* position: absolute; */ /* position: absolute; */
/* top: 50%; /* top: 50%;
left: 50%; left: 50%;
@ -61,7 +68,8 @@ export default {
.bg { .bg {
/* width: 100vw; /* width: 100vw;
height: 100vh; */ height: 100vh; */
padding: 79px 2% 0 2%; /* padding: 79px 2% 0 2%; */
padding-top: 79px;
} }
} }
</style> </style>

3
src/views/screen/wsScreenWidescreen/components/left/index.vue
View File

@ -221,7 +221,8 @@ export default {
padding-top: 8px; padding-top: 8px;
padding-left: 40px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

3
src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
View File

@ -150,7 +150,8 @@ export default {
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
.title-text { .title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

3
src/views/screen/wsScreenWidescreen/components/right/index.vue
View File

@ -134,7 +134,8 @@ export default {
padding-top: 10px; padding-top: 10px;
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;