fix:修改框架，初始化项目模板

web

2025-03-17 56d13900e2d74eeb9e22a9d86dc929640a676f6f

 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>