项目优化，修改响应式问题

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="overflow-x:hidden">
     <common-header :class="{'home-bg' : isHome}"></common-header>
     <main>
       <router-view></router-view>

src/components/CommonFooter.vue

@@ -612,4 +612,20 @@ export default {
     }
   }
 }
+@media (max-width:1200px){
+	.content{
+		width: 100% !important;
+		padding: 0px 50px;
+	}
+}
+
+@media (max-width:835px){
+	.footer .footer-upper-section{
+		width: 100%;
+	}
+	
+	.footer .footer-right{
+		display: none;
+	}
+}
 </style>

src/components/CommonHeader.vue

@@ -9,12 +9,18 @@
 		</span>-->
             </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
-                    aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation">
+				aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation" @click="toggleAnimation">
-                <i class="icon ion-md-menu"></i>
+				<!-- <i class="icon ion-md-menu" style="color: #fff;"></i> -->
+				<div class="hamburger-menu" :class="{ active: isToggled }">
+					<div class="line line-1"></div>
+					<div class="line line-2"></div>
+					<div class="line line-3"></div>
+				</div>
             </button>
 
             <div class="collapse navbar-collapse" id="headerMenu" >
-                <ul class="navbar-nav mr-auto nav-bar" >
+				<!--  mr-auto -->
+                <ul class="navbar-nav nav-bar" >
 
                     <li class="nav-item" >
                         <router-link class="nav-link" :to='home.url'>{{ home.label }}</router-link>
@@ -114,7 +120,7 @@
                             {{ nativeLang }}</a>
                         <!-- <img src="../assets/img/hg.jpg" class="nav_img" style="max-width: 10%;"></img> -->
                         <!-- </div> -->
-                        <div class="dropdown-menu">
+                        <div class="dropdown-menu" style="left: 0;">
                             <div class="dropdown-item" @click.prevent="chooseNative(item.value)"
                                  v-for="(item, index) in langList" :key="index">
                                 <div class="nav-item_icon">
@@ -209,10 +215,10 @@
                     <template v-else>
                         <li class="nav-item dropdown no-login" style="width:auto">
                             <router-link to="/sign-in" class="btn btn-sm rounded-pill" href="#" tag="div"
-                                role="button" style="margin:0 15px;color:#fff;">{{ $t('common.sign_in') }}
+                                role="button" style="color:#fff;">{{ $t('common.sign_in') }}
                             </router-link>
                             <router-link to="/sign-up" class="btn btn-sm rounded-pill" href="#"
-                                tag="div" role="button" style="color:#fff;border: 1px solid #fff;border-radius: 50px !important;">{{ $t('common.sign_up') }}
+                                tag="div" role="button" style="color:#fff;border: 1px solid #fff;border-radius: 50px !important;margin-left:15px;">{{ $t('common.sign_up') }}
                             </router-link>
                         </li>
                     </template>
@@ -463,6 +469,7 @@ export default {
         ],
       },
       userInfo: {},
+	  isToggled: false
     };
   },
 
@@ -585,6 +592,9 @@ export default {
         })
         .catch((res) => {});
     },
+	toggleAnimation() {
+	    this.isToggled = !this.isToggled;
+	}
   },
 
   created() {
@@ -749,4 +759,36 @@ color: #fff !important;
 .dropdown-menu.download::before{
   content: none;
 }
+
+.hamburger-menu {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.line {
+  width: 100%;
+  height: 3px;
+  background-color: #fff;
+  transition: all 0.8s;
+}
+
+.active .line-1 {
+  transform: rotateZ(-405deg) translate(-4px, 6px);
+}
+
+.active .line-3 {
+  transform: rotateZ(405deg) translate(-4px, -6px);
+}
+
+.active .line-2 {
+  opacity: 0;
+}
+
+button {
+  outline: none;
+}
 </style>

src/index.html

@@ -52,9 +52,9 @@
     <script src="./static/libs/swiper-5.3.8/package/js/swiper.min.js"></script>
 </head>
 <style>
-    body{
+    /* body{
         min-width: 1200px;
-    }
+    } */
 </style>
 <body>
 

src/views/home/index.vue

@@ -329,7 +329,7 @@
 	  <!--中间显示4个图标-->
 	  </div>
 	  <!-- 立即体验 -->
-	  <div class="section illustration_area"> 
+	  <div class="illustration_area"> 
 		<div class="left">
 		  <div class="title">{{ $t("homeNewText.bb4") }}</div>
 		  <div class="title" style="font-size: 18px;margin-top: 30px;">{{ $t("homeNewText.bb5") }}</div>
@@ -342,7 +342,7 @@
 		</div>
 		<div class="right" style="overflow: visible;">
 		  <div class="right_box">
-			<img src="@/assets/img/home/home1.png" alt="" style="height: 480px;width: auto;">
+			<img src="@/assets/img/home/home1.png" alt="">
 		  </div>
 		</div>
 	  </div>
@@ -370,15 +370,15 @@
 	  </div>
 	  
 	  <!-- 全球领先数字货币交易所 -->
-		<div class="productservice">
 		<div class="title" style="font-size: 48px;text-align: center;margin-bottom: 10px;">{{ $t("homeNewText.bb7") }}</div>
+		<div class="productservice">
 			<div  style="font-size: 20px;color: #fff;text-align: center;">{{ $t("homeNewText.bb8") }}</div>
 			<div class="scrollBox_box3" ref="scrollBox">
 				<img id="scrollimg" src="@/assets/img/home/home2.png" :style="imageStyle">
 			</div>
 		</div>
 	  
-	  <!-- 探索无限可能 -->
+	  <!-- 資產安全 -->
 	  <div class="title" style="text-align:center;margin-top: 150px;font-size: 48px;">{{ $t("homeNewText.bb9") }}</div>
 	  <div class="travel_area" style="margin-top: 50px;">
 		<router-link :to="{name:'exchange'}" style="color: #fff;margin-bottom: 20px;">
@@ -434,22 +434,22 @@
 	  <div class="productservice">
 		<div class="title" style="text-align: center;margin-bottom: 50px;margin-top: 150px;font-size: 48px;">{{ $t("homeNewText.bb18") }}</div>
 		<div class="productservice_box">
-			<div>
+			<div class="learn_area_box">
 				<div class="productservice_img"><img src="@/assets/img/home/home7.png"></div>
 				<div class="productservice_box1">{{ $t("homeNewText.bb19") }}</div>
 				<div class="productservice_box2" style="width: 257px;">{{ $t("homeNewText.bb20") }}</div>
 			</div>
-			<div>
+			<div class="learn_area_box">
 				<div class="productservice_img"><img src="@/assets/img/home/home8.png"></div>
 				<div class="productservice_box1">{{ $t("homeNewText.bb21") }}</div>
 				<div class="productservice_box2" style="width: 295px;">{{ $t("homeNewText.bb22") }}</div>
 			</div>
-			<div>
+			<div class="learn_area_box">
 				<div class="productservice_img"><img src="@/assets/img/home/home9.png"></div>
 				<div class="productservice_box1">{{ $t("homeNewText.bb23") }}</div>
 				<div class="productservice_box2" style="width: 241px;">{{ $t("homeNewText.bb24") }}</div>
 			</div>
-			<div>
+			<div class="learn_area_box">
 				<div class="productservice_img"><img src="@/assets/img/home/home10.png"></div>
 				<div class="productservice_box1">{{ $t("homeNewText.bb25") }}</div>
 				<div class="productservice_box2" style="width: 225px;">{{ $t("homeNewText.bb26") }}</div>
@@ -460,7 +460,7 @@
 	  <!-- <div class="travel_img" style="width: 260px;height: 280px;"><img src="@/assets/img/home/home2.png" width="260" class="travel_img1" /></div> -->
 	  <div  class="title" style="margin-top: 150px;text-align: center;margin-bottom: 50px;font-size: 48px;">{{ $t("homeNewText.bb27") }}</div>
 	  <div class="learn_area">
-	  		<div>
+	  		<div class="learn_area_box">
 	  			<div class="learn_area1">
 					<div class="learn_area_text1">1</div>
 				</div>
@@ -471,10 +471,10 @@
 	  				<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb6") }}</router-link>
 	  			</div>
 	  		</div>
-	  		<div style="padding-top: 15px;width: 237px;text-align: center;">
+	  		<div class="learn_area_img">
 	  			<img src="@/assets/img/home/home12.png" width="140">
 	  		</div>
-	  		<div>
+	  		<div class="learn_area_box">
 	  			<div class="learn_area1">
 	  				<div class="learn_area_text1">2</div>
 	  			</div>
@@ -485,10 +485,10 @@
 	  				<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb32") }}</router-link>
 	  			</div>
 	  		</div>
-	  		<div style="padding-top: 15px;width: 237px;text-align: center;">
+	  		<div class="learn_area_img">
 	  			<img src="@/assets/img/home/home12.png" width="140">
 	  		</div>
-	  		<div>
+	  		<div class="learn_area_box">
 	  			<div class="learn_area1">
 	  				<div class="learn_area_text1">3</div>
 	  			</div>
@@ -509,7 +509,7 @@
 					<img src="@/assets/img/home/home13.png">
 				</div>
 			</div>
-	  		<div style="width: 480px;">
+	  		<div class="positionBox_box4">
 				<div class="trade_box">
 					<div class="trade_img"><img src="" style="border-radius: 10px;" alt=""></div>
 					<div style="margin-left: 15px;">
@@ -544,9 +544,9 @@
 	  <!-- 立即開始您的加密之旅 -->
 	  <div style="width: 100%;background-color: #131419;padding: 100px 0px;">
 		<div class="positionBox">
-			<div style="display: flex;justify-content: space-between;align-items: center;">
+			<div class="positionBox_box1">
 				<div><img src="@/assets/img/home/home14.png"></div>
-				<div>
+				<div class="positionBox_title">
 					<div class="title" style="font-size: 48px;">{{ $t("homeNewText.bb37") }}</div>
 					<div style="display: flex;justify-content: center;">
 						<router-link v-if="!isLogin" class="jump_btn4" :to="{name:'signUp'}">{{ $t("homeNewText.bb38") }}</router-link>
@@ -1102,6 +1102,7 @@
   .illustration_area{
 	width: 1300px;
 	margin: 0px auto 0px;
+	padding: 120px 0px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -1113,12 +1114,12 @@
 	}
 	.right{
 		width: 590px;
-		height: 660px;
+		height: 400px;
 		position: relative;
 	}
 	.right_box{
 		position: absolute;
-		bottom: 60px;
+		bottom: 100px;
 		animation: movepoint 1.3s ease-in-out infinite alternate;
 	}
 	
@@ -2137,6 +2138,12 @@
 			background-repeat: no-repeat;
 		}
 	}
+	
+	.learn_area_img{
+		width: 237px;
+		padding-top: 15px;
+		text-align: center;
+	}
   }
   .circle_bg{
 	width: 50px;
@@ -2181,6 +2188,16 @@
 			to {transform:translate(0,20px)}/* 下浮高度 */
 		}
 	}
+	
+	.positionBox_box4{
+		width: 480px;
+	}
+	
+	.positionBox_box1{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
   }
   .jump_btn3{
     display: inline-block;
@@ -2266,4 +2283,161 @@
 		}
 	}
   }
+  @media (max-width:1200px){
+  	.illustration_area{
+  		width: 100%;
+  		.left{
+  			max-width: 500px;
+  			.title{
+  				font-size: 45px;
+  			}
+  		}
+  		.right{
+  			width: 500px;
+  			height: 400px;
+  		}
+  	}
+  	
+  	.title{
+  		width: 100%;
+  		padding: 0px 20px;
+  		text-align: center;
+  	}
+	
+  	.travel_area{
+  		width: 100%;
+  		flex-wrap: wrap;
+		padding: 0px 20px;
+  		
+  		.travel_box{
+  			width: 100%;
+  		}
+  	}
+	
+	.productservice{
+		width: 100%;
+		
+		.scrollBox_box3{
+			width: 100%;
+		}
+	}
+	
+  	.productservice_box{
+		width: 100%;
+		padding: 0px 20px;
+		flex-wrap: wrap;
+	}
+  	
+	.learn_area{
+		width: 100%;
+		padding: 0px 20px;
+	}
+	
+  	.positionBox{
+  		width: 100%;
+		padding: 0px 20px;
+		
+		.positionBox_box2 .positionBox_box3{
+			bottom: 100px;
+		}
+  	}
+  }
+  
+  @media (max-width:800px){
+  	.illustration_area{
+  		width: 100%;
+  		display: block;
+  		position: relative;
+  		
+  		.left{
+  			max-width: 800px;
+  			margin-top: 300px;
+  			text-align: center;
+  			.title{
+  				font-size: 45px;
+  			}
+  		}
+  		
+  		.right{
+  			width: 500px;
+  			height: 400px;
+  			position: absolute;
+  			top: 0px;
+  			left: 50%;
+  			transform: translateX(-50%);
+  			
+  			.right_box{
+  				bottom: 10px;
+  			}
+  		}
+  	}
+  	
+  	.travel_area{
+  		justify-content: center;
+  		
+  		.travel_box{
+  			width: 100%;
+  		}
+  	}
+	
+	.productservice_box{
+		width: 100%;
+	}
+	
+	.learn_area{
+		width: 100%;
+		flex-wrap: wrap;
+		
+		.learn_area_img{
+			display: none;
+		}
+	}
+	
+	.learn_area_box{
+		width: 100%;
+		margin-top: 20px;
+		
+		.productservice_box2{
+			width: 100% !important;
+		}
+	}
+	
+  	.positionBox{
+  		width: 100%;
+  		padding: 0px 20px;
+		position: relative;
+  		
+  		.positionBox_box2{
+			width: 100%;
+  			position: absolute;
+			top: 0px;
+			
+			.positionBox_box3{
+				width: 100%;
+			}
+  		}
+		
+		.positionBox_box4{
+			width: 100%;
+			margin-top: 500px;
+			margin-bottom: 20px;
+		}
+		
+		.positionBox_box1{
+			flex-wrap: wrap;
+			justify-content: center;
+			
+			.positionBox_title{
+				margin-top: 40px;
+			}
+		}
+  	}
+  }
+  
+  @media (max-width:507px){
+	.productservice_box{
+		width: 100%;
+		justify-content: center !important;
+	}
+  }
   </style>

static/css/bootstrap.min.css

@@ -4791,7 +4791,8 @@ input[type=submit].btn-block {
         display: -ms-flexbox!important;
         display: flex!important;
         -ms-flex-preferred-size: auto;
-        flex-basis: auto
+        flex-basis: auto;
+		justify-content: space-between;
     }
     .navbar-expand-lg .navbar-toggler {
         display: none