首页

app.css

@@ -35,7 +35,6 @@ page {
   -webkit-user-select: text; 
   		user-select: text;
 }
-
 button::after {
   border: none;
 }

pages/index/index.css

@@ -529,4 +529,296 @@ page{background: #fff;}
 	color: #FFFFFF;
 	line-height: 41rpx;
 	padding: 0 10rpx;
+}
+
+
+/* 投保案例 */
+.tbal-nav{
+	justify-content: center;
+	margin-top: 39rpx;
+	margin-bottom: 35rpx;
+}
+.tbal-nav-item{
+	line-height: 40rpx;
+	font-size: 28rpx;
+	font-family: PingFang SC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	margin-right: 60rpx;
+	text-align: center;
+}
+.tbal-nav-item:last-child{
+	margin-right: 0;
+}
+.tbal-nav-item-active{
+	color: #009B62;
+}
+.tbal-nav-label{
+	padding: 0 10rpx;
+	line-height: 29rpx;
+	margin-top: 2rpx;
+	text-align: center;
+	border-radius: 15rpx 15rpx 15rpx 15rpx;
+	opacity: 1;
+	font-size: 20rpx;
+	color: #7A7B7F;
+}
+.tbal-nav-item-active .tbal-nav-label{
+	background: linear-gradient(319deg, #A5F3D6 0%, #FAE4CD 100%);
+	color: #009B62;
+}
+.tbal-item{
+	padding: 30rpx;
+	background: #FFFFFF;
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
+	opacity: 1;
+	margin-top: 20rpx;
+	position: relative;
+}
+.tbal-tag{
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 86rpx;
+	padding: 0 10rpx;
+	line-height: 31rpx;
+	background: linear-gradient(319deg, #FFDB94 0%, #FAE4CD 100%);
+	border-radius: 0rpx 10rpx 0rpx 20rpx;
+	font-size: 22rpx;
+	font-weight: 400;
+	color: #77501C;
+	text-align: center;
+}
+.tbal-pic{
+	width: 335rpx;
+	height: 228rpx;
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
+	margin-right: 41rpx;
+}
+.tbal-title{
+	font-size: 31rpx;
+	font-weight: bold;
+	color: #333333;
+	margin-top: 18rpx;
+	margin-bottom: 15rpx;
+}
+.tbal-line{
+	width: 1rpx;
+	height: 57rpx;
+	background:#DEDEDE;
+	opacity: 1;
+	margin: auto 20rpx;
+}
+.tbal-price{
+	line-height: 40rpx;
+	font-size: 28rpx;
+	font-family: PingFang SC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #FF5700;
+}
+.tbal-price-text{
+	font-size: 20rpx;
+	font-weight: 400;
+	color: #7A7B7F;
+}
+.tbal-btn{
+	width: 113rpx;
+	line-height: 41rpx;
+	background: #27D699;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	opacity: 1;
+	font-size: 24rpx;
+	font-weight: 500;
+	color: #FFFFFF;
+	text-align: center;
+	margin-top: 46rpx;
+}
+
+/* 真实理赔故事 */
+.lpgs-item{
+	width: 440rpx;
+	display: inline-block;
+	margin-right: 20rpx;
+	position: relative;
+}
+.lpgs-icon{
+	width: 230rpx;
+	height: 101rpx;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+.lpgs-header{
+	width: 440rpx;
+	height: 100rpx;
+	background: linear-gradient(124deg, #F9F3E1 0%, #F8D494 100%);
+	color: #FF5700;
+	border-radius: 10rpx 10rpx 0rpx 0rpx;
+	opacity: 1;
+	font-weight: bold;
+	padding: 25rpx 20rpx;
+	font-size: 36rpx;
+	line-height: 50rpx;
+	box-sizing: border-box;
+}
+.lpgs-header-c{
+	background: linear-gradient(124deg, #D6FCE4 0%, #A1EBB9 100%);
+	color: #009B62;
+}
+.lpgs-content{
+	box-sizing: border-box;
+	width: 440rpx;
+	background: #FBFBFB;
+	border-radius: 0rpx 0rpx 10rpx 10rpx;
+	padding: 20rpx;
+}
+.lpgs-item-content{
+	padding-bottom: 20rpx;
+	border-bottom: 2rpx solid #F1F1F1;
+	flex-wrap: nowrap;
+	margin-bottom: 20rpx;
+}
+.lpgs-item-content:last-child{
+	border-bottom: none;
+}
+.lpgs-item-content-title{
+	height: 72rpx;
+	font-size: 28rpx;
+	font-family: PingFang SC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	line-height: 36rpx;
+	white-space: break-spaces;
+}
+.lpgs-item-content-look{
+	line-height: 33rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #7A7B7F;
+	margin-top: 5rpx;
+}
+.lpgs-item-content-look image{
+	width: 29rpx;
+	height: 20rpx;
+	margin-right: 10rpx;
+}
+.lpgs-item-content-pic{
+	width: 114rpx;
+	height: 114rpx;
+	margin-left: 10rpx;
+}
+
+
+/* 发现 */
+.fx-nav{
+	height: 40rpx;
+	line-height: 40rpx;
+	font-size: 28rpx;
+	font-family: PingFang SC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #7A7B7F;
+	display: inline-block;
+	margin-right: 50rpx;
+}
+.fx-nav:last-child{
+	margin-right: 0rpx;
+}
+.fx-nav-active{
+	font-size: 32rpx;
+	font-weight: bold;
+	position: relative;
+	color: #333333;
+}
+.fx-nav-active::after{
+	content: '';
+	position: absolute;
+	bottom:-10rpx;
+	left:50%;
+	transform: translateX(-50%);
+	width: 40rpx;
+	height: 9rpx;
+	background: #009B62;
+	border-radius: 5rpx 5rpx 5rpx 5rpx;
+	opacity: 1;
+}
+.fx-bar{
+	padding: 35rpx 30rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 5rpx 15rpx 1rpx rgba(0,0,0,0.06);
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
+	opacity: 1;
+	margin-top: 30rpx;
+}
+.fx-header{
+	justify-content: space-between;
+	margin-bottom: 44rpx;
+}
+.fx-header-title{
+	font-size: 28rpx;
+	line-height: 40rpx;
+	font-weight: bold;
+	color: #009B62;
+}
+.fx-header-more{
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #7A7B7F;
+	margin-left: 20rpx;
+}
+.fx-header-more image{
+	width: 9rpx;
+	height: 19rpx;
+	margin-left: 10rpx;
+}
+.fx-item{
+	padding-bottom: 30rpx;
+	border-bottom: 2rpx solid #DEDEDE;
+	margin-top: 32rpx;
+}
+.fx-item:last-child{
+	border-bottom: none;
+}
+.fx-item-title{
+	height: 94rpx;
+	line-height: 47rpx;
+	font-size: 32rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	font-weight: bold;
+	color: #333333;
+}
+.fx-item-time{
+	line-height: 33rpx;
+	font-size: 24rpx;
+	font-weight: 400;
+	color: #7A7B7F;
+}
+.fx-item-look{
+	line-height: 33rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #7A7B7F;
+	margin-left: 20rpx;
+}
+.fx-item-look image{
+	width: 29rpx;
+	height: 20rpx;
+	margin-right: 10rpx;
+}
+.fx-item-pic{
+	width: 200rpx;
+	height: 150rpx;
+	border-radius: 12rpx 12rpx 12rpx 12rpx;
+}
+
+.foot-logo{
+	background-color: #F8F8F8;
+}
+.foot-logo image{
+	width: 150rpx;
+	height: 42rpx;
+	margin: auto;
+	padding: 53rpx 0;
 }

pages/index/index.vue

@@ -84,7 +84,7 @@
 		
 		<!-- 参与活动 -->
 		<view class="index-box" style="margin-top: 50rpx;" v-if="matchList.length>0">
-			<view class="index-box-title">参与活动</view>
+			<view class="index-box-title">更多活动</view>
 			<view class="map-ac">
 				<scroll-view scroll-x="true" class="map-acs" >
 					<view class="li" v-for="(item,index) in matchList" :key="index" @click="jumpUrl('/match/activityDetail/activityDetail?id='+item.id)">
@@ -98,6 +98,114 @@
 			</view> 
 		</view>
 		
+		<!-- 投保案例 -->
+		<view class="index-box" style="margin:0;padding: 30rpx;background-color: #f5f5f5;" v-if="matchList.length>0">
+			<view class="index-box-title">投保案例</view>
+			<view>
+				<view class="tbal-nav ddflex">
+					<view class="tbal-nav-item tbal-nav-item-active">
+						<view>单身期</view>
+						<view class="tbal-nav-label">20~30岁</view>
+					</view>
+					<view class="tbal-nav-item">
+						<view>形成期</view>
+						<view class="tbal-nav-label">20~30岁</view>
+					</view>
+					<view class="tbal-nav-item">
+						<view>成长期</view>
+						<view class="tbal-nav-label">20~30岁</view>
+					</view>
+					<view class="tbal-nav-item">
+						<view>成熟期</view>
+						<view class="tbal-nav-label">20~30岁</view>
+					</view>
+				</view>
+				
+				<view class="tbal-item ddflex" v-for="item in 2">
+					<image class="tbal-pic" src="/static/images/lj_img.png"></image>
+					<view class="flex">
+						<view class="tbal-title">单身青年</view>
+						<view class="ddflex">
+							<view class="ddflex flex">
+								<view class="tbal-price">8633元</view>
+								<view class="tbal-price-text">年缴费</view>
+							</view>
+							<view class="tbal-line"></view>
+							<view class="ddflex flex">
+								<view class="tbal-price">130万</view>
+								<view class="tbal-price-text">总保额 </view>
+							</view>
+						</view>
+						<view class="tbal-btn">去看看</view>
+					</view>
+					<view class="tbal-tag">清洁版</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 真实理赔故事 -->
+		<view class="index-box">
+			<view class="index-box-title">真实理赔故事</view>
+			<view class="map-ac">
+				<scroll-view scroll-x="true" class="map-acs ddflex" style="height: 430rpx;">
+					<view class="lpgs-item" v-for="items,indexs in 3 ">
+						<image class="lpgs-icon" src="../../static/images/lpgs_icon.png"></image>
+						<view :class="'lpgs-header '+(indexs%2==0?'lpgs-header-c':'')">
+							<view>重疾险</view>
+						</view>
+						<view class="lpgs-content">
+							<view class="lpgs-item-content ddflex" v-for="item in 2">
+								<view class="flex" style="min-width: 0;">
+									<view class="lpgs-item-content-title tovers">重大突发事件，国寿冲锋在前国寿冲锋在前国寿冲锋在前</view>
+									<view class="lpgs-item-content-look ddflex">
+										<image src="/static/images/eyes.png"></image>
+										<view>1.2万</view>
+									</view>
+								</view>
+								<image class="lpgs-item-content-pic" src="/static/images/lj_img.png"></image>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view> 
+		</view>
+		
+		<!-- 发现 -->
+		<view class="index-box" style="margin:0;padding: 30rpx;background-color: #f5f5f5;" v-if="matchList.length>0">
+			<view class="map-ac">
+				<scroll-view scroll-x="true" class="map-acs ddflex" style="height: 70rpx;">
+					<view :class="'fx-nav '+(index==0?'fx-nav-active':'')" v-for="item,index in 10">健康生活</view>
+				</scroll-view>
+			</view>
+			<view class="fx-bar">
+				<view class="fx-header ddflex">
+					<view class="ddflex">
+						<view class="fx-header-title">健康生活</view>
+						<view class="fx-header-more">2.2万人转发</view>
+					</view>
+					<view class="fx-header-more ddflex">
+						更多
+						<image src="/static/pages/images/more.png"></image>
+					</view>
+				</view>
+				<view>
+					<view class="fx-item ddflex" v-for="item in 10">
+						<view class="flex" style="min-width: 0;">
+							<view class="fx-item-title tovers">3·15|手把手教你读懂“食品标签”，拒绝被“坑”3·15|手把手教你读懂“食品标签”，拒绝被“坑”</view>
+							<view class="ddflex" style="margin-top: 24rpx;">
+								<view class="fx-item-time">2023-03-13</view>
+								<view class="fx-item-look ddflex">
+									<image src="/static/images/eyes.png"></image>
+									<view>2.2万</view>
+								</view>
+							</view>
+						</view>
+						<image class="fx-item-pic" src="../../static/images/lj_img.png"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		
 		<switchStore v-if="switchStoreShow && contact.length > 0 && merchant.id" :first="first" :merchant="merchant" :storeShow="storeShow" @onFather="click"></switchStore>
 		<!-- <component v-for="(item,index) in contact" ></component> -->
 		<!-- <ad></ad> -->
@@ -124,7 +232,10 @@
 			</view>
 			<view class="lond">加载中···</view>
 		</block>
-		<footer-copyright v-if="logo"></footer-copyright>
+		<view class="foot-logo">
+			<image src="/static/images/zgrs_logo.png"></image>
+		</view>
+		<!-- <footer-copyright v-if="logo"></footer-copyright> -->
 		<contact-button img-url="/static/pages/images/kfico1_1.png" class-name="contact_index" button-text="客服"></contact-button>
 		<view class="guide" @tap="hideGuide" v-if="first"><image src="/static/pages/images/guide.png" mode="widthFix"></image></view>
 		<!-- <view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 115) + 'rpx'"></view> -->