From 7489cbd15a9a77fae47df6d92835335750b020ce Mon Sep 17 00:00:00 2001
From: lanwenshuai <lanwenshuai@qq.com>
Date: Wed, 14 Jul 2021 19:50:08 +0800
Subject: [PATCH] version : 0.5

---
 components/index/banner.vue |  71 ++++++++++++++++++++-
 components/index/header.vue |  18 +++---
 pages/reg/reg.vue           | 121 +++++++++++++++++++-----------------
 3 files changed, 144 insertions(+), 66 deletions(-)

diff --git a/components/index/banner.vue b/components/index/banner.vue
index 85891bc..0eed05e 100644
--- a/components/index/banner.vue
+++ b/components/index/banner.vue
@@ -1,18 +1,85 @@
 <template>
 	<view class="">
 		<view class="banner">
-			
+			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" duration="700" class="banner-box" vertical="true" >
+				<swiper-item v-for="(item,index) in banner" :key='index'>
+					<view class="swiper-item">
+						<image :src="item.src" mode="" class="banner-img"></image>
+					</view>
+				</swiper-item>
+				
+			</swiper>
 		</view>
 	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				title: 'Hello',
+				banner:[
+					{src:'../../static/index/banner/1.jpg'},
+					{src:'../../static/index/banner/2.jpg'},
+					{src:'../../static/index/banner/3.jpg'},
+					{src:'../../static/index/banner/4.jpg'},
+					{src:'../../static/index/banner/5.jpg'}
+				]
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
 	.banner{
 		width: 100%;
 		height: 500px;
-		background-color: pink;
+		// position: relative;
+		// background-color: pink;
+		.banner-box{
+			height: 100%;
+			margin-top: -2px;
+			.swiper-item{
+				height: 100%;
+				.banner-img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			// & /deep/ .uni-swiper-dots-horizontal{
+			// 	left: 10%;
+			// 	top: 20%;
+			// 	display: flex;
+			// 	flex-direction: column;
+			// }
+			& /deep/ .uni-swiper-dot{
+				background-size: cover;
+				width: 110px;
+				height: 62px;
+				border-radius: 0;
+				opacity: 1;
+				margin-bottom: 5px;
+			}
+			& /deep/ .uni-swiper-dot-active{
+				border: 2px solid $color;
+			}
+			& /deep/ .uni-swiper-dots-vertical>:nth-child(1){
+				background-image: url(../../static/index/banner/min1.png);
+			}
+			& /deep/ .uni-swiper-dots-vertical>:nth-child(2){
+				background-image: url(../../static/index/banner/min2.png);
+			}
+			& /deep/ .uni-swiper-dots-vertical>:nth-child(3){
+				background-image: url(../../static/index/banner/min3.png);
+			}
+			& /deep/ .uni-swiper-dots-vertical>:nth-child(4){
+				background-image: url(../../static/index/banner/min4.png);
+			}
+			& /deep/ .uni-swiper-dots-vertical>:nth-child(5){
+				background-image: url(../../static/index/banner/min5.png);
+			}
+		}
+		
+		
 	}
 </style>
diff --git a/components/index/header.vue b/components/index/header.vue
index d3ee73b..12c2d8b 100644
--- a/components/index/header.vue
+++ b/components/index/header.vue
@@ -16,7 +16,7 @@
 					<view class="nav" :class="{'active':active==3}">
 						<navigator url="#" @click="act(3)">旅游攻略</navigator>
 					</view>
-					<view class="nav-xl nav" :class="{'active':active==4}">
+					<view class="nav-xl " :class="{'active':active==4}">
 						<view class="nav-xl-nav" >
 							<navigator url="#"  @click="act(4)">
 								<text>去旅行</text>
@@ -39,7 +39,7 @@
 					<view class="nav " :class="{'active':active==6}">
 						<navigator url="../../pages/hotel/hotel" @click="act(6)">订酒店</navigator>
 					</view>
-					<view class="nav-xl nav">
+					<view class="nav-xl ">
 						<view class="nav-xl-nav">
 							<navigator url="#">
 								<text>社区</text>
@@ -109,7 +109,7 @@
 		.head-box{
 			height: 68px;
 			.head-logo{
-				padding: 16px 0 14px;
+				padding: 15px 0 12px 14px;
 					.logo{
 						// width: 120px;
 						height: 39px;
@@ -127,7 +127,7 @@
 					color: $color;
 					border-bottom: 3px solid $color;
 					z-index: 999;
-					height: 62px;
+					height: 65px;
 				}
 				.xl{
 					top:65px
@@ -147,7 +147,7 @@
 		.head-box{
 			height: 58px;
 			.head-logo{
-				padding: 13px 0 13px 15px; 
+				padding: 11px 0 12px 15px; 
 				.logo{
 					width: 120px;
 					height: 33px;
@@ -212,10 +212,10 @@
                     color: #fff;
                 }
 				.nav{
-					padding: 2px  16px;
+					padding: 0px  16px;
 					z-index: 4;
-					border-top: 1px solid #fff;
-					border-bottom: 0;
+					// border-top: 1px solid #fff;
+					// border-bottom: 0;	
 				}
 				.nav-icon{
 					border-top: 4px solid #666;
@@ -227,6 +227,8 @@
 				}
 				.nav-xl{ 
 					position: relative;
+					padding: 0px  16px;
+					z-index: 4;
 					display: block;	
                     border-top:2px solid rgba(255,255,255,0);
                     border-left:1px solid rgba(255,255,255,0);
diff --git a/pages/reg/reg.vue b/pages/reg/reg.vue
index 7dd3009..6c5b03e 100644
--- a/pages/reg/reg.vue
+++ b/pages/reg/reg.vue
@@ -1,50 +1,53 @@
 <template>
-    <view class="content" :style="{backgroundImage: 'url(../../static/reg/'+ num + '.jpg)'}">
-        <view class="reg clearfix">
-            <view class="reg-box">
-                <!-- 左盒子 -->
-                <view class="box-left">
-                    <!-- 左边实际框 -->
-                    <view class="regui">
-                        <view class="zhuce">
-                            <input type="text" placeholder="你的手机号"  auto-focus="true"  class="phone"/>  
-                        </view>
-                        <view class="btn">                            
-                            <button class="reg-btn">立即注册</button>
-                        </view>
-                        <!-- 协议 -->
-                        <view class="agreement">
-                            <navigator url="#"><<马蜂窝用户使用协议>></navigator>
-                            <view>注册视为同意</view>
-                        </view>
-                        <!-- icon -->
-                       
-                    </view>
-                    <!-- 图标 -->
-                    <view class="icon-box">
-                       <view class="icon-title">用合作网账户直接登录</view>
-                       <view class="icons">
-                           <navigator url="#"></navigator>
-                           <navigator url="#"></navigator>
-                           <navigator url="#"></navigator>
-                       </view>
-                    </view>
-                </view>
-                <!-- 右盒子 -->
-                <view class="box-right">
-                    <navigator url="#" class="download">
-                        
-                    </navigator>
-                </view>
-            </view>
-            <view class="bottom">
-                <view>已经注册?</view>
-                <navigator url="#">
-                    马上登录
-                </navigator>
-            </view>
-        </view> 
-    </view>
+	<view class="box">
+		<view class="content" :style="{backgroundImage: 'url(../../static/reg/'+ num + '.jpg)'}">
+		    <view class="reg clearfix">
+		        <view class="reg-box">
+		            <!-- 左盒子 -->
+		            <view class="box-left">
+		                <!-- 左边实际框 -->
+		                <view class="regui">
+		                    <view class="zhuce">
+		                        <input type="text" placeholder="你的手机号"  auto-focus="true"  class="phone"/>  
+		                    </view>
+		                    <view class="btn">                            
+		                        <button class="reg-btn">立即注册</button>
+		                    </view>
+		                    <!-- 协议 -->
+		                    <view class="agreement">
+		                        <navigator url="#"><<马蜂窝用户使用协议>></navigator>
+		                        <view>注册视为同意</view>
+		                    </view>
+		                    <!-- icon -->
+		                   
+		                </view>
+		                <!-- 图标 -->
+		                <view class="icon-box">
+		                   <view class="icon-title">用合作网账户直接登录</view>
+		                   <view class="icons">
+		                       <navigator url="#"></navigator>
+		                       <navigator url="#"></navigator>
+		                       <navigator url="#"></navigator>
+		                   </view>
+		                </view>
+		            </view>
+		            <!-- 右盒子 -->
+		            <view class="box-right">
+		                <navigator url="#" class="download">
+		                    
+		                </navigator>
+		            </view>
+		        </view>
+		        <view class="bottom">
+		            <view>已经注册?</view>
+		            <navigator url="#">
+		                马上登录
+		            </navigator>
+		        </view>
+		    </view> 
+		</view>
+	</view>
+   
 </template>
 
 <script>
@@ -60,12 +63,26 @@
             
         },
         onLoad() {
-            this.num=parseInt(Math.random()*9)
+            this.num=parseInt(Math.random()*10)
+			console.log(this.num)
         }
     }
 </script>
 
 <style lang="scss">
+	.box::before{
+		// background-image: url(../../static/reg/full_page_vignette.png) ;
+		 background: url(../../static/reg/full_page_vignette.png)  0 0 rgba(0,0,0,0.2);
+		background-size: 100%;
+		bottom: 0;
+		content: '';
+		left: 0;
+		right: 0;
+		top: 0;
+		position: fixed;
+		opacity: .5;
+		z-index: 2;
+	}
     .content{
         width: 100vw;
         height: 100vh;
@@ -73,15 +90,7 @@
         background-size: cover;
         position: relative;
         &::before{
-             background-size: 100%;
-             background: url(../../static/reg/full_page_vignette.png) 0 0 rgba(0,0,0,0.3);
-             bottom: 0;
-             position: fixed;
-             content: '';
-             left: 0;
-             opacity: .5;
-             right: 0;
-             top: 0;
+            
         }
         .reg{
             width: 100%;
-- 
GitLab