首页布局调整

pages/index/index.vue

@@ -4,9 +4,26 @@
 		<view class="topBj">
 			<image :src="loadImgSrcLocalhost(bigImg)"></image>
 		</view>
+		<view class="fengexian" style="background-color: #fff;"></view>
 		<view class="container">
-			<!-- 主导航 -->
-			<ul class="mainNav">
+			<view class="gonggao">
+				<span>
+					<em class="iconfont icon-gonggao"></em>
+					[公告]
+				</span>
+				<swiper class="swiper_container" :autoplay="true" :circular="true" :vertical="true" interval="2000">
+					<block v-for="(item, index) in announcementList" :key="index">
+						<swiper-item @click="handleNavigate(item.id)">
+							<view class="swiper_item">{{ item.announcementTitle }}</view>
+						</swiper-item>
+					</block>
+				</swiper>
+				<em class="iconfont icon-xiangyoujiantou" @click="goAnnoList()"></em>
+			</view>
+		</view>
+		<view class="fengexian" style="background-color: #fff;"></view>
+		<view class="container">
+			<ul class="mainNav" style="background-color: #F1F1F1;">
 				<li>
 					<view class="wb" @tap="goWenBa"><em class="iconfont icon-wenhaofill"></em></view>
 					<span>问吧</span>
@@ -24,27 +41,80 @@
 					<span>办事</span>
 				</li>
 			</ul>
+		</view>
+		<view class="fengexian" style="background-color: #fff;"></view>
+		<view class="container">
+			<view class="titleLeft">
+				<em class="iconfont icon--fuwu"></em>
+				高频服务
+			</view>
+			<view class="gpfwNav">
+				<ul>
+					<li>
+						<view class="lvxd"><em class="iconfont icon-jurassic_nav" @tap="golyxd"></em></view>
+						<span>旅游向导</span>
+					</li>
+					<li>
+						<view class="xlzx"><em class="iconfont icon-xinlizixun" @tap="goxlzx"></em></view>
+						<span>心理咨询</span>
+					</li>
+					<li>
+						<view class="xswz"><em class="iconfont icon-wenzhen" @tap="goxswz"></em></view>
+						<span>线上问诊</span>
+					</li>
+					<li>
+						<view class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
+						<span>供销社</span>
+					</li>
+					<li>
+						<view class="xlzx"><em class="iconfont icon-linshijiuzhu" @tap="gobfjz"></em></view>
+						<span>帮扶救助</span>
+					</li>
+					<li>
+						<view class="xswz"><em class="iconfont icon-zhishi1" @tap="gozsk"></em></view>
+						<span>知识库</span>
+					</li>
+					<li>
+						<view class="lvxd"><em class="iconfont icon-zhibo" @tap="gozbdh"></em></view>
+						<span>直播带货</span>
+					</li>
+					<!-- <li>
+						<view class="more"><em class="iconfont icon-gengduo1" @tap="toMore"></em></view>
+						<span>更多</span>
+					</li> -->
+					<li>
+						<view class="more"><em class="iconfont life-pic" @tap="goShfw"></em></view>
+						<span>生活服务</span>
+					</li>
+					<li>
+						<view class="xchl"><em class="iconfont marriage-pic" @tap="goLoveAtVillage"></em></view>
+						<span>乡村婚恋</span>
+					</li>
+					<li>
+						<view class="flfw"><em class="iconfont legal-pic" @tap="goLegalService"></em></view>
+						<span>法律服务</span>
+					</li>
+					<li>
+						<view class="jrjj"><em class="iconfont system-pic" @tap="goFinancialInfrastructure"></em></view>
+						<span>金融基建</span>
+					</li>
+				</ul>
+			</view>
+		</view>
+		<view class="fengexian" style="background-color: #fff;"></view>
+		<view class="container">
 			<!-- 村民福利 -->
-			<view class="cmfl_title">
+			<!-- <view class="cmfl_title">
 				<image :src="loadImgSrc('/cnfl-fl.png')"></image>
 				<h1>村民福利</h1>
 				<image :src="loadImgSrc('/cnfl-fr.png')"></image>
-			</view>
-			<view class="cnfl">
-				<view class="fv" @click="toLegal()">
-					<text>法律下乡</text>
-					<image :src="loadImgSrc('/fv.jpg')"></image>
-				</view>
-				<view class="hm" @click='toGovernmentList1'>
-					<text>惠民通</text>
-					<image :src="loadImgSrc('/hm.jpg')"></image>
-				</view>
-			</view>
+			</view> -->
+			<!-- 主导航 -->
 		</view>
 		<view class="fengexian"></view>
 		<!-- 分割线 -->
 		<!-- 公告 -->
-		<view class="container">
+		<!-- <view class="container">
 			<view class="gonggao">
 				<span>
 					<em class="iconfont icon-gonggao"></em>
@@ -59,7 +129,7 @@
 				</swiper>
 				<em class="iconfont icon-xiangyoujiantou" @click="goAnnoList()"></em>
 			</view>
-		</view>
+		</view> -->
 		<!-- 公告 end -->
 		<view class="fengexian"></view>
 		<!-- 分割线 -->
@@ -91,52 +161,22 @@
 				</block>
 			</swiper>
 		</view>
-		<view class="fengexian"></view>
-		<!-- 分割线 -->
 		<view class="container">
-			<view class="titleLeft">
-				<em class="iconfont icon--fuwu"></em>
-				高频服务
-			</view>
-			<view class="gpfwNav">
-				<ul>
-					<li>
-						<view class="lvxd"><em class="iconfont icon-jurassic_nav" @tap="golyxd"></em></view>
-						<span>旅游向导</span>
-					</li>
-					<li>
-						<view class="xlzx"><em class="iconfont icon-xinlizixun" @tap="goxlzx"></em></view>
-						<span>心理咨询</span>
-					</li>
-					<li>
-						<view class="xswz"><em class="iconfont icon-wenzhen" @tap="goxswz"></em></view>
-						<span>线上问诊</span>
-					</li>
-					<li>
-						<view class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
-						<span>供销社</span>
-					</li>
-					<li>
-						<view class="xlzx"><em class="iconfont icon-linshijiuzhu" @tap="gobfjz"></em></view>
-						<span>帮扶救助</span>
-					</li>
-					<li>
-						<view class="xswz"><em class="iconfont icon-zhishi1" @tap="gozsk"></em></view>
-						<span>知识库</span>
-					</li>
-					<li>
-						<view class="lvxd"><em class="iconfont icon-zhibo" @tap="gozbdh"></em></view>
-						<span>直播带货</span>
-					</li>
-					<li>
-						<view class="more"><em class="iconfont icon-gengduo1" @tap="toMore"></em></view>
-						<span>更多</span>
-					</li>
-				</ul>
+			<view class="cnfl">
+				<view class="fv" @click="toLegal()">
+					<text>法律下乡</text>
+					<image :src="loadImgSrc('/fv.jpg')"></image>
+				</view>
+				<view class="hm" @click='toGovernmentList1'>
+					<text>惠民通</text>
+					<image :src="loadImgSrc('/hm.jpg')"></image>
+				</view>
 			</view>
 		</view>
 		<view class="fengexian"></view>
 		<!-- 分割线 -->
+		<view class="fengexian"></view>
+		<!-- 分割线 -->
 		<view class="container">
 			<view class="titleLeft">
 				<em class="iconfont icon-licaiwenda"></em>
@@ -336,6 +376,11 @@
 			}
 		},
 		methods: {
+			goShfw() {
+				uni.navigateTo({
+					url: '/pages/highServer/lifeServices/lifeServices'
+				});
+			},
 			// 跳转至更多高频服务页面
 			toMore() {
 				uni.navigateTo({
@@ -470,6 +515,16 @@
 					url: '/pages/specialService/financialInfrastructure/financialInfrastructure'
 				});
 			},
+			goLegalService() {
+				uni.navigateTo({
+					url: '/pages/specialService/legalService/legalService'
+				});
+			},
+			goFinancialInfrastructure() {
+				uni.navigateTo({
+					url: '/pages/specialService/financialInfrastructure/financialInfrastructure'
+				});
+			},
 			goBanShi() {
 				uni.navigateTo({
 					url: '/pages/handleAffairs/index'
@@ -576,4 +631,29 @@
 </script>
 <style>
 	@import './index.css';
+	.marriage-pic {
+		background: url('@/static/images/more/marriage.png') 0 0 no-repeat;
+		background-size: 100% 100%;
+	}
+	
+	.legal-pic {
+		background: url('@/static/images/more/legal.png') 0 0 no-repeat;
+		background-size: 100% 100%;
+	}
+	
+	.system-pic {
+		background: url('@/static/images/more/system.png') 0 0 no-repeat;
+		background-size: 100% 100%;
+	}
+	
+	.specialService-pic {
+		background: url('@/static/images/more/specialService.png') 0 0 no-repeat;
+		background-size: 100% 100%;
+	}
+	
+	.life-pic {
+		background: url('@/static/images/more/lifeHelp.png') 0 0 no-repeat;
+		background-size: 80% 80%;
+		margin: 10% !important;
+	}
 </style>