罗世杰：首页头：搜索框、轮播图初步完成

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "scss": "^0.2.4",
     "uview-ui": "^2.0.36"
   }
 }

pages/index/index.vue

@@ -1,65 +1,78 @@
 <template>
-	<view class="search_box">
-		<view class="search_box_border">
-			<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
-				prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" >
-			</u-input>
-		</view>
-		<h2>上传测试222</h2>
-		<view class="u-border-bottom ">
-			夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
-		</view>
-		<view class="u-line-1">
-			是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也
-		</view>
-	</view>
-	
+	<home-header></home-header>
 </template>
 
 <script>
+	import HomeHeader from './childComps/HomeHeader.vue'
 	export default {
+		components:{
+			HomeHeader,
+		},
 		data() {
 			return {
-
+				hotSearchWord:'热门关键词',
+				headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
 			}
 		},
 		onLoad() {
-
+			
 		},
 		methods: {
-
+			// 头部区域
+			//获取热点搜索词、背景URL
+			getHeaderAreaURL() {
+				
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	// @import url();
-	// 搜索框样式
+	// 搜索区域样式
 	.search_box {
-		background: linear-gradient(135deg, #12CA64 0%, #1ACA67 100%);
-
+		background: #000;
+		position: relative;
 		.search_box_border {
-			width: 94.6%;
-			height: 124rpx;
-			background: linear-gradient(320deg, #36E182 0%, #26DD76 100%, #26DD76 100%);
-			margin: 0 auto;
-			box-shadow: 0 -1px 3px 0 #31B96D;
-			border-radius: 38rpx 38rpx 0 0;
-
-			.u-border {
+			width: 84.6%;
+			height: 25px;
+			z-index: 1;
+			
+			position: absolute;
+			left: 50%;  
+			transform: translate(-50%, 0%); 
+			
+			border-radius: 10px;
+			padding-top: 3px !important;
+			margin-top: 8px;
+			background-color: #fff;
+			.u-border{
 				border: none;
-				padding-top: 16px !important;
-
-				.u-input__content {
-					height: 64rpx;
-					border-radius: 32rpx;
-					background-color: #fff;
-
-					.u-input__content__field-wrapper__field {
-						font-size: 26rpx !important;
-					}
+			}
+			// .u
+			.u-input__content {
+				background-color: #fff;
+				border-radius: 1;
+				height: 10px;
+				.u-input__content__field-wrapper__field {
+					height: 10px !important;
+					font-size: 10px !important;
 				}
 			}
 		}
+		.header-bgimg {
+			width: 100vw;
+			// z-index: 0;
+		}
+		
 	}
+	// 轮播图样式
+	.swiper {
+		.u-swiper {
+			border-radius:0 !important;
+		}
+		.u-swiper__wrapper__item__wrapper__image{
+			border-radius:0 !important;
+		}
+	}
+	
 </style>