AgriculturalCloud-h5-UI/pages/index/index.vue

<template>
  <view>
    <uni-page-head class="cust-uni-page-head">
      <view class="cust-agrcloud-uni-page-head uni-page-head">
        <view class="uni-page-head-hd cust-agrcloud-uni-page-head-hd"
          @click="handleRedirectMainPageClick">
          <view class="uni-page-head-btn">
            <image class="uni-btn-icon cust-head-icon"
              src="@/static/agrcloud-images/agrcloud-head-dir-img.png"></image>
          </view>
        </view>
        <view class="uni-page-head-bd">
          <view class="uni-page-head__title"
            style="font-size: 16px; opacity: 1;">修文农业云公共服务系统
          </view>
        </view>
        <view class="uni-page-head-hd cust-agrcloud-uni-page-head-hd">
          <view class="uni-page-head-btn">
            <image class="uni-btn-icon cust-head-notice-icon"
              src="@/static/agrcloud-images/agrcloud-head-notice-icon.png"></image>
          </view>
        </view>
      </view>
    </uni-page-head>

    <view class="page-content">
      <view class="page-content-title">
        <view class="content-title">
          <image class="weather-densefog"
            src="@/static/agrcloud-images/agrcloud-weather-densefog-img.png"></image>
          <u-notice-bar class="title-text"
            mode="horizontal"
            type="none"
            :volume-icon="true"
            :more-icon="true"
            :is-circular="true"
            :list="titleContentList"></u-notice-bar>
        </view>
      </view>
      <view class="main-content">
        <!-- 质量安全投诉 -->
        <view class="main-content-complaints">
          <view class="complaints-container"
            @click="handleWarterClick('complaints')">
            <image class="complaints-container-icon"
              src="@/static/agrcloud-images/agrcloud-main-page-complaints-icon.png">
            </image>
            <view class="complaints-container-title">
              <text class="complaints-container-title-text">质量安全投诉</text>
            </view>
            <view class="complaints-container-subtitle">
              <text class="complaints-container-subtitle-text">Complaints</text>
            </view>
          </view>
        </view>
        <!-- 气象服务 农技专家 政策法规 通知公告 -->
        <view class="main-content-metexpregnotice">
          <view class="complaints-metexpregnotice">
            <view class="metexpregnotice-meteregula">
              <!-- 气象服务 -->
              <view class="meteregula-meteorological">
                <view class="meteorological-container"
                  @click="handleWarterClick('meteorological')">
                  <image class="meteorological-container-icon"
                    src="@/static/agrcloud-images/agrcloud-main-page-meteorological-icon.png">
                  </image>
                  <view class="meteorological-container-title">
                    <text class="meteorological-container-title-text">气象服务</text>
                  </view>
                  <view class="meteorological-container-subtitle">
                    <text class="meteorological-container-subtitle-text">Meteorological</text>
                  </view>
                </view>
              </view>
              <!-- 政策法规 -->
              <view class="meteregula-regulations">
                <view class="regulations-container"
                  @click="handleWarterClick('regulations')">
                  <image class="regulations-container-icon"
                    src="@/static/agrcloud-images/agrcloud-main-page-regulations-icon.png">
                  </image>
                  <view class="regulations-container-title">
                    <text class="regulations-container-title-text">政策法规</text>
                  </view>
                  <view class="regulations-container-subtitle">
                    <text class="regulations-container-subtitle-text">Regulations</text>
                  </view>
                </view>
              </view>
            </view>
            <!-- 农技专家 -->
            <view class="metexpregnotice-expertsnotice">
              <view class="expertsnotice-experts">
                <view class="experts-container"
                  @click="handleWarterClick('experts')">
                  <image class="experts-container-icon"
                    src="@/static/agrcloud-images/agrcloud-main-page-experts-icon.png">
                  </image>
                  <view class="experts-container-title">
                    <text class="experts-container-title-text">农技专家</text>
                  </view>
                  <view class="experts-container-subtitle">
                    <text class="experts-container-subtitle-text">Experts</text>
                  </view>
                </view>
              </view>
              <!-- 通知公告 -->
              <view class="expertsnotice-notice">
                <view class="notice-container"
                  @click="handleWarterClick('notice')">
                  <image class="notice-container-icon"
                    src="@/static/agrcloud-images/agrcloud-main-page-notice-icon.png">
                  </image>
                  <view class="notice-container-title">
                    <text class="notice-container-title-text">通知公告</text>
                  </view>
                  <view class="notice-container-subtitle">
                    <text class="notice-container-subtitle-text">Notice</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="clear: both;"></view>
        <!-- 监测信息 -->
        <view class="main-content-monitoring">
          <view class="content-monitoring">
            <view class="monitoring-container"
              @click="handleWarterClick('monitoring')">
              <image class="monitoring-container-icon"
                src="@/static/agrcloud-images/agrcloud-main-page-monitoring-icon.png">
              </image>
              <view class="monitoring-container-title">
                <text class="monitoring-container-title-text">监测信息</text>
              </view>
              <view class="monitoring-container-subtitle">
                <text class="monitoring-container-subtitle-text">Monitoring</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mapinfo from '@/agrcloud-utils/mapinfo';

  export default {
    data() {
      return {
        titleContentList: ['气象预警：修文县气象台2021年1月20日10时30分发布晴朗天气'],
        mainNavigateToObj: {
          complaints: '/pages/complaints/index',
          // meteorological: '/pages/meteorological/index',
          regulations: '/pages/regulations/index',
          experts: '/pages/experts/index',
          notice: '/pages/notice/index',
          monitoring: '/pages/monitoring/index'
        }
      };
    },
    onLoad() {
      // #ifdef H5
      // this.initMapinfo();
      // #endif
    },
    methods: {
      handleWarterClick(itemData) {
        if (!itemData || !this.mainNavigateToObj[itemData]) {
          this.$msgbox('模块建设中...');
          return;
        }
        uni.navigateTo({
          url: this.mainNavigateToObj[itemData]
        });
      },
      initMapinfo() {
        mapinfo().then((res) => {
          const currTitleContent = '当前气象信息: ';
          const currProvince = ((res.regeocode || {}).addressComponent || {}).province;
          const currCity = ((res.regeocode || {}).addressComponent || {}).city;
          const currDistrict = ((res.regeocode || {}).addressComponent || {}).district;
          const currDate = new Date();
          const currFormatDate = currDate.getFullYear() + '年' + (currDate.getMonth() + 1) + '月' + currDate.getDate() +
            '日' + currDate.getHours() + '时' + currDate.getMinutes() + '分' + currDate.getSeconds() + '秒';
          const currWeather = (res.weatherInfo || {}).weather;
          const currTemperature = (res.weatherInfo || {}).temperature;
          const currWinddirection = (res.weatherInfo || {}).winddirection;
          const currWindpower = (res.weatherInfo || {}).windpower;
          const currHumidity = (res.weatherInfo || {}).humidity;
          this.titleContentList = [
            currTitleContent + currProvince + currCity + currDistrict + currFormatDate + currWeather +
            currTemperature + '℃' + currWinddirection + '风' + currWindpower + '级空气湿度' + currHumidity
          ];
        });
      }
    }
  };
</script>

<style lang="scss"
  scoped>
  .page-content {
    width: 100%;
    padding: 0;

    &-title {
      width: 100%;
      background-color: #ffffff;

      .content-title {
        margin: 0 47rpx 0 54rpx;

        .title-logo {
          padding-top: 9rpx;
          height: 52rpx;
          width: 30rpx;
          float: left;
        }

        .weather-densefog {
          padding-top: 16rpx;
          float: left;
          width: 36rpx;
          height: 36rpx;
        }

        .title-text {
          width: calc(100% - 36rpx);
        }
      }
    }

    .main-content {
      padding: 36rpx 24rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      .main-content-complaints {
        // width: 702rpx;
        width: 100%;
        height: 240rpx;
        background-image: url("../../static/agrcloud-images/agrcloud-main-page-complaints-bg.png");
        background-size: cover;
        background-color: transparent;
        background-position: center;

        .complaints-container {
          // padding-top: 26rpx;
          // padding-left: 40rpx;
          padding: 26rpx 40rpx;

          &-icon {
            width: 84rpx;
            height: 84rpx;
          }

          .complaints-container-title {
            margin-top: 4rpx;

            &-text {
              height: 67rpx;
              font-size: 48rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 67rpx;
              letter-spacing: 4rpx;
            }
          }

          .complaints-container-subtitle {
            &-text {
              text-transform: uppercase;
              height: 33rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 33rpx;
              letter-spacing: 2rpx;
            }
          }
        }
      }

      .main-content-metexpregnotice {
        width: 100%;
        padding-top: 24rpx;

        .complaints-metexpregnotice {
          width: 100%;
          display: flex;

          .metexpregnotice-meteregula {
            // width: calc(50% - 12rpx);
            flex: 1;
            /* float: left; */

            .meteregula-meteorological {
              // width: 338rpx;
              width: 100%;
              height: 260rpx;
              background-image: url("../../static/agrcloud-images/agrcloud-main-page-meteorological-bg.png");
              background-size: cover;
              background-color: transparent;
              background-position: center;

              .meteorological-container {
                // padding-top: 32rpx;
                // padding-left: 40rpx;
                padding: 32rpx 40rpx 26rpx;

                &-icon {
                  width: 84rpx;
                  height: 84rpx;
                }

                .meteorological-container-title {
                  margin-top: 18rpx;

                  &-text {
                    height: 67rpx;
                    font-size: 48rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 67rpx;
                    letter-spacing: 4rpx;
                  }
                }

                .meteorological-container-subtitle {
                  &-text {
                    text-transform: uppercase;
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    letter-spacing: 2rpx;
                  }
                }
              }
            }

            .meteregula-regulations {
              margin-top: 24rpx;
              // width: 338rpx;
              width: 100%;
              height: 380rpx;
              background-image: url("../../static/agrcloud-images/agrcloud-main-page-regulations-bp.png");
              background-size: cover;
              background-color: transparent;
              background-position: center;

              .regulations-container {
                // padding-top: 71rpx;
                // padding-left: 40rpx;
                padding: 71rpx 40rpx 60rpx;

                &-icon {
                  width: 84rpx;
                  height: 84rpx;
                }

                .regulations-container-title {
                  margin-top: 65rpx;

                  &-text {
                    height: 67rpx;
                    font-size: 48rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 67rpx;
                    letter-spacing: 4rpx;
                  }
                }

                .regulations-container-subtitle {
                  &-text {
                    text-transform: uppercase;
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    letter-spacing: 2rpx;
                  }
                }
              }
            }
          }

          .metexpregnotice-expertsnotice {
            /* float: left; */
            margin-left: 24rpx;
            // width: calc(50% - 12rpx);
            flex: 1;

            .expertsnotice-experts {
              // width: 338rpx;
              width: 100%;
              height: 380rpx;
              background-image: url("../../static/agrcloud-images/agrcloud-main-page-experts-bg.png");
              background-size: cover;
              background-color: transparent;
              background-position: center;

              .experts-container {
                // padding-top: 78rpx;
                // padding-left: 40rpx;
                padding: 78rpx 40rpx 60rpx;

                &-icon {
                  width: 84rpx;
                  height: 84rpx;
                }

                .experts-container-title {
                  margin-top: 58rpx;

                  &-text {
                    height: 67rpx;
                    font-size: 48rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 67rpx;
                    letter-spacing: 4rpx;
                  }
                }

                .experts-container-subtitle {
                  &-text {
                    text-transform: uppercase;
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    letter-spacing: 2rpx;
                  }
                }
              }
            }

            .expertsnotice-notice {
              margin-top: 24rpx;
              // width: 338rpx;
              width: 100%;
              height: 260rpx;
              background-image: url("../../static/agrcloud-images/agrcloud-main-page-notice-bp.png");
              background-size: cover;
              background-color: transparent;
              background-position: center;

              .notice-container {
                // padding-top: 32rpx;
                // padding-left: 40rpx;
                padding: 32rpx 40rpx 26rpx;

                &-icon {
                  width: 84rpx;
                  height: 84rpx;
                }

                .notice-container-title {
                  margin-top: 18rpx;

                  &-text {
                    height: 67rpx;
                    font-size: 48rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 67rpx;
                    letter-spacing: 4rpx;
                  }
                }

                .notice-container-subtitle {
                  &-text {
                    text-transform: uppercase;
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    letter-spacing: 2rpx;
                  }
                }
              }
            }
          }
        }
      }

      .main-content-monitoring {
        padding-top: 24rpx;
        width: 100%;

        .content-monitoring {
          // width: 702rpx;
          width: 100%;
          height: 240rpx;
          background-image: url("../../static/agrcloud-images/agrcloud-main-page-monitoring-bp.png");
          background-size: cover;
          background-color: transparent;
          background-position: center;

          .monitoring-container {
            // padding-top: 26rpx;
            // padding-left: 40rpx;
            padding: 26rpx 40rpx;

            &-icon {
              width: 84rpx;
              height: 84rpx;
            }

            .monitoring-container-title {
              margin-top: 4rpx;

              &-text {
                height: 67rpx;
                font-size: 48rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 67rpx;
                letter-spacing: 4rpx;
              }
            }

            .monitoring-container-subtitle {
              &-text {
                text-transform: uppercase;
                height: 33rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 33rpx;
                letter-spacing: 2rpx;
              }
            }
          }
        }
      }
    }
  }
</style>