首页修改

pages/home-new.vue

 <template>
 	<view class="appCotent" v-if="show">
 		<view class="index-content">
-			<view class="swiper">
-				<u-swiper radius="20rpx" :height="130" :list="list5" circular @change="e => current = e.current"
-					:autoplay="true" keyName="imageUrl" @click="goOtherLink">
-					<view slot="indicator" class="indicator">
-						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
-							:class="[index === current && 'indicator__dot--active']">
-						</view>
+			<view class="head">
+				<image src="http://jdnc-oss.uzosp.com/2022/06/15/99131cbc49c2444ea09083abdd2f2750.png"></image>
+				<view class="swiper">
+					<image src="../static/index/banner.png"></image>
+					<view>
+						<u-swiper radius="16rpx" :height="130" :list="list5" circular @change="e => current = e.current"
+							:autoplay="true" keyName="imageUrl" @click="goOtherLink">
+							<view slot="indicator" class="indicator">
+								<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
+									:class="[index === current && 'indicator__dot--active']">
+								</view>
+							</view>
+						</u-swiper>
 					</view>
-				</u-swiper>
-			</view>
-			<u-gap bgColor="transparent" height="20"></u-gap>
-			
-			<view class="banner">
-				<view class="banner-img">
-					<image src="http://jdnc-oss.uzosp.com/2022/06/13/f70fc82ad7ef4c1bb653c77abe396e6d.png"></image>
-					<view class="left" @click="goJdShop(1)">
-						<view class="banner-btn">
-							<image src="../static/index/ban-btn.png"></image>
-							<text>立即购买</text>
+				</view>
+				
+				<view class="banner">
+					<view class="banner-img">
+						<image src="http://jdnc-oss.uzosp.com/2022/06/15/e7dec07c0dbe4e2faa42530e3a0b2218.png"></image>
+						<view class="left" @click="goJdShop(1)">
+							<view class="banner-btn">
+								<image src="../static/index/ban-btn.png"></image>
+								<text>立即购买</text>
+							</view>
 						</view>
-					</view>
-					<view class="right" @click="goJdShop(2)">
-						<view class="banner-btn">
-							<image src="../static/index/ban-btn.png"></image>
-							<text>立即购买</text>
+						<view class="right" @click="goJdShop(2)">
+							<view class="banner-btn">
+								<image src="../static/index/ban-btn.png"></image>
+								<text>立即购买</text>
+							</view>
 						</view>
 					</view>
+					<u-gap bgColor="transparent" height="20"></u-gap>
 				</view>
-				<u-gap bgColor="transparent" height="20"></u-gap>
-				<!-- <view class="banner-btn">
-					<image src="../static/index/ban-btn.png"></image>
-					<text>限时领取</text>
-				</view> -->
+				
 			</view>
 			
-			<u-gap bgColor="transparent" height="15"></u-gap>
+			
+			
 			
 			<view class="bg-img">
-				<image src="http://jdnc-oss.uzosp.com/2022/05/31/ecfc20fad7ad483994c524c77647797d.png"></image>
+				<image src="http://jdnc-oss.uzosp.com/2022/06/15/079440f5eea541bba67ea3d5f8097162.png"></image>
 			</view>
 			
 			
@@ -329,8 +332,27 @@
 
 <style lang="scss">
 	.index-content {
-		.swiper{
-			padding:30rpx;
+		.head{
+			width:100%;height:1477rpx;
+			padding:530rpx 20rpx;
+			box-sizing: border-box;
+			position: relative;
+			>image{
+				position: absolute;
+				top:0;left:0;
+				width:100%;height:100%;
+			}
+			.swiper{
+				box-sizing: border-box;
+				padding:0 16rpx;
+				position: relative;
+				border-radius:16rpx;
+				>image{
+					position: absolute;
+					top:-12px;left:-17rpx;
+					width:744rpx;height:161px;
+				}
+			}
 		}
 
 		background-color: #f9f9f9;
@@ -376,6 +398,7 @@
 		
 		.banner{
 			width:100%;
+			margin-top:70rpx;
 			.banner-img,
 			.banner-btn{
 				margin: 0 auto;
@@ -387,30 +410,29 @@
 				}
 				view,text{
 					position: relative;
-					z-index:100;
 				}
 			}
 			.banner-img{
-				width: 690rpx ;height:344rpx;
+				width: 710rpx ;height:542rpx;
 				box-sizing: border-box;
-				padding:0 110rpx;
+				padding:100rpx 80rpx 0;
 				display:flex;
 				justify-content: space-between;
 				.left{
-					width: 220rpx;height:220rpx;
+					width: 260rpx;height:360rpx;
 				}
 				.right{
-					width: 220rpx;height:220rpx;
+					width: 260rpx;height:360rpx;
 				}
 				>view{
 					.banner-btn{
-						width:100%;height:62rpx;
+						width:200rpx;height:66rpx;
 						font-weight: bold;
-						color: #1F335A;
-						top:240rpx;
+						color: #674600;
+						top:280rpx;left:-2rpx;
 						font-size: 30rpx;
 						text-align: center;
-						line-height:62rpx;
+						line-height:66rpx;
 					}
 				}
 			}
@@ -420,7 +442,7 @@
 		.bg-img{
 			width:100%;
 			image{
-				width:100%;height:4296rpx;
+				width:100%;height:4420rpx;
 			}
 		}