高频服务 更多 页面新增

pages.json

@@ -231,7 +231,17 @@
 				"navigationBarTextStyle": "white",
 				"navigationBarTitleText": "资讯详情"
 			}
-		},{
+		},
+		{
+			"path": "pages/service/service",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "服务"
+			}
+		},
+		{
 			"path": "pages/myPayKnow/informationDetail",
 			"style": {
 				"usingComponents": {},

pages/index/index.vue

@@ -131,7 +131,7 @@
 						<span>直播带货</span>
 					</li>
 					<li>
-						<view class="more"><em class="iconfont icon-gengduo1"></em></view>
+						<view class="more"><em class="iconfont icon-gengduo1" @tap="toMore"></em></view>
 						<span>更多</span>
 					</li>
 				</ul>
@@ -377,6 +377,12 @@
 			}
 		},
 		methods: {
+			// 跳转至更多高频服务页面
+			toMore(){
+				uni.navigateTo({
+					url:"../service/service"
+				})
+			},
 			goZcDetail(e) {
 				let id = e.id || ''
 				let type = 10

pages/service/service.css

@@ -0,0 +1,498 @@
+/**index.wxss**/
+.topBj {
+    position: relative;
+    width: 100%;
+    z-index: -1;
+}
+
+.topBj image {
+    width: 100%;
+    height: 460rpx;
+}
+
+.userinfo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #aaa;
+}
+
+.userinfo-avatar {
+    overflow: hidden;
+    width: 128rpx;
+    height: 128rpx;
+    margin: 20rpx;
+    border-radius: 50%;
+}
+
+.usermotto {
+    margin-top: 200px;
+}
+
+/* 图片轮播 */
+.banner {
+    width: 100%;
+    height: 300rpx;
+    padding: 30rpx 0;
+}
+
+.banner swiper-item image {
+    width: 100%;
+    height: 100%;
+}
+
+/* 主导航 */
+.mainNav {
+    width: 100%;
+    background: #fff;
+}
+
+.mainNav li {
+    width: 25%;
+    float: left;
+    text-align: center;
+}
+
+.mainNav li span {
+    font-size: 30rpx;
+    color: #555;
+}
+
+.mainNav li view.wb .icon-wenhaofill {
+    background: linear-gradient(#f5cd49, #fcb136);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 70rpx;
+}
+
+.mainNav li view.hq .icon-hangqing {
+    background: linear-gradient(#89adfd, #6898f9);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 70rpx;
+}
+
+.mainNav li view.sc .icon-shangcheng11 {
+    background: linear-gradient(#fd7668, #f85649);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 70rpx;
+}
+
+.mainNav li view.bs .icon-banshidating1 {
+    background: linear-gradient(#12c98a, #12c98a);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 64rpx;
+}
+
+.mainNav li view .iconfont {
+    color: #fff;
+    line-height: 90rpx;
+}
+
+.gonggao {
+    padding: 32rpx 0;
+    line-height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+.titleLeft {
+    display: flex;
+}
+
+.gonggao span {
+    font-size: 30rpx;
+    color: #07c160;
+}
+
+.gonggao span .iconfont {
+    font-size: 40rpx;	
+    color: #07c160;
+    line-height: 40rpx;
+    float: left;
+    margin: 4rpx 0 0 0;
+}
+
+.gonggao a {
+    font-size: 28rpx;
+    color: #666;
+    margin: 0 20rpx;
+    width: 70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.icon-xiangyoujiantou {
+    font-size: 40rpx;
+    color: #c4c4c4;
+    line-height: 40rpx;
+}
+
+/* 村民福利 */
+.cmfl_title {
+    display: flex;
+    justify-content: center;
+    margin: 40rpx 0 0 0;
+    align-items: center;
+}
+
+.cmfl_title image {
+    width: 24rpx;
+    height: 18rpx;
+}
+
+.cmfl_title h1 {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #07c160;
+    margin: 0 40rpx;
+}
+
+.cnfl {
+    width: 100%;
+    margin: 40rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.fv,
+.hm {
+    width: 48%;
+    border-radius: 20rpx;
+    overflow: hidden;
+    position: relative;
+}
+
+.fv text,
+.hm text {
+    position: absolute;
+    left: 13%;
+    top: 30%;
+    font-size: 36rpx;
+    font-weight: bold;
+}
+
+.fv text {
+    color: #005cc4;
+}
+
+.hm text {
+    color: #d36900;
+}
+
+.fv image,
+.hm image {
+    width: 100%;
+    height: 134rpx;
+}
+
+/* 政策推荐 */
+.zcTuijian {
+    width: 100%;
+    padding: 30rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.zcTuijian ul {
+    width: 65%;
+}
+
+.zcTuijian ul li {
+    width: 100%;
+    display: block;
+    font-size: 28rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 52rpx;
+    color: #666;
+}
+
+.zcTuijian image {
+    width: 22%;
+    height: 150rpx;
+    border-radius: 20rpx;
+}
+
+.zcTuijian em.icon-gengduo {
+    line-height: 150rpx;
+    font-size: 40rpx;
+    color: #c4c4c4;
+}
+
+.bannerA {
+    width: 100%;
+}
+
+.bannerA image {
+    width: 100%;
+    height: 200rpx;
+}
+.icon--fuwu {
+    font-size: 40rpx;
+    margin: 0 10rpx 0 0;
+}
+
+.icon-licaiwenda {
+    font-size: 36rpx;
+    margin: 0 10rpx 0 0;
+}
+
+.icon-zhishiku1 {
+    font-size: 34rpx;
+    margin: 0 10rpx 0 0;
+}
+
+.gpfwNav ul {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.gpfwNav ul li {
+    margin: 20rpx 2.5% 30rpx 2.5%;
+    font-size: 30rpx;
+    color: #333;
+    width: 20%;
+    text-align: center;
+}
+
+.gpfwNav ul li view {
+    width: 80rpx;
+    height: 80rpx;
+    margin: 0 auto 20rpx auto;
+    border-radius: 20rpx;
+    text-align: center;
+    line-height: 80rpx;
+}
+
+.gpfwNav ul li view em {
+    font-size: 50rpx;
+    color: #fff;
+}
+
+.gpfwNav ul li view.lvxd {
+    background: -webkit-linear-gradient(#eca6a6, #fd8585);
+    background: -o-linear-gradient(#eca6a6, #fd8585);
+    background: -moz-linear-gradient(#eca6a6, #fd8585);
+    background: linear-gradient(#eca6a6, #fd8585);
+}
+
+.gpfwNav ul li view.xlzx {
+    background: -webkit-linear-gradient(#bab3ec, #8170ff);
+    background: -o-linear-gradient(#bab3ec, #8170ff);
+    background: -moz-linear-gradient(#bab3ec, #8170ff);
+    background: linear-gradient(#bab3ec, #8170ff);
+}
+
+.gpfwNav ul li view.xswz {
+    background: -webkit-linear-gradient(#afd0ec, #61c5ff);
+    background: -o-linear-gradient(#afd0ec, #61c5ff);
+    background: -moz-linear-gradient(#afd0ec, #61c5ff);
+    background: linear-gradient(#afd0ec, #61c5ff);
+}
+
+.gpfwNav ul li view.gxs {
+    background: -webkit-linear-gradient(#c1fdc9, #57f5a1);
+    background: -o-linear-gradient(#c1fdc9, #57f5a1);
+    background: -moz-linear-gradient(#c1fdc9, #57f5a1);
+    background: linear-gradient(#c1fdc9, #57f5a1);
+}
+
+.gpfwNav ul li view.more {
+    background: -webkit-linear-gradient(#46aef7, #1dd5e6);
+    background: -o-linear-gradient(#46aef7, #1dd5e6);
+    background: -moz-linear-gradient(#46aef7, #1dd5e6);
+    background: linear-gradient(#46aef7, #1dd5e6);
+}
+
+/* 热门问答 */
+.rnwdList {
+    width: 100%;
+}
+
+.list {
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
+}
+
+.listTitle {
+    font-size: 32rpx;
+    color: #333;
+    line-height: 40rpx;
+}
+
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+
+.jf {
+    color: #07c160;
+}
+
+.icon-jifen {
+    font-size: 26rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+
+.ck {
+    color: #c4c4c4;
+}
+
+.icon-pinglun,
+.icon-chakan,
+.icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+}
+
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.rmzsList{
+	width: 100%;
+}
+/* 热门知识 */
+.rmzsList li {
+    width: 100%;
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.rmzsList li image {
+    width: 40%;
+    height: 200rpx;
+}
+
+.listCont {
+    width: 58%;
+}
+
+.listCont p {
+	height: 62%;
+    font-size: 32rpx;
+    color: #333;
+    overflow: hidden;
+    line-height: 40rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.listCont text {
+    font-size: 24rpx;
+    color: #9c9c9c;
+}
+
+.biaoqian {
+    display: flex;
+    margin: 6rpx 0;
+}
+
+.biaoqian span {
+    padding: 2rpx 20rpx;
+    font-size: 20rpx;
+    background: #e0e0e0;
+    color: #9c9c9c;
+    margin: 0 20rpx 0 0;
+    border-radius: 30rpx;
+}
+
+.jiage {
+    display: flex;
+}
+
+.yhjg {
+    font-size: 30rpx;
+    color: #07c160;
+}
+
+.yhjg em {
+    font-size: 24rpx;
+    color: #07c160;
+}
+
+.yjjg {
+    font-size: 24rpx;
+    color: #9c9c9c;
+    margin: 0 0 0 20rpx;
+    text-decoration: line-through;
+}
+
+/* 公告start */
+
+.swiper_container {
+    height: 55rpx;
+    width: 70%;
+    line-height: 60rpx;
+}
+
+.swiper_item {
+    height: 100;
+    color: #000;
+    font-size: 28rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 公告end */

pages/service/service.vue

@@ -0,0 +1,122 @@
+<template>
+	<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"></em></view>
+					<span>旅游向导</span>
+				</li>
+				<li>
+					<view class="xlzx"><em class="iconfont icon-xinlizixun"></em></view>
+					<span>心里咨询</span>
+				</li>
+				<li>
+					<view class="xswz"><em class="iconfont icon-wenzhen"></em></view>
+					<span>线上问诊</span>
+				</li>
+				<li>
+					<view class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
+					<span @tap="goLoveAtVillage">供</span>
+					<span @tap="goLegalService">销</span>
+					<span @tap="goFinancialInfrastructure">社</span>
+				</li>
+				<li>
+					<view class="xlzx"><em class="iconfont icon-linshijiuzhu"></em></view>
+					<span>帮扶救助</span>
+				</li>
+				<li>
+					<view class="xswz"><em class="iconfont icon-zhishi1"></em></view>
+					<span>知识库</span>
+				</li>
+				<li>
+					<view class="lvxd"><em class="iconfont icon-zhibo"></em></view>
+					<span>直播带货</span>
+				</li>
+				<li>
+					<view class="more"><em class="iconfont life-pic"></em></view>
+					<span>生活服务</span>
+				</li>
+			</ul>
+		</view>
+		<view class="titleLeft titleLeftSecond" style="margin-left: 13%;">
+			<em class="iconfont"></em>
+			特色服务
+		</view>
+		<view class="gpfwNav specialService">
+			<ul>
+				<li>
+					<view class="xchl"><em class="iconfont marriage-pic"></em></view>
+					<span>乡村婚恋</span>
+				</li>
+				<li>
+					<view class="flfw"><em class="iconfont legal-pic"></em></view>
+					<span>法律服务</span>
+				</li>
+				<li>
+					<view class="jrjj"><em class="iconfont system-pic"></em></view>
+					<span>金融基建</span>
+				</li>
+			</ul>
+		</view>
+
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+	@import './service.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;
+	}
+	.titleLeftSecond::after{
+		content:'';
+		left: -121px;
+		width: 12vw;
+		background: url('../../static/images/more/specialService.png') 0 0 no-repeat;
+		background-size: 93% 93%;
+		position: relative;
+	}
+	.gpfwNav ul li view.xchl{
+		background: none;
+	}
+	.gpfwNav ul li view.flfw{
+		background: none;
+	}
+	.gpfwNav ul li view.jrjj{
+		background: none;
+	}
+	.specialService{
+		width: 100% !important;
+	}
+	.specialService li{
+		width: 20vh;
+	}
+	.specialService li view{
+		width: 100%;
+	}
+	
+</style>