|
@@ -1,6 +1,60 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
- <div class="main-left"></div>
|
|
|
+ <div class="main-left">
|
|
|
+ <div class="left-top">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'shanggeyun_logo.svg')" />
|
|
|
+ <div class="left-time">
|
|
|
+ <span>2022.06.01 </span>
|
|
|
+ <span>10:10周一</span>
|
|
|
+ </div>
|
|
|
+ <div class="weather">
|
|
|
+ {{ outWeather.temperature ? outWeather.temperature : "--" }}℃
|
|
|
+ </div>
|
|
|
+ <div class="weixiin">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'weixin.svg')" />
|
|
|
+ <span> 联系客户</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-space">
|
|
|
+ <div class="text">
|
|
|
+ <div>博锐研发中心二区</div>
|
|
|
+ <div>
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'vector.svg')" />
|
|
|
+ <span>无人</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-info">
|
|
|
+ <div class="space-temp">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'template-icon.svg')" alt="" />
|
|
|
+ <span class="temp-text">温度摄氏度</span>
|
|
|
+ <span class="temp-num">26<sup>℃</sup></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-env">
|
|
|
+ <div class="env-item" :key="'env' + index" v-for="(item, index) in 3">
|
|
|
+ <div>
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'jiaquan.svg')" alt="" />
|
|
|
+ <span>甲醛</span>
|
|
|
+ </div>
|
|
|
+ <div>0.01 <sup> mg/㎡ </sup></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fotter">
|
|
|
+ <div class="fotter-item">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'rectangle1.svg')" />
|
|
|
+ <span>博锐研发中心二区 </span>
|
|
|
+ </div>
|
|
|
+ <div class="fotter-item">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'rectangle3.svg')" />
|
|
|
+ <span>博锐研发中心二区 </span>
|
|
|
+ </div>
|
|
|
+ <div class="fotter-item">
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'rectangle3.svg')" />
|
|
|
+ <span>博锐研发中心二区 </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="main-right popup-content">
|
|
|
<!--加班start-->
|
|
|
<div class="work-btn">
|
|
@@ -10,7 +64,8 @@
|
|
|
roomType === '开放' &&
|
|
|
scenarioArr &&
|
|
|
scenarioArr.length &&
|
|
|
- scenarioArr[0].sceneType === 'OVERTIME'"
|
|
|
+ scenarioArr[0].sceneType === 'OVERTIME'
|
|
|
+ "
|
|
|
:scenarioArr="scenarioArr"
|
|
|
:workkArr="workkArr"
|
|
|
@triggerWork="triggerWork"
|
|
@@ -55,7 +110,7 @@
|
|
|
teleport="#app"
|
|
|
>
|
|
|
<div class="work-content">
|
|
|
- <work-overtime v-if="isShowWork" :workkArr="workkArr"></work-overtime>
|
|
|
+ <work-overtime v-if="isShowWork" :workkArr="workkArr"></work-overtime>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
</div>
|
|
@@ -1482,9 +1537,7 @@ export default defineComponent({
|
|
|
});
|
|
|
},
|
|
|
// 格式化当前页面展示的时间
|
|
|
- formateWorkTime(){
|
|
|
-
|
|
|
- },
|
|
|
+ formateWorkTime() {},
|
|
|
/**
|
|
|
* 空间相关的接口
|
|
|
*/
|
|
@@ -1556,6 +1609,8 @@ export default defineComponent({
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.main {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
@@ -1565,9 +1620,178 @@ export default defineComponent({
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.main-left {
|
|
|
+ padding-left: 20px;
|
|
|
display: inline-block;
|
|
|
//width: 54%;
|
|
|
width: calc(100% - 330px);
|
|
|
+ .left-top {
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 60px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ vertical-align: middle;
|
|
|
+ display: inline-block;
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .weather {
|
|
|
+ padding-left: 22px;
|
|
|
+ }
|
|
|
+ .weixiin {
|
|
|
+ margin-left: 10px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-space {
|
|
|
+ padding-top: 124px;
|
|
|
+ padding-right: 80px;
|
|
|
+ .text {
|
|
|
+ position: relative;
|
|
|
+ div {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40px;
|
|
|
+ line-height: 58px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 12px;
|
|
|
+ width: 55px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #edf1f5;
|
|
|
+ border-radius: 10px;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ // margin-top: 4px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 4px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 15px;
|
|
|
+ color: #8b949e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .space-info {
|
|
|
+ padding-top: 48px;
|
|
|
+ .space-temp {
|
|
|
+ padding-bottom: 13px;
|
|
|
+ border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 22px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 14px;
|
|
|
+ }
|
|
|
+ .temp-text {
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 46px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-left: 13px;
|
|
|
+ }
|
|
|
+ .temp-num {
|
|
|
+ padding-left: 24px;
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 60px;
|
|
|
+ line-height: 73px;
|
|
|
+ color: #ffffff;
|
|
|
+ sup {
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .space-env {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ .env-item {
|
|
|
+ flex: 1;
|
|
|
+ div {
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 23px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding-top: 10px;
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 39px;
|
|
|
+ color: #ffffff;
|
|
|
+ sup {
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.main-right {
|
|
@@ -1588,6 +1812,55 @@ export default defineComponent({
|
|
|
width: 100%;
|
|
|
background: #fff;
|
|
|
}
|
|
|
+
|
|
|
+ .fotter {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .fotter-item {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 195px;
|
|
|
+ height: 40px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &:nth-child(1) {
|
|
|
+ left: 0;
|
|
|
+ z-index: 333;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: -18px;
|
|
|
+ z-index: 222;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin-left: -18px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ display: inline-block;
|
|
|
+ width: 128px;
|
|
|
+ height: 18px;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-40%) translateX(-50%);
|
|
|
+ font-family: "Noto Sans SC";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ color: #c3c7cb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fotter-item-active {
|
|
|
+ margin-bottom: -2px;
|
|
|
+ span {
|
|
|
+ color: #1F2429;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|