头部修改,和美移风修改

src/views/next/layout/screen-header.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="screen-header" @click="handelClearMap">
-    <div class="left"><span>{{ showYear }}</span> <span>{{ showYearZh }}</span> </div>
+    <div class="left">
+      <span>{{ showYear }}</span>
+      <span>{{ showYearZh }}</span>
+      <span>{{ showWeek }}</span>
+      <span style="font-size: 22px;">{{ showTime }}</span>
+    </div>
     <div class="center">
       <div class="title">数字移风分析展示平台</div>
     </div>
-    <div class="right"> <span>{{ showWeek }}</span> <span>{{ showTime }}</span></div>
+    <div class="right">
+      <span>多云</span>
+      <span>-1~7°C</span>
+      <span>北风3~4级</span>
+      <span>PM2.5</span>
+    </div>
   </div>
 </template>
 
@@ -34,9 +44,9 @@ export default {
   },
   methods: {
     ...mapActions({
-            set_nav: 'SET_NAV',
+      set_nav: 'SET_NAV',
 
-        }),
+    }),
     computeCurrentTime() {
       let year = new Intl.DateTimeFormat('zh-CN-u-ca-chinese', { dateStyle: 'full' }).format(new Date());
       this.showYearZh = '农历' + year.match(/年(.+)星期/)[1];
@@ -44,11 +54,11 @@ export default {
       this.showWeek = this.$moment().format("dddd");
       this.showTime = this.$moment().format("LT");
     },
-    handelClearMap(){
+    handelClearMap() {
-      if(this.navId == 'whyf'){
+      if (this.navId == 'whyf') {
         this.set_nav('sy')
-      }else{
+      } else {
-      this.$EventBus.$emit('switcMapType','Emap')
+        this.$EventBus.$emit('switcMapType', 'Emap')
 
       }
     },
@@ -74,14 +84,26 @@ export default {
   box-sizing: border-box;
   color: #ACBBD4;
   cursor: pointer;
+
   .left,
   .right {
-    padding: 8px 0 0 0;
     box-sizing: border-box;
     position: relative;
+   
+  }
+  .left{
     top: -4px;
+    >*{
+      margin-right: 16px;
+    }
   }
+  .right{
+    top: 2px;
+    >*{
     
+      margin-left: 16px;
+    }
+  }
   .center {
     height: 100%;
     display: flex;
@@ -107,4 +129,5 @@ export default {
       letter-spacing: 2px;
     }
   }
-}</style>
+}
+</style>

src/views/next/screen-content-right/home-right/index.vue

@@ -6,14 +6,14 @@
                         </screen-title>
                         <div class="card-item-hmyf">
                                 <div class="top">
-                                        <img src="@/assets/images/weather/index0.png" alt="">
+                                        <div class="item">
-                                        <div>12°</div>
+                                                <img src="@/assets/images/weather/kqwd.png" alt="">
-                                        <div>
+                                                <div><span>12°</span> <span>空气温度</span></div>
-                                                <span>多云</span>
-                                                <span>4/12°C</span>
                                         </div>
-                                        <div>
+                                        <img src="@/assets/images/weather/line.png" alt="" style="width: 14px;height: 68px;">
-                                                良
+                                        <div class="item">
+                                                <img src="@/assets/images/weather/kqsd.png" alt="">
+                                                <div><span class="num">12°</span> <span>空气湿度</span></div>
                                         </div>
                                 </div>
                                 <div class="bto">
@@ -42,7 +42,7 @@
                         <div class="card-item-whyf">
                                 <div class="item" v-for="(item, index) in cultureList" :key="index">
                                         <img :src="item.imgSrc" alt="">
-                                        <span>{{item.title}}</span>
+                                        <span>{{ item.title }}</span>
                                 </div>
                         </div>
                 </div>
@@ -55,19 +55,24 @@ export default {
                 return {
                         weatherList: [
                                 {
-                                        units: '温度',
+                                        units: '雨量',
-                                        img: require('@/assets/images/weather/temperature.png'),
+                                        img: require('@/assets/images/weather/yu.png'),
-                                        value: '20~30°'
+                                        value: '20~30mm'
                                 },
                                 {
-                                        units: '风力',
+                                        units: '光照',
-                                        img: require('@/assets/images/weather/windPower.png'),
+                                        img: require('@/assets/images/weather/gz.png'),
-                                        value: '3~4级'
+                                        value: '18.8lux'
                                 },
                                 {
-                                        units: 'PM2.5',
+                                        units: '土壤温度',
-                                        img: require('@/assets/images/weather/PM.png'),
+                                        img: require('@/assets/images/weather/trwd.png'),
-                                        value: '21~46μg'
+                                        value: '15~21°C'
+                                },
+                                {
+                                        units: '土壤湿度',
+                                        img: require('@/assets/images/weather/trsd.png'),
+                                        value: '52°C'
                                 }
                         ],
                         videoStatus: '',
@@ -78,7 +83,7 @@ export default {
                                 { imgSrc: require('@/assets/images/resource/whyf/3.jpg'), title: '金吉友拳法' },
                                 { imgSrc: require('@/assets/images/resource/whyf/4.jpg'), title: '张院簸箕制作技艺' },
                                 { imgSrc: require('@/assets/images/resource/whyf/5.jpg'), title: '毛子埠升制作技艺' },
-                                 { imgSrc: require('@/assets/images/resource/whyf/6.jpg'), title: '上铂金银器打造工艺' }
+                                { imgSrc: require('@/assets/images/resource/whyf/6.jpg'), title: '上铂金银器打造工艺' }
                         ]
 
                 };
@@ -116,75 +121,64 @@ export default {
 
                 >.top {
                         display: flex;
-                        align-items: center;
                         margin-right: 9px;
+                        justify-content: space-between;
+                        padding: 0 20px;
+                        position: relative;
+                        >.item {
+                                @include flex();
+                                align-items: center;
 
-                        img {
+                                img {
-                                width: 70px;
+                                        width: 34px;
-                                height: 70px;
+                                        height: 34px;
-                        }
+                                        margin-right: 12px;
-
-                        >:nth-child(2) {
-                                text-shadow: 0 0 10px;
-                                font-size: 48px;
-                                margin-right: 25px;
-
-                        }
-
-                        >:nth-child(3) {
-                                height: 100%;
-                                @include flex(column);
-                                justify-content: space-evenly;
-                                color: #BDCEEA;
-
-
-                        }
-
-                        >:nth-child(4) {
-                                padding: 4px 16px 4px 23px;
-                                height: 22px;
-                                box-sizing: border-box;
-                                background: #31609f;
-                                border-radius: 11px;
-                                font-size: 14px;
-                                color: #ACBBD4;
-                                line-height: 14px;
-                                position: relative;
-                                top: -15px;
-
-                                &::after {
-                                        content: '';
-                                        position: absolute;
-                                        left: 10px;
-                                        top: 7px;
-                                        width: 8px;
-                                        height: 8px;
-                                        border-radius: 50%;
-                                        background: #E3FFFF;
                                 }
-                        }
 
+                                >div {
+                                        width: 100%;
+                                        height: 100%;
+                                        @include flex(column);
+                                        justify-content: space-evenly;
+                                        :nth-child(1) {
+                                                text-shadow: 0 0 10px;
+                                                font-size: 22px;
+                                                font-weight: bold;
+                                                font-family: pangmenzhengdao;
+                                                letter-spacing: 4px;
+                                        }
+
+                                        :nth-child(2) {
+                                                color: #BDCEEA;
+                                                // margin-top: 12px;
+                                        }
+                                }
 
+                        }
 
                 }
 
                 >.bto {
-                        margin-top: 16px;
+                        margin-top: 20px;
                         display: flex;
                         justify-content: space-around;
 
                         >.item {
-                                width: 120px;
+                                width: 90px;
-                                height: 100px;
+                                height: 106px;
                                 background: url('~@/assets/images/common/weather-card.png') no-repeat;
                                 background-size: 100% 100%;
                                 @include flex(column);
                                 align-items: center;
+                                justify-content: space-between;
+                                font-size: 14px;
+                                padding-bottom: 5px;
+                                box-sizing: border-box;
 
                                 img {
                                         width: 30px;
                                         height: 30px;
-                                        margin: 12px 0;
+                                        margin-top: 15px;
                                 }
 
                                 :nth-child(3) {
@@ -205,6 +199,7 @@ export default {
                 box-sizing: border-box;
                 display: flex;
                 flex-wrap: wrap;
+
                 .item {
                         width: 140px;
                         height: 108px;
@@ -216,6 +211,7 @@ export default {
                         color: #BDCEEA;
                         font-size: 12px;
                         align-items: center;
+
                         img {
                                 width: 130px;
                                 height: 80px;
@@ -224,5 +220,4 @@ export default {
         }
 
 
-}
+}</style>
-</style>