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