|
|
@@ -1,61 +1,58 @@
|
|
|
<template>
|
|
|
<div class="container-box" ref="editor">
|
|
|
- <div class="box">
|
|
|
- <div class="top">
|
|
|
- <div class="logo">
|
|
|
- <div>
|
|
|
- <img
|
|
|
- src="@/assets/img2/综合总览/编组.png"
|
|
|
- alt=""
|
|
|
- class="mt-20px ml-36px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img
|
|
|
- src="@/assets/img2/综合总览/编组 23备份.png"
|
|
|
- alt=""
|
|
|
- class="ml-36px"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class="top">
|
|
|
+ <div class="logo">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="@/assets/img2/综合总览/编组.png"
|
|
|
+ alt=""
|
|
|
+ class="mt-20px ml-36px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="tabsBox mt-36px ml-50px">
|
|
|
- <div class="tabs">
|
|
|
- <div
|
|
|
- :class="[`tab-item`, { cur: index === tabs.index }]"
|
|
|
- :key="item"
|
|
|
- @click="tabs.index = index"
|
|
|
- v-for="(item, index) in tabs.list"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="@/assets/img2/综合总览/编组 23备份.png"
|
|
|
+ alt=""
|
|
|
+ class="ml-36px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="tipsBox">
|
|
|
- <div class="dateBox center">
|
|
|
- <div class="time font-size-22px">{{ dateBox.time }}</div>
|
|
|
- <div class="date font-size-16px">{{ dateBox.date }}</div>
|
|
|
- </div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="weather">
|
|
|
- <i :class="[`iconfont`, weather.天气图标]"></i>
|
|
|
- </div>
|
|
|
- <div class="temperature">
|
|
|
- <img
|
|
|
- class="pl-20px"
|
|
|
- src="@/assets/img2/综合总览/编组 6.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
|
|
|
- <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="headPortrait">
|
|
|
- <img src="https://httpbin.org/image/png" class="w-44px" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="tabsBox mt-36px ml-50px">
|
|
|
+ <div class="tabs">
|
|
|
+ <div
|
|
|
+ :class="[`tab-item`, { cur: index === tabs.index }]"
|
|
|
+ :key="item"
|
|
|
+ @click="tabs.index = index"
|
|
|
+ v-for="(item, index) in tabs.list"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="tipsBox">
|
|
|
+ <div class="dateBox center">
|
|
|
+ <div class="time font-size-22px">{{ dateBox.time }}</div>
|
|
|
+ <div class="date font-size-16px">{{ dateBox.date }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="weather">
|
|
|
+ <i :class="[`iconfont`, weather.天气图标]"></i>
|
|
|
+ </div>
|
|
|
+ <div class="temperature">
|
|
|
+ <img class="pl-20px" src="@/assets/img2/综合总览/编组 6.png" alt="" />
|
|
|
+ <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
|
|
|
+ <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="headPortrait">
|
|
|
+ <img src="https://httpbin.org/image/png" class="w-44px" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
<slot>内容区</slot>
|
|
|
</div>
|
|
|
+ <div :class="[`bg`, bgType]"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -126,7 +123,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tabs: {
|
|
|
- index: 0,
|
|
|
+ index: this.$props.tabIndex,
|
|
|
list: [`综合总览`, `移栽分析`],
|
|
|
},
|
|
|
dateBox: {
|
|
|
@@ -140,14 +137,28 @@ export default {
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
- props: [`tabChange`],
|
|
|
+ props: {
|
|
|
+ tabChange: {
|
|
|
+ type: Function,
|
|
|
+ default: undefined,
|
|
|
+ },
|
|
|
+ tabIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ bgType: {
|
|
|
+ type: String,
|
|
|
+ default: `g-bg1`,
|
|
|
+ },
|
|
|
+ },
|
|
|
watch: {
|
|
|
'tabs.index'(val) {
|
|
|
this.tabChange && this.tabChange(val)
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
- async created() {
|
|
|
+ created() {
|
|
|
+ console.log(`进入了`)
|
|
|
apiList.forEach((item) => {
|
|
|
this.$bus.$on(item.key, (data) => {
|
|
|
item.fn.call(this, data)
|
|
|
@@ -159,6 +170,7 @@ export default {
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
apiList.forEach((item) => {
|
|
|
+ console.log(`销毁了`, item.key)
|
|
|
this.$bus.$off(item.key)
|
|
|
})
|
|
|
},
|
|
|
@@ -169,99 +181,99 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.container-box {
|
|
|
transform-origin: 0 0 0;
|
|
|
- background-image: url('~@/assets/img2/综合总览/编组 16.png'),
|
|
|
- url('~@/assets/img2/综合总览/背景左线条.png'),
|
|
|
- url('~@/assets/img2/综合总览/背景线条上.png'),
|
|
|
- url('~@/assets/img2/综合总览/背景.png');
|
|
|
- background-position: right 10px bottom 10px, 10px center, left 510px top 13px,
|
|
|
- center;
|
|
|
- background-size: auto;
|
|
|
- background-repeat: no-repeat;
|
|
|
- width: 1920px;
|
|
|
- height: 1080px;
|
|
|
+ position: relative;
|
|
|
color: #fff;
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
|
- & > .box {
|
|
|
- padding: 10px;
|
|
|
- .top {
|
|
|
+ .top {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ .line {
|
|
|
+ width: 0px;
|
|
|
+ height: 41px;
|
|
|
+ margin: 0 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ font-size: 25px;
|
|
|
+ text-align: center;
|
|
|
display: flex;
|
|
|
- .line {
|
|
|
- width: 0px;
|
|
|
- height: 41px;
|
|
|
- margin: 0 20px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
- }
|
|
|
- .tabs {
|
|
|
- font-size: 25px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- background-image: url('~@/assets/img2/综合总览/编组 9.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center bottom;
|
|
|
- width: 766px;
|
|
|
- .tab-item {
|
|
|
- line-height: 56px;
|
|
|
- margin-right: 32px;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- &.cur {
|
|
|
- color: #fbfdff;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 4px;
|
|
|
- background: linear-gradient(333deg, #158d8c 11%, #29f0f0 90%);
|
|
|
- bottom: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- &:first-child {
|
|
|
- margin-left: 40px;
|
|
|
- }
|
|
|
- &:not(:last-child)::after {
|
|
|
+ background-image: url('~@/assets/img2/综合总览/编组 9.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center bottom;
|
|
|
+ width: 766px;
|
|
|
+ .tab-item {
|
|
|
+ line-height: 56px;
|
|
|
+ margin-right: 32px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ &.cur {
|
|
|
+ color: #fbfdff;
|
|
|
+ &::before {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
- width: 2px;
|
|
|
- height: 25px;
|
|
|
- background-color: rgba(255, 255, 255, 0.3);
|
|
|
position: absolute;
|
|
|
- top: 28%;
|
|
|
- right: -16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 4px;
|
|
|
+ background: linear-gradient(333deg, #158d8c 11%, #29f0f0 90%);
|
|
|
+ bottom: 0px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .tipsBox {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- width: 100%;
|
|
|
- padding-right: 77px;
|
|
|
- .dateBox {
|
|
|
- .date {
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 40px;
|
|
|
}
|
|
|
- .weather {
|
|
|
- i {
|
|
|
- font-size: 44px;
|
|
|
- }
|
|
|
+ &:not(:last-child)::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 2px;
|
|
|
+ height: 25px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
+ position: absolute;
|
|
|
+ top: 28%;
|
|
|
+ right: -16px;
|
|
|
}
|
|
|
- .temperature {
|
|
|
- // img {
|
|
|
- // padding: 0 20px;
|
|
|
- // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tipsBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 77px;
|
|
|
+ .dateBox {
|
|
|
+ .date {
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
- .headPortrait {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
+ }
|
|
|
+ .weather {
|
|
|
+ i {
|
|
|
+ font-size: 44px;
|
|
|
}
|
|
|
}
|
|
|
+ .temperature {
|
|
|
+ // img {
|
|
|
+ // padding: 0 20px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .headPortrait {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .bg {
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ & > .box {
|
|
|
+ position: absolute;
|
|
|
+ top: 90px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
wll8