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-25 16:58:29 +08:00
parent 8735684339
commit a83740afac
12 changed files with 414 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/wsScreen/index.js
View File

@ -199,3 +199,12 @@ export const getEquipmentDetailsApi = (data = {}) => {
params: data, params: data,
}) })
} }
// 电压等级
export const getVoltageLevelApi = (data = {}) => {
return request({
url: '/material-mall/decChange/getVoltageLevel',
method: 'post',
data: data,
})
}

16
src/views/screen/cityScreen-old/components/engineerUsing/index.vue
View File

@ -83,6 +83,7 @@
<script> <script>
import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen"; import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen";
import { getUsageStatisticsApi } from '@/api/wsScreen'
export default { export default {
data() { data() {
@ -130,13 +131,14 @@ export default {
console.log(response,'getVoltageLevelApi') console.log(response,'getVoltageLevelApi')
if(response.code==200){ if(response.code==200){
if(response.data&&response.data.length>0){ if(response.data&&response.data.length>0){
response.data.forEach(item=>{ // response.data.forEach(item=>{
let obj = { // let obj = {
label:item.voltage+'kV', // label:item.voltage+'kV',
value:item.voltage // value:item.voltage
} // }
this.options.push(obj) // this.options.push(obj)
}) // })
this.options = response.data
// this.$set(this,'selectId',response.data[0].voltage) // this.$set(this,'selectId',response.data[0].voltage)
} }
} }

15
src/views/screen/cityScreen/components/engineerUsing/index.vue
View File

@ -134,13 +134,14 @@ export default {
console.log(response, 'getVoltageLevelApi') console.log(response, 'getVoltageLevelApi')
if (response.code == 200) { if (response.code == 200) {
if (response.data && response.data.length > 0) { if (response.data && response.data.length > 0) {
response.data.forEach((item) => { // response.data.forEach((item) => {
let obj = { // let obj = {
label: item.voltage + 'kV', // label: item.voltage + 'kV',
value: item.voltage // value: item.voltage
} // }
this.options.push(obj) // this.options.push(obj)
}) // })
this.options = response.data
// this.$set(this,'selectId',response.data[0].voltage) // this.$set(this,'selectId',response.data[0].voltage)
} }
} }

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

@ -5,16 +5,18 @@
<div class="more more-warp"> <div class="more more-warp">
<div> <div>
<el-select <el-select
v-model="proCode" v-model="proCodeList"
placeholder="" placeholder=""
clearable clearable
multiple
collapse-tags
filterable filterable
size="mini" size="mini"
:popper-append-to-body="false" :popper-append-to-body="false"
@change="getList" @change="changeProCode"
style="width: 120px" style="width: 130px"
> >
<el-option v-for="(item, index) in options" :key="index" :label="item.proName" :value="item.proCode" /> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
<!-- <div style="margin-left: 15px" @click="openDialog">更多 ></div> --> <!-- <div style="margin-left: 15px" @click="openDialog">更多 ></div> -->
@ -83,12 +85,13 @@
</template> </template>
<script> <script>
import { getEquipmentUseApi } from '@/api/wsScreen' import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out' import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
export default { export default {
data() { data() {
return { return {
proCodeList: [],
proCode: '', proCode: '',
options: [], options: [],
proNum: 0, proNum: 0,
@ -123,12 +126,16 @@ export default {
}, },
async getProList() { async getProList() {
try { try {
const res = await getUseProjectListAPI() const res = await getVoltageLevelApi()
this.options = res.data this.options = res.data
} catch (error) { } catch (error) {
console.log('🚀 ~ error:', error) console.log('🚀 ~ error:', error)
} }
}, },
changeProCode(val) {
this.proCode = val.length > 0 ? val.join(',') : ''
this.getList()
},
openDialog() { openDialog() {
this.$emit('openDialog') this.$emit('openDialog')
}, },
@ -303,7 +310,7 @@ thead {
background-image: url('../../img/tableHeader.png'); background-image: url('../../img/tableHeader.png');
background-size: 100% 100%; background-size: 100% 100%;
font-size: 13px; font-size: 13px;
color: #7BBBF8; color: #7bbbf8;
} }
tbody tr { tbody tr {
@ -317,25 +324,32 @@ tbody tr:hover {
} }
::v-deep .el-select .el-input__inner { ::v-deep .el-select .el-input__inner {
background-color: #0C1837 !important ; background-color: #0c1837 !important ;
color: #fff !important; color: #fff !important;
} }
::v-deep .el-select-dropdown { ::v-deep .el-select-dropdown {
background-color: #0C1837 !important; background-color: #0c1837 !important;
left: -300px !important; /* left: -300px !important;
width: 400px !important; width: 400px !important; */
height: 180px !important; height: 180px !important;
border: 1px solid #0C1837 !important; border: 1px solid #0c1837 !important;
overflow: hidden; overflow: hidden;
} }
::v-deep .el-scrollbar { ::v-deep .el-scrollbar {
height: 184px !important; height: 184px !important;
background-color: #0c1837 !important;
} }
::v-deep .el-select-dropdown__item { ::v-deep .el-select-dropdown__item {
color: #fff !important; color: #fff !important;
} }
::v-deep .el-select-dropdown__item.hover, ::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
background: #0C1837 !important; background: #0c1837 !important;
}
::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: #28406c !important;
}
::v-deep .el-select__tags {
flex-wrap: nowrap !important;
} }
</style> </style>

2
src/views/screen/wsScreenWidescreen/components/center/index.vue
View File

@ -419,7 +419,7 @@ export default {
console.log('🚀 ~ initChart ~ this.$router:', this.$router) console.log('🚀 ~ initChart ~ this.$router:', this.$router)
this.$router.push({ this.$router.push({
path: '/screen/cityScreen', path: '/screen/cityWidescreen',
query: { query: {
cityName: city, cityName: city,
}, },

106
src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue
View File

@ -28,6 +28,7 @@
v-model="queryParams.deptName" v-model="queryParams.deptName"
placeholder="请选择" placeholder="请选择"
clearable clearable
:popper-append-to-body="false"
style="width: 240px" style="width: 240px"
@change="changeDept" @change="changeDept"
> >
@ -35,7 +36,13 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="产权单位" prop="propertyUnit"> <el-form-item label="产权单位" prop="propertyUnit">
<el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px"> <el-select
v-model="queryParams.propertyUnit"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option <el-option
v-for="item in companyNameList" v-for="item in companyNameList"
:key="item.deptId" :key="item.deptId"
@ -49,6 +56,7 @@
v-model="queryParams.major" v-model="queryParams.major"
placeholder="请选择" placeholder="请选择"
clearable clearable
:popper-append-to-body="false"
style="width: 240px" style="width: 240px"
@change="changeProType" @change="changeProType"
> >
@ -57,6 +65,7 @@
</el-form-item> </el-form-item>
<el-form-item label="装备类目" prop="deviceSeries"> <el-form-item label="装备类目" prop="deviceSeries">
<el-cascader <el-cascader
popper-class="my-cas"
v-model="deviceSeries" v-model="deviceSeries"
:options="deviceSeriesList" :options="deviceSeriesList"
clearable clearable
@ -77,12 +86,24 @@
<el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" /> <el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
</el-form-item> </el-form-item>
<el-form-item label="装备状态" prop="changeStatus"> <el-form-item label="装备状态" prop="changeStatus">
<el-select v-model="queryParams.changeStatus" placeholder="请选择" clearable style="width: 240px"> <el-select
v-model="queryParams.changeStatus"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所在项目" prop="onProject"> <el-form-item label="所在项目" prop="onProject">
<el-select v-model="queryParams.onProject" placeholder="请选择" clearable style="width: 240px"> <el-select
v-model="queryParams.onProject"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option <el-option
v-for="item in onProjectList" v-for="item in onProjectList"
:key="item.proCode" :key="item.proCode"
@ -99,6 +120,7 @@
</el-form-item> </el-form-item>
<el-form-item label="出厂日期" prop="productionDate"> <el-form-item label="出厂日期" prop="productionDate">
<el-date-picker <el-date-picker
popper-class="my-date"
v-model="queryParams.productionDate" v-model="queryParams.productionDate"
type="date" type="date"
placeholder="请选择" placeholder="请选择"
@ -109,7 +131,13 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="使用年限" prop="maxServiceLifeYears"> <el-form-item label="使用年限" prop="maxServiceLifeYears">
<el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable style="width: 240px"> <el-select
v-model="queryParams.maxServiceLifeYears"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -118,6 +146,7 @@
</el-form-item> </el-form-item>
<el-form-item label="下次检测日期" prop="nextMaintenanceDate"> <el-form-item label="下次检测日期" prop="nextMaintenanceDate">
<el-date-picker <el-date-picker
popper-class="my-date"
v-model="queryParams.nextMaintenanceDate" v-model="queryParams.nextMaintenanceDate"
type="date" type="date"
placeholder="请选择" placeholder="请选择"
@ -464,6 +493,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }
@ -535,6 +599,22 @@ export default {
::v-deep .el-pagination.is-background .btn-next { ::v-deep .el-pagination.is-background .btn-next {
background-color: rgba(16, 37, 81, 0.5); background-color: rgba(16, 37, 81, 0.5);
} }
::v-deep .el-select-dropdown {
background-color: #0c1837 !important;
border: 1px solid #0c1837 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
// -- // --
.btn { .btn {
@ -578,3 +658,21 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.my-cas {
background-color: #0c1837 !important;
}
.my-cas .el-cascader-menu {
color: #fff !important;
}
.my-cas .el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus {
background-color: #0c1837 !important;
}
.my-date {
background-color: #0c1837 !important;
}
.my-date .el-picker-panel {
color: #fff !important;
}
</style>

53
src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue
View File

@ -16,7 +16,7 @@
<!-- 表单 --> <!-- 表单 -->
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent> <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px"> <el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -191,6 +191,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }
@ -262,6 +297,22 @@ export default {
::v-deep .el-pagination.is-background .btn-next { ::v-deep .el-pagination.is-background .btn-next {
background-color: rgba(16, 37, 81, 0.5); background-color: rgba(16, 37, 81, 0.5);
} }
::v-deep .el-select-dropdown {
background-color: #0c1837 !important;
border: 1px solid #0c1837 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
// -- // --
.btn { .btn {

35
src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue
View File

@ -104,6 +104,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }

35
src/views/screen/wsScreenWidescreen/components/right/EquipUsageRateMore.vue
View File

@ -95,6 +95,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }

35
src/views/screen/wsScreenWidescreen/components/right/ProEquipMore.vue
View File

@ -123,6 +123,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }

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

@ -4,8 +4,19 @@
<div class="small_title">工程在用装备情况</div> <div class="small_title">工程在用装备情况</div>
<div class="more more-warp"> <div class="more more-warp">
<div> <div>
<el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList"> <el-select
<el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" /> v-model="proCodeList"
placeholder=""
clearable
multiple
collapse-tags
filterable
size="mini"
:popper-append-to-body="false"
@change="changeProCode"
style="width: 180px"
>
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
<div style="margin-left: 50px" @click="openDialog">更多 ></div> <div style="margin-left: 50px" @click="openDialog">更多 ></div>
@ -14,7 +25,16 @@
<div> <div>
<div class="topView"> <div class="topView">
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between;margin-bottom:20px"> <div
style="
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
"
>
<div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">线路</div> <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">线路</div>
<div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div> <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
<div :class="tabIndex == 1 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(1)">电缆</div> <div :class="tabIndex == 1 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(1)">电缆</div>
@ -22,10 +42,10 @@
<div> <div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" :offset="0" style="width: 170px"> <el-col :span="12" :offset="0" style="width: 170px">
<div style="display: flex; text-align: center;"> <div style="display: flex; text-align: center">
<img src="../../img/icon3.png" class="icon" /> <img src="../../img/icon3.png" class="icon" />
<div> <div>
<div style="color: #ccc; font-size: 12px; margin-top: 10px;">项目数（个）</div> <div style="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
<div class="num-y" style="font-size: 16px; font-weight: 800">{{ proNum }}</div> <div class="num-y" style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
</div> </div>
</div> </div>
@ -74,12 +94,13 @@
</template> </template>
<script> <script>
import { getEquipmentUseApi } from '@/api/wsScreen' import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out' import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
export default { export default {
data() { data() {
return { return {
proCodeList: [],
proCode: '', proCode: '',
options: [], options: [],
proNum: 0, proNum: 0,
@ -101,7 +122,7 @@ export default {
try { try {
const params = { const params = {
type: this.tabIndex, type: this.tabIndex,
proCode: this.proCode proCode: this.proCode,
} }
const res = await getEquipmentUseApi(params) const res = await getEquipmentUseApi(params)
this.tableData = res.data.equipmentUse || [] this.tableData = res.data.equipmentUse || []
@ -111,12 +132,16 @@ export default {
}, },
async getProList() { async getProList() {
try { try {
const res = await getUseProjectListAPI() const res = await getVoltageLevelApi()
this.options = res.data this.options = res.data
} catch (error) { } catch (error) {
console.log('🚀 ~ error:', error) console.log('🚀 ~ error:', error)
} }
}, },
changeProCode(val) {
this.proCode = val.length > 0 ? val.join(',') : ''
this.getList()
},
openDialog() { openDialog() {
this.$emit('openDialog') this.$emit('openDialog')
}, },
@ -172,7 +197,7 @@ export default {
padding-left: 45px; padding-left: 45px;
font-family: DS-TITLE; font-family: DS-TITLE;
.title-text { .title-text {
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%); background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -196,7 +221,7 @@ export default {
margin-left: 10px; margin-left: 10px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%); background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -279,7 +304,6 @@ th,
td { td {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
th { th {
@ -289,7 +313,7 @@ th {
thead { thead {
background-image: url('../../img/tableHeader.png'); background-image: url('../../img/tableHeader.png');
background-size: 100% 100%; background-size: 100% 100%;
color: #7BBBF8; color: #7bbbf8;
} }
tbody tr { tbody tr {
@ -303,7 +327,32 @@ tbody tr:hover {
} }
::v-deep .el-select .el-input__inner { ::v-deep .el-select .el-input__inner {
background-color: #1f4a85 !important ; background-color: #0c1837 !important ;
color: #fff !important; color: #fff !important;
} }
::v-deep .el-select-dropdown {
background-color: #0c1837 !important;
/* left: -300px !important;
width: 400px !important;
height: 180px !important;
border: 1px solid #0c1837 !important;
overflow: hidden; */
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: #28406c !important;
}
::v-deep .el-select__tags {
flex-wrap: nowrap !important;
}
</style> </style>

35
src/views/screen/wsScreenWidescreen/components/right/UsageRateMore.vue
View File

@ -107,6 +107,41 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: transparent !important; background: transparent !important;
} }