首页样式更改

shuishen

2022-08-04 b5072d2f774a30b4e90458b09e34861e4c75f400

首页样式更改

 public/img/icon/jcsb-menu.png

 public/img/icon/jksb-menu.png

 public/img/icon/nc-menu.png

 src/styles/element-ui.scss

@@ -6,7 +6,7 @@
    }
}


// icon图标
.el-icon-my-sy {
    background: url('/img/icon/1016.png') center no-repeat;
    // background-size: 100% 100%;
@@ -31,6 +31,44 @@
    visibility: hidden;
}

.el-icon-my-nc-menu {
    background: url('/img/icon/nc-menu.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-nc-menu:before {
    content: "替";
    font-size: 24px;
    visibility: hidden;
}

.el-icon-my-jksb-menu {
    background: url('/img/icon/jksb-menu.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-jksb-menu:before {
    content: "替";
    font-size: 24px;
    visibility: hidden;
}

.el-icon-my-jcsb-menu {
    background: url('/img/icon/jcsb-menu.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-jcsb-menu:before {
    content: "替";
    font-size: 24px;
    visibility: hidden;
}



.dialog-fixed {
    margin: 0 !important;
    position: fixed;

 src/views/home/index.vue

@@ -195,46 +195,24 @@
        </div>

        <div class="down-menu">
            <div
                class="nc"
                @click="
          ncListShow = !ncListShow;
          jkListShow = false;
          jcListShow = false;
        "
            >
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div
                class="jk"
                @click="
          jkListShow = !jkListShow;
          ncListShow = false;
          jcListShow = false;
        "
            >
                <span>监控设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div
                class="jc"
                @click="
          jcListShow = !jcListShow;
          ncListShow = false;
          jkListShow = false;
        "
            >
                <span>监测设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div>
                <div
                    class="nc down-menu-item"
                    @click="
                    ncListShow = !ncListShow;
                    jkListShow = false;
                    jcListShow = false;
                    "
                >
                    <div class="l">
                        <i class="el-icon-my-nc-menu"></i>
                        <span :class="{'checked': ncListShow}">农场</span>
                    </div>

            <div v-show="ncListShow" class="nc-list">
                <div class="title" @click="ncListShow = false">
                    农场
                    <i class="el-icon-caret-top"></i>
                    <i :class="{'el-icon-arrow-down': !ncListShow, 'el-icon-arrow-up': ncListShow}"></i>
                </div>
                <div class="content">

                <div v-show="ncListShow" class="nc-list">
                    <div
                        v-for="(item, index) in farmNumArray"
                        :key="index"
@@ -245,12 +223,25 @@
                    >{{ item.farmName }}</div>
                </div>
            </div>
            <div v-show="jkListShow" class="jk-list">
                <div class="title" @click="jkListShow = false">
                    监控设备
                    <i class="el-icon-caret-top"></i>

            <div>
                <div
                    class="jk down-menu-item"
                    @click="
                    jkListShow = !jkListShow;
                    ncListShow = false;
                    jcListShow = false;
                    "
                >
                    <div class="l">
                        <i class="el-icon-my-jksb-menu"></i>
                        <span :class="{'checked': jkListShow}">监控设备</span>
                    </div>

                    <i :class="{'el-icon-arrow-down': !jkListShow, 'el-icon-arrow-up': jkListShow}"></i>
                </div>
                <div class="content">

                <div v-show="jkListShow" class="jk-list">
                    <div
                        v-for="(item, index) in equipmentList.vidList"
                        :key="index"
@@ -261,12 +252,25 @@
                    >{{ item.name }}</div>
                </div>
            </div>
            <div v-show="jcListShow" class="jc-list">
                <div class="title" @click="jcListShow = false">
                    监测设备
                    <i class="el-icon-caret-top"></i>

            <div>
                <div
                    class="jc down-menu-item"
                    @click="
                    jcListShow = !jcListShow;
                    ncListShow = false;
                    jkListShow = false;
                    "
                >
                    <div class="l">
                        <i class="el-icon-my-jcsb-menu"></i>
                        <span :class="{'checked': jcListShow}">监测设备</span>
                    </div>

                    <i :class="{'el-icon-arrow-down': !jcListShow, 'el-icon-arrow-up': jcListShow}"></i>
                </div>
                <div class="content">

                <div v-show="jcListShow" class="jc-list">
                    <div
                        v-for="(item, index) in equipmentList.staList"
                        :key="index"
@@ -1908,74 +1912,71 @@
        }
    }
    .down-menu {
        display: flex;
        // align-items: center;
        justify-content: space-around;
        flex-direction: column;
        position: absolute;
        top: 102px;
        left: 438px;
        width: 146px;
        height: 156px;
        width: 282px;

        & > div {
            padding: 0 16px;
            margin-top: 8px;
            border-radius: 4px 4px 4px 4px;
            overflow: hidden;
        }

        & > div:first-child {
            margin-top: 0px;
        }

        .down-menu-item {
            padding: 0 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 46px;
            background: rgba(3, 50, 82, 0.4);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #69e2ed;
            background: rgba(15, 58, 78, 0.8);

            box-sizing: border-box;
            font-size: 18px;
            color: #6de9f3;
            color: #d8ebee;
            cursor: pointer;

            .l {
                display: flex;
                align-items: center;

                span {
                    margin-left: 8px;
                }

                .checked {
                    color: #6de9f3;
                }
            }

            i {
                font-size: 12px;
            }
        }

        & > .nc-list,
        & > .jk-list,
        & > .jc-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: absolute;
            top: 0;
            left: 172px;
            width: 144px;
            height: 224px;
        .nc-list,
        .jk-list,
        .jc-list {
            padding: 4px 15px 4px 40px;
            max-height: 200px;

            background: rgba(6, 28, 29, 0.8);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #69e2ed;
            background: rgba(15, 58, 78, 0.8);
            box-sizing: border-box;

            .title {
                width: 100%;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 20px;
            }
            color: #d8ebee;

            .content {
                width: 100%;
                height: calc(100% - 46px);
                overflow-x: hidden;
                overflow-y: auto;
            }
            overflow-x: hidden;
            overflow-y: auto;

            .box {
                margin-top: 16px;
                padding-left: 20px;
                width: 100%;
                // height: 24px;
                line-height: 24px;
                padding: 0 5px;
                height: 36px;
                line-height: 36px;
                text-align: left;
                box-sizing: border-box;
                white-space: nowrap;
@@ -1983,19 +1984,9 @@
                text-overflow: ellipsis;
            }

            .box.first {
                margin-top: 0 !important;
            .box:hover {
                background: rgba(105, 226, 237, 0.5);
            }

            .box:last-child {
                margin-bottom: 15px;
            }
        }
        .jk-list {
            top: 55px;
        }
        .jc-list {
            top: 108px;
        }
    }