From cbe76e64e5dc8aedf9ac94d607962ecbf3684575 Mon Sep 17 00:00:00 2001 From: sd <shidong@jhsoft.cc> Date: 星期三, 27 八月 2025 17:56:22 +0800 Subject: [PATCH] 国标配置更新树的勾选状态 --- src/pages/gb28181/index/App.vue | 977 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 485 insertions(+), 492 deletions(-) diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue index 04e3731..7c264b3 100644 --- a/src/pages/gb28181/index/App.vue +++ b/src/pages/gb28181/index/App.vue @@ -1,538 +1,531 @@ <template> - <div class="s-system-manage"> - <div class="s-basic-setting"> - <el-tabs - id="e-basic-setting" - v-model="activeName" - v-loading="loading" - :element-loading-text="loadingText" - type="border-card" - @tab-click="hanleTabClick" - > - <el-tab-pane label="鍥芥爣ID" name="gb28181"> - <div style="width: 775px"> - <!-- GB28181璁剧疆 --> - <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181"> - <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp"> - <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input> - </el-form-item>--> + <div class="s-system-manage"> + <div class="s-basic-setting"> + <el-tabs id="e-basic-setting" v-model="activeName" v-loading="loading" :element-loading-text="loadingText" + type="border-card" @tab-click="hanleTabClick"> + <el-tab-pane label="鍥芥爣ID" name="gb28181"> + <div style="width: 775px"> + <!-- GB28181璁剧疆 --> + <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181"> - <div style="text-align: left;margin-bottom: 16px;"> - <el-radio-group v-model="gb28181.idType"> - <el-radio :label="0">杈撳叆宸叉湁ID</el-radio> - <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio> - </el-radio-group> - </div> + <div style="text-align: left;margin-bottom: 16px;"> + <!-- <el-radio-group v-model="gb28181.idType"> + <el-radio :label="0">杈撳叆宸叉湁ID</el-radio> + <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio> + </el-radio-group> --> + </div> - <el-form-item label="鎵�鍦ㄥ湴"> - <el-select - v-model="locationCity.province" - @change="changeProvince" - size="small" - placeholder="璇烽�夋嫨鐪佷唤" - :disabled="gb28181.idType === 0" - > - <el-option - v-for="item in locationCity.provinceOptions" - :key="item.id" - :label="item.name" - size="small" - :value="item.id" - ></el-option> - </el-select> - <el-select - class="ml10 mr10" - v-model="locationCity.city" - :disabled="!locationCity.province" - @change="changeCity" - size="small" - placeholder="璇烽�夋嫨鍩庡競" - > - <el-option - v-for="item in locationCity.cityOptions" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - <el-select - v-model="locationCity.county" - :disabled="!locationCity.city" - size="small" - placeholder="璇烽�夋嫨鍖哄幙" - > - <el-option - v-for="item in locationCity.countyOptions" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - <el-button type="text" style="position: absolute" v-show="gb28181.idType === 1" @click="newGBID" - >鐢熸垚ID</el-button - > - </el-form-item> + <!-- <el-form-item label="鎵�鍦ㄥ湴"> + <el-select v-model="locationCity.province" @change="changeProvince" size="small" + placeholder="璇烽�夋嫨鐪佷唤" :disabled="gb28181.idType === 0"> + <el-option v-for="item in locationCity.provinceOptions" :key="item.id" + :label="item.name" size="small" :value="item.id"></el-option> + </el-select> + <el-select class="ml10 mr10" v-model="locationCity.city" + :disabled="!locationCity.province" @change="changeCity" size="small" + placeholder="璇烽�夋嫨鍩庡競"> + <el-option v-for="item in locationCity.cityOptions" :key="item.id" + :label="item.name" :value="item.id"></el-option> + </el-select> + <el-select v-model="locationCity.county" :disabled="!locationCity.city" size="small" + placeholder="璇烽�夋嫨鍖哄幙"> + <el-option v-for="item in locationCity.countyOptions" :key="item.id" + :label="item.name" :value="item.id"></el-option> + </el-select> + <el-button type="text" style="position: absolute" v-show="gb28181.idType === 1" + @click="newGBID">鐢熸垚ID</el-button> + </el-form-item> --> - <!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort"> - <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item>--> - <el-form-item label="鍥芥爣ID"> - <el-input - v-model="gb28181.PublicId" - placeholder="璇疯緭鍏�" - size="small" - :disabled="gb28181.idType === 1" - ></el-input> - </el-form-item> - <el-form-item label="鍥芥爣绔彛" prop="GbServerPort"> - <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item> + <el-form-item label="SIP鏈嶅姟鍣↖D"> + <!-- <el-input v-model="gb28181.PublicId" placeholder="璇疯緭鍏�" size="small" + :disabled="gb28181.idType === 1"></el-input> --> + <el-input v-model="gb28181.SipSerial" placeholder="璇疯緭鍏�" size="small" + :disabled="true"></el-input> + </el-form-item> - <el-form-item label="寮�鍚壌鏉�" style="text-align: left"> - <el-switch v-model="gb28181.IsAuth"></el-switch> - </el-form-item> + <el-form-item label="SIP鏈嶅姟鍣ㄥ煙"> + <el-input v-model.number="gb28181.SipRealm" placeholder="璇疯緭鍏�" :disabled="true" + size="small"></el-input> + </el-form-item> - <el-form-item label="閴存潈瀵嗙爜"> - <el-input - v-model="gb28181.Password" - placeholder="璇疯緭鍏�" - size="small" - :disabled="!gb28181.IsAuth" - ></el-input> - </el-form-item> + <!-- <el-form-item label="寮�鍚壌鏉�" style="text-align: left"> + <el-switch v-model="gb28181.IsAuth"></el-switch> + </el-form-item> --> - <el-form-item style="float: right"> - <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> - </el-form-item> - </el-form> - </div> - </el-tab-pane> + <el-form-item label="SIP鏈嶅姟鍣ㄥ湴鍧�"> + <el-input v-model="gb28181.SipHost" placeholder="璇疯緭鍏�" size="small" + :disabled="!gb28181.IsAuth"></el-input> + </el-form-item> + <el-form-item label="SIP鏈嶅姟鍣ㄧ鍙�"> + <el-input v-model="gb28181.SipPort" placeholder="璇疯緭鍏�" size="small" + :disabled="true"></el-input> + </el-form-item> - <el-tab-pane label="鎺ュ叆骞冲彴鍒楄〃" name="subordinates"> - <el-table - :data="subDevTable" - border - fit - highlight-current-row - style="width: 100%; color:#000" - :header-cell-style="{ background: '#f8f8f8', color: '#222222', height: '30px' }" - > - <el-table-column type="index" label="搴忓彿" align="center" width="50"></el-table-column> - <el-table-column prop="name" label="鍚嶇О" align="center"></el-table-column> - <el-table-column prop="publicid" label="ID" align="center"></el-table-column> - <el-table-column prop="ip" label="IP" align="center"></el-table-column> - <el-table-column prop="status" label="鐘舵��" align="center"> - <template slot-scope="scope"> - <span :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;'">{{ - scope.row.alive ? "鍦ㄧ嚎" : "绂荤嚎" - }}</span> - </template> - </el-table-column> - <el-table-column prop="corp" label="澶囨敞" align="center"></el-table-column> - </el-table> - </el-tab-pane> - <el-tab-pane label="鍥芥爣鎽勫儚鏈�" name="cameras"> - <div style="text-align:left"> - <el-button type="primary" size="small" @click="updateCamerasFromVideosvr">鍒锋柊</el-button> - </div> - <div class="camera-title"> - <b>鍥芥爣鎽勫儚鏈洪厤缃�</b> - <span>(鏈�澶氬嬀閫�500璺憚鍍忔満)</span> - </div> - <tree-menu - ref="tree" - app="gb28181" - treeName="localTree" - :node="TreeDataPool.treeData" - :height="treeHeight" - :setting="treeSettings" - style="width:600px;min-height:500px" - /> - <div class="base-image" v-loading="TreeDataPool.baseImageLoading"> - <span>{{ TreeDataPool.cameraNameForBaseImage }}</span> - <div class="camera-image" v-show="TreeDataPool.cameraNameForBaseImage.length"> - <img :src="'data:image/png;base64,' + TreeDataPool.gb28181CameraBaseImage" width="450px" alt /> - </div> - </div> - <el-divider></el-divider> + <el-form-item style="float: right"> + <!-- <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> --> + </el-form-item> + </el-form> + </div> + </el-tab-pane> - <span class="camera-seleted-text"> - 宸查�夋嫨 ( - <b>{{ TreeDataPool.gb28181CheckedCount }}</b> - / {{ TreeDataPool.gb28181ChildNodeCount }} ) 璺� - </span> + <el-tab-pane label="鎺ュ叆骞冲彴鍒楄〃" name="subordinates"> + <el-table :data="subDevTable" border fit highlight-current-row style="width: 100%; color:#000" + :header-cell-style="{ background: '#f8f8f8', color: '#222222', height: '30px' }"> + <el-table-column type="index" label="搴忓彿" align="center" width="50"></el-table-column> + <el-table-column prop="name" label="鍚嶇О" align="center"></el-table-column> + <el-table-column prop="publicid" label="ID" align="center"></el-table-column> + <el-table-column prop="corp" label="绔彛" align="center"></el-table-column> + <el-table-column prop="ip" label="IP" align="center"></el-table-column> + <el-table-column prop="status" label="鐘舵��" align="center"> + <template slot-scope="scope"> + <span :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;'">{{ + scope.row.alive ? "鍦ㄧ嚎" : "绂荤嚎" + }}</span> + </template> + </el-table-column> + </el-table> + </el-tab-pane> + <el-tab-pane label="鍥芥爣鎽勫儚鏈�" name="cameras"> + <div style="text-align:left"> + <el-button type="primary" size="small" @click="updateCamerasFromVideosvr">鍒锋柊</el-button> + </div> + <div class="camera-title"> + <b>鍥芥爣鎽勫儚鏈洪厤缃�</b> + <span>(鏈�澶氬嬀閫�500璺憚鍍忔満)</span> + </div> + <tree-menu ref="tree" app="gb28181" treeName="localTree" :node="treeData" :height="treeHeight" @cehckDataUpload="handleParentMethod" + :setting="treeSettings" style="width:600px;min-height:500px" /> +<!-- <div class="base-image" > + <span>{{ 0 }}</span> + <div class="camera-image"> + <!– <img :src="'data:image/png;base64,' + TreeDataPool?.gb28181CameraBaseImage" width="450px" + alt /> –> + </div> + </div>--> + <el-divider></el-divider> - <el-button type="primary" size="small" @click="saveChecked">淇濆瓨</el-button> - </el-tab-pane> - </el-tabs> + <span class="camera-seleted-text"> + 宸查�夋嫨 ( + <b>{{checkData}}</b> + / {{ totalNode}} ) 璺� + </span> + + <el-button type="primary" size="small" @click="saveChecked">淇濆瓨</el-button> + </el-tab-pane> + </el-tabs> + </div> </div> - </div> </template> <script> -import { - getGB28181Config, - saveGB28181Config, - getGb28181AreaList, - newGb28181ID, - getAllSubServer, - saveGb28181CamTree -} from "./api" +import gb28181 from "@/api/gb28181" -import TreeMenu from "@/components/giantTree/index" +import TreeMenu from "../components/gbZtree.vue" +// import TreeMenu from "@/components/giantTree/index" import { isPort, isIPv4 } from "@/scripts/validate" import bus from "@/plugin/bus" export default { - name: "Gb28181Setting", - components: { - TreeMenu - }, - directives: { - focus: { - inserted: function(el) { - el.querySelector("input").focus() - } - } - }, - - data() { - return { - activeName: "gb28181", - treeHeight: 750, - loading: false, - loadingText: "", - openeds: ["0"], - gb28181: {}, - subDevTable: [], - idType: 1, - treeSettings: { - check: { - enable: true - } - }, - rules: { - ip: [ - { - required: true, - message: "璇疯緭鍏P鍦板潃", - trigger: "change" - }, - { validator: isIPv4, trigger: "change" } - ], - ServerIp: [ - { - required: true, - message: "璇疯緭鍏P鍦板潃", - trigger: "change" - }, - { validator: isIPv4, trigger: "change" } - ], - ServerPort: [ - { - required: true, - message: "璇疯緭鍏ョ鍙�", - trigger: "change" - }, - { validator: isPort, trigger: "change" } - ], - GbServerPort: [ - { - required: true, - message: "璇疯緭鍏ョ鍙�", - trigger: "change" - }, - { validator: isPort, trigger: "change" } - ] - }, - locationCity: { - province: "", - city: "", - county: "", - provinceOptions: [], - cityOptions: [], - countyOptions: [] - } - } - }, - mounted() { - this.TreeDataPool.multiple = true - - // 璁板綍鐩綍鏄惁鎶樺彔 - let foldList = localStorage.getItem("ztree_fold_list") - if (foldList) { - this.TreeDataPool.foldNodeList = JSON.parse(foldList) - } - - this.initGB28181Conf() - }, - methods: { - hanleTabClick(tab, event) { - if (this.activeName == "subordinates") { - getAllSubServer().then((rsp) => { - if (rsp && rsp.success) { - this.subDevTable = rsp.data - } - }) - } else if (this.activeName == "cameras") { - this.getCamerasFromVideosvr() - } + name: "Gb28181Setting", + components: { + TreeMenu }, - async getCamerasFromVideosvr() { - this.loading = true - await this.TreeDataPool.fetchVideosvrCameras(false) - this.loading = false - }, - async updateCamerasFromVideosvr() { - this.loading = true - await this.TreeDataPool.fetchVideosvrCameras(true) - this.loading = false - }, - saveChecked() { - localStorage.setItem("ztree_fold_list", JSON.stringify(this.TreeDataPool.foldNodeList)) - - if (this.TreeDataPool.gb28181CheckedCount > 500) { - this.$message({ - type: "warning", - message: "鏈�澶氫粎鏀寔閫夋嫨500璺憚鍍忔満. 璇烽噸鏂伴�夋嫨" - }) - - return - } - - this.loading = true - - let treeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData) - - saveGb28181CamTree({ checkedMenus: treeData }) - .then((rsp) => { - if (rsp && rsp.success) { - this.$message({ - type: "success", - message: "淇濆瓨鎴愬姛" - }) - } - this.loading = false - }) - .catch((err) => { - this.$message({ - type: "error", - message: "淇濆瓨澶辫触" - }) - this.loading = false - }) - }, - initGB28181Conf() { - getGB28181Config().then((rsp) => { - if (rsp && rsp.success) { - this.gb28181 = rsp.data - //this.gb28181.idType = 0; - - this.$set(this.gb28181, "idType", 0) - this.$refs["gb28181"].resetFields() - } - }) - getGb28181AreaList().then((rsp) => { - if (rsp && rsp.success) { - this.locationCity.provinceOptions = rsp.data - } - }) - }, - submitGB28281() { - this.$refs["gb28181"].validate((valid) => { - if (valid) { - saveGB28181Config(this.gb28181).then((rsp) => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "GB28181璁剧疆淇濆瓨鎴愬姛" - }) + directives: { + focus: { + inserted: function (el) { + el.querySelector("input").focus() } - }) - } else { - console.log("error submit!!") - return false } - }) }, - changeProvince() { - let pid = this.locationCity.province - getGb28181AreaList({ parentId: pid }).then((rsp) => { - if (rsp && rsp.success) { - this.locationCity.cityOptions = rsp.data - this.locationCity.city = this.locationCity.cityOptions[0].id - this.changeCity() + data() { + return { + totalNode:0, + checkData:0, + treeData: [{ + id: 1, + label: 'N332', + type: 'folder', + children: [{ + id: 11, + label: 'N332_1', + type: 'folder', + children: [{ + id: 111, + label: 'N332_1_1', + type: 'folder', + children: [] + }, { + id: 112, + label: 'N332_1_2', + type: 'folder', + children: [] + },] + }] + }, + { + id: 2, + label: '鎽勫儚鏈�', + type: 'camera', + data: { + rtspAddress: 'http://*******', + deviceName: '鎽勫儚鏈�', + deviceAddress: '鏈烘埧', + videoType: "1", + lngLat: '' + } + }], + activeName: "gb28181", + treeHeight: 750, + loading: false, + loadingText: "", + openeds: ["0"], + gb28181: {}, + subDevTable: [], + idType: 1, + treeSettings: { + check: { + enable: true + } + }, + rules: { + ip: [ + { + required: true, + message: "璇疯緭鍏P鍦板潃", + trigger: "change" + }, + //{ validator: isIPv4, trigger: "change" } + ], + ServerIp: [ + { + required: true, + message: "璇疯緭鍏P鍦板潃", + trigger: "change" + }, + //{ validator: isIPv4, trigger: "change" } + ], + ServerPort: [ + { + required: true, + message: "璇疯緭鍏ョ鍙�", + trigger: "change" + }, + // { validator: isPort, trigger: "change" } + ], + GbServerPort: [ + { + required: true, + message: "璇疯緭鍏ョ鍙�", + trigger: "change" + }, + // { validator: isPort, trigger: "change" } + ] + }, + locationCity: { + province: "", + city: "", + county: "", + provinceOptions: [], + cityOptions: [], + countyOptions: [] + } } - }) }, - changeCity() { - let pid = this.locationCity.city - getGb28181AreaList({ parentId: pid }).then((rsp) => { - if (rsp && rsp.success) { - this.locationCity.countyOptions = rsp.data - this.locationCity.county = this.locationCity.countyOptions[0].id - } - console.log(this.locationCity.county) - }) - }, - newGBID () { - console.log(this.locationCity.county) - console.log(this.locationCity.countyOptions) - let cCode = this.locationCity.county + "" - newGb28181ID({ code: cCode }).then((rsp) => { - if (rsp && rsp.success) { - this.gb28181.PublicId = rsp.data - } - }) - }, - menuOpen() {}, - menuClose() {}, - toOpenMenuList(e) { - let t = e.clientY - this.$el.offsetTop + 30 - let l = e.clientX - this.$el.offsetLeft + mounted() { + // this.TreeDataPool.multiple = true - window.parent.postMessage( - { - source: location.href.split("/")[location.href.split("/").length - 1], - trigger: "contextmenu", - menuT: t, - menuL: l + // 璁板綍鐩綍鏄惁鎶樺彔 + // let foldList = localStorage.getItem("ztree_fold_list") + // if (foldList) { + // this.TreeDataPool.foldNodeList = JSON.parse(foldList) + // } + + // this.initGB28181Conf() + this.newGBID() + }, + methods: { + handleParentMethod(checkCount){ + this.checkData = checkCount + // console.info(checkCount) + }, + async getCamerasFromVideosvr() { + // console.info(this.TreeDataPool) + this.loading = true + await this.fetchVideosvrCameras() + this.loading = false }, - "*" - ) - return false + hanleTabClick(tab, event) { + console.info("activeName:" + this.activeName) + if (this.activeName == "subordinates") { + gb28181.getAllSubServer().then((rsp) => { + if (rsp && rsp.status == 200) { + const results = rsp.data.map(item => { + return { + publicid: item.ID, + name: item.Name, + ip: item.RemoteIP, + corp: item.RemotePort, + alive: item.Online, + }; + }); + this.subDevTable = results; + // console.info("data:" + JSON.stringify(rsp.data)) + } + }) + } else if (this.activeName == "cameras") { + this.getCamerasFromVideosvr() + } else { + gb28181.newGb28181ID().then((rsp) => { + if (rsp && rsp.status == 200) { + this.gb28181 = rsp.data; + // console.info("data:" + JSON.stringify(rsp.data)) + } + }) + + } + }, + changeProvince() { + let pid = this.locationCity.province + // getGb28181AreaList({ parentId: pid }).then((rsp) => { + // if (rsp && rsp.success) { + // this.locationCity.cityOptions = rsp.data + // this.locationCity.city = this.locationCity.cityOptions[0].id + // this.changeCity() + // } + // }) + }, + changeCity() { + let pid = this.locationCity.city + // getGb28181AreaList({ parentId: pid }).then((rsp) => { + // if (rsp && rsp.success) { + // this.locationCity.countyOptions = rsp.data + // this.locationCity.county = this.locationCity.countyOptions[0].id + // } + // console.log(this.locationCity.county) + // }) + }, + newGBID() { + // console.log(this.locationCity.county) + // console.log(this.locationCity.countyOptions) + gb28181.newGb28181ID().then((rsp) => { + if (rsp && rsp.status == 200) { + this.gb28181 = rsp.data; + // console.info("data:" + JSON.stringify(rsp.data)) + } + }) + }, + submitGB28281() { + this.$refs["gb28181"].validate((valid) => { + if (valid) { + // saveGB28181Config(this.gb28181).then((rsp) => { + // if (rsp && rsp.success) { + // this.$notify({ + // type: "success", + // message: "GB28181璁剧疆淇濆瓨鎴愬姛" + // }) + // } + // }) + } else { + console.log("error submit!!") + return false + } + }) + }, + async updateCamerasFromVideosvr() { + this.loading = true + await this.fetchVideosvrCameras() + this.loading = false + }, + async fetchVideosvrCameras() { + gb28181.getGb28181Pool().then((rsp) => { + if (rsp && rsp.status == 200) { + // console.log("treeData:",rsp.data.items) + this.treeData = rsp.data.items; + this.totalNode = rsp.data.total; + } + // console.log("treeData:",this.treeData) + }) + }, + saveChecked() { + const keys = this.$refs.tree.getResults(); + console.info(JSON.stringify(keys)) + if (this.checkData ==0) { + this.$message({ + type: "warning", + message: "璇烽�夋嫨鎽勫儚鏈猴紝鍐嶈繘琛屼繚瀛�" + }) + return + } + if (this.checkData > 500) { + this.$message({ + type: "warning", + message: "鏈�澶氫粎鏀寔閫夋嫨500璺憚鍍忔満. 璇烽噸鏂伴�夋嫨" + }) + return + } + + + + gb28181.saveGb28181CamTree(keys) + .then((rsp) => { + if (rsp && rsp.status == 200) { + this.$message({ + type: "success", + message: "淇濆瓨鎴愬姛" + }) + } + this.loading = false + }) + .catch((err) => { + this.$message({ + type: "error", + message: "淇濆瓨澶辫触" + }) + this.loading = false + }) + }, } - } } </script> <style lang="scss"> .s-system-manage { - width: 100% !important; - min-width: 1067px; - height: 100%; - box-sizing: border-box; - padding: 10px; - background-color: #f8f9fb; - .s-system-manage-breadcrumb { - height: 5%; + width: 100% !important; + min-width: 1067px; + height: 100%; box-sizing: border-box; - border: 1px solid #e4e7ed; - box-shadow: #e4e7ed 0px 0px 9px inset; - box-shadow: #e4e7ed 0px 0px 9px inset; - border-radius: 5px; - } + padding: 10px; + background-color: #f8f9fb; - .el-tabs--border-card { - border: 0px solid #dcdfe6; - -webkit-box-shadow: none; - box-shadow: none; + .s-system-manage-breadcrumb { + height: 5%; + box-sizing: border-box; + border: 1px solid #e4e7ed; + box-shadow: #e4e7ed 0px 0px 9px inset; + box-shadow: #e4e7ed 0px 0px 9px inset; + border-radius: 5px; + } + + .el-tabs--border-card { + border: 0px solid #dcdfe6; + -webkit-box-shadow: none; + box-shadow: none; + + .el-tabs__header { + border: 0px solid #dcdfe6; + + .el-tabs__item { + padding: 5px 50px; + height: 50px; + font-family: PingFangSC-Regular; + font-size: 15px; + color: #222222; + text-align: center; + border: 0px solid transparent; + } + + .el-tabs__item:nth-child(2) { + padding-left: 50px !important; + } + + .el-tabs__item:last-child { + padding-right: 50px !important; + } + + .el-tabs__item.is-active { + color: #3d68e1; + + // border-right-color: #fff; + // border-left-color: #fff; + } + + .el-tabs__item:not(.is-disabled):hover { + color: #3d68e1; + } + } + } + .el-tabs__header { - border: 0px solid #dcdfe6; - .el-tabs__item { - padding: 5px 50px; - height: 50px; - font-family: PingFangSC-Regular; - font-size: 15px; - color: #222222; - text-align: center; - border: 0px solid transparent; - } - .el-tabs__item:nth-child(2) { - padding-left: 50px !important; - } - .el-tabs__item:last-child { - padding-right: 50px !important; - } - .el-tabs__item.is-active { - color: #3d68e1; - - // border-right-color: #fff; - // border-left-color: #fff; - } - .el-tabs__item:not(.is-disabled):hover { - color: #3d68e1; - } + margin-bottom: 0; } - } - .el-tabs__header { - margin-bottom: 0; - } - .el-tabs__content { - height: calc(100% - 64px); - box-sizing: border-box; - overflow-y: auto; - padding: 20px 40px !important; - background: #fff; - .el-tab-pane { - width: 100%; - .s-title { + + .el-tabs__content { + height: calc(100% - 64px); + box-sizing: border-box; + overflow-y: auto; + padding: 20px 40px !important; + background: #fff; + + .el-tab-pane { + width: 100%; + + .s-title { + text-align: left; + padding: 15px 0px; + font-size: 16px; + } + } + } + + .s-table { + border: 1px solid #e8e8e9; + margin-top: 40px; + } + + .ui-top-title { + padding-bottom: 10px; + /* border-bottom: 1px solid #ebebeb; */ + position: relative; text-align: left; - padding: 15px 0px; + padding-left: 15px; font-size: 16px; - } + font-weight: bold; } - } - .s-table { - border: 1px solid #e8e8e9; - margin-top: 40px; - } - - .ui-top-title { - padding-bottom: 10px; - /* border-bottom: 1px solid #ebebeb; */ - position: relative; - text-align: left; - padding-left: 15px; - font-size: 16px; - font-weight: bold; - } - - .ui-top-title:before { - content: " "; - border-left: 4px solid #f53d3d; - display: inline-block; - height: 16px; - position: absolute; - top: 50%; - left: 0; - margin-top: -13px; - } - - .el-button--text { - color: #3d68e1; - text-decoration: underline; - } - - .camera-title { - text-align: left; - padding: 0px 10px; - margin: 5px 0px; - height: 33px; - background-color: #e4e2e2; - line-height: 33px; - font-size: 14px; - } - - .camera-seleted-text { - margin-right: 20px; - - .b { - color: #3d68e1; + .ui-top-title:before { + content: " "; + border-left: 4px solid #f53d3d; + display: inline-block; + height: 16px; + position: absolute; + top: 50%; + left: 0; + margin-top: -13px; } - } - .base-image { - position: absolute; - top: 18%; - left: 57%; - width: 450px; - - .camera-image { - background-color: black; - height: 254px; + .el-button--text { + color: #3d68e1; + text-decoration: underline; } - } + + .camera-title { + text-align: left; + padding: 0px 10px; + margin: 5px 0px; + height: 33px; + background-color: #e4e2e2; + line-height: 33px; + font-size: 14px; + } + + .camera-seleted-text { + margin-right: 20px; + + .b { + color: #3d68e1; + } + } + + .base-image { + position: absolute; + top: 18%; + left: 57%; + width: 450px; + + .camera-image { + background-color: black; + height: 254px; + } + } } </style> -- Gitblit v1.8.0