|
|
@@ -1,24 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="full animate__animated animate__faster" :class="menuIndex == 0 ? 'animate__bounceInLeft' : 'animate__bounceOutLeft'" style="overflow: hidden;" >
|
|
|
- <!-- 背景--3D场景 -->
|
|
|
- <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
|
|
|
- @loadingFinish="initScene">
|
|
|
- </scene3-d>
|
|
|
- <!-- 数据面板 -->
|
|
|
- <main-scene @openDialog="openDialog" @playVideo="playVideo" @showInfoBox="showInfoBox" ref="data-panel"
|
|
|
- style="z-index: 9;"> </main-scene>
|
|
|
-
|
|
|
- <!-- 工具栏 -->
|
|
|
- <tools-bar :option="toolsOption"></tools-bar>
|
|
|
-
|
|
|
- <!-- 园区事件 -->
|
|
|
- <mp-dialog ref="mpDialog" title="园区事件">
|
|
|
- <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
|
|
|
- {{dialogDetail.detail}}
|
|
|
- </div>
|
|
|
- </mp-dialog>
|
|
|
- <!-- 视频播放 -->
|
|
|
- <devicePlayer ref="devicePlayer"></devicePlayer>
|
|
|
+ <div class="full animate__animated animate__faster"
|
|
|
+ :class="menuIndex == 0 ? 'animate__fadeInLeftBig' : 'animate__fadeOutLeftBig'">
|
|
|
+ <basic-container style="margin-top: 10px;">
|
|
|
+ <avue-data-card :option="option"></avue-data-card>
|
|
|
+ </basic-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -26,503 +11,119 @@
|
|
|
import {
|
|
|
mapGetters
|
|
|
} from "vuex";
|
|
|
- import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
|
|
|
- import mpDialog from "../../components/mp-dialog.vue"
|
|
|
- import TopBar from "../../components/3DScene/top-bar/top-bar";
|
|
|
- import Scene3D from "../../components/3DScene/3DScene";
|
|
|
- import MainScene from "../../components/scene/mainScene";
|
|
|
- import ToolsBar from "../../components/3DScene/tools-bar/tools-bar";
|
|
|
- import * as Three from "three";
|
|
|
- import {
|
|
|
- getBox1,
|
|
|
- getCameraBox
|
|
|
- } from "../../components/3DScene/infoBox";
|
|
|
- import {
|
|
|
- CSS2DObject
|
|
|
- } from "three/examples/jsm/renderers/CSS2DRenderer";
|
|
|
- import {
|
|
|
- fullscreenToggel
|
|
|
- } from "../../util/util";
|
|
|
export default {
|
|
|
- name: "index",
|
|
|
- components: {
|
|
|
- devicePlayer,
|
|
|
- mpDialog,
|
|
|
- MainScene,
|
|
|
- Scene3D,
|
|
|
- TopBar,
|
|
|
- ToolsBar,
|
|
|
- },
|
|
|
computed: {
|
|
|
...mapGetters(["menuIndex"])
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- dialogDetail: {},
|
|
|
-
|
|
|
- mesh: {},
|
|
|
- searchText: "",
|
|
|
- searchCameraType: "",
|
|
|
- searchType: "building",
|
|
|
- searchIndex: 0,
|
|
|
- isReady: false,
|
|
|
- handlePanelShow: false,
|
|
|
- toolsPanelType: "building",
|
|
|
- toolsOption: [{
|
|
|
- icon: '/img/tools/361.png',
|
|
|
- name: '旋转',
|
|
|
- event: this.round
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/img/tools/reset.png',
|
|
|
- name: '复位',
|
|
|
- event: this.reset
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/img/tools/loudong.png',
|
|
|
- name: '建筑信息',
|
|
|
- event: () => {
|
|
|
- this.showBox(this.buildingObj, "building")
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/img/tools/video.png',
|
|
|
- name: '摄像头',
|
|
|
- event: () => {
|
|
|
- this.showBox(this.cameraObj, "camera")
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '/img/tools/full.png',
|
|
|
- name: '信息框',
|
|
|
- event: () => {
|
|
|
- this.$refs['data-panel'].infoBoxShow()
|
|
|
- }
|
|
|
- },
|
|
|
- ],
|
|
|
- finishNum: 0,
|
|
|
- loadingSchedule: 0,
|
|
|
- buildingsRes: [],
|
|
|
- cameraRes: [],
|
|
|
- objs: [],
|
|
|
- gltf: [
|
|
|
- '/gltf/7_8/20H.gltf',
|
|
|
- '/gltf/5H/5H.gltf',
|
|
|
- '/gltf/3H/3H.gltf',
|
|
|
- '/gltf/7H/7H.gltf',
|
|
|
- '/gltf/13H/13H.gltf',
|
|
|
- '/gltf/14H/14H.gltf',
|
|
|
- '/gltf/17H/17H.gltf',
|
|
|
- '/gltf/1H/1H.gltf',
|
|
|
- '/gltf/DX2/DX2.gltf',
|
|
|
- '/gltf/TiKuai/TiKuai.gltf',
|
|
|
- '/gltf/SKY/Sky.gltf',
|
|
|
- '/gltf/Tree_Car/Tree_Car.gltf',
|
|
|
- ],
|
|
|
- controlsOption: {
|
|
|
- minDistance: 100,
|
|
|
- maxDistance: 500,
|
|
|
- autoRotate: false,
|
|
|
- autoRotateSpeed: 1,
|
|
|
- keyPanSpeed: 3,
|
|
|
- target: new Three.Vector3(0, 0, 0),
|
|
|
- enableDamping: true,
|
|
|
- },
|
|
|
- cameraOptions: {
|
|
|
- position: [5000, 5000, 1000],
|
|
|
- near: 0.01,
|
|
|
- far: 50000,
|
|
|
- lookAt: [1300, 0, 1300],
|
|
|
+ option: {
|
|
|
+ span: 8,
|
|
|
+ data: [{
|
|
|
+ name: '大屏设计器',
|
|
|
+ src: './test/3.png',
|
|
|
+ text: '自动生成大屏数据面板',
|
|
|
+ href: 'https://data.avuejs.com/build/1427195433161928705',
|
|
|
+ target: '_blank'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '3D场景设计器',
|
|
|
+ src: './test/1.png',
|
|
|
+ text: '构建自己的3D可视化场景',
|
|
|
+ href: 'http://8.129.99.119/editor/editor/',
|
|
|
+ target: '_blank'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '信阳榕基软件园',
|
|
|
+ src: './test/2.png',
|
|
|
+ text: '信阳软件园区',
|
|
|
+ href: 'http://192.168.1.69:1888/',
|
|
|
+ target: '_blank'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: '城市指挥中心',
|
|
|
+ // src: './test/5.png',
|
|
|
+ // text: '城市指挥中心',
|
|
|
+ // href:'http://36.103.227.152:1777',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '城市网格管理',
|
|
|
+ // src: './test/4.png',
|
|
|
+ // text: '城市网格管理',
|
|
|
+ // href:'http://36.103.227.152:1666',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '宁夏银川市望远工业园区德锐斯创业园',
|
|
|
+ // src: './test/6.png',
|
|
|
+ // text: '宁夏银川市望远工业园区德锐斯创业园',
|
|
|
+ // href:'http://139.9.103.171:1999/#/wel/index21',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '宁夏数字社区',
|
|
|
+ // src: './test/7.png',
|
|
|
+ // text: '宁夏数字社区',
|
|
|
+ // href:'http://139.9.103.171:1888/#/wel/smartCommunity',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '消防态势--设备态势',
|
|
|
+ // src: './test/8.png',
|
|
|
+ // text: '消防态势--设备态势',
|
|
|
+ // href:'http://192.168.1.69:1889/#/wel/fireDevices',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '养老服务',
|
|
|
+ // src: './test/9.png',
|
|
|
+ // text: '养老服务',
|
|
|
+ // href:'http://192.168.1.69:1889/#/wel/smartPension',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '公安服务',
|
|
|
+ // src: './test/10.png',
|
|
|
+ // text: '公安服务',
|
|
|
+ // href:'http://192.168.1.69:1889/#/wel/smartPolice',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '运营服务',
|
|
|
+ // src: './test/11.png',
|
|
|
+ // text: '运营服务',
|
|
|
+ // href:'http://192.168.1.69:1889/#/wel/operatePlatform',
|
|
|
+ // target:'_blank'
|
|
|
+ // },
|
|
|
+ ]
|
|
|
},
|
|
|
- obj: [{
|
|
|
- mtlUrl: '/obj/CAR.mtl',
|
|
|
- objUrl: '/obj/CAR.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/DX.mtl',
|
|
|
- objUrl: '/obj/DX.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/test/Tree.mtl',
|
|
|
- objUrl: '/test/Tree.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/TiKuai.mtl',
|
|
|
- objUrl: '/obj/TiKuai.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/XiaoPin.mtl',
|
|
|
- objUrl: '/obj/XiaoPin.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/test/Building_A.mtl',
|
|
|
- objUrl: '/test/Building_A.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/test/BuildingB.mtl',
|
|
|
- objUrl: '/test/BuildingB.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/test/BuildingC.mtl',
|
|
|
- objUrl: '/test/BuildingC.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/3H.mtl',
|
|
|
- objUrl: '/obj/building/3H.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/5H.mtl',
|
|
|
- objUrl: '/obj/building/5H.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/13H.mtl',
|
|
|
- objUrl: '/obj/building/13H.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/14H.mtl',
|
|
|
- objUrl: '/obj/building/14.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/17.mtl',
|
|
|
- objUrl: '/obj/building/17.obj'
|
|
|
- },
|
|
|
- {
|
|
|
- mtlUrl: '/obj/building/20.mtl',
|
|
|
- objUrl: '/obj/building/20.obj'
|
|
|
- },
|
|
|
- ],
|
|
|
- buildings: [{
|
|
|
- text: '软件园主楼',
|
|
|
- position: [100, 115, 100]
|
|
|
- },
|
|
|
- {
|
|
|
- text: '软件园副楼',
|
|
|
- position: [170, 50, 50]
|
|
|
- },
|
|
|
- {
|
|
|
- text: '软件园A栋',
|
|
|
- position: [0, 105, 110]
|
|
|
- },
|
|
|
- {
|
|
|
- text: '软件园B栋',
|
|
|
- position: [-70, 105, 110]
|
|
|
- },
|
|
|
- {
|
|
|
- text: '软件园C栋',
|
|
|
- position: [-120, 105, 55]
|
|
|
- },
|
|
|
- {
|
|
|
- text: '软件园D栋',
|
|
|
- position: [-120, 105, -20]
|
|
|
- },
|
|
|
- ],
|
|
|
- cameraList: [{
|
|
|
- number: 'HK-nm51658186',
|
|
|
- position: [50, 0, 70],
|
|
|
- src: '/video/video2.mp4',
|
|
|
- name: "设备2",
|
|
|
- type: "枪机"
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'HK-nm51658186',
|
|
|
- position: [-100, 0, 100],
|
|
|
- src: '/video/video3.mp4',
|
|
|
- name: "设备3",
|
|
|
- type: "枪机"
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'HK-nm51658186',
|
|
|
- position: [100, 0, 20],
|
|
|
- src: '/video/video4.mp4',
|
|
|
- name: "设备4",
|
|
|
- type: "枪机"
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'HK-nm51658186',
|
|
|
- position: [200, 0, 50],
|
|
|
- src: '/video/video4.mp4',
|
|
|
- name: "设备4",
|
|
|
- type: "球机"
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'HK-nm51658186',
|
|
|
- position: [75, 0, 10],
|
|
|
- src: '/video/video4.mp4',
|
|
|
- name: "设备4",
|
|
|
- type: "球机"
|
|
|
- },
|
|
|
- ],
|
|
|
- cameraObj: {},
|
|
|
- buildingObj: {},
|
|
|
- }
|
|
|
- },
|
|
|
- provide() {
|
|
|
- return {
|
|
|
- "index": this
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.buildingsRes = this.buildings;
|
|
|
- this.cameraRes = this.cameraList;
|
|
|
- },
|
|
|
- watch: {
|
|
|
- searchCameraType() {
|
|
|
- this.cameraRes = this.searchCameraType == "全部" ? this.cameraList : this.cameraList.filter(item => item.type ==
|
|
|
- this.searchCameraType)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- showInfoBox() {
|
|
|
- this.toolsOption.forEach(item => {
|
|
|
- if (item.name == '信息框') {
|
|
|
- if (item.icon == '/img/tools/full.png') {
|
|
|
- item.icon = '/img/tools/full-out.png'
|
|
|
- } else {
|
|
|
- item.icon = '/img/tools/full.png'
|
|
|
- }
|
|
|
- console.log(item, "123");
|
|
|
- this.$forceUpdate()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- openDialog(item) {
|
|
|
- this.dialogDetail = item
|
|
|
- this.$refs.mpDialog.open(item.time)
|
|
|
- },
|
|
|
- playVideo(item) {
|
|
|
|
|
|
- const {
|
|
|
- deviceId
|
|
|
- } = item
|
|
|
- const {
|
|
|
- channelId
|
|
|
- } = item
|
|
|
- const {
|
|
|
- info
|
|
|
- } = item
|
|
|
- this.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
|
|
|
- },
|
|
|
- reset() {
|
|
|
- this.$refs['scene'].camera.position.z = this.cameraOptions.position[0];
|
|
|
- this.$refs['scene'].camera.position.x = this.cameraOptions.position[1];
|
|
|
- this.$refs['scene'].camera.position.y = this.cameraOptions.position[2];
|
|
|
- this.$refs['scene'].camera.lookAt(...this.cameraOptions.lookAt);
|
|
|
- this.$refs['scene'].controls.target.set(0, 0, 0);
|
|
|
- this.$refs['data-panel'].infoBoxShow(true);
|
|
|
- },
|
|
|
- handleNext(num, list) {
|
|
|
- this.searchIndex = (this.searchIndex + num) % list.children.length;
|
|
|
- if (this.searchIndex < 0) {
|
|
|
- this.searchIndex = list.children.length + this.searchIndex;
|
|
|
- }
|
|
|
- list.children.forEach((item, index) => {
|
|
|
- console.log(this.searchIndex, index);
|
|
|
- if (index == this.searchIndex) {
|
|
|
- this.$refs['scene'].flyto(item.position);
|
|
|
- item.visible = true;
|
|
|
- } else {
|
|
|
- item.visible = false;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- async initScene() {
|
|
|
- this.$refs['scene'].scene.fog = new Three.Fog(this.$refs['scene'].scene.background, 1, 5000);
|
|
|
- //添加天空盒
|
|
|
- // this.$refs['scene'].addSkyBox(
|
|
|
- // [
|
|
|
- // '/sky/HDR_r.jpg',
|
|
|
- // '/sky/HDR_l.jpg',
|
|
|
- // '/sky/HDR_u.jpg',
|
|
|
- // '/sky/HDR_d.jpg',
|
|
|
- // '/sky/HDR_f.jpg',
|
|
|
- // '/sky/HDR_b.jpg',
|
|
|
- // ]
|
|
|
- // );
|
|
|
- // 添加模型
|
|
|
- // await this.addObj();
|
|
|
- await this.addGltf();
|
|
|
- this.addDirectionalLight();
|
|
|
- this.initBoxInfo();
|
|
|
- this.isReady = true;
|
|
|
- //自旋转
|
|
|
- // this.$refs['scene'].controls.autoRotate = true;
|
|
|
-
|
|
|
- },
|
|
|
- toBuilding(objIndex, list) {
|
|
|
- list.children.forEach((item, index) => {
|
|
|
- if (objIndex == index) {
|
|
|
- this.searchIndex = index;
|
|
|
- this.$refs['scene'].flyto(item.position);
|
|
|
- item.visible = true;
|
|
|
- } else {
|
|
|
- item.visible = false;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- quitToolPanel() {
|
|
|
- this.handlePanelShow = false;
|
|
|
- this.buildingObj.children.forEach(item => {
|
|
|
- item.visible = false;
|
|
|
- })
|
|
|
- this.cameraObj.children.forEach(item => {
|
|
|
- item.visible = false;
|
|
|
- })
|
|
|
- this.reset();
|
|
|
- },
|
|
|
- async addGltf() {
|
|
|
- this.gltf.forEach(item => {
|
|
|
- this.$refs['scene'].addGltf(item,
|
|
|
- (gltf) => {
|
|
|
- this.$refs['scene'].scene.add(gltf.scene)
|
|
|
- gltf.scene.traverse(function(child) {
|
|
|
- child.castShadow = true;
|
|
|
- child.receiveShadow = true;
|
|
|
- if (child.isMesh) {
|
|
|
- console.log(child, 546546);
|
|
|
- child.material.color = new Three.Color("rgb(200,200,200)");
|
|
|
- child.material.side = Three.DoubleSide;
|
|
|
- child.material.emissive = child.material.color;
|
|
|
- child.material.emissiveMap = child.material.map;
|
|
|
-
|
|
|
- if (child.material.name == 'JZ_LanGan_GeZi' || child.material.name == 'JZ_14_LanGan' ||
|
|
|
- child.name.indexOf("Tree") > -1) {
|
|
|
- console.log(child.name, 456789)
|
|
|
- child.material.transparent = true;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- this.finishNum++;
|
|
|
- this.loadingSchedule = ((this.finishNum * 100) / (this.gltf.length * 100)) * 100
|
|
|
- },
|
|
|
- (xhr) => {
|
|
|
- if (xhr.total == xhr.loaded) {
|
|
|
- // this.finishNum++;
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- initBoxInfo() {
|
|
|
- this.buildingObj = new Three.Object3D();
|
|
|
- this.buildings.forEach(item => {
|
|
|
- let element = getBox1(item.text, this);
|
|
|
- let label = new CSS2DObject(element);
|
|
|
- label.position.x = item.position[0];
|
|
|
- label.position.y = item.position[1];
|
|
|
- label.position.z = item.position[2];
|
|
|
- label.visible = false;
|
|
|
- this.buildingObj.add(label);
|
|
|
- })
|
|
|
- this.$refs['scene'].scene.add(this.buildingObj);
|
|
|
-
|
|
|
- this.cameraObj = new Three.Object3D();
|
|
|
- this.cameraList.forEach(item => {
|
|
|
- let element = getCameraBox(item, this);
|
|
|
- let label = new CSS2DObject(element);
|
|
|
- label.position.x = item.position[0];
|
|
|
- label.position.y = item.position[1];
|
|
|
- label.position.z = item.position[2];
|
|
|
- label.visible = false;
|
|
|
- this.cameraObj.add(label);
|
|
|
- })
|
|
|
- this.$refs['scene'].scene.add(this.cameraObj);
|
|
|
-
|
|
|
- },
|
|
|
- //添加平行光
|
|
|
- addDirectionalLight() {
|
|
|
- //添加光源
|
|
|
- let dirLight = new Three.DirectionalLight("#bebebe", 1)
|
|
|
- dirLight.position.set(1, 1, 1);
|
|
|
- dirLight.shadow.mapSize.width = 512; // default
|
|
|
- dirLight.shadow.mapSize.height = 512; // default
|
|
|
- dirLight.shadow.camera.near = 1; // default
|
|
|
- dirLight.shadow.camera.far = 100;
|
|
|
- dirLight.castShadow = true;
|
|
|
- this.$refs['scene'].scene.add(dirLight);
|
|
|
- },
|
|
|
- showBox(list, type) {
|
|
|
- this.$refs['scene'].controls.autoRotate = false;
|
|
|
- this.toolsPanelType = type;
|
|
|
- this.handlePanelShow = true;
|
|
|
- this.searchIndex = 0;
|
|
|
- if (list.children.length > 0) {
|
|
|
- list.children[0].visible = true;
|
|
|
- this.$refs['data-panel'].infoBoxShow(false)
|
|
|
- this.$refs['scene'].flyto(list.children[0].position)
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- showCamera() {
|
|
|
- const list = this.cameraObj;
|
|
|
- list.children.forEach((item, index) => {
|
|
|
- item.visible = !item.visible;
|
|
|
- })
|
|
|
- },
|
|
|
- handleFull() {
|
|
|
- fullscreenToggel();
|
|
|
- },
|
|
|
- round() {
|
|
|
- this.$refs['scene'].controls.autoRotate = !this.$refs['scene'].controls.autoRotate;
|
|
|
- },
|
|
|
- handleSearch() {
|
|
|
- this.buildingsRes = this.buildings.filter(item => item.text.indexOf(this.searchText) > -1)
|
|
|
- },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
- .handle-panel-1 {
|
|
|
- width: 20%;
|
|
|
- height: 430px;
|
|
|
- /* background: rgba(230, 160, 9, 0.5); */
|
|
|
- position: absolute;
|
|
|
- top: 200px;
|
|
|
- left: 3%;
|
|
|
- }
|
|
|
|
|
|
- .handle-panel-2 {
|
|
|
- width: 20%;
|
|
|
- height: 510px;
|
|
|
- /* background: rgba(230, 160, 9, 0.5); */
|
|
|
- position: absolute;
|
|
|
- top: 200px;
|
|
|
- left: 3%;
|
|
|
- }
|
|
|
|
|
|
- .search-body {
|
|
|
- overflow-y: scroll;
|
|
|
- width: 100%;
|
|
|
+<style scoped lang="scss">
|
|
|
+ /deep/ .data-card .item {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto 50px;
|
|
|
+ width: 500px;
|
|
|
height: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- .search-footer {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- color: whitesmoke;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .search-item {
|
|
|
- width: 95%;
|
|
|
- margin: auto;
|
|
|
- height: 45px;
|
|
|
- border-bottom: 1px solid #525252;
|
|
|
- }
|
|
|
-
|
|
|
- .click:hover {
|
|
|
- cursor: pointer;
|
|
|
- transform: translate(1px, 1px);
|
|
|
- }
|
|
|
+ overflow: hidden;
|
|
|
+ /* border-radius: 5px;
|
|
|
+ border-color: transparent; */
|
|
|
+ /* border-width: 1px;
|
|
|
+ border-style: solid; */
|
|
|
+ /* box-shadow: 2px 2px 2px #30313B; */
|
|
|
|
|
|
- .click:active {
|
|
|
- cursor: pointer;
|
|
|
- transform: translate(2px, 2px);
|
|
|
}
|
|
|
|
|
|
- .building-click:hover {
|
|
|
- cursor: pointer;
|
|
|
- text-shadow: 2px 2px 2px #ccffb4;
|
|
|
+ /deep/ .el-card {
|
|
|
+ border: 1px solid transparent;
|
|
|
}
|
|
|
</style>
|
