|
@@ -0,0 +1,171 @@
|
|
|
+<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">
|
|
|
+ <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>
|
|
|
+ </uni-page-head>
|
|
|
+
|
|
|
+ <view class="page-content">
|
|
|
+ <view class="title">
|
|
|
+ <image class="weather-densefog"
|
|
|
+ src="@/static/agrcloud-images/agrcloud-weather-densefog-img.png"></image>
|
|
|
+ <u-notice-bar class="title-content"
|
|
|
+ mode="horizontal"
|
|
|
+ type="none"
|
|
|
+ :volume-icon="true"
|
|
|
+ :more-icon="true"
|
|
|
+ :is-circular="true"
|
|
|
+ :list="titleContentList"></u-notice-bar>
|
|
|
+ </view>
|
|
|
+ <view class="main-content">
|
|
|
+ <u-waterfall v-model="flowList">
|
|
|
+ <template v-slot:left="{leftList}">
|
|
|
+ <view class="main-warter"
|
|
|
+ v-for="item in leftList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleWarterClick(item)">
|
|
|
+ <view class="water-title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-slot:right="{rightList}">
|
|
|
+ <view class="main-warter"
|
|
|
+ v-for="item in rightList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleWarterClick(item)">
|
|
|
+ <view class="water-title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </u-waterfall>
|
|
|
+ </view>
|
|
|
+ <view id="custcontainer">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import mapinfo from '@/agrcloud-utils/mapinfo';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: 'Hello',
|
|
|
+ titleContentList: ['气象预警:修文县气象台2020年x月x日x时x分发布大雾'],
|
|
|
+ mainNavigateToObj: {
|
|
|
+ QualitySafetyComplaints: '/pages/complaints/index',
|
|
|
+ MeteorologicalServices: '',
|
|
|
+ PoliciesRegulations: '/pages/regulations/index',
|
|
|
+ AgriculturalTechnologyExpert: '/pages/experts/index',
|
|
|
+ NoticeAnnouncement: '/pages/notice/index',
|
|
|
+ MonitoringInformation: '/pages/monitoring/index'
|
|
|
+ },
|
|
|
+ flowList: [{
|
|
|
+ id: 'QualitySafetyComplaints',
|
|
|
+ title: '质量安全投诉',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }, {
|
|
|
+ id: 'MeteorologicalServices',
|
|
|
+ title: '气象服务',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }, {
|
|
|
+ id: 'AgriculturalTechnologyExpert',
|
|
|
+ title: '农技专家',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }, {
|
|
|
+ id: 'PoliciesRegulations',
|
|
|
+ title: '政策法规',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }, {
|
|
|
+ id: 'NoticeAnnouncement',
|
|
|
+ title: '通知公告',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }, {
|
|
|
+ id: 'MonitoringInformation',
|
|
|
+ title: '监测信息',
|
|
|
+ image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // #ifdef H5
|
|
|
+ mapinfo().then((res) => {
|
|
|
+ debugger
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleWarterClick(itemData) {
|
|
|
+ if (!itemData.id || !this.mainNavigateToObj[itemData.id]) {
|
|
|
+ this.$msgbox('模块建设中...');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: this.mainNavigateToObj[itemData.id]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss"
|
|
|
+ scoped>
|
|
|
+ .page-content {
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .title-logo {
|
|
|
+ padding-top: 9rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-densefog {
|
|
|
+ padding-top: 6rpx;
|
|
|
+ float: left;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-content {
|
|
|
+ width: calc(100% - 36rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .main-warter {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .water-title {
|
|
|
+ margin: 20rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ border: 1rpx solid #c6c6c6;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|