Skip to content

J
JINRUN-DP
Commit 0f5a95e3 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

大屏 toggle

parent c9c8e1b0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 888 additions and 157 deletions
src/components/MineMonitor/LeftDeviceStatus.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="device-status-card">
<div class="card-header">
<h2 class="card-title">设备状态总览</h2>
</div>
<div class="status-grid">
<!-- 在线监测 -->
<div class="status-item">
<div class="percent blue">100%</div>
<div class="name">在线监测</div>
<div class="detail">在线: 56 离线: 0</div>
</div>
<!-- 视频监测 -->
<div class="status-item">
<div class="percent yellow">82%</div>
<div class="name">视频监测</div>
<div class="detail">在线: 87 离线: 2</div>
</div>
<!-- 人员定位 -->
<div class="status-item">
<div class="percent cyan">88%</div>
<div class="name">人员定位</div>
<div class="detail">在线: 16 离线: 2</div>
</div>
<!-- 车辆定位 -->
<div class="status-item">
<div class="percent green">100%</div>
<div class="name">车辆定位</div>
<div class="detail">在线: 7 离线: 2</div>
</div>
</div>
</n-card>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.device-status-card {
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
}
.status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.1rem;
.status-item {
text-align: center;
padding: 0.1rem;
background: rgba(10, 25, 71, 0.6);
border-radius: 0.05rem;
.percent {
font-size: 0.24rem;
font-weight: bold;
margin-bottom: 0.05rem;
&.blue { color: #36a2eb; }
&.yellow { color: #facc15; }
&.cyan { color: #4bc0c0; }
&.green { color: #6dd230; }
}
.name {
font-size: 0.14rem;
color: var(--n-text-color-secondary);
margin-bottom: 0.03rem;
}
.detail {
font-size: 0.12rem;
color: var(--n-text-color-tertiary);
}
}
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/LeftOnlineMonitor.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="online-monitor-card">
<div class="card-header">
<h2 class="card-title">在线监测实时数据</h2>
</div>
<n-table
:columns="columns"
:data="tableData"
size="small"
:pagination="false"
class="monitor-table"
/>
</n-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const columns = ref([
{ title: '设备名称', key: 'name', align: 'left' },
{ title: '监测值', key: 'value', align: 'center' },
{ title: '监测时间', key: 'time', align: 'center' },
]);
const tableData = ref([
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }
]);
</script>
<style scoped lang="scss">
.online-monitor-card {
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
}
.monitor-table {
max-height: 1.5rem;
overflow-y: auto;
--n-table-row-hover-bg-color: rgba(10, 25, 71, 0.4);
.normal { color: #6dd230; }
.warning { color: #facc15; }
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/LeftRainfallTrend.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="rainfall-trend-card">
<div class="card-header">
<h2 class="card-title">近24小时降雨量变化趋势图</h2>
<n-button size="small" type="text" class="collapse-btn">
<n-icon><ChevronUp /></n-icon> 收起
</n-button>
</div>
<div class="chart-container" ref="chartRef"></div>
</n-card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import { ChevronUp } from '@vicons/ionicons5';
const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
// 初始化ECharts
const initChart = () => {
if (!chartRef.value) return;
chartInstance = echarts.init(chartRef.value);
const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
const data = hours.map(() => Math.floor(Math.random() * 150) + 20);
chartInstance.setOption({
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category', data: hours,
axisLine: { lineStyle: { color: '#4f6b95' } },
axisLabel: { color: '#a0b3d6', interval: 2 }
},
yAxis: {
type: 'value', max: 300,
axisLine: { lineStyle: { color: '#4f6b95' } },
axisLabel: { color: '#a0b3d6' },
splitLine: { lineStyle: { color: 'rgba(79, 107, 149, 0.2)' } }
},
series: [{
data, type: 'line', smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(54, 162, 235, 0.4)' },
{ offset: 1, color: 'rgba(54, 162, 235, 0)' }
])
},
lineStyle: { color: 'rgba(54, 162, 235, 1)', width: 2 }
}]
});
};
// 窗口缩放适配
const resizeChart = () => chartInstance?.resize();
onMounted(() => {
nextTick(initChart);
window.addEventListener('resize', resizeChart);
});
onUnmounted(() => {
window.removeEventListener('resize', resizeChart);
chartInstance?.dispose();
});
</script>
<style scoped lang="scss">
.rainfall-trend-card {
flex: 1;
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
.collapse-btn {
font-size: 0.14rem;
color: var(--n-primary-color);
}
}
.chart-container {
width: 100%;
height: calc(100% - 0.4rem);
min-height: 1.2rem;
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/MapContainer.vue 0 → 100644
View file @ 0f5a95e3
<template>
<div class="map-container">
</div>
</template>
<script setup lang="ts">
// import { VideoCamera, MapMarker, Person, AlertCircle, ChevronDown } from '@vicons/ionicons5';
</script>
<style scoped lang="scss">
.map-container {
position: relative;
width: 100%;
height: 100%;
.map-bg {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.marker {
position: absolute;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: rgba(54, 162, 235, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
&:hover { transform: scale(1.2); }
.label {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(10, 25, 71, 0.9);
color: #fff;
font-size: 0.12rem;
padding: 0.03rem 0.05rem;
border-radius: 0.03rem;
margin-top: 0.05rem;
}
// 标记点位置
&.warehouse-cam { top: 30%; left: 55%; }
&.slope-displacement { top: 60%; left: 50%; }
&.person-position { top: 45%; left: 35%; }
&.warning-point {
top: 55%; left: 30%;
background: rgba(255, 99, 132, 0.8);
animation: pulse 2s infinite;
}
}
.filter-dropdown {
position: absolute;
top: 0.2rem;
right: 0.2rem;
z-index: 10;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 99, 132, 0.7); }
70% { box-shadow: 0 0 0 0.1rem rgba(255, 99, 132, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 99, 132, 0); }
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/RightAiWarning.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="ai-warning-card">
<div class="card-header">
<h2 class="card-title">当月司机AI预警分析</h2>
</div>
<div class="chart-container" ref="chartRef"></div>
<div class="legend">
<div class="item"><span class="dot blue"></span> 疲劳闭眼: 10</div>
<div class="item"><span class="dot cyan"></span> 疲劳打哈欠: 5</div>
<div class="item"><span class="dot green"></span> 违规打电话: 15</div>
<div class="item"><span class="dot yellow"></span> 违规抽烟: 0</div>
<div class="item"><span class="dot orange"></span> 左顾右盼: 2</div>
<div class="item"><span class="dot red"></span> 人脸丢失: 0</div>
</div>
</n-card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = () => {
if (!chartRef.value) return;
chartInstance = echarts.init(chartRef.value);
chartInstance.setOption({
series: [{
name: '预警类型', type: 'pie', radius: ['30%', '70%'],
itemStyle: { borderRadius: 4, borderColor: 'var(--n-bg-color-secondary)', borderWidth: 2 },
label: { show: false },
data: [
{ value: 10, name: '疲劳闭眼', itemStyle: { color: '#36a2eb' } },
{ value: 5, name: '疲劳打哈欠', itemStyle: { color: '#4bc0c0' } },
{ value: 15, name: '违规打电话', itemStyle: { color: '#6dd230' } },
{ value: 0, name: '违规抽烟', itemStyle: { color: '#facc15' } },
{ value: 2, name: '左顾右盼', itemStyle: { color: '#ff9f40' } },
{ value: 0, name: '人脸丢失', itemStyle: { color: '#ff6384' } }
]
}]
});
};
const resizeChart = () => chartInstance?.resize();
onMounted(() => {
nextTick(initChart);
window.addEventListener('resize', resizeChart);
});
onUnmounted(() => {
window.removeEventListener('resize', resizeChart);
chartInstance?.dispose();
});
</script>
<style scoped lang="scss">
.ai-warning-card {
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
}
.chart-container {
width: 100%;
height: 1.2rem;
}
.legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.05rem;
margin-top: 0.1rem;
font-size: 0.12rem;
color: var(--n-text-color-secondary);
.item { display: flex; align-items: center; gap: 0.05rem; }
.dot {
width: 0.1rem; height: 0.1rem; border-radius: 50%; display: inline-block;
&.blue { background: #36a2eb; }
&.cyan { background: #4bc0c0; }
&.green { background: #6dd230; }
&.yellow { background: #facc15; }
&.orange { background: #ff9f40; }
&.red { background: #ff6384; }
}
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/RightEnvMonitor.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="env-monitor-card">
<div class="card-header">
<h2 class="card-title">环境监测实时数据</h2>
<n-button size="small" type="text" class="collapse-btn">
<n-icon><ChevronUp /></n-icon> 收起
</n-button>
</div>
<div class="env-grid">
<div class="item">
<n-icon color="#6dd230" size="0.25rem"><CheckCircle /></n-icon>
<div class="name">在线</div>
</div>
<div class="item">
<n-icon color="#ff6384" size="0.25rem"><ThermometerHalf /></n-icon>
<div class="name">温度</div>
<div class="value">25°C</div>
</div>
<div class="item">
<n-icon color="#36a2eb" size="0.25rem"><Tint /></n-icon>
<div class="name">湿度</div>
<div class="value">25%RH</div>
</div>
<div class="item">
<n-icon color="#a0b3d6" size="0.25rem"><Cloud /></n-icon>
<div class="name">PM2.5</div>
<div class="value">2.5μg/m³</div>
</div>
<div class="item">
<n-icon color="#4bc0c0" size="0.25rem"><LocationArrow /></n-icon>
<div class="name">风向</div>
<div class="value">东</div>
</div>
<div class="item">
<n-icon color="#9c27b0" size="0.25rem"><Wind /></n-icon>
<div class="name">风速</div>
<div class="value">25m/s</div>
</div>
<div class="item">
<n-icon color="#facc15" size="0.25rem"><Speedometer /></n-icon>
<div class="name">气压</div>
<div class="value">8Kpa</div>
</div>
<div class="item">
<n-icon color="#ff9f40" size="0.25rem"><Cloud /></n-icon>
<div class="name">PM10</div>
<div class="value">10μg/m³</div>
</div>
</div>
</n-card>
</template>
<script setup lang="ts">
// import { CheckCircle, ThermometerHalf, Tint, Cloud, LocationArrow, Wind, Speedometer, ChevronUp } from '@vicons/ionicons5';
</script>
<style scoped lang="scss">
.env-monitor-card {
flex: 1;
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
.collapse-btn {
font-size: 0.14rem;
color: var(--n-primary-color);
}
}
.env-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.1rem;
.item {
text-align: center;
padding: 0.1rem;
background: rgba(10, 25, 71, 0.6);
border-radius: 0.05rem;
.name {
font-size: 0.14rem;
color: var(--n-text-color-secondary);
margin: 0.05rem 0;
}
.value {
font-size: 0.18rem;
font-weight: bold;
color: var(--n-text-color-primary);
}
}
}
}
</style>
\ No newline at end of file
src/components/MineMonitor/RightTodayAlarm.vue 0 → 100644
View file @ 0f5a95e3
<template>
<n-card :bordered="false" class="today-alarm-card">
<div class="card-header">
<h2 class="card-title">今日报警信息</h2>
</div>
<div class="alarm-tabs">
<n-tag type="error" ghost>SO5报警(0)</n-tag>
<n-tag type="warning" ghost>车辆报警(3)</n-tag>
<n-tag type="info" ghost>越界开采(4)</n-tag>
<n-tag type="primary" ghost>在线监测(4)</n-tag>
</div>
<div class="alarm-list">
<div class="item orange">
<div class="content">
<div class="device">边坡表面位移01</div>
<div class="level">橙色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
<div class="item blue">
<div class="content">
<div class="device">降雨量</div>
<div class="level">蓝色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
<div class="item yellow">
<div class="content">
<div class="device">边坡表面位移01</div>
<div class="level">黄色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
</div>
</n-card>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.today-alarm-card {
padding: 0.15rem;
background: var(--n-bg-color-secondary);
.card-header {
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
}
.alarm-tabs {
display: flex;
gap: 0.05rem;
margin-bottom: 0.15rem;
flex-wrap: wrap;
}
.alarm-list {
display: flex;
flex-direction: column;
gap: 0.1rem;
max-height: 1.2rem;
overflow-y: auto;
.item {
padding: 0.1rem;
background: rgba(10, 25, 71, 0.6);
border-radius: 0.05rem;
display: flex;
justify-content: space-between;
font-size: 0.14rem;
&.orange { border-left: 0.03rem solid #ff9f40; }
&.blue { border-left: 0.03rem solid #36a2eb; }
&.yellow { border-left: 0.03rem solid #facc15; }
.content {
.device { color: var(--n-text-color-primary); }
.level { font-size: 0.12rem; margin-top: 0.03rem; }
}
.detail {
text-align: right;
font-size: 0.12rem;
color: var(--n-text-color-secondary);
.value { margin-bottom: 0.03rem; }
}
}
}
}
</style>
\ No newline at end of file
src/typings/components.d.ts
View file @ 0f5a95e3
This diff is collapsed.
src/views/_builtin/cesiumDeom/index.vue
View file @ 0f5a95e3
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium'; import * as Cesium from 'cesium';
import '../../../../Cesium/Widgets/widgets.css'; import '../../../../Cesium/Widgets/widgets.css';
// 引入拆分的组件
// import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue';
let viewer: Cesium.Viewer | null = null; let viewer: Cesium.Viewer | null = null;
// REM自适应配置 // REM自适应配置
...@@ -28,6 +32,33 @@ const setRemUnit = () => { ...@@ -28,6 +32,33 @@ const setRemUnit = () => {
document.documentElement.style.fontSize = `${fontSize}px`; document.documentElement.style.fontSize = `${fontSize}px`;
}; };
// 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true)
const isRightModulesVisible = ref(true)
// 切换左侧模块显示状态
const toggleLeftModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value
}
// 切换右侧模块显示状态
const toggleRightModules = () => {
isRightModulesVisible.value = !isRightModulesVisible.value
}
// 切换两侧模块显示状态
const toggleBothModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value
isRightModulesVisible.value = !isRightModulesVisible.value
}
// 导入所需的图片资源
import arrowLeftImg from '@/assets/jinrun/arrow-left.png'
import arrowRightImg from '@/assets/jinrun/arrow-right.png'
onMounted(() => { onMounted(() => {
// 配置Cesium资源路径 // 配置Cesium资源路径
window.CESIUM_BASE_URL = '/Cesium'; window.CESIUM_BASE_URL = '/Cesium';
...@@ -154,21 +185,63 @@ const navTo = () => { ...@@ -154,21 +185,63 @@ const navTo = () => {
<!-- 非地图相关 开始 --> <!-- 非地图相关 开始 -->
<div class="mine-monitor-page">
<!-- 左侧3个模块 --> <!-- 左侧收起按钮 -->
<div class="left-modules"> <div
<LeftDeviceStatus /> class="toggle-btn left-toggle"
<LeftRainfallTrend /> :class="{ 'collapsed': !isLeftModulesVisible }"
<LeftOnlineMonitor /> @click="toggleBothModules"
>
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset=""><br>
<span class="arrow-font">收</span>
<br>
<span class="arrow-font">起</span>
</div> </div>
</div>
<div class="right-modules"> </div>
<RightAiWarning />
<RightEnvMonitor /> <!-- 右侧收起按钮 -->
<RightTodayAlarm /> <div
class="toggle-btn right-toggle"
:class="{ 'collapsed': !isRightModulesVisible }"
@click="toggleBothModules"
>
<!-- <div class="btn-arrow1"><img src="@/assets/jinrun/arrow-right.png" alt="" srcset=""><br>收<br>起</div> -->
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg" alt="" srcset=""><br>
<span class="arrow-font">收</span>
<br>
<span class="arrow-font">起</span>
</div> </div>
</div> </div>
</div>
<!-- 左侧模块容器 -->
<transition name="slide-left">
<div class="left-modules" v-show="isLeftModulesVisible">
<LeftDeviceStatus />
<!-- <LeftDeviceStatus />
<LeftDeviceStatus /> -->
<!-- <LeftRainfallTrend />
<LeftOnlineMonitor /> -->
</div>
</transition>
<!-- 右侧模块容器 -->
<transition name="slide-right">
<div class="right-modules" v-show="isRightModulesVisible">
<!-- <RightAiWarning />
<RightEnvMonitor />
<RightTodayAlarm /> -->
</div>
</transition>
<!-- 非地图相关 结束 --> <!-- 非地图相关 结束 -->
</template> </template>
...@@ -255,76 +328,167 @@ const navTo = () => { ...@@ -255,76 +328,167 @@ const navTo = () => {
background-size: contain; background-size: contain;
background-position-x: right; background-position-x: right;
} }
// .mine-monitor-page {
// width: 100%;
// height: 100vh;
// overflow: hidden;
// // background-color: var(--n-bg-color);
// // background-image: url('@/assets/jinrun/border.png');
// // background-size: cover;
// // background-position: center;
// background-image: url('@/assets/jinrun/top.png'),
// url('@/assets/jinrun/bottom.png'),
// url('@/assets/jinrun/left.png'),
// url('@/assets/jinrun/right.png');
// background-size: 100% auto, 100% auto, auto 100%, auto 100%;
// background-position: top center, bottom center, left center, right center;
// background-repeat: no-repeat;
// position: absolute;
// position: absolute;
// .page-header {
// height: 0.8rem;
// margin-bottom: 0.2rem;
// background: var(--n-bg-color-secondary);
// .header-content {
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100%;
// // .title {
// // font-size: 0.32rem;
// // font-weight: bold;
// // color: var(--n-primary-color);
// // background-image: url('@/assets/jinrun/title.png');
// // width: 100%;
// // text-align: center;
// // // line-height: 0.8rem;
// // }
// .header-operate {
// font-size: 0.16rem;
// display: flex;
// align-items: center;
// }
// }
// }
// .content-container {
// display: grid;
// grid-template-columns: 2.8rem 1fr 2.8rem;
// grid-gap: 0.2rem;
// height: calc(100vh - 1rem);
// padding: 0 0.2rem;
// .left-modules, .right-modules {
// display: flex;
// flex-direction: column;
// gap: 0.2rem;
// }
// .middle-map {
// border-radius: 0.1rem;
// overflow: hidden;
// background: var(--n-bg-color-secondary);
// }
// }
// }
// 收起按钮样式
.toggle-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: .71rem;
height: 1.87rem;
// background: rgba(0, 138, 255, 0.8);
background-image: url('@/assets/jinrun/toggle-left.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 0 10px 10px 0;
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.left-toggle {
left: 4.65rem; /* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-left.png');
}
&.left-toggle:hover {
background-image: url('@/assets/jinrun/toggle-left_click.png');
}
&.right-toggle {
right: 4.65rem;; /* 与右侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-right.png');
}
&.right-toggle:hover {
background-image: url('@/assets/jinrun/toggle-right_click.png');
}
&.collapsed {
&.left-toggle {
left: .55rem;
border-radius: 0 10px 10px 0;
}
&.right-toggle {
right: .55rem;
border-radius: 10px 0 0 10px;
}
}
.btn-arrow1{
img{
width: 0.18rem;
// height: 0.21rem;
// margin-bottom:.1rem;
// margin-bottom: -.15rem;
}
}
.btn-arrow {
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transition: transform 0.3s ease;
&::before {
content: '';
position: absolute;
width: 2px;
height: 10px;
background: #fff;
top: -4px;
right: 4px;
}
}
&.left-toggle .btn-arrow {
transform: rotate(135deg);
}
&.right-toggle .btn-arrow {
transform: rotate(-45deg);
}
&.collapsed {
&.left-toggle .btn-arrow {
transform: rotate(-45deg);
}
&.right-toggle .btn-arrow {
transform: rotate(135deg);
}
}
&:hover {
// background: rgba(0, 138, 255, 1);
}
}
// 左侧模块滑动动画
.slide-left-enter-active,
.slide-left-leave-active {
transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-left-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}
// 右侧模块滑动动画
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-right-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-right-leave-to {
transform: translateX(100%);
opacity: 0;
}
// 当模块隐藏时调整收起按钮位置
.left-modules:not(.v-enter-active):not(.v-leave-active) ~ .left-toggle:not(.collapsed) {
left: 0;
border-radius: 0 10px 10px 0;
}
.right-modules:not(.v-enter-active):not(.v-leave-active) ~ .right-toggle:not(.collapsed) {
right: 0;
border-radius: 10px 0 0 10px;
}
.left-modules, .right-modules {
width: 4.65rem;
background: pink;
}
.arrow-font{
color:#fff; font-size:0.18rem;
}
// 地图相关
.cesium-container { .cesium-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment