From 56d13900e2d74eeb9e22a9d86dc929640a676f6f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 17 三月 2025 17:21:43 +0800
Subject: [PATCH] fix:修改框架，初始化项目模板
---
src/screen/index.vue | 225 +++++--------------------------------------------------
1 files changed, 22 insertions(+), 203 deletions(-)
diff --git a/src/screen/index.vue b/src/screen/index.vue
index 2efbc49..5c5eb42 100644
--- a/src/screen/index.vue
+++ b/src/screen/index.vue
@@ -1,217 +1,36 @@
<template>
- <div class="main">
- <div class="header">
- <div class="top">
- <div class="title">金川水电站生态流量监测系统</div>
- <div class="time">
- <span>{{ nowTime.date }}</span>
- <span>{{ nowTime.time }}</span>
- </div>
- <div class="user-image">
- <div>
- <img src="../assets/images/screen/userImg.png" alt="">
- </div>
- <div class="loginOut">
- <el-dropdown trigger="click">
- <img src="../assets/images/screen/loginOut.png" alt="">
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item>
- <span @click="toUserDetail" >个人中心</span>
- </el-dropdown-item>
- <el-dropdown-item divided>
- <span @click="loginOut">退出登录</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </div>
- <div class="left-icon"><img src="../assets/images/screen/head-left.png" alt=""></div>
- <div class="right-icon"><img src="../assets/images/screen/head-left.png" alt=""></div>
- </div>
- <div class="nav">
- <div class="nav-content">
- <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
- </div>
- </div>
+ <div class="container">
+ <div class="list">
+ <router-link to="/temp" class="item">水温监测系统</router-link>
+ <router-link to="/flow" class="item">流量监测系统</router-link>
</div>
- <div class="content"><router-view></router-view></div>
</div>
</template>
+
<script setup>
-import{ useRouter,useRoute } from 'vue-router'
-import {ElMessageBox} from "element-plus";
-import { removeToken } from '@/utils/auth'
-
-const router = useRouter()
-const route = ref(useRoute())
-const loginOut = () =>{
- ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then((e) => {
- removeToken()
- window.location.reload();
-
- }).catch(() => { });
-}
-const toUserDetail = () =>{
- router.push('/userCenter')
-}
-const btnList = ref([
- {name:'总览',url:'/overview'},
- {name:'生态流量',url:'/irrigate'},
- {name:'图像监测', url:'/dma'},
- {name:'设备管理',url:'/facility-screen'},
- {name:'报警管理',url:'/alarm-screen'},
- {name:'报表管理',url:'/reports'},
- {name:'系统管理',url:'/user'},
-])
-const navTo = (item) =>{
- router.push(item.url)
-}
-//获取当前时间
-const nowTime = ref({})
-const now = new Date()
-const getTime = (now) => {
- // 获取年月日时分秒
- const year = now.getFullYear();
- const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
- const day = String(now.getDate()).padStart(2, '0');
- const hours = String(now.getHours()).padStart(2, '0');
- const minutes = String(now.getMinutes()).padStart(2, '0');
- const seconds = String(now.getSeconds()).padStart(2, '0');
-
- // 获取星期
- const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
- const weekday = weekdays[now.getDay()];
-
- // 拼接成指定格式的字符串
- return nowTime.value = {
- date:`${year}.${month}.${day} ${weekday}`,
- time:`${hours}:${minutes}:${seconds}`,
- }
-}
-getTime(now)
-onMounted(()=>{
- setInterval(()=>{
- nowTime.value = getTime(new Date())
- },1000)
-})
</script>
-<style lang="scss" scoped>
-.main{
- background-image:url("../assets/images/screen/bcg.png");
- background-size: 100% 100%;
+<style scoped lang="scss">
+.container{
width: 100%;
height: 100%;
- .header{
- width: 100%;
- height: 14%;
- .top{
- position: relative;
- width: 100%;
- height: 82px;
- background-image: url("../assets/images/screen/head.png");
- background-size: 100% 100%;
- .title{
- width: 916px;
- height: 39px;
- position: absolute;
- left:calc(50% - 458px);
- text-align: center;
- font-weight: normal;
- font-size: 36px;
- color: #F9FBFF;
- line-height: 70px;
- letter-spacing: 9px;
- text-shadow:0 0 3px rgba(255,255,255,0.7);
- }
- .time{
- position: absolute;
- width: 200px;
- top:5px;
- left:26px;
- display: flex;
- justify-content: space-between;
- line-height: 23px;
- span{
- font-weight: 400;
- font-size: 16px;
- color: #83D9F3;
- }
- span:last-child{
- text-shadow:0 0 2px rgba(255,255,255,0.6);
- }
- }
- .user-image{
- position: absolute;
- width: 55px;
- height:30px;
- top:5px;
- right:26px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .loginOut img{
- margin-top: 4px;
- width:14px;
- height:8px;
- }
- }
- .left-icon{
- position: absolute;
- top: 50%;
- img{
- width: 452px;
- height: 30px;
- }
- }
- .right-icon{
- position: absolute;
- top: 50%;
- right: 0;
- img{
- width: 459px;
- height: 30px;
- transform: scaleX(-1);
- }
- }
- }
- .nav{
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .nav-content{
- width: 1758px;
- height: 50px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: 400;
- font-size: 17px;
- color: #FFFFFF;
- line-height: 50px;
- .plain{
- width: 181px;
- height: 50px;
- background-image: url("../assets/images/screen/btnbg.png");
- text-align: center;
- }
- .active{
- background-image: url("../assets/images/screen/btnbg-active.png");
- }
- }
+ padding: 100px;
+ .list{
+ display: flex;
+ align-items: center;
+ gap: 30px;
}
- .content{
- width: 100%;
- height: 86%;
+ .item{
+ width: 300px;
+ height: 150px;
+ text-align: center;
+ line-height: 150px;
+ font-size: 28px;
+ color: #fff;
+ background-color: #1ab394;
+ box-shadow: 0 0 10px #1ab394;
+ border-radius: 10px;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3