2025-04-12 14:54:02 +08:00
|
|
|
|
<template>
|
2025-11-22 21:59:58 +08:00
|
|
|
|
<div class="homeBox" style="background-color: #07274d;">
|
2025-04-12 14:54:02 +08:00
|
|
|
|
<!-- 头部 -->
|
2025-10-26 12:25:50 +08:00
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
<Head></Head>
|
2025-04-16 09:33:29 +08:00
|
|
|
|
<!-- 左边 -->
|
|
|
|
|
|
<div class="home-aside asideL">
|
2025-05-20 16:06:20 +08:00
|
|
|
|
<div class="asideL-top">
|
|
|
|
|
|
<DbCount></DbCount>
|
2025-04-15 14:38:12 +08:00
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
|
<div class="asideL-Bottom">
|
2025-08-01 17:16:03 +08:00
|
|
|
|
<div class="commom-aside">
|
|
|
|
|
|
<QbsbCount></QbsbCount>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="commom-aside">
|
2025-11-28 22:25:58 +08:00
|
|
|
|
<!-- <KeyPpersonneltypes /> -->
|
|
|
|
|
|
<Statistics/>
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
2025-11-28 22:25:58 +08:00
|
|
|
|
<div class="commom-aside" @mouseenter="mouseEnter" @mouseleave="mouseLeave" >
|
2025-11-22 21:59:58 +08:00
|
|
|
|
<div style="position: relative; height: 100%;">
|
|
|
|
|
|
<transition name="flip" mode="out-in">
|
|
|
|
|
|
<div :key="'qb'" v-if="reversalPushShow" class="flip-wrapper">
|
|
|
|
|
|
<QblyType @reversalPush="reversalPush"></QblyType>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div :key="'text'" v-else class="flip-wrapper">
|
|
|
|
|
|
<TextType @reversalPush="reversalPush"></TextType>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
</div>
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
2025-04-15 14:38:12 +08:00
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 右边 -->
|
|
|
|
|
|
<div class="home-aside asideR">
|
2025-08-01 17:16:03 +08:00
|
|
|
|
<div class="commom-aside-big">
|
2025-10-26 12:25:50 +08:00
|
|
|
|
<Calendar />
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
2025-11-28 22:25:58 +08:00
|
|
|
|
<div class="commom-aside-big" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
|
|
|
|
|
|
<transition name="flip" mode="out-in">
|
|
|
|
|
|
<div :key="'qb'" v-if="reversalShow" class="flip-wrapper">
|
|
|
|
|
|
<Experience @reversalPush="reversal"></Experience>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div :key="'text'" v-else class="flip-wrapper">
|
|
|
|
|
|
<KeyPpersonneltypes @reversalPush="reversal"></KeyPpersonneltypes>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</transition>
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="commom-aside-small">
|
2025-11-22 21:59:58 +08:00
|
|
|
|
<!-- <SituationAssessment /> -->
|
|
|
|
|
|
<Judgment />
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 中间 -->
|
2025-08-01 17:16:03 +08:00
|
|
|
|
<div class="home-center">
|
2025-10-26 12:25:50 +08:00
|
|
|
|
<div class="middle-top">
|
|
|
|
|
|
<Yszs />
|
|
|
|
|
|
</div>
|
2025-08-01 17:16:03 +08:00
|
|
|
|
<div class="flex middle-bottom mt10">
|
2025-11-27 14:27:59 +08:00
|
|
|
|
<div
|
|
|
|
|
|
style="width: 30px;position: absolute;z-index: 100;left: 0;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
|
|
|
|
|
|
<el-icon :size="20" v-if="ispLayBack" @click="closeLayBack">
|
|
|
|
|
|
<Bell />
|
|
|
|
|
|
</el-icon>
|
|
|
|
|
|
<!-- -->
|
|
|
|
|
|
<el-icon :size="20" v-else @click="openLayBack">
|
|
|
|
|
|
<MuteNotification />
|
|
|
|
|
|
</el-icon>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
2025-10-26 12:25:50 +08:00
|
|
|
|
<div style="width: 100%;border: 1px sienna;position: relative">
|
|
|
|
|
|
<GdMap></GdMap>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;right: 0;">
|
|
|
|
|
|
<DeployControl />
|
|
|
|
|
|
</div>
|
2025-11-22 21:59:58 +08:00
|
|
|
|
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;left: 0;top: 30%;">
|
|
|
|
|
|
<GeneralWindow />
|
|
|
|
|
|
</div>
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
|
<div class="home-foot-t">
|
2025-11-22 21:59:58 +08:00
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
|
<WarningDistrict></WarningDistrict>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
|
<WarningLevels></WarningLevels>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
|
<Bkcz></Bkcz>
|
|
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
|
</div>
|
2025-11-27 14:27:59 +08:00
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</div>
|
2025-07-14 17:31:24 +08:00
|
|
|
|
<!-- 左边弹窗 -->
|
2025-07-14 18:15:09 +08:00
|
|
|
|
<LeftDialog></LeftDialog>
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2025-11-27 14:27:59 +08:00
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
2025-07-14 18:15:09 +08:00
|
|
|
|
import LeftDialog from './dialog/leftDialog'
|
2025-04-22 16:39:00 +08:00
|
|
|
|
import GdMap from "@/components/GdMap/index.vue";
|
2025-04-12 14:54:02 +08:00
|
|
|
|
import Head from './layout/head.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
|
import DbCount from './model/dbCount.vue'
|
|
|
|
|
|
import QbsbCount from './model/qbsbCount.vue'
|
|
|
|
|
|
import QblyType from './model/qblyType.vue'
|
2025-10-26 12:25:50 +08:00
|
|
|
|
import TextType from './model/textType.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
|
import Bkcz from './model/bkcz.vue'
|
2025-11-22 21:59:58 +08:00
|
|
|
|
import WarningLevels from './model/warningLevels.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
|
import Yszs from './model/yszs.vue'
|
2025-08-01 17:16:03 +08:00
|
|
|
|
import DeployControl from './model/deployControl.vue';
|
|
|
|
|
|
import Experience from './model/experience.vue'
|
2025-10-26 12:25:50 +08:00
|
|
|
|
import Calendar from './model/calendar.vue'
|
2025-11-22 21:59:58 +08:00
|
|
|
|
import KeyPpersonneltypes from './model/keyPpersonneltypes.vue'
|
|
|
|
|
|
import WarningDistrict from './model/WarningDistrict.vue'
|
|
|
|
|
|
import { getItem, setItem } from "@/utils/storage";
|
2025-10-26 12:25:50 +08:00
|
|
|
|
import emitter from "@/utils/eventBus.js";
|
2025-11-22 21:59:58 +08:00
|
|
|
|
import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
|
|
|
|
|
|
import Judgment from './model/judgment.vue'
|
|
|
|
|
|
import { tbYjxxGetList } from '@/api/zdr.js'
|
|
|
|
|
|
import GeneralWindow from './model/generalWindow.vue'
|
2025-11-27 14:27:59 +08:00
|
|
|
|
import WebSoketClass from '@/utils/webSocket.js'
|
2025-11-28 22:25:58 +08:00
|
|
|
|
import { timeValidate } from '@/utils/tools.js'
|
|
|
|
|
|
import Statistics from './model/statistics.vue'
|
2025-11-27 14:27:59 +08:00
|
|
|
|
// 导入音频播放器工具类
|
|
|
|
|
|
import audioPlayer from '@/utils/audioPlayer'
|
|
|
|
|
|
const webSoket = new WebSoketClass()
|
2025-11-22 21:59:58 +08:00
|
|
|
|
const changeXzqh = (val, trg) => {
|
2025-10-26 12:25:50 +08:00
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
// 先移除已有的边界
|
|
|
|
|
|
emitter.emit('removeBj')
|
|
|
|
|
|
if (trg) {
|
|
|
|
|
|
console.log("多个");
|
|
|
|
|
|
// 如果传入的是多个区域数据（二维数组）
|
|
|
|
|
|
const features = val.map((area, index) => ({
|
|
|
|
|
|
geometry: {
|
|
|
|
|
|
type: "Polygon",
|
|
|
|
|
|
coordinates: [area] // 确保格式正确
|
|
|
|
|
|
},
|
|
|
|
|
|
properties: {
|
|
|
|
|
|
},
|
|
|
|
|
|
type: "Feature"
|
|
|
|
|
|
}))
|
|
|
|
|
|
// 循环为每个区域创建单独的多边形，这样可以设置不同的样式
|
|
|
|
|
|
features.forEach((feature, index) => {
|
|
|
|
|
|
emitter.emit('setBoundarys', {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
type: "FeatureCollection",
|
|
|
|
|
|
features: [feature]
|
|
|
|
|
|
},
|
2025-11-28 22:25:58 +08:00
|
|
|
|
color: 'rgba(209 112 65,1)',
|
2025-10-26 12:25:50 +08:00
|
|
|
|
fillColor: 'rgba(255, 255, 255,0)',
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
2025-10-26 12:25:50 +08:00
|
|
|
|
// 保持原来的逻辑，处理单个区域
|
|
|
|
|
|
emitter.emit('setBoundarys', {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
type: "FeatureCollection",
|
|
|
|
|
|
features: [
|
|
|
|
|
|
{
|
|
|
|
|
|
geometry: {
|
|
|
|
|
|
type: "Polygon",
|
|
|
|
|
|
coordinates: [val] // 使用正确的GeoJSON格式
|
|
|
|
|
|
},
|
|
|
|
|
|
properties: {},
|
|
|
|
|
|
type: "Feature"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
2025-11-28 22:25:58 +08:00
|
|
|
|
color: 'rgba(209 112 65,1)',
|
2025-10-26 12:25:50 +08:00
|
|
|
|
fillColor: 'rgba(255, 255, 255,0)',
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}, 3000)
|
|
|
|
|
|
}
|
|
|
|
|
|
const getDepId = () => {
|
|
|
|
|
|
const deptId = getItem('deptId')
|
|
|
|
|
|
const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
|
|
|
|
|
|
const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
|
|
|
|
|
|
if (deptLevel.startsWith('2')) {
|
|
|
|
|
|
const data = Object.values(bm).map(item => item);
|
2025-11-22 21:59:58 +08:00
|
|
|
|
changeXzqh(data, true)
|
2025-10-26 12:25:50 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
switch (deptCode) {
|
|
|
|
|
|
case '54040200000'://巴宜区
|
|
|
|
|
|
changeXzqh(bm[542621])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042400000'://波密县
|
|
|
|
|
|
changeXzqh(bm[542625])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042500000'://察隅县
|
|
|
|
|
|
changeXzqh(bm[542626])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042100000'://工布江达县
|
|
|
|
|
|
changeXzqh(bm[542622])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042600000'://朗县
|
|
|
|
|
|
changeXzqh(bm[542627])
|
|
|
|
|
|
break;
|
2025-11-22 21:59:58 +08:00
|
|
|
|
case '54042200000'://米林县
|
2025-10-26 12:25:50 +08:00
|
|
|
|
changeXzqh(bm[542623])
|
|
|
|
|
|
break;
|
2025-11-22 21:59:58 +08:00
|
|
|
|
case '54042300000'://墨脱县
|
2025-10-26 12:25:50 +08:00
|
|
|
|
changeXzqh(bm[542624])
|
|
|
|
|
|
break;
|
|
|
|
|
|
default:
|
2025-11-22 21:59:58 +08:00
|
|
|
|
const data = Object.values(bm).map(item => item);
|
|
|
|
|
|
changeXzqh(data, true)
|
2025-10-26 12:25:50 +08:00
|
|
|
|
break;
|
2025-11-22 21:59:58 +08:00
|
|
|
|
}
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-10-26 12:25:50 +08:00
|
|
|
|
const makerCenter = () => {
|
2025-11-22 21:59:58 +08:00
|
|
|
|
const dw = require("@/assets/point/dingwei.png")
|
2025-10-26 12:25:50 +08:00
|
|
|
|
const coords = centralPoint.map(item => {
|
|
|
|
|
|
return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
|
|
|
|
|
|
})
|
|
|
|
|
|
emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
|
|
|
|
|
|
}
|
2025-11-27 14:27:59 +08:00
|
|
|
|
//播放音频
|
|
|
|
|
|
const ispLayBack = ref(true)
|
|
|
|
|
|
|
|
|
|
|
|
// 打开播放
|
|
|
|
|
|
const openLayBack = () => {
|
|
|
|
|
|
ispLayBack.value = true
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭播放
|
|
|
|
|
|
const closeLayBack = () => {
|
|
|
|
|
|
ispLayBack.value = false
|
|
|
|
|
|
audioPlayer.pause()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化音频播放器
|
|
|
|
|
|
const initAudioPlayer = () => {
|
|
|
|
|
|
// 使用工具类初始化音频播放器
|
|
|
|
|
|
audioPlayer.init(require('@/assets/images/yjsy.mp3'))
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
console.log('音频播放器初始化成功');
|
|
|
|
|
|
// 只有当ispLayBack为true时才播放
|
|
|
|
|
|
if (ispLayBack.value) {
|
|
|
|
|
|
audioPlayer.muted = false
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('初始化音频播放器失败:', error);
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 组件挂载时初始化音频播放器
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
getDepId()
|
|
|
|
|
|
makerCenter()
|
|
|
|
|
|
mouseLeave()
|
|
|
|
|
|
getTbYjxxGetList()
|
|
|
|
|
|
// 初始化音频播放器
|
|
|
|
|
|
initAudioPlayer()
|
|
|
|
|
|
webSoket.connect()
|
|
|
|
|
|
// 监听音频播放事件，获取WebSocket消息数据
|
|
|
|
|
|
emitter.on("openYp", (newsDate) => {
|
|
|
|
|
|
// 使用工具类播放音频，自动处理静音切换
|
|
|
|
|
|
if (ispLayBack.value) {
|
|
|
|
|
|
audioPlayer.play()
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
console.log('WebSocket触发音频播放成功');
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('WebSocket触发音频播放失败:', error);
|
|
|
|
|
|
})
|
|
|
|
|
|
const coords = {
|
|
|
|
|
|
id: newsDate.id,
|
|
|
|
|
|
jd: newsDate.jd,
|
|
|
|
|
|
wd: newsDate.wd,
|
|
|
|
|
|
yjtp: newsDate.yjTp,
|
|
|
|
|
|
yjnr: newsDate.yjNr,
|
|
|
|
|
|
yjLx: newsDate.yjlx,
|
|
|
|
|
|
yjlx: '01',
|
|
|
|
|
|
yjsj: newsDate.yjSj,
|
|
|
|
|
|
rysfzh: newsDate.yjRysfzh,
|
|
|
|
|
|
ryxm: newsDate.yjRyxm,
|
|
|
|
|
|
}
|
|
|
|
|
|
const icons = require("@/assets/point/jq.png")
|
|
|
|
|
|
emitter.emit('addPointArea', { coords: [{ jd: coords.jd, wd: coords.wd }], icon: icons, flag: 'yjs' })
|
|
|
|
|
|
emitter.emit('yjDetail', coords)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
emitter.on("closeYp", () => {
|
|
|
|
|
|
audioPlayer.pause()
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
2025-11-22 21:59:58 +08:00
|
|
|
|
|
|
|
|
|
|
// 布控预警上图
|
|
|
|
|
|
const getTbYjxxGetList = () => {
|
2025-11-27 14:27:59 +08:00
|
|
|
|
// 设置为当天时间范围：00:00:00 到 23:59:59
|
|
|
|
|
|
const today = new Date();
|
|
|
|
|
|
const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
|
|
|
|
|
|
const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
|
|
|
|
|
|
const promes = {
|
|
|
|
|
|
startTime:timeValidate(startTime),
|
|
|
|
|
|
endTime:timeValidate(endTime),
|
|
|
|
|
|
}
|
|
|
|
|
|
tbYjxxGetList(promes).then(res => {
|
2025-11-22 21:59:58 +08:00
|
|
|
|
const coords = res.map(item => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
id: item.id,
|
|
|
|
|
|
jd: item.jd,
|
|
|
|
|
|
wd: item.wd,
|
|
|
|
|
|
yjtp: item.yjTp,
|
|
|
|
|
|
yjnr: item.yjNr,
|
|
|
|
|
|
yjLx: item.yjlx,
|
|
|
|
|
|
yjlx: '01',
|
|
|
|
|
|
yjsj: item.yjSj,
|
|
|
|
|
|
rysfzh: item.yjRysfzh,
|
|
|
|
|
|
ryxm: item.yjRyxm,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
const icon = require("@/assets/point/yj.png")
|
|
|
|
|
|
emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let timing = ref(true)
|
2025-11-28 22:25:58 +08:00
|
|
|
|
// 情报翻转
|
2025-11-22 21:59:58 +08:00
|
|
|
|
const reversalPushShow = ref(true)
|
|
|
|
|
|
const reversalPush = () => {
|
|
|
|
|
|
reversalPushShow.value = !reversalPushShow.value
|
|
|
|
|
|
// 移除clearInterval调用，避免定时器被清除
|
|
|
|
|
|
}
|
2025-11-28 22:25:58 +08:00
|
|
|
|
// 论坛翻转
|
|
|
|
|
|
const reversalShow = ref(true)
|
|
|
|
|
|
const reversal= () => {
|
|
|
|
|
|
reversalShow.value = !reversalShow.value
|
|
|
|
|
|
// 移除clearInterval调用，避免定时器被清除
|
|
|
|
|
|
}
|
2025-11-22 21:59:58 +08:00
|
|
|
|
// 鼠标移入
|
|
|
|
|
|
const mouseEnter = () => {
|
|
|
|
|
|
clearInterval(timing.value)
|
|
|
|
|
|
}
|
|
|
|
|
|
// 鼠标移出
|
|
|
|
|
|
const mouseLeave = () => {
|
|
|
|
|
|
// 清除可能存在的旧定时器，避免多个定时器同时运行
|
|
|
|
|
|
clearInterval(timing.value)
|
|
|
|
|
|
// 设置为5秒自动切换，更容易测试效果
|
|
|
|
|
|
timing.value = setInterval(() => {
|
|
|
|
|
|
reversalPush()
|
2025-11-28 22:25:58 +08:00
|
|
|
|
reversal()
|
2025-11-22 21:59:58 +08:00
|
|
|
|
}, 30000)
|
|
|
|
|
|
}
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
|
clearInterval(timing.value)
|
2025-11-27 14:27:59 +08:00
|
|
|
|
// 组件卸载时停止音频播放并释放资源
|
|
|
|
|
|
if (audioPlayer) {
|
|
|
|
|
|
audioPlayer.destroy()
|
|
|
|
|
|
}
|
|
|
|
|
|
// 组件卸载时关闭WebSocket连接
|
|
|
|
|
|
if (webSoket) {
|
|
|
|
|
|
webSoket.closeConnection()
|
|
|
|
|
|
}
|
2025-10-26 12:25:50 +08:00
|
|
|
|
})
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2025-04-15 14:38:12 +08:00
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
@import "@/assets/css/homeScreen.scss";
|
2025-08-01 17:16:03 +08:00
|
|
|
|
|
2025-08-16 16:54:03 +08:00
|
|
|
|
.fxq {
|
|
|
|
|
|
border-radius: 35px;
|
|
|
|
|
|
width: 35px;
|
|
|
|
|
|
transition: transform 0.5s ease, width 0.5s ease;
|
|
|
|
|
|
background-color: rgb(1, 127, 245);
|
|
|
|
|
|
transform-origin: left center;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 35px;
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
margin-left: 9.5px;
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
margin-top: -3px;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fxq2 {
|
|
|
|
|
|
background-color: #9d88f9;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fxq1:hover {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fxq2:hover {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
|
|
|
|
|
|
// background-color: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fxq3:hover {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .badge-top-left .el-badge__content {
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
left: -10px;
|
|
|
|
|
|
transform: translateY(-50%) translateX(-50%);
|
2025-04-14 19:48:42 +08:00
|
|
|
|
}
|
2025-10-26 12:25:50 +08:00
|
|
|
|
|
|
|
|
|
|
.badge-content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
|
/* 默认展开的最大高度 */
|
|
|
|
|
|
min-height: 45px;
|
|
|
|
|
|
/* 确保收缩时有足够空间显示第一个图标 */
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.badge-content:not(.expanded) {
|
|
|
|
|
|
max-height: 45px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 收缩时只显示第一个图标，隐藏其他内容 */
|
|
|
|
|
|
.badge-content:not(.expanded)> :not(:first-child) {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
max-height: 0;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.badge-container {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-22 21:59:58 +08:00
|
|
|
|
.home-foot-t {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Vue 过渡动画 - 翻转效果 */
|
|
|
|
|
|
.flip-enter-active,
|
|
|
|
|
|
.flip-leave-active {
|
|
|
|
|
|
transition: transform 0.6s ease, opacity 0.6s ease;
|
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flip-enter-from {
|
|
|
|
|
|
transform: rotateY(90deg) translateZ(0);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flip-leave-to {
|
|
|
|
|
|
transform: rotateY(-90deg) translateZ(0);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 包装层样式 */
|
|
|
|
|
|
.flip-wrapper {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
2025-11-28 22:25:58 +08:00
|
|
|
|
// height: calc(100%/3 - 8px);
|
|
|
|
|
|
height: 100%;
|
2025-11-22 21:59:58 +08:00
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
|
perspective: 1000px;
|
|
|
|
|
|
}
|
2025-08-01 17:16:03 +08:00
|
|
|
|
</style>
|
