Browse Source

修改提交

wangqin
Joe 1 year ago
parent
commit
7f2ab71aec
  1. 406
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

406
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="mask">
<transition> <transition>
<div v-if="visible" class="dialog_info"> <div v-if="visible" class="dialog_info">
<div class="dialog_info_left"> <div class="dialog_info_left">
@ -11,21 +11,21 @@
<div class="dialogContent"> <div class="dialogContent">
<div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;"> <div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;">
<vuescroll :ops="scrollOptions" class="templateBox"> <vuescroll :ops="scrollOptions" class="templateBox">
<div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem"> <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
<!-- 模板内容 --> <!-- 模板内容 -->
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview> <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="infoBtnBox"> <div class="infoBtnBox">
<el-tooltip content="编辑" placement="top"> <el-tooltip content="编辑" placement="top">
<p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p> <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
</el-tooltip> </el-tooltip>
<el-tooltip content="删除" placement="top"> <el-tooltip content="删除" placement="top">
<p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p> <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
</el-tooltip> </el-tooltip>
</div>
</div> </div>
</div>
</vuescroll> </vuescroll>
</div> </div>
<div v-else class="dialogContent_box" style="height: 100%;"> <div v-else class="dialogContent_box" style="height: 100%;">
<div class="dialogContent_box_empty">暂无数据</div> <div class="dialogContent_box_empty">暂无数据</div>
@ -65,26 +65,26 @@
<!-- 信息模板 --> <!-- 信息模板 -->
<div v-if="isShowTemplate" class="dialog_info_right"> <div v-if="isShowTemplate" class="dialog_info_right">
<vuescroll :ops="scrollOptions" class="templateBox"> <vuescroll :ops="scrollOptions" class="templateBox">
<div v-for="(item, index) in templateAvailable" :key="item.dictValue"> <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
<!-- 原来是<el-collapse v-model="activeNames"> --> <!-- 原来是<el-collapse v-model="activeNames"> -->
<h3>{{ item.dictLabel }}</h3> <h3>{{ item.dictLabel }}</h3>
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem"> <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
<!-- 模板内容 --> <!-- 模板内容 -->
<BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview> <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
<!-- <div class="infoPreview"> <!-- <div class="infoPreview">
<div class="infoBox" :style="____boardBgStyle"> <div class="infoBox" :style="____boardBgStyle">
<span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span> <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
</div> </div>
</div> --> </div> -->
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="infoBtnBox"> <div class="infoBtnBox">
<el-tooltip content="加入待下发信息" placement="top"> <el-tooltip content="加入待下发信息" placement="top">
<p @click="____onAddToDevice(itm)" class="btn btnApply"></p> <p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
</el-tooltip> </el-tooltip>
</div>
</div> </div>
</div> </div>
</vuescroll> </div>
</vuescroll>
</div> </div>
@ -141,7 +141,7 @@
</transition> </transition>
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
:visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor> :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
<!-- 情报板弹框中的弹框 --> <!-- 情报板弹框中的弹框 -->
<addBoard ref="addinfo" @addInfo="addInfo" /> <addBoard ref="addinfo" @addInfo="addInfo" />
@ -167,7 +167,7 @@ import { getTemplateList } from '@/api/board/template'
export default { export default {
name: 'InfoBoard', name: 'InfoBoard',
data(){ data() {
return { return {
dialogTit: '门架式可变信息标志YK16+270', dialogTit: '门架式可变信息标志YK16+270',
isShowTemplate: false, isShowTemplate: false,
@ -192,26 +192,26 @@ export default {
{ id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }, { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
{ id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] } { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }
], ],
activeNames:[1001 , 1002], activeNames: [1001, 1002],
activeTab:"first", activeTab: "first",
moBanDataList: [{ moBanDataList: [{
dictCode: 1001, dictCode: 1001,
dictLabel: "日常通用", dictLabel: "日常通用",
mbList: [ mbList: [
{ {
id: 3001, id: 3001,
screenSize: "200*80", screenSize: "200*80",
tcontents: [ tcontents: [
{ {
content: "谨慎驾驶 注意安全", content: "谨慎驾驶 注意安全",
formatStyle: 0, formatStyle: 0,
fontSize:"24", fontSize: "24",
fontType:"微软雅黑", fontType: "微软雅黑",
fontColor:"0000FF" fontColor: "0000FF"
} }
] ]
} }
] ]
}, { }, {
dictCode: 1002, dictCode: 1002,
dictLabel: "施工管理", dictLabel: "施工管理",
@ -261,10 +261,10 @@ export default {
{ id: 5002, txt: '光圈', numL: 16, numR: 15 }, { id: 5002, txt: '光圈', numL: 16, numR: 15 },
{ id: 5003, txt: '聚焦', numL: 14, numR: 13 } { id: 5003, txt: '聚焦', numL: 14, numR: 13 }
], ],
showEmit:false, showEmit: false,
selectedBdMsg:[], selectedBdMsg: [],
selectedSize:"", selectedSize: "",
editDialog: { editDialog: {
mode: "", mode: "",
type: "", type: "",
@ -272,22 +272,22 @@ export default {
tpl: {} tpl: {}
}, },
scrollOptions, scrollOptions,
templateAvailable:null, templateAvailable: null,
tplCategory: [], // tplCategory: [], //
templateAll:[] templateAll: []
} }
}, },
props:{ props: {
visible:{ visible: {
type:Boolean, type: Boolean,
default:false default: false
}, },
device: { device: {
type:Object, type: Object,
default:null default: null
} }
}, },
watch:{ watch: {
device: { device: {
handler(newV) { handler(newV) {
this.____getDeviceInfo(); this.____getDeviceInfo();
@ -295,13 +295,13 @@ export default {
immediate: false immediate: false
} }
}, },
components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll}, components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll },
created() { created() {
this.____getTemplateCategory(); this.____getTemplateCategory();
this.____getAllTemplate(); this.____getAllTemplate();
// this.getTemplateSeries(); // this.getTemplateSeries();
}, },
computed:{ computed: {
}, },
mounted() { mounted() {
// //
@ -318,7 +318,7 @@ export default {
] ]
}, },
methods: { methods: {
// //
____getTemplateCategory() { ____getTemplateCategory() {
return this.getDicts('iot_template_category').then(res => { return this.getDicts('iot_template_category').then(res => {
this.tplCategory = res.data; this.tplCategory = res.data;
@ -331,7 +331,7 @@ export default {
}); });
}, },
____getDeviceInfo(){ ____getDeviceInfo() {
this.selectedSize = JSON.parse(this.device.otherConfig).screenSize; this.selectedSize = JSON.parse(this.device.otherConfig).screenSize;
this.____setAvailableTemplate(); this.____setAvailableTemplate();
@ -399,7 +399,7 @@ export default {
} }
}, },
____refreshPageData(para){}, ____refreshPageData(para) { },
// //
@ -424,8 +424,8 @@ export default {
let arr = node.screenSize.split("*"); let arr = node.screenSize.split("*");
let scale = this.getScrollSz(+arr[0]); let scale = this.getScrollSz(+arr[0]);
let obj = { let obj = {
'width':`${+arr[0] / scale}px`, 'width': `${+arr[0] / scale}px`,
'height':`${+arr[1] / scale}px`, 'height': `${+arr[1] / scale}px`,
'justify-content': this.getTextAlign(node.tcontents[0].formatStyle) 'justify-content': this.getTextAlign(node.tcontents[0].formatStyle)
} }
return obj; return obj;
@ -434,34 +434,34 @@ export default {
let fSize = +node.tcontents[0].fontSize; let fSize = +node.tcontents[0].fontSize;
let scale = this.getScrollSz(fSize); let scale = this.getScrollSz(fSize);
let obj = { let obj = {
'font-size': `${fSize/scale}px`, 'font-size': `${fSize / scale}px`,
'color': '#' + node.tcontents[0].fontColor, 'color': '#' + node.tcontents[0].fontColor,
'font-family': node.tcontents[0].fontType 'font-family': node.tcontents[0].fontType
} }
return obj; return obj;
}, },
// //
boardDataConvert(origin){ boardDataConvert(origin) {
let rst = origin.map(item => { let rst = origin.map(item => {
return { return {
...item, ...item,
STAY: item.playbackDuration, STAY: item.playbackDuration,
inScreenMode: item.screenEntryMethod, inScreenMode: item.screenEntryMethod,
screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight, screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
tcontents: [ tcontents: [
{ {
...item, ...item,
fontSpacing: item.fontSpacing, fontSpacing: item.fontSpacing,
fontSize: parseInt(item.fontSize.replace(/\D/g, '')), fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
fontType: item.font, fontType: item.font,
fontColor: item.foregroundColor.toUpperCase(), fontColor: item.foregroundColor.toUpperCase(),
formatStyle: item.horizontalAlignment, formatStyle: item.horizontalAlignment,
STAY: item.playbackDuration / 10, STAY: item.playbackDuration / 10,
content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n') content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
} }
] ]
} }
}); });
return rst; return rst;
}, },
// //
@ -872,93 +872,96 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.templateBox { .templateBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
.tplItem {
margin-right: 14px;
display: flex;
align-items: stretch;
padding-bottom: 10px;
.boardPreview {
border: 2px solid #004c64;
// width: 560px;
// height:80px;
flex: 1;
}
.infoBtnBox { .tplItem {
width: 160px; margin-right: 14px;
height: 80px; display: flex;
display: flex; align-items: stretch;
margin-left: 10px; padding-bottom: 10px;
/* // border: solid 1px #05afe3; */
border: 2px solid #004c64; .boardPreview {
display: flex; border: 2px solid #004c64;
justify-content: space-around; // width: 560px;
align-items: center; // height:80px;
flex: 1;
.btn { }
background-repeat: no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
&.btnApply {
background-image: url(~@/assets/jihe/images/button/toLeft.png);
}
&.btnEdit { .infoBtnBox {
background-image: url(~@/assets/jihe/images/button/edit.png); width: 160px;
} height: 80px;
display: flex;
margin-left: 10px;
/* // border: solid 1px #05afe3; */
border: 2px solid #004c64;
display: flex;
justify-content: space-around;
align-items: center;
.btn {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
&.btnApply {
background-image: url(~@/assets/jihe/images/button/toLeft.png);
}
&.btnDelete { &.btnEdit {
background-image: url(~@/assets/jihe/images/button/delete.png); background-image: url(~@/assets/jihe/images/button/edit.png);
} }
}
i { &.btnDelete {
font-size: 24px; background-image: url(~@/assets/jihe/images/button/delete.png);
color: #666; }
padding-left: 4px; }
cursor: pointer;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
}
i:hover { i {
color: #05afe3; font-size: 24px;
} color: #666;
padding-left: 4px;
cursor: pointer;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
}
.disabledClass { i:hover {
pointer-events: none; color: #05afe3;
cursor: auto !important; }
color: #ccc;
}
}
} .disabledClass {
pointer-events: none;
cursor: auto !important;
color: #ccc;
}
}
.controlBox { }
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.el-collapse { .controlBox {
max-height: 100% !important; margin-top: 10px;
overflow: auto; margin-bottom: 10px;
border-bottom: none; display: flex;
border-top: none; justify-content: center;
padding: 0 0.5vw; }
}
} .el-collapse {
max-height: 100% !important;
overflow: auto;
border-bottom: none;
border-top: none;
padding: 0 0.5vw;
}
}
.mask {
width: 100%;
height: 100%;
position: fixed;
}
.map_dialog { .map_dialog {
width: 510px; width: 510px;
@ -969,6 +972,7 @@ export default {
top: 0px; top: 0px;
transform: translate(-110%, -110%); transform: translate(-110%, -110%);
} }
.dialog_info { .dialog_info {
width: 950px; width: 950px;
height: 600px; height: 600px;
@ -980,11 +984,13 @@ export default {
justify-content: space-around; justify-content: space-around;
align-items: flex-end; align-items: flex-end;
} }
.dialog_info_left { .dialog_info_left {
width: 510px; width: 510px;
height: 100%; height: 100%;
background-color: #114c66; background-color: #114c66;
} }
.dialog_info_right { .dialog_info_right {
width: 430px; width: 430px;
height: 556px; height: 556px;
@ -994,6 +1000,7 @@ export default {
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
} }
.dialog_head { .dialog_head {
width: 100%; width: 100%;
height: 48px; height: 48px;
@ -1006,15 +1013,18 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.tit { .tit {
color: #3de8ff; color: #3de8ff;
font-size: 18px; font-size: 18px;
} }
.btnCls { .btnCls {
width: 13px; width: 13px;
height: 13px; height: 13px;
cursor: pointer; cursor: pointer;
} }
.deco { .deco {
width: 55%; width: 55%;
height: 5px; height: 5px;
@ -1023,17 +1033,20 @@ export default {
top: 0; top: 0;
} }
} }
.dialogContent { .dialogContent {
width: 100%; width: 100%;
height: 300px; height: 300px;
padding: 10px 40px 10px 10px; padding: 10px 40px 10px 10px;
position: relative; position: relative;
} }
.dialogContent_box { .dialogContent_box {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
.dialogContent_l { .dialogContent_l {
width: 355px; width: 355px;
// height: 4.91vh; // height: 4.91vh;
@ -1043,6 +1056,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.dialogContent_r { .dialogContent_r {
width: 96px; width: 96px;
// height: 4.91vh; // height: 4.91vh;
@ -1051,6 +1065,7 @@ export default {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.dialogContent_l_xsq { .dialogContent_l_xsq {
width: 256px; width: 256px;
height: 100%; height: 100%;
@ -1069,33 +1084,39 @@ export default {
height: 2.96vh; height: 2.96vh;
cursor: pointer; cursor: pointer;
} }
.dialogContent_r_btn1 { .dialogContent_r_btn1 {
background-image: url('~@/assets/screen/xtb/gg.png'); background-image: url('~@/assets/screen/xtb/gg.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.dialogContent_r_btn2 { .dialogContent_r_btn2 {
background-image: url('~@/assets/screen/xtb/xx.png'); background-image: url('~@/assets/screen/xtb/xx.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.dialogContent_r_btn3 { .dialogContent_r_btn3 {
background-image: url('~@/assets/screen/xtb/zz.png'); background-image: url('~@/assets/screen/xtb/zz.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.dialogContent_box_item { .dialogContent_box_item {
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.dialogContent_bottom { .dialogContent_bottom {
width: 105%; width: 105%;
height: 16.52vh; height: 16.52vh;
} }
.show_bottom_tab_item { .show_bottom_tab_item {
width: 50%; width: 50%;
padding: 0.5vh 0; padding: 0.5vh 0;
@ -1103,21 +1124,25 @@ export default {
// flex-wrap: wrap; // flex-wrap: wrap;
// align-items: center; // align-items: center;
} }
.show_bottom_tab_box { .show_bottom_tab_box {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
.show_bottom_tab_item_l { .show_bottom_tab_item_l {
color: #3de8ff; color: #3de8ff;
font-size: 14px; font-size: 14px;
} }
.show_bottom_tab_item_r { .show_bottom_tab_item_r {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
margin-left: 0.5vw; margin-left: 0.5vw;
} }
.sideSwitch { .sideSwitch {
position: absolute; position: absolute;
right: 0%; right: 0%;
@ -1130,31 +1155,38 @@ export default {
opacity: 1; opacity: 1;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
.img { .img {
width: 15px; width: 15px;
height: 10px; height: 10px;
border: none; border: none;
transition: transform 0.3s ease; /* 过渡效果 */ transition: transform 0.3s ease;
/* 过渡效果 */
} }
.txt { .txt {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
} }
} }
.dialogContent_box_empty { .dialogContent_box_empty {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.dialog_info_right_tit { .dialog_info_right_tit {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
} }
.dialog_info_right_show { .dialog_info_right_show {
width: 100%; width: 100%;
// height: 28vh; // height: 28vh;
} }
.dialogContent_bottom_btn { .dialogContent_bottom_btn {
width: 100%; width: 100%;
height: 5vh; height: 5vh;
@ -1163,6 +1195,7 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.show_bottom_btn_add { .show_bottom_btn_add {
width: 90px; width: 90px;
height: 23px; height: 23px;
@ -1175,6 +1208,7 @@ export default {
margin-right: 0.5vw; margin-right: 0.5vw;
cursor: pointer; cursor: pointer;
} }
.show_bottom_btn_del { .show_bottom_btn_del {
width: 90px; width: 90px;
height: 23px; height: 23px;
@ -1186,31 +1220,37 @@ export default {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.info_right_camera { .info_right_camera {
width: 100%; width: 100%;
height: calc(100% - 4vh); height: calc(100% - 4vh);
padding: 1vh 0.5vw; padding: 1vh 0.5vw;
} }
.info_right_camera_top { .info_right_camera_top {
width: 100%; width: 100%;
height: 20vh; height: 20vh;
} }
.info_right_camera_bom { .info_right_camera_bom {
width: 100%; width: 100%;
padding: 1vh 0; padding: 1vh 0;
height: calc(100% - 20vh); height: calc(100% - 20vh);
display: flex; display: flex;
} }
.camera_bom_left { .camera_bom_left {
width: 50%; width: 50%;
height: 100%; height: 100%;
padding: 2vh 0; padding: 2vh 0;
border-right: 1px dashed #285a71; border-right: 1px dashed #285a71;
} }
.camera_bom_right { .camera_bom_right {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
.camera_bom_left_item { .camera_bom_left_item {
width: 100%; width: 100%;
color: #fff; color: #fff;
@ -1218,24 +1258,29 @@ export default {
font-size: 14px; font-size: 14px;
padding-bottom: 1.5vh; padding-bottom: 1.5vh;
} }
.camera_bom_left_item_txt { .camera_bom_left_item_txt {
width: 31%; width: 31%;
color: #3de8ff; color: #3de8ff;
} }
.camera_bom_left_item_val { .camera_bom_left_item_val {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
} }
.camera_bom_right_t { .camera_bom_right_t {
width: 100%; width: 100%;
height: 60%; height: 60%;
position: relative; position: relative;
} }
.camera_bom_right_b { .camera_bom_right_b {
width: 100%; width: 100%;
height: 40%; height: 40%;
// background-color: deeppink; // background-color: deeppink;
} }
.camera_bom_right_t_box { .camera_bom_right_t_box {
width: 2vw; width: 2vw;
height: 4vh; height: 4vh;
@ -1247,6 +1292,7 @@ export default {
border-radius: 50%; border-radius: 50%;
border: 1px solid #2191b1; border: 1px solid #2191b1;
} }
.camera_bom_right_t_h_po { .camera_bom_right_t_h_po {
width: 1vw; width: 1vw;
height: 5vh; height: 5vh;
@ -1259,12 +1305,14 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.camera_bom_right_b_btn { .camera_bom_right_b_btn {
width: 100%; width: 100%;
padding: 0vh 2vw 1vh 2vw; padding: 0vh 2vw 1vh 2vw;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.camera_bom_right_b_btn_l { .camera_bom_right_b_btn_l {
width: 1.2vw; width: 1.2vw;
height: 2.4vh; height: 2.4vh;
@ -1275,9 +1323,11 @@ export default {
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
} }
.camera_bom_right_b_btn_c { .camera_bom_right_b_btn_c {
color: #fff; color: #fff;
} }
.camera_bom_right_b_btn_r { .camera_bom_right_b_btn_r {
width: 1.2vw; width: 1.2vw;
height: 2.4vh; height: 2.4vh;
@ -1288,6 +1338,7 @@ export default {
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
} }
// background-color: #104b65; // background-color: #104b65;
// background-image: url('~@/assets/screen/xtb/qbbtit.png'); // background-image: url('~@/assets/screen/xtb/qbbtit.png');
// background-size: 100% 100%; // background-size: 100% 100%;
@ -1296,18 +1347,24 @@ export default {
/* 通用滚动条样式 */ /* 通用滚动条样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 3px; /* 设置滚动条宽度 */ width: 3px;
height: 3px; /* 设置滚动条高度 */ /* 设置滚动条宽度 */
height: 3px;
/* 设置滚动条高度 */
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #114c66; /* 设置滚动条轨道颜色 */ background-color: #114c66;
/* 设置滚动条轨道颜色 */
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #9abce0; /* 设置滚动条滑块颜色 */ background-color: #9abce0;
border-radius: 4px; /* 设置滚动条滑块圆角 */ /* 设置滚动条滑块颜色 */
border-radius: 4px;
/* 设置滚动条滑块圆角 */
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: #316076; background-color: #316076;
} }
@ -1315,12 +1372,15 @@ export default {
::v-deep .el-tabs__item.is-active { ::v-deep .el-tabs__item.is-active {
color: #3de8ff !important; color: #3de8ff !important;
} }
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
color: #fff !important; color: #fff !important;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
background-color: #3de8ff !important; background-color: #3de8ff !important;
} }
::v-deep .el-collapse-item__header { ::v-deep .el-collapse-item__header {
color: #fff; color: #fff;
height: 28px; height: 28px;
@ -1328,10 +1388,12 @@ export default {
border: none; border: none;
padding-left: 0.5vw; padding-left: 0.5vw;
} }
::v-deep .el-collapse { ::v-deep .el-collapse {
color: #fff; color: #fff;
border: none; border: none;
} }
::v-deep .el-collapse-item__wrap { ::v-deep .el-collapse-item__wrap {
color: #fff; color: #fff;
will-change: height; will-change: height;
@ -1342,17 +1404,21 @@ export default {
margin-top: 0.5vh; margin-top: 0.5vh;
border: none; border: none;
} }
::v-deep .el-collapse-item__content { ::v-deep .el-collapse-item__content {
margin-bottom: 0; margin-bottom: 0;
padding: 0.5vh 0.5vw; padding: 0.5vh 0.5vw;
} }
::v-deep .el-collapse-item { ::v-deep .el-collapse-item {
margin-bottom: 1vh; margin-bottom: 1vh;
} }
::v-deep .el-input--mini .el-input__icon { ::v-deep .el-input--mini .el-input__icon {
line-height: 20px; line-height: 20px;
color: #fff; color: #fff;
} }
::v-deep .el-input--mini .el-input__inner { ::v-deep .el-input--mini .el-input__inner {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;

Loading…
Cancel
Save