UI优化和视频监控写死地址

hejianhao

2025-04-28 d985958fd536d9f967e3a808b12c24dc42222f36

 src/layouts/index.vue

@@ -1,9 +1,11 @@
<template>

    <div class="sticky top0 layout">

        <div class="header relative">

        <div class="header relative" style="align-items: flex-end;">

            <div @click="$router.push('/home')" class="title">

                <img src="@/assets/logo.png" alt="">

                射洪“两客一危”监管平台

                <span>

                    射洪两客一危监管平台

                </span>

            </div>

            <div></div>

            <div class="flex a-center pr--40">

@@ -27,10 +29,10 @@
                <div v-if="!item.meta || !item.meta.title" class="h100">

                    <template v-for="(item2, index2) in item.children">

                        <div :key="index2" @click="pushPath(item2.path)" v-if="!item2.meta.hide"

                            class="flex a-center j-center h100 w--160 menuItemHover pointer"

                            class="flex a-center j-center h100 br--18 w--160 menuItemHover pointer"

                            :class="item2.path == $route.path && 'bgColor2'">

                            <img v-if="item2.meta.icon" :src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"

                                class="w--15 h--15 mr--12 shrink0" />

                                class="w--40 h--40 mr--12 shrink0" />

                            <div class="color1">

                                {{ item2.meta.title }}

                            </div>

@@ -38,11 +40,11 @@
                    </template>

                </div>

                <div v-else :class="$route.path.includes('systemManage') && 'bgColor2'"

                    class="h100 w--160 menuItemHover dropdown" @mouseenter="routerDropdown(true)"

                    class="h100 w--160 br--18 menuItemHover dropdown" @mouseenter="routerDropdown(true)"

                    @mouseleave="routerDropdown(false)">

                    <div class="flex a-center j-center h100">

                        <img :src="require(`@/assets/routerIcon/${item.meta.icon}.png`)"

                            class="w--15 h--15 mr--12 shrink0" />

                            class="w--40 h--40 mr--12 shrink0" />

                        <div class="color1">

                            {{ item.meta.title }}

                        </div>

@@ -140,11 +142,11 @@
}



.bgColor1 {

    background-color: #0E6EFD;

    background-color: #3367ce;

}



.bgColor2 {

    background: #0D55B9;

    background: #2b5ab6;

}



.color1 {

@@ -152,12 +154,15 @@
}



.color2 {

    color: rgba(0, 0, 0, .6);

    // color: rgba(0, 0, 0, .6);

    color: #fff;

}



.header {

    height: 80px;

    background: #fff;

    background: #3367ce;

    background-image: url('../assets/title.png');

    background-size: 100% 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

@@ -166,18 +171,24 @@
        display: flex;

        justify-content: center;

        font-weight: 600;

        font-size: 24px;

        font-size: 30px;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        top: 38%;

        left: 48.5%;

        transform: translate(-50%, -50%);

        color: rgba(0, 0, 0, .8);

        // color: rgba(0, 0, 0, .8);

        color: #fff;



        img {

            width: 40px;

            height: 40px;

            margin-right: 10px;

            width: 50px;

            height: 50px;

            margin-right: 25px;

        }



        span {

            letter-spacing: 4px;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); // 新增字体阴影

        }

    }

}

@@ -186,11 +197,13 @@
    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    justify-content: space-between;

    padding: 0 220px;

}



.menuItemHover:hover {

    background: #0D55B9;

    border-radius: 18px;

    background: #2b5ab6;

}



.dropdown {