812 lines
20 KiB
Vue
812 lines
20 KiB
Vue
<template>
|
||
<div class="center-container">
|
||
<div class="statistics-panel">
|
||
<div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
|
||
<div
|
||
class="box"
|
||
@mouseenter="stat.label=='服务区'?showDropdown = true:stat.label==='收费站'?showDropdown1 = true:stat.label==='桥梁（座）'?showDropdown2 = true:stat.label==='枢纽互通（座）'?showDropdown3 = true:''"
|
||
@mouseleave="stat.label=='服务区'?showDropdown = false:stat.label==='收费站'?showDropdown1 = false:stat.label==='桥梁（座）'?showDropdown2 = false:stat.label==='枢纽互通（座）'?showDropdown3 = false:''"
|
||
style="position: relative;"
|
||
>
|
||
<div class="icon-wrapper">
|
||
<img :src="stat.image" :alt="stat.label" />
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">
|
||
{{ stat.label }}
|
||
</div>
|
||
<div class="stat-value">
|
||
<span class="number">{{ stat.value }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 只在服务区显示下拉选择 -->
|
||
<template v-if="stat.label === '服务区'">
|
||
<div
|
||
v-show="showDropdown"
|
||
class="dropdown large-dropdown"
|
||
@mouseenter="showDropdown = true"
|
||
@mouseleave="showDropdown = false"
|
||
>
|
||
<div
|
||
class="dropdown-item"
|
||
v-for="area in serviceAreas"
|
||
:key="area"
|
||
@click="selectServiceArea(area)"
|
||
>
|
||
{{ area.name }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 收费站 -->
|
||
<template v-if="stat.label === '收费站'">
|
||
<div
|
||
v-show="showDropdown1"
|
||
class="dropdown large-dropdown"
|
||
@mouseenter="showDropdown1 = true"
|
||
@mouseleave="showDropdown1 = false"
|
||
>
|
||
<div
|
||
class="dropdown-item"
|
||
v-for="area in tollStationList"
|
||
:key="area"
|
||
@click="selectServiceArea(area)"
|
||
>
|
||
{{ area.name }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 桥梁 -->
|
||
<template v-if="stat.label === '桥梁（座）'">
|
||
<div
|
||
v-show="showDropdown2"
|
||
class="dropdown large-dropdown"
|
||
@mouseenter="showDropdown2 = true"
|
||
@mouseleave="showDropdown2 = false"
|
||
>
|
||
<div
|
||
class="dropdown-item"
|
||
v-for="area in bridgeList"
|
||
:key="area"
|
||
@click="selectServiceArea(area)"
|
||
>
|
||
{{ area.name }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 枢纽互通（座） -->
|
||
<template v-if="stat.label === '枢纽互通（座）'">
|
||
<div
|
||
v-show="showDropdown3"
|
||
class="dropdown large-dropdown"
|
||
@mouseenter="showDropdown3 = true"
|
||
@mouseleave="showDropdown3 = false"
|
||
>
|
||
<div
|
||
class="dropdown-item"
|
||
v-for="area in hubIntercommunicationList"
|
||
:key="area"
|
||
@click="selectServiceArea(area)"
|
||
>
|
||
{{ area.name }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 下面弹框标题用当前选中的服务区 -->
|
||
<!-- <div v-if="showServiceArea" class="map-container">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">{{ selectedServiceArea }}</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDialog">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<RealTimeImageCenter />
|
||
</div>
|
||
</div> -->
|
||
<div v-if="showServiceArea" style="width: 5664px;" class="map-container RealTimeImage">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">{{selectedServiceArea}}</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDialog">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<RealTimeImageCenter :popUpContent="popUpContent"/>
|
||
</div>
|
||
</div>
|
||
<div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">设备信息（NO：{{ deviceInfo.deviceId }}）</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDeviceInfo">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<DeviceInfoComponent :deviceInfo="deviceInfo" />
|
||
</div>
|
||
</div>
|
||
<div class="map-container bg-header bg-header-two" style="width: 1800px;height: 1000px;" v-if="showDeviceInfoTwo">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">设备信息（NO：{{ deviceInfo.deviceId }}）</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDeviceInfo">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<DeviceInfoComponentTwo :deviceInfo="deviceInfoTwo" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, nextTick } from "vue";
|
||
import { onMounted } from 'vue';
|
||
import fee from "@/assets/img/fee.png";
|
||
import fwq from "@/assets/img/fwq2.png";
|
||
import km from "@/assets/img/km.png";
|
||
import toll from "@/assets/img/toll.png";
|
||
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
|
||
import DeviceInfoComponent from "./DeviceInfoComponent.vue";
|
||
import bridge from "@/assets/img/bridge.png";
|
||
import hub from "@/assets/img/hub.png";
|
||
import { getDeviceList } from "@/api/modules/index";
|
||
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
|
||
import Map from "./map.vue"
|
||
import { emitter } from '@/utils/eventBus';
|
||
import fwqImage from "@/assets/img/fwq.png";
|
||
import ql from "@/assets/img/ql.png";
|
||
import sfz from "@/assets/img/sfz.png";
|
||
import snht from "@/assets/img/snht.png";
|
||
const showServiceArea = ref(false);
|
||
const showMap = ref(true);
|
||
const showDeviceInfo = ref(false);
|
||
const showDeviceInfoTwo = ref(false);
|
||
const closeDialog = () => {
|
||
showServiceArea.value = false;
|
||
};
|
||
const showDropdown = ref(false);
|
||
const showDropdown1 = ref(false);
|
||
const showDropdown2 = ref(false);
|
||
const showDropdown3 = ref(false);
|
||
//服务区
|
||
const serviceAreas =[{
|
||
name:"南皮服务区",
|
||
type:'服务区',
|
||
fwqImage:fwqImage,
|
||
areaData:{
|
||
value: 6000,
|
||
unit: "m²",
|
||
name1:'占地面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "充电车位", value: 1888 },
|
||
{ label: "大型车位", value: 60 },
|
||
{ label: "小型车位", value: 200 },
|
||
{ label: "危险品车位", value: 20 },
|
||
]},{
|
||
name:"东光服务区",
|
||
type:'服务区',
|
||
fwqImage:fwqImage,
|
||
areaData:{
|
||
value: 6000,
|
||
unit: "m²",
|
||
name1:'占地面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "充电车位", value: 1888 },
|
||
{ label: "大型车位", value: 60 },
|
||
{ label: "小型车位", value: 200 },
|
||
{ label: "危险品车位", value: 20 }]
|
||
}]
|
||
const popUpContent= ref([])
|
||
const selectedServiceArea = ref({});
|
||
//收费站
|
||
// const tollStationList = ["连镇", "找王", "寨子", "盐山", "盐山东"];
|
||
|
||
const tollStationList = [{
|
||
name:"连镇",
|
||
type:'收费站',
|
||
fwqImage:sfz,
|
||
areaData:{
|
||
value: 1200,
|
||
unit: "m²",
|
||
name1:'建筑面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "入口ETC车道", value: 2 },
|
||
{ label: "出口ETC车道", value: 2 },
|
||
{ label: "入口混合车道", value: 2 },
|
||
{ label: "出口混合车道", value: 2 },
|
||
]},{
|
||
name:"找王",
|
||
type:'收费站',
|
||
fwqImage:sfz,
|
||
areaData:{
|
||
value: 1200,
|
||
unit: "m²",
|
||
name1:'建筑面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "入口ETC车道", value: 2 },
|
||
{ label: "出口ETC车道", value: 2 },
|
||
{ label: "入口混合车道", value: 2 },
|
||
{ label: "出口混合车道", value: 2 },
|
||
]
|
||
},{
|
||
name:"寨子",
|
||
type:'收费站',
|
||
fwqImage:sfz,
|
||
areaData:{
|
||
value: 1200,
|
||
unit: "m²",
|
||
name1:'建筑面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "入口ETC车道", value: 2 },
|
||
{ label: "出口ETC车道", value: 2 },
|
||
{ label: "入口混合车道", value: 2 },
|
||
{ label: "出口混合车道", value: 2 },
|
||
]
|
||
},{
|
||
name:"盐山",
|
||
type:'收费站',
|
||
fwqImage:sfz,
|
||
areaData:{
|
||
value: 1200,
|
||
unit: "m²",
|
||
name1:'建筑面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "入口ETC车道", value: 1 },
|
||
{ label: "出口ETC车道", value: 1 },
|
||
{ label: "入口混合车道", value: 2 },
|
||
{ label: "出口混合车道", value: 2 },
|
||
]
|
||
},{
|
||
name:"盐山东",
|
||
type:'收费站',
|
||
fwqImage:sfz,
|
||
areaData:{
|
||
value: 1200,
|
||
unit: "m²",
|
||
name1:'建筑面积(m²)'
|
||
},
|
||
llist:[
|
||
{ label: "入口ETC车道", value: 2 },
|
||
{ label: "出口ETC车道", value: 2 },
|
||
{ label: "入口混合车道", value: 2 },
|
||
{ label: "出口混合车道", value: 2 },
|
||
]
|
||
}];
|
||
const tollStation = ref("连镇");
|
||
//桥梁
|
||
// const bridgeList = ["南运河特大桥", "秦庄村大桥", "宣惠河大桥", "沙河大桥", "龙王河大桥", "大单沟大桥", "大商平底渠大桥"];
|
||
const bridgeList = [{
|
||
name:"南运河特大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value: 1003.838,
|
||
unit: "m²",
|
||
name1:'长度(m)（沧州境内）'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K61+407' },
|
||
]
|
||
},{
|
||
name:"秦庄村大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:577.543,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K62+401' },
|
||
]
|
||
},{
|
||
name:"宣惠河大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:702,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K65+716' },
|
||
]
|
||
},{
|
||
name:"沙河大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:131,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K76+079' },
|
||
]
|
||
},{
|
||
name:"龙王河大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:156,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K90+280' },
|
||
]
|
||
},{
|
||
name:"大单沟大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:127,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K96+099' },
|
||
]
|
||
},{
|
||
name:"大商平底渠大桥",
|
||
type:'桥梁（座）',
|
||
fwqImage:ql,
|
||
areaData:{
|
||
value:106,
|
||
unit: "m²",
|
||
name1:'长度(m)'
|
||
},
|
||
llist:[
|
||
{ label: "中心桩号", value: 'K114+265' },
|
||
]
|
||
}];
|
||
const bridge1 = ref("南运河特大桥");
|
||
//枢纽互通
|
||
// const hubIntercommunicationList = ["连镇互通", "大屯枢纽", "找王互通", "寨子互通", "小庄枢纽", "盐山互通", "盐山东互通"];
|
||
const hubIntercommunicationList = [{
|
||
name:"连镇互通",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K64+776',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: 'G105(京澳线)' },
|
||
{ label: "被交路等级", value: '一级公路' },
|
||
]
|
||
},{
|
||
name:"大屯枢纽",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K69+454',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: '京台高速' },
|
||
{ label: "被交路等级", value: '高速公路' },
|
||
]
|
||
},{
|
||
name:"找王互通",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K80+359',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: 'S337(辛平线)' },
|
||
{ label: "被交路等级", value: '一级公路' },
|
||
]
|
||
},{
|
||
name:"寨子互通",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K80+359',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: 'G104(京平线)' },
|
||
{ label: "被交路等级", value: '二级公路' },
|
||
]
|
||
},{
|
||
name:"小庄枢纽",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K119+655',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: '京沪高速' },
|
||
{ label: "被交路等级", value: '高速公路' },
|
||
]
|
||
},{
|
||
name:"盐山互通",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'S216(吕千线)',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: 'S216(吕千线)' },
|
||
{ label: "被交路等级", value: '一级公路' },
|
||
]
|
||
},{
|
||
name:"盐山东互通",
|
||
type:'枢纽互通',
|
||
fwqImage:snht,
|
||
areaData:{
|
||
value:'K139+358',
|
||
unit: "m²",
|
||
name1:'桩号'
|
||
},
|
||
llist:[
|
||
{ label: "被交路名称", value: 'G205(山深线)' },
|
||
{ label: "被交路等级", value: '一级公路' },
|
||
]
|
||
}];
|
||
const hubIntercommunication = ref("连镇互通");
|
||
|
||
function selectServiceArea(area) {
|
||
console.log(area, 'tttttttttt')
|
||
selectedServiceArea.value = area.name;
|
||
popUpContent.value = area
|
||
tollStation.value = area;
|
||
bridge1.value = area;
|
||
hubIntercommunication.value = area;
|
||
showServiceArea.value = true;
|
||
showDropdown.value = false;
|
||
showDropdown1.value = false;
|
||
showDropdown2.value = false;
|
||
showDropdown3.value = false;
|
||
}
|
||
// 统计数据配置
|
||
const statistics = ref([
|
||
{
|
||
image: km,
|
||
value: "78.338",
|
||
label: "全里程（公里）",
|
||
},
|
||
{
|
||
image: toll,
|
||
value: "5",
|
||
label: "收费站",
|
||
},
|
||
{
|
||
image: fwq,
|
||
value: "2",
|
||
label: "服务区",
|
||
},
|
||
{
|
||
image: bridge,
|
||
value: "7",
|
||
label: "桥梁（座）",
|
||
},
|
||
{
|
||
image: hub,
|
||
value: "7",
|
||
label: "枢纽互通（座）",
|
||
},
|
||
]);
|
||
|
||
// 设备信息数据
|
||
const deviceInfo = ref({
|
||
deviceType: '视频监控',
|
||
cameraType: '枪机',
|
||
deviceCode: '3_CAM1_0',
|
||
roadSection: '路段名称',
|
||
direction: '邯郸方向',
|
||
stakeNumber: 'K18+324',
|
||
longitude: '44.230145',
|
||
latitude: '45.65412',
|
||
ipAddress: '13.106.2.10'
|
||
});
|
||
|
||
const deviceInfoTwo = ref({
|
||
deviceType: '视频监控',
|
||
cameraType: '枪机',
|
||
deviceCode: '3_CAM1_0',
|
||
roadSection: '路段名称',
|
||
direction: '邯郸方向',
|
||
stakeNumber: 'K18+324',
|
||
longitude: '44.230145',
|
||
latitude: '45.65412',
|
||
ipAddress: '13.106.2.10'
|
||
});
|
||
|
||
// const deviceInfo = ref({});
|
||
function handleShowDeviceInfo(data) {
|
||
console.log("接收到设备信息:", data);
|
||
|
||
// 关闭其他面板
|
||
showDeviceInfo.value = false;
|
||
showDeviceInfoTwo.value = false;
|
||
|
||
if (data.deviceTypeId === "22" || data.deviceTypeId === "44") {
|
||
showDeviceInfo.value = true;
|
||
} else if (data.deviceTypeId === "15" || data.deviceTypeId === "53") {
|
||
showDeviceInfoTwo.value = true;
|
||
}
|
||
deviceInfoTwo.value = data;
|
||
deviceInfo.value = data;
|
||
}
|
||
const closeDeviceInfo = () => {
|
||
showDeviceInfo.value = false;
|
||
showDeviceInfoTwo.value = false;
|
||
showMap.value = true;
|
||
};
|
||
const mapFlag = ref(true);
|
||
onMounted(() => {
|
||
emitter.on("show-device-info", handleShowDeviceInfo);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.center-container {
|
||
width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
.RealTimeImage{
|
||
background-image: url("@/assets/img/eqm/fuwuqu.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.map-container.bg-header {
|
||
position: absolute;
|
||
top: 500px;
|
||
left: 42.5%;
|
||
// transform: translate(-50%, -50%);
|
||
z-index: 2000;
|
||
// box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.bg-header-one {
|
||
background-image: url("@/assets/img/eqm/eqminfo.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.bg-header-two {
|
||
background-image: url("@/assets/img/eqm/eqminfo2.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.statistics-panel {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 40%;
|
||
padding: 20px;
|
||
gap: 30px;
|
||
padding-top: 200px;
|
||
padding-bottom: 50px;
|
||
.box{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.stat-card {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 20px;
|
||
}
|
||
|
||
.card-background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg,
|
||
rgba(0, 170, 255, 0.1) 0%,
|
||
transparent 100%);
|
||
border-radius: 8px;
|
||
opacity: 0.5;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
position: relative;
|
||
margin-right: 15px;
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
|
||
.stat-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.stat-value {
|
||
.number {
|
||
font-size: 64px !important;
|
||
font-weight: bold;
|
||
color: #1ae9ee;
|
||
}
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 32px !important;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 8px;
|
||
letter-spacing: 1px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.map-container {
|
||
width: 78%;
|
||
margin-top: 30px;
|
||
// background: linear-gradient(360deg,
|
||
// rgba(15, 43, 89, 0.3) 0%,
|
||
// rgba(15, 43, 89, 0) 100%),
|
||
// rgba(15, 43, 89, 0.85);
|
||
// box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
|
||
// inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
|
||
// border-radius: 8px;
|
||
// border: 1px solid;
|
||
// border-image: linear-gradient(180deg,
|
||
// rgba(186, 213, 255, 0.3),
|
||
// rgba(186, 213, 255, 0)) 1 1;
|
||
// padding: 20px;
|
||
// box-sizing: border-box;
|
||
height: 1700px;
|
||
}
|
||
|
||
.map-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
padding: 15px 40px;
|
||
position: relative;
|
||
// border-bottom: 1px solid rgba(26, 233, 238, 0.2);
|
||
height: 150px;
|
||
background: repeating-linear-gradient(-65deg,
|
||
rgba(15, 43, 89, 0.3) 0px,
|
||
rgba(15, 43, 89, 0.3) 50px,
|
||
rgba(26, 233, 238, 0.05) 50px,
|
||
rgba(26, 233, 238, 0.05) 100px);
|
||
|
||
.title-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 52px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
|
||
&::before,
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
top: 50%;
|
||
left: 50%;
|
||
}
|
||
|
||
&::before {
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
}
|
||
|
||
&::after {
|
||
transform: translate(-50%, -50%) rotate(-45deg);
|
||
}
|
||
|
||
&:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-con {
|
||
width: 100%;
|
||
height: 90%;
|
||
/* background-color: #1ae9ee; */
|
||
// 用户可以在这里添加地图相关的内容
|
||
}
|
||
|
||
.eqm-info {
|
||
width: 1788px;
|
||
margin-top: 30px;
|
||
background: linear-gradient(360deg,
|
||
rgba(15, 43, 89, 0.3) 0%,
|
||
rgba(15, 43, 89, 0) 100%),
|
||
rgba(15, 43, 89, 0.85);
|
||
box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
|
||
inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
|
||
border-radius: 8px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(180deg,
|
||
rgba(186, 213, 255, 0.3),
|
||
rgba(186, 213, 255, 0)) 1 1;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
height: 1700px;
|
||
|
||
.eqm-title {
|
||
width: 100%;
|
||
height: 56px;
|
||
background-image: url("../../assets/img/eqm/eqmtitle.png");
|
||
}
|
||
}
|
||
|
||
.dropdown {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: -190px;
|
||
background: #112a44;
|
||
border: 1px solid #1ae9ee;
|
||
border-radius: 6px;
|
||
z-index: 100;
|
||
min-width: 220px;
|
||
min-height: 120px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
|
||
padding: 16px 0;
|
||
|
||
.dropdown-item {
|
||
padding: 20px 32px;
|
||
font-size: 28px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
|
||
&:hover {
|
||
background: #1ae9ee;
|
||
color: #112a44;
|
||
}
|
||
}
|
||
}
|
||
</style>
|