2023-11-02修改首页样式

manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "product",
+    "name" : "大卫博士产品介绍",
     "appid" : "__UNI__E3787FE",
     "description" : "",
     "versionName" : "1.0.0",

pages/index/index.vue

@@ -1,8 +1,21 @@
 <template>
+	<!-- 	<view class="product">
+		<view class="img_box">
+			<img src="http://image.chuliu.cc/jingzhuangprice.jpg" @click="toDetail(0)">
+			<img src="http://image.chuliu.cc/gaoyaoprice.jpg" @click="toDetail(1)">
+			<img src="http://image.chuliu.cc/qingchunprice.jpg" @click="toDetail(2)">
+		</view>
+	</view> -->
 	<view class="product">
-		<img src="http://image.chuliu.cc/jingzhuangprice.jpg" @click="toDetail(0)">
-		<img src="http://image.chuliu.cc/gaoyaoprice.jpg" @click="toDetail(1)">
-		<img src="http://image.chuliu.cc/qingchunprice.jpg" @click="toDetail(2)">
+		<img src="../../static/img/bg.png" alt="" class="bg">
+		<view class="out">
+			<view class="img_box">
+				<img src="http://image.chuliu.cc/jingzhuangprice.jpg" @click="toDetail(0)">
+				<img src="http://image.chuliu.cc/gaoyaoprice.jpg" @click="toDetail(1)">
+				<img src="http://image.chuliu.cc/qingchunprice.jpg" @click="toDetail(2)">
+			</view>
+		</view>
+
 	</view>
 </template>
 
@@ -19,18 +32,71 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	html,
+	body {
+		overflow: hidden;
+	}
+
 	.product {
-		width: 100%;
-		height: 100%;
-		text-align: center;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		position: relative;
+		background: #cc120d;
+		padding-bottom:30rpx;
 
-	}
+		.bg {
+			width: 100vw;
+			height: auto;
+		}
 
-	img {
-		width: 686rpx;
-		height: 360rpx;
-		border-radius: 16rpx;
-		margin-top: 24rpx;
+		.out {
+			margin:-570rpx auto 0;
+			background: #EB563E;
+			padding:10rpx;
+			border-radius: 16rpx;
+			border: 2rpx solid #F9FFC6;
+			.img_box {
+				width: 650rpx;
+				background: #fff;
+				border-radius: 16rpx;
+				margin:0 auto;
+				text-align: center;
+				padding-bottom:20rpx;
+				img {
+					width: 595rpx;
+					height: 311rpx;
+					border-radius: 16rpx;
+					margin-top: 24rpx;
+				}
+			}
+		}
 	}
+
+	// .product {
+	// 	width: 100vw;
+	// 	height: 100vh;
+	// 	text-align: center;
+	// 	position: relative;
+	// 	background: url('../../static/img/bg.png') no-repeat;
+	// 	background-size: 100% 100%;
+	// 	position: relative;
+	// 	overflow: hidden;
+	// }
+
+	// .img_box {
+	// 	position: absolute;
+	// 	left:0vw;
+	// 	top: 21vh;
+	// }
+
+	// 	img {
+	// 	width: 595rpx;
+	// 	height: 311rpx;
+	// 	border-radius: 16rpx;
+	// 	margin-top: 10rpx;
+	// }
 </style>