8 changed files with 6433 additions and 119 deletions
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,648 @@ |
|||||||
|
<template> |
||||||
|
<div class="monitor" v-loading="loading"> |
||||||
|
<div class="monitor-top"> |
||||||
|
<img class="title-left" src="../../../assets/images/title-left.png" alt="" /> |
||||||
|
<img class="title-center" src="../../../assets/images/title-center.png" alt="" /> |
||||||
|
<img class="title-right" src="../../../assets/images/title-right.png" alt="" /> |
||||||
|
<div class="sys-title">{{ currentPageTitle }}</div> |
||||||
|
<!-- logo --> |
||||||
|
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> |
||||||
|
<div class="nowTime">{{ formattedDate }}</div> |
||||||
|
<div class="monitor-time">已监测时长:{{ dayData }}天</div> |
||||||
|
<img class="icon_warning" src="../../../assets/images/warning.png" title="报警记录" @click="goWarning" |
||||||
|
v-if="isShowWarning" alt="" /> |
||||||
|
<img class="icon_home" src="../../../assets/images/icon_home.png" title="首页" @click="goSys" alt="" /> |
||||||
|
<img class="back-icon" src="../../../assets/images/back-icon.png" title="返回" @click="goBack" alt="" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 轮播内容区域 --> |
||||||
|
<div class="carousel-container"> |
||||||
|
<!-- 轮播开关按钮 --> |
||||||
|
<div class="carousel-toggle" @click="toggleAutoPlay" :title="isAutoPlaying ? '停止轮播' : '开始轮播'"> |
||||||
|
<i :class="isAutoPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 左箭头 --> |
||||||
|
<div class="arrow arrow-left" @click="prevPage" @mouseenter="handleArrowHover(true)" |
||||||
|
@mouseleave="handleArrowHover(false)"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 轮播内容 --> |
||||||
|
<div class="carousel-content"> |
||||||
|
<transition :name="transitionName"> |
||||||
|
<component :is="currentPageComponent" :key="currentPage" class="carousel-item"></component> |
||||||
|
</transition> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 右箭头 --> |
||||||
|
<div class="arrow arrow-right" @click="nextPage" @mouseenter="handleArrowHover(true)" |
||||||
|
@mouseleave="handleArrowHover(false)"> |
||||||
|
<i class="el-icon-arrow-right"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 指示器 --> |
||||||
|
<!-- <div class="indicators"> |
||||||
|
<span |
||||||
|
v-for="(item, index) in pages" |
||||||
|
:key="index" |
||||||
|
:class="['indicator', { active: currentPage === index }]" |
||||||
|
@click="goToPage(index)" |
||||||
|
></span> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
weatherData, |
||||||
|
sysPerformance, |
||||||
|
oneKeyButton, |
||||||
|
monitorList, |
||||||
|
operationConrol, |
||||||
|
systemMode, |
||||||
|
runTime, |
||||||
|
} from "@/api/centerairC/sysMonitor"; |
||||||
|
import LineChildren from "../../centerairC/sysMonitor/components/lineChildren.vue"; |
||||||
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
||||||
|
import { policyListData } from "@/api/centerairC/strategy"; |
||||||
|
import { getDay } from "@/utils/datetime"; |
||||||
|
import centerairMonitor from "./centerairMonitor.vue"; |
||||||
|
import hotWaterMonitor from "./hotWaterMonitor.vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
LineChildren, |
||||||
|
centerairMonitor, |
||||||
|
hotWaterMonitor, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
timer: null, // 用于存储定时器 ID |
||||||
|
carouselTimer: null, // 轮播定时器 |
||||||
|
|
||||||
|
currentDate: new Date(), |
||||||
|
nowTimer: null, |
||||||
|
isShowWarning: false, //是否有报警 |
||||||
|
dayData: "", //监测天数 |
||||||
|
|
||||||
|
// 轮播相关 |
||||||
|
currentPage: 0, // 当前页面索引 |
||||||
|
transitionName: "slide-left", // 过渡动画名称 |
||||||
|
isAutoPlaying: true, // 是否正在自动轮播 |
||||||
|
isArrowHovered: false, // 是否悬停在箭头上 |
||||||
|
autoPlayTimeout: null, // 存储暂停后的恢复定时器 |
||||||
|
autoPlayInterval: 1000000, // 自动轮播间隔（毫秒） |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 动态生成 pages 数组 |
||||||
|
dynamicPages() { |
||||||
|
const pages = []; |
||||||
|
|
||||||
|
// 从 store 中获取侧边栏路由 |
||||||
|
const sidebarRouters = this.$store.state.permission.sidebarRouters || []; |
||||||
|
|
||||||
|
// 检查是否有 CenterairC -> MonitorControl |
||||||
|
const centerairRoute = sidebarRouters.find(item => item.name === 'CenterairC'); |
||||||
|
if (centerairRoute && centerairRoute.children) { |
||||||
|
const monitorControl = centerairRoute.children.find( |
||||||
|
child => child.name === 'MonitorControl' |
||||||
|
); |
||||||
|
if (monitorControl) { |
||||||
|
pages.push({ |
||||||
|
title: "铭汉高效冷源站管理系统", |
||||||
|
component: "centerairMonitor", |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 检查是否有 HotWater -> WaterMonitor |
||||||
|
const hotWaterRoute = sidebarRouters.find(item => item.name === 'HotWater'); |
||||||
|
if (hotWaterRoute && hotWaterRoute.children) { |
||||||
|
const waterMonitor = hotWaterRoute.children.find( |
||||||
|
child => child.name === 'WaterMonitor' |
||||||
|
); |
||||||
|
if (waterMonitor) { |
||||||
|
pages.push({ |
||||||
|
title: "生活热水供水监控系统", |
||||||
|
component: "hotWaterMonitor", |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
console.log("有多少个监测页面",pages) |
||||||
|
return pages; |
||||||
|
}, |
||||||
|
|
||||||
|
formattedDate() { |
||||||
|
const year = this.currentDate.getFullYear(); |
||||||
|
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); |
||||||
|
const day = String(this.currentDate.getDate()).padStart(2, "0"); |
||||||
|
const hours = String(this.currentDate.getHours()).padStart(2, "0"); |
||||||
|
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); |
||||||
|
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); |
||||||
|
const weekDays = [ |
||||||
|
"星期日", |
||||||
|
"星期一", |
||||||
|
"星期二", |
||||||
|
"星期三", |
||||||
|
"星期四", |
||||||
|
"星期五", |
||||||
|
"星期六", |
||||||
|
]; |
||||||
|
const weekDay = weekDays[this.currentDate.getDay()]; |
||||||
|
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; |
||||||
|
}, |
||||||
|
currentPageTitle() { |
||||||
|
return this.dynamicPages[this.currentPage]?.title || ''; |
||||||
|
}, |
||||||
|
currentPageComponent() { |
||||||
|
return this.dynamicPages[this.currentPage]?.component || ''; |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { }, |
||||||
|
mounted() { |
||||||
|
// 根据路由参数设置初始页面（优先使用路径参数，其次使用查询参数） |
||||||
|
let page = this.$route.params.page; // 路径参数 /path/to/monitor/1 |
||||||
|
if (page === undefined) { |
||||||
|
page = this.$route.query.page; // 查询参数 /path/to/monitor?page=1 |
||||||
|
} |
||||||
|
|
||||||
|
if (page !== undefined) { |
||||||
|
this.currentPage = parseInt(page); |
||||||
|
} |
||||||
|
|
||||||
|
// 确保 currentPage 在有效范围内 |
||||||
|
if (this.currentPage >= this.dynamicPages.length) { |
||||||
|
this.currentPage = 0; |
||||||
|
} |
||||||
|
|
||||||
|
// 在组件挂载后尝试进入全屏 |
||||||
|
this.requestFullscreen(); |
||||||
|
this.getDayData(); |
||||||
|
this.getAlarnStatus(); |
||||||
|
// 每秒更新一次时间 |
||||||
|
this.nowTimer = setInterval(() => { |
||||||
|
this.currentDate = new Date(); |
||||||
|
}, 1000); |
||||||
|
|
||||||
|
// 启动自动轮播 |
||||||
|
this.startAutoPlay(); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
// 组件销毁前清除定时器 |
||||||
|
if (this.timer) { |
||||||
|
clearInterval(this.timer); |
||||||
|
} |
||||||
|
// 组件销毁前清除定时器 |
||||||
|
if (this.nowTimer) { |
||||||
|
clearInterval(this.nowTimer); |
||||||
|
} |
||||||
|
// 清除轮播定时器 |
||||||
|
if (this.carouselTimer) { |
||||||
|
clearInterval(this.carouselTimer); |
||||||
|
} |
||||||
|
// 在组件销毁前退出全屏 |
||||||
|
this.exitFullscreen(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 启动自动轮播 |
||||||
|
startAutoPlay() { |
||||||
|
if (this.isAutoPlaying) { |
||||||
|
this.carouselTimer = setInterval(() => { |
||||||
|
this.nextPage(); |
||||||
|
}, this.autoPlayInterval); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 停止自动轮播 |
||||||
|
stopAutoPlay() { |
||||||
|
if (this.carouselTimer) { |
||||||
|
clearInterval(this.carouselTimer); |
||||||
|
this.carouselTimer = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 切换轮播状态 |
||||||
|
toggleAutoPlay() { |
||||||
|
this.isAutoPlaying = !this.isAutoPlaying; |
||||||
|
if (this.isAutoPlaying) { |
||||||
|
this.startAutoPlay(); |
||||||
|
} else { |
||||||
|
this.stopAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 重启自动轮播 |
||||||
|
restartAutoPlay() { |
||||||
|
if (!this.isArrowHovered) { |
||||||
|
this.stopAutoPlay(); |
||||||
|
this.startAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 箭头悬停事件 |
||||||
|
handleArrowHover(isHovered) { |
||||||
|
this.isArrowHovered = isHovered; |
||||||
|
if (isHovered) { |
||||||
|
// 悬停时暂停轮播 |
||||||
|
this.stopAutoPlay(); |
||||||
|
} else if (this.isAutoPlaying) { |
||||||
|
// 离开时恢复轮播 |
||||||
|
this.startAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 下一页 |
||||||
|
nextPage() { |
||||||
|
this.transitionName = "slide-left"; |
||||||
|
const totalPages = this.dynamicPages.length; |
||||||
|
if (totalPages > 0) { |
||||||
|
this.currentPage = (this.currentPage + 1) % totalPages; |
||||||
|
this.restartAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 上一页 |
||||||
|
prevPage() { |
||||||
|
this.transitionName = "slide-right"; |
||||||
|
const totalPages = this.dynamicPages.length; |
||||||
|
if (totalPages > 0) { |
||||||
|
this.currentPage = (this.currentPage - 1 + totalPages) % totalPages; |
||||||
|
this.restartAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 跳转到指定页面 |
||||||
|
goToPage(index) { |
||||||
|
if (index >= 0 && index < this.dynamicPages.length) { |
||||||
|
if (index > this.currentPage) { |
||||||
|
this.transitionName = "slide-left"; |
||||||
|
} else if (index < this.currentPage) { |
||||||
|
this.transitionName = "slide-right"; |
||||||
|
} |
||||||
|
this.currentPage = index; |
||||||
|
this.restartAutoPlay(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 全屏操作 |
||||||
|
requestFullscreen() { |
||||||
|
const element = document.documentElement; |
||||||
|
console.log("全屏操作没有进行中啊~~~~~~~~~~~~~~~~", element); |
||||||
|
if (element.requestFullscreen) { |
||||||
|
element.requestFullscreen(); |
||||||
|
} else if (element.mozRequestFullScreen) { |
||||||
|
// Firefox |
||||||
|
element.mozRequestFullScreen(); |
||||||
|
} else if (element.webkitRequestFullscreen) { |
||||||
|
// Chrome, Safari and Opera |
||||||
|
element.webkitRequestFullscreen(); |
||||||
|
} else if (element.msRequestFullscreen) { |
||||||
|
// IE/Edge |
||||||
|
element.msRequestFullscreen(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 退出全屏 |
||||||
|
exitFullscreen() { |
||||||
|
if (document.exitFullscreen) { |
||||||
|
document.exitFullscreen(); |
||||||
|
} else if (document.mozCancelFullScreen) { |
||||||
|
// Firefox |
||||||
|
document.mozCancelFullScreen(); |
||||||
|
} else if (document.webkitExitFullscreen) { |
||||||
|
// Chrome, Safari and Opera |
||||||
|
document.webkitExitFullscreen(); |
||||||
|
} else if (document.msExitFullscreen) { |
||||||
|
// IE/Edge |
||||||
|
document.msExitFullscreen(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 进入系统首页 |
||||||
|
goSys() { |
||||||
|
// 退出全屏 |
||||||
|
// this.exitFullscreen(); |
||||||
|
this.$router.push("/"); |
||||||
|
}, |
||||||
|
// 返回上一页 |
||||||
|
goBack() { |
||||||
|
// 退出全屏 |
||||||
|
// this.exitFullscreen(); |
||||||
|
window.history.go(-2); |
||||||
|
}, |
||||||
|
// 监测天数 |
||||||
|
getDayData() { |
||||||
|
runTime().then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
this.dayData = res.data.runTime; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
// 报警列表 |
||||||
|
getAlarnStatus() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
status: "0", |
||||||
|
}; |
||||||
|
let timeArr = [getDay(0), getDay(0)]; |
||||||
|
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
this.isShowWarning = true; |
||||||
|
} else { |
||||||
|
this.isShowWarning = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
goWarning() { |
||||||
|
// this.exitFullscreen(); |
||||||
|
this.$router.push("/alarm/alarmRecord"); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.monitor { |
||||||
|
width: 100%; |
||||||
|
min-height: 100vh; |
||||||
|
height: auto; |
||||||
|
background-color: black; |
||||||
|
color: #fff; |
||||||
|
overflow-y: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
|
||||||
|
.monitor-top { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
padding: 0.1rem 0.2rem; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.title-left { |
||||||
|
width: 3.41rem; |
||||||
|
height: 0.8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.title-center { |
||||||
|
width: 9.46rem; |
||||||
|
height: 0.69rem; |
||||||
|
} |
||||||
|
|
||||||
|
.title-right { |
||||||
|
width: 5.04rem; |
||||||
|
height: 0.61rem; |
||||||
|
} |
||||||
|
|
||||||
|
.sys-title { |
||||||
|
position: absolute; |
||||||
|
top: 40%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
font-size: 0.28rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
|
||||||
|
.nowTime { |
||||||
|
position: absolute; |
||||||
|
top: 0.3rem; |
||||||
|
right: 0.6rem; |
||||||
|
font-size: 0.18rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
|
||||||
|
.sys-logo { |
||||||
|
width: 1.8rem; |
||||||
|
height: 0.5rem; |
||||||
|
position: absolute; |
||||||
|
top: 0.26rem; |
||||||
|
left: 0.8rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
.monitor-time { |
||||||
|
position: absolute; |
||||||
|
top: 0.44rem; |
||||||
|
left: 4.2rem; |
||||||
|
z-index: 10; |
||||||
|
font-size: 0.18rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_warning { |
||||||
|
position: absolute; |
||||||
|
top: 0.33rem; |
||||||
|
right: 4.4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
margin: 0 0.25rem 0 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
/* 添加闪烁动画 */ |
||||||
|
animation: blink 1s infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes blink { |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
50% { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon_home { |
||||||
|
position: absolute; |
||||||
|
top: 0.33rem; |
||||||
|
right: 4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
margin: 0 0.2rem 0 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.back-icon { |
||||||
|
position: absolute; |
||||||
|
top: 0.33rem; |
||||||
|
right: 3.7rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 轮播容器 |
||||||
|
.carousel-container { |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: center; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
min-height: calc(100vh - 1rem); |
||||||
|
overflow: visible; |
||||||
|
|
||||||
|
// 轮播开关按钮 |
||||||
|
.carousel-toggle { |
||||||
|
position: fixed; |
||||||
|
top: 1.2rem; |
||||||
|
right: 0.3rem; |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
background: rgba(0, 0, 0, 0.5); |
||||||
|
border-radius: 0.1rem; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
z-index: 200; |
||||||
|
transition: all 0.3s ease; |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3); |
||||||
|
pointer-events: auto; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(0, 0, 0, 0.8); |
||||||
|
transform: scale(1.1); |
||||||
|
border-color: rgba(255, 255, 255, 0.6); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
transform: scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 0.35rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.carousel-content { |
||||||
|
flex: 1; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
z-index: 50; |
||||||
|
overflow: visible; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.arrow { |
||||||
|
position: fixed; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
background: rgba(0, 0, 0, 0.5); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
z-index: 200; |
||||||
|
transition: all 0.3s ease; |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2); |
||||||
|
pointer-events: auto; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(0, 0, 0, 0.8); |
||||||
|
transform: translateY(-50%) scale(1.1); |
||||||
|
border-color: rgba(255, 255, 255, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
transform: translateY(-50%) scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 0.3rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
&.arrow-left { |
||||||
|
left: 0.3rem; |
||||||
|
} |
||||||
|
|
||||||
|
&.arrow-right { |
||||||
|
right: 0.3rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 指示器 |
||||||
|
.indicators { |
||||||
|
position: absolute; |
||||||
|
bottom: 0.3rem; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
display: flex; |
||||||
|
gap: 0.15rem; |
||||||
|
z-index: 100; |
||||||
|
|
||||||
|
.indicator { |
||||||
|
width: 0.15rem; |
||||||
|
height: 0.15rem; |
||||||
|
border-radius: 50%; |
||||||
|
background: rgba(255, 255, 255, 0.3); |
||||||
|
cursor: pointer; |
||||||
|
transition: all 0.3s ease; |
||||||
|
|
||||||
|
&.active { |
||||||
|
background: #ffffff; |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(255, 255, 255, 0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 轮播过渡动画 |
||||||
|
.slide-left-enter-active, |
||||||
|
.slide-left-leave-active, |
||||||
|
.slide-right-enter-active, |
||||||
|
.slide-right-leave-active { |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.slide-left-enter { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(100%); |
||||||
|
} |
||||||
|
|
||||||
|
.slide-left-leave-to { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(-100%); |
||||||
|
} |
||||||
|
|
||||||
|
.slide-right-enter { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(-100%); |
||||||
|
} |
||||||
|
|
||||||
|
.slide-right-leave-to { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(100%); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue