|
@@ -1,77 +1,74 @@
|
|
|
<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" @click="showTodayStrategy = true">查看</span>
|
|
|
- </div>
|
|
|
- </nav>-->
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ <div class="mainContainerTop"></div>
|
|
|
<div id="nav" class="nav">
|
|
|
<div @click="navNone" class="nav-bth">
|
|
|
<span v-for="(item,index) in 3" :key="index"></span>
|
|
@@ -80,21 +77,12 @@
|
|
|
<router-link :to="item.path">{{item.name}}</router-link>
|
|
|
</p>
|
|
|
</div>
|
|
|
-
|
|
|
- <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
|
|
|
- <today-strategy></today-strategy>
|
|
|
- </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import TodayStrategy from "@/components/todayStrategy.vue";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- TodayStrategy
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- showTodayStrategy: false,
|
|
|
menuList: [
|
|
|
{
|
|
|
name: "当日运行策略",
|
|
@@ -123,8 +111,7 @@ export default {
|
|
|
label: "嘉铭东枫产业园"
|
|
|
}
|
|
|
],
|
|
|
- value: "",
|
|
|
- navText: true
|
|
|
+ value: ""
|
|
|
};
|
|
|
},
|
|
|
props: ["headText"],
|
|
@@ -140,171 +127,150 @@ export default {
|
|
|
</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 {
|
|
|
+ .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;
|
|
|
- ul {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
|
|
|
+ .head-left {
|
|
|
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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- 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;
|
|
|
}
|
|
|
- }
|
|
|
- .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 {
|
|
|
+ .head-right {
|
|
|
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;
|
|
|
+ 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 {
|
|
|
+ height: 48px;
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .nav-left {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .mainContainerTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 96px;
|
|
|
+ }
|
|
|
.nav {
|
|
|
position: fixed;
|
|
|
left: 0;
|