| | <template> |
---|
| | <div id="WangJiaPIng" ref="threeDom"> |
---|
| | <div |
---|
| | class="YuanDian" |
---|
| | v-for="(item, i) in labelData" |
---|
| | :key="item.id" |
---|
| | :id="item.id" |
---|
| | style="display: none" |
---|
| | > |
---|
| | <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none"> |
---|
| | <div class="iconBox" v-show="item.show"> |
---|
| | <img src="@/assets/images/ljx.png" alt="" class="iconImg" /> |
---|
| | <div class="ydBox"> |
---|
| | <div class="YuanDianText">{{ item.name }}</div> |
---|
| | <div class="ydData" v-for="(val, k) in item.data" :key="k"> |
---|
| | <div class="leftData">{{ val.name + ":" }}</div> |
---|
| | <div class="rightData">{{ val.value + " " + val.unit }}</div> |
---|
| | <div class="leftData">{{ val.name + ':' }}</div> |
---|
| | <div class="rightData">{{ val.value + ' ' + val.unit }}</div> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <img |
---|
| | class="YuanDianIcon" |
---|
| | :src="item.icon" |
---|
| | @mouseenter="item.show = true" |
---|
| | @mouseleave="item.show = false" |
---|
| | /> |
---|
| | <img class="YuanDianIcon" :src="item.icon" @mouseenter="item.show = true" @mouseleave="item.show = false" /> |
---|
| | </div> |
---|
| | </div> |
---|
| | </template> |
---|
| | |
---|
| | <script setup name="WangJiaPIng"> |
---|
| | import { ref, reactive, toRefs, onMounted } from "vue"; |
---|
| | import * as THREE from "three"; |
---|
| | import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器 |
---|
| | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器 |
---|
| | import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; |
---|
| | import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; |
---|
| | import { Water } from "three/examples/jsm/objects/Water.js"; |
---|
| | |
---|
| | import { |
---|
| | CSS3DRenderer, |
---|
| | CSS3DObject, |
---|
| | } from "three/examples/jsm/renderers/CSS3DRenderer.js"; |
---|
| | import gsap from "gsap"; |
---|
| | import { CSSRulePlugin } from "gsap/CSSRulePlugin"; |
---|
| | import bus from "@/bus"; |
---|
| | import { ref, reactive, toRefs, onMounted } from 'vue'; |
---|
| | import * as THREE from 'three'; |
---|
| | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器 |
---|
| | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器 |
---|
| | import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'; |
---|
| | import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; |
---|
| | import { Water } from 'three/examples/jsm/objects/Water.js'; |
---|
| | |
---|
| | import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'; |
---|
| | import gsap from 'gsap'; |
---|
| | import { CSSRulePlugin } from 'gsap/CSSRulePlugin'; |
---|
| | import bus from '@/bus'; |
---|
| | const AllData = reactive({}); |
---|
| | |
---|
| | const show = ref(""); |
---|
| | const show = ref(''); |
---|
| | const width = ref(null); |
---|
| | const height = ref(null); |
---|
| | const Camera = ref(null); |
---|
| | const Renderer = ref(null); |
---|
| |
---|
| | const animationFrameId = ref(null); |
---|
| | let Twater = null; |
---|
| | const labelData = ref([ |
---|
| | { |
---|
| | name: "风速风向仪", |
---|
| | name: '静力水准仪', |
---|
| | id: `YuanDian1`, |
---|
| | position: { |
---|
| | x: 0, |
---|
| | y: 0, |
---|
| | z: 2.5, |
---|
| | z: -0.8, |
---|
| | }, |
---|
| | icon: "/Three/icon/fsfx_icon.png", |
---|
| | icon: '/Three/icon/jlszy_icon.png', |
---|
| | data: [ |
---|
| | { |
---|
| | name: "方向", |
---|
| | value: "东北风", |
---|
| | unit: "", |
---|
| | }, |
---|
| | { |
---|
| | name: "风速", |
---|
| | value: "1.3", |
---|
| | unit: "m/s", |
---|
| | name: '挠度变化值', |
---|
| | value: '-0.01', |
---|
| | unit: 'mm', |
---|
| | }, |
---|
| | { |
---|
| | name: '温度', |
---|
| | value: '16.3', |
---|
| | unit: '℃', |
---|
| | }, |
---|
| | ], |
---|
| | show: false, |
---|
| | }, |
---|
| | { |
---|
| | name: "静力水准仪", |
---|
| | name: '静力水准仪', |
---|
| | id: `YuanDian2`, |
---|
| | position: { |
---|
| | x: -46, |
---|
| | x: 40, |
---|
| | y: 0, |
---|
| | z: 2.5, |
---|
| | z: -0.8, |
---|
| | }, |
---|
| | icon: "/Three/icon/jlszy_icon.png", |
---|
| | icon: '/Three/icon/jlszy_icon.png', |
---|
| | data: [ |
---|
| | { |
---|
| | name: "挠度变化值", |
---|
| | value: "-0.01", |
---|
| | unit: "mm", |
---|
| | }, |
---|
| | { |
---|
| | name: "温度", |
---|
| | value: "16.3", |
---|
| | unit: "℃", |
---|
| | name: '挠度变化值', |
---|
| | value: '-0.01', |
---|
| | unit: 'mm', |
---|
| | }, |
---|
| | { |
---|
| | name: '温度', |
---|
| | value: '16.3', |
---|
| | unit: '℃', |
---|
| | }, |
---|
| | ], |
---|
| | show: false, |
---|
| | }, |
---|
| | { |
---|
| | name: "静力水准仪", |
---|
| | name: "应变计", |
---|
| | id: `YuanDian3`, |
---|
| | position: { |
---|
| | x: -46, |
---|
| | x: -37, |
---|
| | y: 0, |
---|
| | z: -12.6, |
---|
| | z: -0.2, |
---|
| | }, |
---|
| | icon: "/Three/icon/jlszy_icon.png", |
---|
| | icon: "/Three/icon/ybj_icon.png", |
---|
| | data: [ |
---|
| | { |
---|
| | name: "挠度变化值", |
---|
| | value: "-0.01", |
---|
| | unit: "mm", |
---|
| | name: "应变量", |
---|
| | value: "17", |
---|
| | unit: "με", |
---|
| | }, |
---|
| | { |
---|
| | name: "温度", |
---|
| | value: "16.3", |
---|
| |
---|
| | { |
---|
| | name: "应变计", |
---|
| | id: `YuanDian4`, |
---|
| | position: { |
---|
| | x: 0, |
---|
| | y: 7.5, |
---|
| | z: 0, |
---|
| | x: 37, |
---|
| | y: 0, |
---|
| | z: -0.2, |
---|
| | }, |
---|
| | icon: "/Three/icon/ybj_icon.png", |
---|
| | data: [ |
---|
| | { |
---|
| |
---|
| | { |
---|
| | name: "温度", |
---|
| | value: "16.3", |
---|
| | unit: "℃", |
---|
| | }, |
---|
| | ], |
---|
| | show: false, |
---|
| | }, |
---|
| | { |
---|
| | name: "应变计", |
---|
| | id: `YuanDian5`, |
---|
| | position: { |
---|
| | x: 0, |
---|
| | y: 7.5, |
---|
| | z: -10, |
---|
| | }, |
---|
| | icon: "/Three/icon/ybj_icon.png", |
---|
| | data: [ |
---|
| | { |
---|
| | name: "应变量", |
---|
| | value: "17", |
---|
| | unit: "με", |
---|
| | }, |
---|
| | { |
---|
| | name: "温度", |
---|
| | value: "16.3", |
---|
| | unit: "℃", |
---|
| | }, |
---|
| | ], |
---|
| | show: false, |
---|
| | }, |
---|
| | { |
---|
| | name: "加速度计", |
---|
| | id: `YuanDian6`, |
---|
| | position: { |
---|
| | x: 0, |
---|
| | y: 0, |
---|
| | z: -5, |
---|
| | }, |
---|
| | icon: "/Three/icon/jsdj_icon.png", |
---|
| | data: [ |
---|
| | { |
---|
| | name: "加速度", |
---|
| | value: "1.42", |
---|
| | unit: "mm/s²", |
---|
| | }, |
---|
| | { |
---|
| | name: "风速", |
---|
| | value: "1.3", |
---|
| | unit: "m/s", |
---|
| | }, |
---|
| | ], |
---|
| | show: false, |
---|
| | }, |
---|
| | // { |
---|
| | // name: '风速风向仪', |
---|
| | // name: "加速度计", |
---|
| | // id: `YuanDian6`, |
---|
| | // position: { |
---|
| | // x: 0, |
---|
| | // y: 0, |
---|
| | // z: -5, |
---|
| | // }, |
---|
| | // icon: "/Three/icon/jsdj_icon.png", |
---|
| | // data: [ |
---|
| | // { |
---|
| | // name: "加速度", |
---|
| | // value: "1.42", |
---|
| | // unit: "mm/s²", |
---|
| | // }, |
---|
| | // { |
---|
| | // name: "风速", |
---|
| | // value: "1.3", |
---|
| | // unit: "m/s", |
---|
| | // }, |
---|
| | // ], |
---|
| | // show: false, |
---|
| | // }, |
---|
| | |
---|
| | // { |
---|
| | // name: "风速风向仪", |
---|
| | // id: `YuanDian1`, |
---|
| | // position: { |
---|
| | // x: 0, |
---|
| | // y: 1, |
---|
| | // y: 0, |
---|
| | // z: 2.5, |
---|
| | // }, |
---|
| | // OnSrc: '/Three/icon/BJ_On.png', |
---|
| | // OffSrc: '/Three/icon/BJ_Off.png', |
---|
| | // icon: '/Three/icon/fsfx_icon.png', |
---|
| | // status: false, |
---|
| | // boxShow: true, |
---|
| | // value1: '--', |
---|
| | // value2: '--', |
---|
| | // value3: '--', |
---|
| | // deviceCode: '', |
---|
| | // stCode: 'HP0104201130000469', |
---|
| | // }, |
---|
| | // { |
---|
| | // name: "二号泵机", |
---|
| | // id: `YuanDian2`, |
---|
| | // position: { |
---|
| | // x: 3, |
---|
| | // y: 230, |
---|
| | // z: -180, |
---|
| | // }, |
---|
| | // OnSrc: "/Three/icon/BJ_On.png", |
---|
| | // OffSrc: "/Three/icon/BJ_Off.png", |
---|
| | // status: false, |
---|
| | // boxShow: true, |
---|
| | // value1: "--", |
---|
| | // value2: "--", |
---|
| | // value3: "--", |
---|
| | // deviceCode: "", |
---|
| | // stCode: "HP0104201130000469", |
---|
| | // }, |
---|
| | // { |
---|
| | // name: "三号泵机", |
---|
| | // id: `YuanDian3`, |
---|
| | // position: { |
---|
| | // x: 195, |
---|
| | // y: 230, |
---|
| | // z: -180, |
---|
| | // }, |
---|
| | // OnSrc: "/Three/icon/BJ_On.png", |
---|
| | // OffSrc: "/Three/icon/BJ_Off.png", |
---|
| | // status: false, |
---|
| | // boxShow: true, |
---|
| | // value1: "--", |
---|
| | // value2: "--", |
---|
| | // value3: "--", |
---|
| | // deviceCode: "", |
---|
| | // stCode: "HP0104201130000469", |
---|
| | // icon: "/Three/icon/fsfx_icon.png", |
---|
| | // data: [ |
---|
| | // { |
---|
| | // name: "方向", |
---|
| | // value: "东北风", |
---|
| | // unit: "", |
---|
| | // }, |
---|
| | // { |
---|
| | // name: "风速", |
---|
| | // value: "1.3", |
---|
| | // unit: "m/s", |
---|
| | // }, |
---|
| | // ], |
---|
| | // show: false, |
---|
| | // }, |
---|
| | ]); |
---|
| | const deviceCode = ref(null); |
---|
| | const stCode = ref(null); |
---|
| |
---|
| | const initModal = (name, url) => { |
---|
| | const Gltfloader = new GLTFLoader(); |
---|
| | var dracoLoader = new DRACOLoader(); |
---|
| | // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径 |
---|
| | dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径 |
---|
| | dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径 |
---|
| | Gltfloader.setDRACOLoader(dracoLoader); |
---|
| | Gltfloader.load( |
---|
| | url, |
---|
| | (gltf) => { |
---|
| | gltf => { |
---|
| | gltf.scene.name = name; |
---|
| | gltf.scene.scale.set(1, 1, 1); |
---|
| | // gltf.scene.position.x = -70; |
---|
| | gltf.scene.position.y = 2; |
---|
| |
---|
| | x: position.x, |
---|
| | y: position.y, |
---|
| | z: position.z, |
---|
| | duration: time, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | // gsap.to(Camera.value.lookAt, { |
---|
| | // x: lookAt.x, |
---|
| | // y: lookAt.y, |
---|
| |
---|
| | x: lookAt.x, |
---|
| | y: lookAt.y, |
---|
| | z: lookAt.z, |
---|
| | duration: time, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | }; |
---|
| | |
---|
| | /** |
---|
| | * 初始化渲染器 |
---|
| | * 该函数负责创建和配置Three.js的WebGL渲染器,包括设置视口大小、抗锯齿、阴影、像素比、色调映射等 |
---|
| | */ |
---|
| | const initRenderer = () => { |
---|
| | width.value = document.getElementById("WangJiaPIng").clientWidth; |
---|
| | height.value = document.getElementById("WangJiaPIng").clientHeight; |
---|
| | width.value = document.getElementById('WangJiaPIng').clientWidth; |
---|
| | height.value = document.getElementById('WangJiaPIng').clientHeight; |
---|
| | Renderer.value = new THREE.WebGLRenderer({ |
---|
| | antialias: true, |
---|
| | // alpha: true, //开启alpha |
---|
| | }); |
---|
| |
---|
| | */ |
---|
| | const initLabelRenderer = () => { |
---|
| | LabelRenderer.value = new CSS3DRenderer(); |
---|
| | LabelRenderer.value.setSize(width.value, height.value); |
---|
| | LabelRenderer.value.domElement.style.position = "absolute"; |
---|
| | LabelRenderer.value.domElement.style.top = "0px"; |
---|
| | LabelRenderer.value.domElement.style.position = 'absolute'; |
---|
| | LabelRenderer.value.domElement.style.top = '0px'; |
---|
| | threeDom.value.appendChild(LabelRenderer.value.domElement); |
---|
| | // LabelRenderer.value.domElement.addEventListener("click", meshOnClick); |
---|
| | }; |
---|
| | |
---|
| |
---|
| | * 初始化摄像机 |
---|
| | * 创建一个透视摄像机,并设置其位置 |
---|
| | */ |
---|
| | const initCamera = () => { |
---|
| | Camera.value = new THREE.PerspectiveCamera( |
---|
| | 45, |
---|
| | window.innerWidth / window.innerHeight, |
---|
| | 1, |
---|
| | 4000 |
---|
| | ); |
---|
| | Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000); |
---|
| | Camera.value.position.set(500, 500, 500); |
---|
| | }; |
---|
| | |
---|
| | /** |
---|
| |
---|
| | */ |
---|
| | const initSky = () => { |
---|
| | var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色 |
---|
| | pmremGenerator.compileEquirectangularShader(); |
---|
| | new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) { |
---|
| | new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) { |
---|
| | const envMap = pmremGenerator.fromEquirectangular(texture).texture; |
---|
| | envMap.isPmremTexture = true; |
---|
| | Scene.environment = envMap; |
---|
| | Scene.background = envMap; |
---|
| |
---|
| | Renderer.value.render(Scene, Camera.value); |
---|
| | LabelRenderer.value.render(Scene, Camera.value); |
---|
| | const delta = clock.getDelta(); |
---|
| | // 如需调试请打开这个获取Camera,Controls 的值 |
---|
| | console.log("Camera.value", Camera.value); |
---|
| | console.log("Controls.value", Controls.value); |
---|
| | console.log('Camera.value', Camera.value); |
---|
| | console.log('Controls.value', Controls.value); |
---|
| | }; |
---|
| | |
---|
| | // 创建气泡窗 |
---|
| | function createLable() { |
---|
| | labelData.value.forEach((item, index) => { |
---|
| | let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`); |
---|
| | if (labelCSS3D === undefined) { |
---|
| | let lableDiv = document.getElementById(`YuanDian${index + 1}`); |
---|
| | lableDiv.style.display = "block"; |
---|
| | lableDiv.style.display = 'block'; |
---|
| | labelCSS3D = new CSS3DObject(lableDiv); |
---|
| | labelCSS3D.position.set(item.position.x, item.position.y, item.position.z); |
---|
| | labelCSS3D.scale.set(0.1, 0.1, 0.1); |
---|
| | labelCSS3D.name = `YuanDian${index + 1}`; |
---|
| |
---|
| | labelCSS3D.rotation.y = angle; // 调整角度使其始终面向相机 |
---|
| | } |
---|
| | }); |
---|
| | } |
---|
| | const flyTo = (data) => { |
---|
| | const flyTo = data => { |
---|
| | // 静立水准仪 |
---|
| | if (data.name[0] == "静力水准仪") { |
---|
| | if (data.name[0] == '静力水准仪') { |
---|
| | // 摄像机位置 |
---|
| | gsap.to(Camera.value.position, { |
---|
| | x: -69.16984920750228, |
---|
| | y: 9.22906292776404, |
---|
| | z: 14.97197297303164, |
---|
| | x: -17.414766616979897, |
---|
| | y: 7.132760656412787, |
---|
| | z: 23.413620521050024, |
---|
| | // x: -69.16984920750228, |
---|
| | // y: 9.22906292776404, |
---|
| | // z: 14.97197297303164, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | // 视角 |
---|
| | gsap.to(Controls.value.target, { |
---|
| | x: -30.064052350817732, |
---|
| | y: -1.2146002003091534, |
---|
| | z: -14.382184358955339, |
---|
| | x: 12.660351499015919, |
---|
| | y: 3.159510377176017, |
---|
| | z: 0.8474660132082192, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | } else if (data.name[0] == "应变计") { |
---|
| | } else if (data.name[0] == '应变计') { |
---|
| | // 摄像机位置 |
---|
| | gsap.to(Camera.value.position, { |
---|
| | x: -18.741902596516276, |
---|
| | y: 11.41010130909887, |
---|
| | z: 8.418282711965766, |
---|
| | x: -49.48316713595012, |
---|
| | y: 7.308749802511068, |
---|
| | z: 14.904389905294007, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | // 视角 |
---|
| | gsap.to(Controls.value.target, { |
---|
| | x: 8.466340266349222, |
---|
| | y: 7.3984913282701665, |
---|
| | z: -5.438067100513153, |
---|
| | x: 29.03625918562505, |
---|
| | y: -0.3313374072727649, |
---|
| | z: -29.291435662949137, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | ease: 'power4.out', |
---|
| | }); |
---|
| | } else if (data.name[0] == "加速度计") { |
---|
| | gsap.to(Camera.value.position, { |
---|
| | x: -17.287720948075602, |
---|
| | y: 8.016773260004873, |
---|
| | z: 11.57619028778769, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | }); |
---|
| | gsap.to(Controls.value.target, { |
---|
| | x: 4.538970140099083, |
---|
| | y: 2.881636781852132, |
---|
| | z: -8.354337289076433, |
---|
| | duration: 3, |
---|
| | ease: "power4.out", |
---|
| | }); |
---|
| | } else if (data.name[0] == '加速度计') { |
---|
| | // gsap.to(Camera.value.position, { |
---|
| | // x: -17.287720948075602, |
---|
| | // y: 8.016773260004873, |
---|
| | // z: 11.57619028778769, |
---|
| | // duration: 3, |
---|
| | // ease: 'power4.out', |
---|
| | // }); |
---|
| | // gsap.to(Controls.value.target, { |
---|
| | // x: 4.538970140099083, |
---|
| | // y: 2.881636781852132, |
---|
| | // z: -8.354337289076433, |
---|
| | // duration: 3, |
---|
| | // ease: 'power4.out', |
---|
| | // }); |
---|
| | } |
---|
| | |
---|
| | // 打开弹窗 |
---|
| | labelData.value.forEach((element) => { |
---|
| | labelData.value.forEach(element => { |
---|
| | if (element.name == data.name[0]) { |
---|
| | element.show = true; |
---|
| | } else { |
---|
| | element.show = false; |
---|
| |
---|
| | // }; |
---|
| | onBeforeMount(() => { |
---|
| | // initGltfFloor(); |
---|
| | // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf'); |
---|
| | initModal( |
---|
| | "daqiao", |
---|
| | "https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/daqiao2.gltf" |
---|
| | ); |
---|
| | initModal('daqiao', 'https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/daqiao2.gltf'); |
---|
| | // 共同弹窗触发事件 |
---|
| | bus.on("WJP_BIM_flyTo", (params) => { |
---|
| | bus.on('WJP_BIM_flyTo', params => { |
---|
| | // 打开弹窗 |
---|
| | flyTo(params); |
---|
| | }); |
---|
| | }); |
---|
| | onMounted(() => { |
---|
| | nextTick(() => { |
---|
| | if (document.readyState === "complete") { |
---|
| | if (document.readyState === 'complete') { |
---|
| | createLable(); |
---|
| | // createWaterLevel(); |
---|
| | } |
---|
| | }); |
---|
| |
---|
| | // window.addEventListener("click", BIMClick, false); |
---|
| | }); |
---|
| | |
---|
| | onBeforeUnmount(() => { |
---|
| | bus.off("WJP_BIM_flyTo"); |
---|
| | bus.off('WJP_BIM_flyTo'); |
---|
| | // window.removeEventListener("click", BIMClick); |
---|
| | |
---|
| | // document.removeEventListener('click', meshOnClick); |
---|
| | // window.removeEventListener("resize", onWindowResize, false); |
---|
| | |
---|
| | Scene.traverse((e) => { |
---|
| | Scene.traverse(e => { |
---|
| | if (e.BufferGeometry) e.BufferGeometry.dispose(); |
---|
| | if (e.material) { |
---|
| | if (Array.isArray(e.material)) { |
---|
| | e.material.forEach((m) => { |
---|
| | e.material.forEach(m => { |
---|
| | m.dispose(); |
---|
| | }); |
---|
| | } else { |
---|
| | e.material.dispose(); |
---|
| |
---|
| | left: calc(50% + 19px); |
---|
| | bottom: 8px; |
---|
| | width: 45px; |
---|
| | // height: 26px; |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(12, 54, 92, 0.6) 0%, |
---|
| | rgba(12, 54, 92, 0.6) 100% |
---|
| | ); |
---|
| | background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%); |
---|
| | border-radius: 2px; |
---|
| | border: 1px solid #04d8ff; |
---|
| | .ydData { |
---|
| | display: flex; |
---|
| |
---|
| | // cursor: pointer; |
---|
| | pointer-events: none; |
---|
| | font-size: 3px; |
---|
| | text-align: center; |
---|
| | background: linear-gradient( |
---|
| | 90deg, |
---|
| | rgba(4, 216, 255, 0.8) 0%, |
---|
| | rgba(4, 216, 255, 0.2) 100% |
---|
| | ); |
---|
| | background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%); |
---|
| | } |
---|
| | |
---|
| | .YuanDianIcon { |
---|
| | width: 10px; |
---|
| |
---|
| | |
|