|
|
@@ -1,100 +1,111 @@
|
|
|
<template>
|
|
|
- <div class="sand-table">
|
|
|
- <img :src="require('@assets/png/3dback.png')" class="i3dback">
|
|
|
- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud">
|
|
|
- <StBack></StBack>
|
|
|
- <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
|
|
|
- <div class="sand-table-left" v-if="showPanel">
|
|
|
- <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52 实况">
|
|
|
- <weather class="pd-t-16" />
|
|
|
- </PanelSand>
|
|
|
- <PanelSand class="left-panel mg-t-16" title="等级评估">
|
|
|
- <RankTable :data="levelTableData"></RankTable>
|
|
|
- </PanelSand>
|
|
|
- <PanelSand class="left-panel mg-t-16" title="等级评估">
|
|
|
- <RankTable :data="levelTableData"></RankTable>
|
|
|
- </PanelSand>
|
|
|
- <PanelSandToolbar class="left-panel mg-t-16" title="部件">
|
|
|
- <template v-slot:tools>
|
|
|
- <div class="exchange" @click="exchange1">
|
|
|
- <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
|
|
|
- <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
- <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-slot:default>
|
|
|
- <RadarPieChart height="20.6vh" />
|
|
|
- </template>
|
|
|
- </PanelSandToolbar>
|
|
|
- </div>
|
|
|
- <div class="sand-table-right" v-if="showPanel">
|
|
|
- <PanelSand class="right-panel" title="板块标题">
|
|
|
- <el-row>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img v-if="!videoShow" class="pre-img" :src="require('@assets/png/p1.jpg')" />
|
|
|
- <video v-if="videoShow" class="pre-img" width="179" height="100" controls>
|
|
|
- <source :src="require('@assets/png/p.mp4')" type="video/mp4">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img class="pre-img" :src="require('@assets/png/p2.jpg')" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img class="pre-img" :src="require('@assets/png/p3.jpg')" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img class="pre-img" :src="require('@assets/png/p4.jpg')" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img class="pre-img" :src="require('@assets/png/p5.jpg')" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="pre-img-box">
|
|
|
- <img class="pre-img" :src="require('@assets/png/p6.jpg')" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </PanelSand>
|
|
|
- <PanelSand class="right-panel mg-t-16" title="板块标题">
|
|
|
- <div class="person-info-box mg-t-16">
|
|
|
- <img class="header mg-r-8 bg-green" :src="require('@assets/logo.png')" />
|
|
|
- <div class="person-info">
|
|
|
- <div class="green font-lg" style="font-weight: bold;">张三</div>
|
|
|
- <div class="white font-sm">
|
|
|
- <span>职务：高级检修工</span>
|
|
|
- <span class="mg-l-16">当前任务编号 000000</span>
|
|
|
- </div>
|
|
|
- <div class="white font-sm">平均检修时间 <span class="green">5</span> 小时</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="table mg-t-8">
|
|
|
- <Table :data="tableData" />
|
|
|
- </div>
|
|
|
- </PanelSand>
|
|
|
- <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
|
|
|
- <template v-slot:tools>
|
|
|
- <div class="exchange" @click="exchange">
|
|
|
- <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
|
|
|
- <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
- <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-slot:default>
|
|
|
- <RadarPieChart height="21vh" />
|
|
|
- </template>
|
|
|
- </PanelSandToolbar>
|
|
|
+ <div class="sand-table">
|
|
|
+ <img :src="require('@assets/png/3dback.png')" class="i3dback" />
|
|
|
+ <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" />
|
|
|
+ <StBack></StBack>
|
|
|
+ <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
|
|
|
+ <div class="sand-table-left" v-if="showPanel">
|
|
|
+ <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52 实况">
|
|
|
+ <weather class="pd-t-16" />
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSand class="left-panel mg-t-16" title="等级评估">
|
|
|
+ <RankTable :data="levelTableData"></RankTable>
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSand class="left-panel mg-t-16" title="等级评估">
|
|
|
+ <RankTable :data="levelTableData"></RankTable>
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSandToolbar class="left-panel mg-t-16" title="部件">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange" @click="exchange1">
|
|
|
+ <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
|
|
|
+ <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="20.6vh" />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
+ </div>
|
|
|
+ <div class="sand-table-right" v-if="showPanel">
|
|
|
+ <PanelSand class="right-panel" title="板块标题">
|
|
|
+ <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
|
|
|
+ <el-col
|
|
|
+ :span="12"
|
|
|
+ class="pre-img-box"
|
|
|
+ v-for="(cItem, cIndex) in pItem"
|
|
|
+ :key="cIndex"
|
|
|
+ @click="openVideoDialog(cItem)"
|
|
|
+ >
|
|
|
+ <div class="mask"></div>
|
|
|
+ <iframe
|
|
|
+ class="pre-img videoBoxiframe"
|
|
|
+ width="95%"
|
|
|
+ height="8.657vh"
|
|
|
+ :src="cItem.url + cItem.token"
|
|
|
+ v-if="cItem.switch"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSand class="right-panel mg-t-16" title="板块标题">
|
|
|
+ <div class="person-info-box mg-t-16">
|
|
|
+ <img
|
|
|
+ class="header mg-r-8 bg-green"
|
|
|
+ :src="require('@assets/logo.png')"
|
|
|
+ />
|
|
|
+ <div class="person-info">
|
|
|
+ <div class="green font-lg" style="font-weight: bold">张三</div>
|
|
|
+ <div class="white font-sm">
|
|
|
+ <span>职务：高级检修工</span>
|
|
|
+ <span class="mg-l-16">当前任务编号 000000</span>
|
|
|
+ </div>
|
|
|
+ <div class="white font-sm">
|
|
|
+ 平均检修时间 <span class="green">5</span> 小时
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="sand-table-bottom" v-if="showPanel">
|
|
|
- <Ppanel title="利用小时"></Ppanel>
|
|
|
- <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
|
|
|
- <Ppanel title="MTBF" class="stb-p"></Ppanel>
|
|
|
- <Ppanel title="MTTR" class="stb-p"></Ppanel>
|
|
|
- <Ppanel title="MTTF" class="stb-p"></Ppanel>
|
|
|
+ <div class="table mg-t-8">
|
|
|
+ <Table :data="tableData" />
|
|
|
</div>
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange" @click="exchange">
|
|
|
+ <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
|
|
|
+ <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="21vh" />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
</div>
|
|
|
+ <div class="sand-table-bottom" v-if="showPanel">
|
|
|
+ <Ppanel title="利用小时"></Ppanel>
|
|
|
+ <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
|
|
|
+ <Ppanel title="MTBF" class="stb-p"></Ppanel>
|
|
|
+ <Ppanel title="MTTR" class="stb-p"></Ppanel>
|
|
|
+ <Ppanel title="MTTF" class="stb-p"></Ppanel>
|
|
|
+ </div>
|
|
|
+ <!-- bounceInUp, -->
|
|
|
+ <el-dialog
|
|
|
+ top="50px"
|
|
|
+ custom-class="modal animated bounceIn"
|
|
|
+ v-model="showVideoDialog"
|
|
|
+ width="80%"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ @closed="dialogVideoUrl = ''"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ class="videoBoxiframe"
|
|
|
+ width="95%"
|
|
|
+ height="800px"
|
|
|
+ :src="dialogVideoUrl"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -109,268 +120,384 @@ import Ppanel from "./component/p-panel.vue";
|
|
|
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
|
|
|
|
|
|
export default {
|
|
|
- // 名称
|
|
|
- name: "SandTable",
|
|
|
- // 使用组件
|
|
|
- components: {
|
|
|
- ThreeModel1,
|
|
|
- PanelSand,
|
|
|
- PanelSandToolbar,
|
|
|
- Weather,
|
|
|
- Table,
|
|
|
- RadarPieChart,
|
|
|
- StBack,
|
|
|
- RankTable,
|
|
|
- Ppanel,
|
|
|
- },
|
|
|
- // 数据
|
|
|
- data() {
|
|
|
- return {
|
|
|
- videoShow: true,
|
|
|
- showPanel: false,
|
|
|
- exchangeBtn: false,
|
|
|
- exchangeBtn1: false,
|
|
|
- ForecastPower: [
|
|
|
- {
|
|
|
- name: "今日预测电量",
|
|
|
- value: 103.62,
|
|
|
- total: 150,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "月预测发电量",
|
|
|
- value: 98.62,
|
|
|
- total: 100,
|
|
|
- },
|
|
|
- ],
|
|
|
- tableData: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "标题",
|
|
|
- field: "v1",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "标题",
|
|
|
- field: "v2",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "标题",
|
|
|
- field: "v3",
|
|
|
- width: "150px",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "标题",
|
|
|
- field: "v4",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [
|
|
|
- {
|
|
|
- v1: "内容内容",
|
|
|
- v2: "内容内容",
|
|
|
- v3: "内容内容内容内容内容",
|
|
|
- v4: "内容内容",
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- v1: "内容内容",
|
|
|
- v2: "内容内容",
|
|
|
- v3: "内容内容内容内容内容",
|
|
|
- v4: "内容内容",
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- v1: "内容内容",
|
|
|
- v2: "内容内容",
|
|
|
- v3: "内容内容内容内容内容",
|
|
|
- v4: "内容内容",
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- v1: "内容内容",
|
|
|
- v2: "内容内容",
|
|
|
- v3: "内容内容内容内容内容",
|
|
|
- v4: "内容内容",
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- levelTableData: {
|
|
|
- column: [{
|
|
|
- name: "编号",
|
|
|
- field: "no",
|
|
|
- },{
|
|
|
- name: "等级",
|
|
|
- field: "level",
|
|
|
- },{
|
|
|
- name: "分数",
|
|
|
- field: "score",
|
|
|
- }],
|
|
|
- data: [{
|
|
|
- no: "MHS_A01",
|
|
|
- level: "AAA",
|
|
|
- score: 98,
|
|
|
- },{
|
|
|
- no: "MHS_A02",
|
|
|
- level: "AAA",
|
|
|
- score: 95,
|
|
|
- },{
|
|
|
- no: "MHS_A01",
|
|
|
- level: "AA",
|
|
|
- score: 94,
|
|
|
- },{
|
|
|
- no: "MHS_A02",
|
|
|
- level: "BB",
|
|
|
- score: 92,
|
|
|
- },{
|
|
|
- no: "MHS_A01",
|
|
|
- level: "BB",
|
|
|
- score: 90,
|
|
|
- }],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- // 函数
|
|
|
- methods: {
|
|
|
- when: function() {
|
|
|
- this.showPanel = true;
|
|
|
+ // 名称
|
|
|
+ name: "SandTable",
|
|
|
+ // 使用组件
|
|
|
+ components: {
|
|
|
+ ThreeModel1,
|
|
|
+ PanelSand,
|
|
|
+ PanelSandToolbar,
|
|
|
+ Weather,
|
|
|
+ Table,
|
|
|
+ RadarPieChart,
|
|
|
+ StBack,
|
|
|
+ RankTable,
|
|
|
+ Ppanel,
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoShow: true,
|
|
|
+ showPanel: false,
|
|
|
+ exchangeBtn: false,
|
|
|
+ exchangeBtn1: false,
|
|
|
+ videoArray: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_48_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_48_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_01_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_02_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_03_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://10.155.32.4:9984/ws.html",
|
|
|
+ token: "?token=SG01_04_TD&autoplay=true",
|
|
|
+ switch: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ showVideoDialog: false,
|
|
|
+ dialogVideoUrl: "",
|
|
|
+ ForecastPower: [
|
|
|
+ {
|
|
|
+ name: "今日预测电量",
|
|
|
+ value: 103.62,
|
|
|
+ total: 150,
|
|
|
},
|
|
|
- exchange: function () {
|
|
|
- this.exchangeBtn = !this.exchangeBtn;
|
|
|
+ {
|
|
|
+ name: "月预测发电量",
|
|
|
+ value: 98.62,
|
|
|
+ total: 100,
|
|
|
},
|
|
|
- exchange1: function () {
|
|
|
- this.exchangeBtn1 = !this.exchangeBtn1;
|
|
|
- },
|
|
|
- },
|
|
|
- // 生命周期钩子
|
|
|
- beforeCreate() {
|
|
|
- // 创建前
|
|
|
- },
|
|
|
- created() {
|
|
|
- // 创建后
|
|
|
- },
|
|
|
- beforeMount() {
|
|
|
- // 渲染前
|
|
|
+ ],
|
|
|
+ tableData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "标题",
|
|
|
+ field: "v1",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "标题",
|
|
|
+ field: "v2",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "标题",
|
|
|
+ field: "v3",
|
|
|
+ width: "150px",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "标题",
|
|
|
+ field: "v4",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ v1: "内容内容",
|
|
|
+ v2: "内容内容",
|
|
|
+ v3: "内容内容内容内容内容",
|
|
|
+ v4: "内容内容",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ v1: "内容内容",
|
|
|
+ v2: "内容内容",
|
|
|
+ v3: "内容内容内容内容内容",
|
|
|
+ v4: "内容内容",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ v1: "内容内容",
|
|
|
+ v2: "内容内容",
|
|
|
+ v3: "内容内容内容内容内容",
|
|
|
+ v4: "内容内容",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ v1: "内容内容",
|
|
|
+ v2: "内容内容",
|
|
|
+ v3: "内容内容内容内容内容",
|
|
|
+ v4: "内容内容",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ levelTableData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "编号",
|
|
|
+ field: "no",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "等级",
|
|
|
+ field: "level",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "分数",
|
|
|
+ field: "score",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ no: "MHS_A01",
|
|
|
+ level: "AAA",
|
|
|
+ score: 98,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: "MHS_A02",
|
|
|
+ level: "AAA",
|
|
|
+ score: 95,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: "MHS_A01",
|
|
|
+ level: "AA",
|
|
|
+ score: 94,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: "MHS_A02",
|
|
|
+ level: "BB",
|
|
|
+ score: 92,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: "MHS_A01",
|
|
|
+ level: "BB",
|
|
|
+ score: 90,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 函数
|
|
|
+ methods: {
|
|
|
+ openVideoDialog(item) {
|
|
|
+ if (item.url && item.token) {
|
|
|
+ this.dialogVideoUrl = item.url + item.token;
|
|
|
+ this.showVideoDialog = true;
|
|
|
+ }
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // 渲染后
|
|
|
+ when: function () {
|
|
|
+ this.showPanel = true;
|
|
|
},
|
|
|
- beforeUpdate() {
|
|
|
- // 数据更新前
|
|
|
+ exchange: function () {
|
|
|
+ this.exchangeBtn = !this.exchangeBtn;
|
|
|
},
|
|
|
- updated() {
|
|
|
- // 数据更新后
|
|
|
+ exchange1: function () {
|
|
|
+ this.exchangeBtn1 = !this.exchangeBtn1;
|
|
|
},
|
|
|
+ },
|
|
|
+ // 生命周期钩子
|
|
|
+ beforeCreate() {
|
|
|
+ // 创建前
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 创建后
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ // 渲染前
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 渲染后
|
|
|
+ },
|
|
|
+ beforeUpdate() {
|
|
|
+ // 数据更新前
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ // 数据更新后
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.sand-table {
|
|
|
+ width: 100%;
|
|
|
+ height: 91.667vh;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .i3dback {
|
|
|
+ position: fixed;
|
|
|
+ z-index: -1;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .i3dcloud {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-panel {
|
|
|
+ width: 360px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-panel {
|
|
|
+ width: 36.852vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three-model-layer {
|
|
|
+ position: absolute;
|
|
|
width: 100%;
|
|
|
- height: 91.667vh;
|
|
|
- position: relative;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
|
|
|
- .i3dback {
|
|
|
- position: fixed;
|
|
|
- z-index: -1;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
+ .sand-table-left {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
|
|
|
- .i3dcloud {
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
+ .sand-table-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
|
|
|
- .left-panel {
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
+ .sand-table-bottom {
|
|
|
+ position: absolute;
|
|
|
+ right: calc(50vw - 50.463vh);
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
|
|
|
- .right-panel {
|
|
|
- width: 36.852vh;
|
|
|
+ .stb-p {
|
|
|
+ margin-left: 0.926vh;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .three-model-layer {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
+ .pre-img-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 0.556vh;
|
|
|
+ padding: 0;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .sand-table-bottom {
|
|
|
+ position: absolute;
|
|
|
+ right: calc(50vw - 545px);
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
- .sand-table-left {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 2;
|
|
|
+ .mask {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 5;
|
|
|
}
|
|
|
|
|
|
- .sand-table-right {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 2;
|
|
|
+ .pre-img {
|
|
|
+ position: relative;
|
|
|
+ width: 95%;
|
|
|
+ height: 8.657vh;
|
|
|
+ z-index: 4;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .sand-table-bottom {
|
|
|
- position: absolute;
|
|
|
- right: calc(50vw - 545px);
|
|
|
- bottom: 0;
|
|
|
- z-index: 2;
|
|
|
- display: flex;
|
|
|
+ .person-info-box {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .stb-p {
|
|
|
- margin-left: 0.926vh;
|
|
|
- }
|
|
|
+ .header {
|
|
|
+ width: 75px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .pre-img-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 0.556vh;
|
|
|
- padding: 0;
|
|
|
-
|
|
|
- .pre-img {
|
|
|
- width: 95%;
|
|
|
- height: 8.657vh;
|
|
|
- }
|
|
|
+ .table {
|
|
|
+ width: calc(100% + 2.963vh);
|
|
|
+ margin-left: -1.481vh;
|
|
|
+ margin-bottom: -1.481vh;
|
|
|
+
|
|
|
+ .com-table thead tr th,
|
|
|
+ .com-table tr td {
|
|
|
+ padding: 0.556vh 0;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .person-info-box {
|
|
|
- display: flex;
|
|
|
+ .animated {
|
|
|
+ // animation-duration: 0.5s;
|
|
|
+ }
|
|
|
|
|
|
- .header {
|
|
|
- width: 75px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-overlay {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.exchange {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
- .table {
|
|
|
- width: calc(100% + 2.963vh);
|
|
|
- margin-left: -1.481vh;
|
|
|
- margin-bottom: -1.481vh;
|
|
|
+.videoBoxiframe {
|
|
|
+ border: none;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
- .com-table thead tr th,
|
|
|
- .com-table tr td {
|
|
|
- padding: 0.556vh 0;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+.modal {
|
|
|
+ animation-duration: 0;
|
|
|
+ @keyframes dialog-fade-in {
|
|
|
+ 0% {
|
|
|
+ transform: translate3d(0, 100%, 0);
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
+ 100% {
|
|
|
+ transform: translate3d(0, 100%, 0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .exchange {
|
|
|
- cursor: pointer;
|
|
|
+ @keyframes dialog-fade-out {
|
|
|
+ 0% {
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate3d(0, -100%, 0);
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
