|
|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <div class="mainContainer">
|
|
|
+ <header>
|
|
|
+ <div class="head-left">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div @click="navBlock" class="head-bth">
|
|
|
+ <span v-for="(item,index) in 3" :key="index"></span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="line">
|
|
|
+ <span></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img class="head-icon" src="@/assets/lzzk.png" alt />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-text">冷站智控</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-circular"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-text">{{headText}}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="triangle_border_down"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="head-right">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span class="head-text">2020.01.12 12:45</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="line"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-text">天气：多云</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-text">25℃</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="line"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="head-bth"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="triangle_border_down"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <nav>
|
|
|
+ <div class="nav-left">
|
|
|
+ <el-select class="nav-select" v-model="value">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="nav-right">
|
|
|
+ <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
|
|
|
+ <span class="nav-text1" v-if="navText">今日已收到 8 条策略，其中有 1 条未执行</span>
|
|
|
+ <span class="nav-text" v-else>今天已收到 8 条策略</span>
|
|
|
+ <span class="nav-look">查看</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <div id="nav" class="nav">
|
|
|
+ <div @click="navNone" class="nav-bth">
|
|
|
+ <span v-for="(item,index) in 3" :key="index"></span>
|
|
|
+ </div>
|
|
|
+ <p v-for="(item,index) in menuList" :key="index" class="nav-title">
|
|
|
+ <router-link :to="item.path">{{item.name}}</router-link>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuList: [
|
|
|
+ {
|
|
|
+ name: "当日运行策略",
|
|
|
+ path: "/strategy"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "申诉审核",
|
|
|
+ path: "/appeal"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "营业时间",
|
|
|
+ path: "/doBusiness"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "报警统计",
|
|
|
+ path: "/evaluate"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "选项1",
|
|
|
+ label: "嘉铭东枫产业园产业园"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项2",
|
|
|
+ label: "嘉铭东枫产业园"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ value: "",
|
|
|
+ navText: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: ["headText"],
|
|
|
+ methods: {
|
|
|
+ navNone() {
|
|
|
+ document.getElementById("nav").className = "nav";
|
|
|
+ },
|
|
|
+ navBlock() {
|
|
|
+ document.getElementById("nav").className = "nav nav-hover";
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mainContainer {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ header {
|
|
|
+ padding: 12px 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
|
|
|
+ .head-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ li {
|
|
|
+ margin: 0 4px;
|
|
|
+ .head-bth {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 18px;
|
|
|
+ height: 2px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin: 5px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 4px 12px 0 12px;
|
|
|
+ background: rgba(216, 216, 216, 1);
|
|
|
+ }
|
|
|
+ .head-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ .head-text {
|
|
|
+ height: 26px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ .head-circular {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: rgba(195, 198, 203, 1);
|
|
|
+ border-radius: 90px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+ .triangle_border_down {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 8px 6px 0;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #9ca2a9 transparent transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ li {
|
|
|
+ margin: 0 4px;
|
|
|
+ .head-bth {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 4px 8px 0 8px;
|
|
|
+ background: rgba(216, 216, 216, 1);
|
|
|
+ }
|
|
|
+ .head-text {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: #646c73;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .head-circular {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: rgba(195, 198, 203, 1);
|
|
|
+ border-radius: 90px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+ .triangle_border_down {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 8px 6px 0;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #9ca2a9 transparent transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ nav {
|
|
|
+ height: 48px;
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .nav-left {
|
|
|
+ }
|
|
|
+ .nav-right {
|
|
|
+ .nav-text {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .nav-text1 {
|
|
|
+ margin: 0 4px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(245, 78, 69, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .nav-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ .nav-look {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(0, 145, 255, 1);
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 0 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 0px;
|
|
|
+ background: #004275;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 1005px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ -webkit-transition: all 0.3s;
|
|
|
+ -moz-transition: all 0.3s;
|
|
|
+ -ms-transition: all 0.3s;
|
|
|
+ -o-transition: all 0.3s;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .nav-bth {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 24px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 18px;
|
|
|
+ height: 2px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin: 5px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-title {
|
|
|
+ padding: 0 24px;
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-title:hover {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-hover {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.nav-left {
|
|
|
+ .nav-select {
|
|
|
+ width: 144px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 14px;
|
|
|
+ margin-left: 16px;
|
|
|
+ .el-input--suffix .el-input__inner {
|
|
|
+ padding: 0 9px;
|
|
|
+ width: 144px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 14px;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 28px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Guoxiaohuan
