|
@@ -1,399 +1,390 @@
|
|
|
<template>
|
|
|
- <div class="mainContainer">
|
|
|
- <div class="mainContainerBox">
|
|
|
- <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='mainContainer'>
|
|
|
+ <div class='mainContainerBox'>
|
|
|
+ <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>
|
|
|
+ </li>-->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class='head-right'>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span class='head-text'>{{dateNow||'--'}}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='line'></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='head-text MicrYaHei'>天气:{{weather}}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='head-text MicrYaHei'>{{temperatureOut}}℃</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='line'></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class>{{$store.state.userInfo.username}}</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' @change='changeProjectId'>
|
|
|
+ <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
</div>
|
|
|
- <div class="head-right">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="head-text">{{dateNow||'--'}}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="line"></span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="head-text MicrYaHei">天气:{{weather}}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="head-text MicrYaHei">{{temperatureOut}}℃</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="line"></span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class>{{$store.state.userInfo.username}}</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" @change="changeProjectId">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
+ <div class='mainContainerTop'></div>
|
|
|
+ <div id='nav' class='nav'>
|
|
|
+ <div class='nav-box'>
|
|
|
+ <div @click='navNone' class='nav-bth'>
|
|
|
+ <span v-for='(item,index) in 3' :key='index'></span>
|
|
|
+ </div>
|
|
|
+ <div class='nav-top'>冷站智控</div>
|
|
|
+ </div>
|
|
|
+ <p v-for='(item,index) in menuList' :key='index' class='nav-title'>
|
|
|
+ <router-link :to='item.path'>{{item.name}}</router-link>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </nav>
|
|
|
+ <div class='mask' @click='navNone' v-if='menuShow'></div>
|
|
|
</div>
|
|
|
- <div class="mainContainerTop"></div>
|
|
|
- <div id="nav" class="nav">
|
|
|
- <div class="nav-box">
|
|
|
- <div @click="navNone" class="nav-bth">
|
|
|
- <span v-for="(item,index) in 3" :key="index"></span>
|
|
|
- </div>
|
|
|
- <div class="nav-top">冷站智控</div>
|
|
|
- </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 class="mask" @click="navNone" v-if="menuShow"></div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import store from "../../store";
|
|
|
-var moment = require("moment");
|
|
|
-import "moment/locale/zh-cn";
|
|
|
-import { queryWeather } from "@/api/main/main.js";
|
|
|
+import store from '../../store'
|
|
|
+import moment from 'moment'
|
|
|
+import { queryWeather } from '@/api/main/main.js'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- menuShow: false,
|
|
|
- menuList: [
|
|
|
- {
|
|
|
- name: "当日运行策略",
|
|
|
- path: "/strategy"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "运行评价",
|
|
|
- path: "/evaluate"
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuShow: false,
|
|
|
+ menuList: [
|
|
|
+ {
|
|
|
+ name: '当日运行策略',
|
|
|
+ path: '/strategy'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '运行评价',
|
|
|
+ path: '/evaluate'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '未执行申诉',
|
|
|
+ path: '/appeal'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '申诉审核',
|
|
|
+ path: '/audit'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '营业时间调整',
|
|
|
+ path: '/doBusiness'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ options: [],
|
|
|
+ dateNow: new Date(),
|
|
|
+ weather: '',
|
|
|
+ temperatureIn: '', // 室内
|
|
|
+ temperatureOut: '', // 室外
|
|
|
+ value: sessionStorage.getItem('projectId') || store.state.projectId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['headText'],
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ changeProjectId(val) {
|
|
|
+ console.log(val)
|
|
|
+ sessionStorage.setItem('projectId', val)
|
|
|
+ location.reload()
|
|
|
},
|
|
|
- {
|
|
|
- name: "未执行申诉",
|
|
|
- path: "/appeal"
|
|
|
+ navNone() {
|
|
|
+ this.menuShow = false
|
|
|
+ document.getElementById('nav').className = 'nav'
|
|
|
},
|
|
|
- {
|
|
|
- name: "申诉审核",
|
|
|
- path: "/audit"
|
|
|
+ navBlock() {
|
|
|
+ this.menuShow = true
|
|
|
+ document.getElementById('nav').className = 'nav nav-hover'
|
|
|
},
|
|
|
- {
|
|
|
- name: "营业时间调整",
|
|
|
- path: "/doBusiness"
|
|
|
+ // 查询当日天气
|
|
|
+ query() {
|
|
|
+ queryWeather({}).then(res => {
|
|
|
+ if (res.result == 'success') {
|
|
|
+ this.weather = res.weather || '--'
|
|
|
+ this.temperatureIn = res.temperatureIn || '--'
|
|
|
+ this.temperatureOut = res.temperatureOut || '--'
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- ],
|
|
|
- options: [
|
|
|
- ],
|
|
|
- dateNow: new Date(),
|
|
|
- weather: "",
|
|
|
- temperatureIn: "", // 室内
|
|
|
- temperatureOut: "", // 室外
|
|
|
- value: sessionStorage.getItem('projectId') || store.state.projectId
|
|
|
- };
|
|
|
- },
|
|
|
- props: ["headText"],
|
|
|
- computed:{
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeProjectId(val){
|
|
|
- console.log(val)
|
|
|
- sessionStorage.setItem('projectId',val)
|
|
|
- location.reload()
|
|
|
- },
|
|
|
- navNone() {
|
|
|
- this.menuShow = false
|
|
|
- document.getElementById("nav").className = "nav";
|
|
|
- },
|
|
|
- navBlock() {
|
|
|
- this.menuShow = true
|
|
|
- document.getElementById("nav").className = "nav nav-hover";
|
|
|
},
|
|
|
- // 查询当日天气
|
|
|
- query() {
|
|
|
- queryWeather({}).then(res => {
|
|
|
- if (res.result == "success") {
|
|
|
- this.weather = res.weather || "--";
|
|
|
- this.temperatureIn = res.temperatureIn || "--";
|
|
|
- this.temperatureOut = res.temperatureOut || "--";
|
|
|
- }
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ let projects = this.$store.state.projects.projects
|
|
|
+ projects.forEach(el => {
|
|
|
+ this.options.push({
|
|
|
+ label: el.localName,
|
|
|
+ value: el.id
|
|
|
+ })
|
|
|
+ })
|
|
|
+ setInterval(() => {
|
|
|
+ this.dateNow = moment()
|
|
|
+ .locale('zh-cn')
|
|
|
+ .format('YYYY.MM.DD HH:mm')
|
|
|
+ }, 1000)
|
|
|
+ this.query()
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let projects = this.$store.state.projects.projects
|
|
|
- projects.forEach(el=>{
|
|
|
- this.options.push({
|
|
|
- label:el.localName,
|
|
|
- value:el.id
|
|
|
- })
|
|
|
- })
|
|
|
- setInterval(() => {
|
|
|
- this.dateNow = moment()
|
|
|
- .locale("zh-cn")
|
|
|
- .format("YYYY.MM.DD HH:mm");
|
|
|
- }, 1000);
|
|
|
- this.query();
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.mainContainer {
|
|
|
- .mainContainerBox {
|
|
|
- width: 100%;
|
|
|
- height: 96px;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
- header {
|
|
|
- max-height: 48px;
|
|
|
- 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;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- li {
|
|
|
- margin: 0 4px;
|
|
|
- .head-bth {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- span {
|
|
|
+ .mainContainerBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 96px;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ header {
|
|
|
+ max-height: 48px;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainContainerTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 96px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ z-index: 99;
|
|
|
+ .nav-bth {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 24px;
|
|
|
+ span {
|
|
|
display: block;
|
|
|
width: 18px;
|
|
|
height: 2px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
+ background: #fff;
|
|
|
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;
|
|
|
- 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;
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin: 5px auto;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- .head-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- ul {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- li {
|
|
|
- margin: 0 4px;
|
|
|
- .head-bth {
|
|
|
- display: inline-block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
+ .nav-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 24px;
|
|
|
+ .nav-top {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
- .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;
|
|
|
- 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-title {
|
|
|
+ padding: 0 24px;
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0.9;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- nav {
|
|
|
- height: 48px;
|
|
|
- background: rgba(247, 249, 250, 1);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .mainContainerTop {
|
|
|
- width: 100%;
|
|
|
- height: 96px;
|
|
|
- }
|
|
|
- .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;
|
|
|
- z-index: 99;
|
|
|
- .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:hover {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
- .nav-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-right: 24px;
|
|
|
- .nav-top {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 200px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99;
|
|
|
}
|
|
|
-
|
|
|
- .nav-title {
|
|
|
- padding: 0 24px;
|
|
|
- a {
|
|
|
- color: #fff;
|
|
|
- opacity: 0.9;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
+ .nav-hover {
|
|
|
+ width: 200px;
|
|
|
}
|
|
|
- .nav-title:hover {
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
- }
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 200px;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 99;
|
|
|
- }
|
|
|
- .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;
|
|
|
+ .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>
|