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"
            :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 {
    meteorologicalRollData
  } from '@/agrcloud-api/meteorological';

  export default {
      name: 'homePage',
    data() {
      return {
        titleContentList: ['暂无数据！'],
        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.getMeteorologicalRollData();
      // #endif
    },
    methods: {
      handleWarterClick(itemData) {
        if (!itemData || !this.mainNavigateToObj[itemData]) {
          this.$msgbox('模块建设中...');
          return;
        }
        uni.navigateTo({
          url: this.mainNavigateToObj[itemData]
        });
      },
      getMeteorologicalRollData() {
        meteorologicalRollData().then(res => {
          const rollDataList = res.data || [];

          let temprollDataList = (rollDataList.length > 0) ? rollDataList : ['暂无数据！'];
          this.titleContentList =JSON.parse(JSON.stringify(temprollDataList).toString().replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, ""));
        }).catch(err => {
          this.titleContentList = ['暂无数据！'];
        });
      }
    }
  };
</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 {
          float: left;
          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: 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: 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 {
            flex: 1;

            .meteregula-meteorological {
              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: 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: 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: 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 {
            margin-left: 24rpx;
            flex: 1;

            .expertsnotice-experts {
              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: 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: 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: 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: 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: 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>