From 18cf64a613bcf481f7dad952c01221321c0f3fce Mon Sep 17 00:00:00 2001
From: liaoxinyu <liaoxinyu@xingtongworld.com>
Date: Mon, 8 Jul 2024 17:49:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.prod.conf.js      |   8 ++
 package-lock.json               |  13 +++
 package.json                    |   1 +
 src/App.vue                     |   2 +-
 src/components/CommonFooter.vue |  17 ++++
 src/components/CommonHeader.vue |  51 +++++++++-
 src/index.html                  |   4 +-
 src/views/home/index.vue        | 159 +++++++++++++++++++++++++++-----
 static/css/bootstrap.min.css    |   3 +-
 9 files changed, 227 insertions(+), 31 deletions(-)

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index ad8750c..1bf00d5 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -12,6 +12,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const CompressionPlugin = require("compression-webpack-plugin");
+const productionGzipExtensions = ['js', 'css']
 
 const env = require('../config/prod.env')
 
@@ -57,6 +59,12 @@ const webpackConfig = merge(baseWebpackConfig, {
             sourceMap: config.build.productionSourceMap,
             parallel: true
         }),
+		new CompressionPlugin({
+			algorithm: 'gzip',
+			test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+			threshold: 10240,
+			minRatio: 0.8
+		}),
         // extract css into its own file
         new ExtractTextPlugin({
             filename: utils.assetsPath('css/[name].[contenthash].css'),
diff --git a/package-lock.json b/package-lock.json
index 95a96c4..206d954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2515,6 +2515,19 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-1.1.12.tgz",
+      "integrity": "sha512-UpBXSHbrCSdSZieAffqXlAQpLO2fikVVRYibrWlbHYzKpOw1Y4jwkVZ/+S91GzWuJvXSbc8SBy/e8fQJh8uEMQ==",
+      "dev": true,
+      "requires": {
+        "cacache": "^10.0.1",
+        "find-cache-dir": "^1.0.0",
+        "neo-async": "^2.5.0",
+        "serialize-javascript": "^1.4.0",
+        "webpack-sources": "^1.0.1"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
diff --git a/package.json b/package.json
index 8366ebd..f12b837 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
+    "compression-webpack-plugin": "^1.1.12",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.11",
     "d3": "^7.3.0",
diff --git a/src/App.vue b/src/App.vue
index 9c987e0..fd619db 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/CommonFooter.vue b/src/components/CommonFooter.vue
index c62bef7..c8c353f 100644
--- a/src/components/CommonFooter.vue
+++ b/src/components/CommonFooter.vue
@@ -612,4 +612,21 @@ 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>
\ No newline at end of file
diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue
index b441210..665fb37 100644
--- a/src/components/CommonHeader.vue
+++ b/src/components/CommonHeader.vue
@@ -9,8 +9,13 @@
         </span>-->
             </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
-                    aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation">
-                <i class="icon ion-md-menu"></i>
+                aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation" @click="toggleAnimation">
+                <!-- <i class="icon ion-md-menu"></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" >
@@ -114,7 +119,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,11 +214,11 @@
                     <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: 20px;">{{ $t('common.sign_up') }}
                             </router-link>
                         </li>
                     </template>
@@ -464,6 +469,7 @@ export default {
         ],
       },
       userInfo: {},
+	  isToggled: false
     };
   },
 
@@ -586,6 +592,9 @@ export default {
         })
         .catch((res) => {});
     },
+	toggleAnimation() {
+	    this.isToggled = !this.isToggled;
+	}
   },
 
   created() {
@@ -750,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>
diff --git a/src/index.html b/src/index.html
index 69acb26..dca4d39 100644
--- a/src/index.html
+++ b/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>
 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a957407..3e01c1d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -220,7 +220,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>
@@ -233,7 +233,7 @@
 			</div>
 			<div class="right" style="overflow: visible;">
 				<div class="right_box">
-					<img src="@/assets/img/home/home1.svg" alt="" style="height: 600px;width: auto;">
+					<img src="@/assets/img/home/home1.svg">
 				</div>
 			</div>
 		</div>
@@ -379,25 +379,25 @@
 		<div class="title1" style="margin-top: 150px;">{{ $t("homeNewText.bb7") }}</div>
 		<div class="title2" style="color: #fff;">{{ $t("homeNewText.bb8",{name:'BTCEX'}) }}</div>
 		<div class="Crossbar" style="margin: 10px auto 40px;"></div>
-		<div class="travel_area" style="width: 1200px;">
-			<div><img src="@/assets/img/home/home2.png" alt="" /></div>
+		<div class="travel_area">
+			<div class="travel_area_box"><img src="@/assets/img/home/home2.png" alt="" /></div>
 			<div>
 				<div style="display: flex;margin-bottom: 92px;">
-					<div><img src="@/assets/img/icon/eyes.svg" width="42" /></div>
+					<div><img src="@/assets/img/icon/eyes.svg" style="width:42px;" /></div>
 					<div style="margin-left: 10px;">
 						<div style="line-height: 40px;font-size: 24px;">{{ $t("homeNewText.bb9") }}</div>
 						<div style="width: 387px;">{{ $t("homeNewText.bb10") }}</div>
 					</div>
 				</div>
 				<div style="display: flex;margin-bottom: 92px;">
-					<div><img src="@/assets/img/icon/dunpai.svg" width="42" /></div>
+					<div><img src="@/assets/img/icon/dunpai.svg" style="width:42px;" /></div>
 					<div style="margin-left: 10px;">
 						<div style="line-height: 40px;font-size: 24px;">{{ $t("homeNewText.bb11") }}</div>
 						<div style="width: 422px;">{{ $t("homeNewText.bb12") }}</div>
 					</div>
 				</div>
 				<div style="display: flex;">
-					<div><img src="@/assets/img/icon/shanguang.svg" width="42" /></div>
+					<div><img src="@/assets/img/icon/shanguang.svg" style="width:42px;" /></div>
 					<div style="margin-left: 10px;">
 						<div style="line-height: 40px;font-size: 24px;">{{ $t("homeNewText.bb13") }}</div>
 						<div style="width: 360px;">{{ $t("homeNewText.bb14") }}</div>
@@ -410,17 +410,17 @@
 		<div class="title2" style="color: #fff;">{{ $t("homeNewText.bb16") }}</div>
 		<div class="Crossbar" style="margin: 10px auto 50px;"></div>
 		<div class="learn_area">
-			<div>
+			<div class="learn_area_box">
 				<div style="text-align: center;height: 100px;line-height: 100px;"><img src="@/assets/img/home/home3.png" alt="" /></div>
 				<div class="learn_div">{{ $t("homeNewText.bb17") }}</div>
 				<div class="learn_div1" style="width: 293px;">{{ $t("homeNewText.bb18") }}</div>
 			</div>
-			<div>
+			<div class="learn_area_box">
 				<div style="text-align: center;"><img src="@/assets/img/home/home4.png" alt="" /></div>
 				<div class="learn_div">{{ $t("homeNewText.bb19") }}</div>
 				<div class="learn_div1" style="width: 305px;">{{ $t("homeNewText.bb20") }}</div>
 			</div>
-			<div>
+			<div class="learn_area_box">
 				<div style="text-align: center;"><img src="@/assets/img/home/home5.png" alt="" /></div>
 				<div class="learn_div">{{ $t("homeNewText.bb21") }}</div>
 				<div class="learn_div1" style="width: 270px;">{{ $t("homeNewText.bb22",{name:'BTCEX'}) }}</div>
@@ -436,7 +436,7 @@
 		<div class="title2" style="color: #fff;">{{ $t("homeNewText.bb24") }}</div>
 		<div class="Crossbar" style="margin: 10px auto 0px;"></div>
 		<div class="positionBox d-flex" style="justify-content: space-between;height: 600px;">
-			<div style="width: 480px;margin-top: 90px;">
+			<div class="trade_box1">
 				<div class="trade_box"><img src="@/assets/img/home/btcex.png" /></div>
 				<div style="font-size: 36px;margin-bottom: 30px;">{{ $t("homeNewText.bb25",{name:'BTCEX'}) }}</div>
 				<div style="font-size: 24px;margin-bottom: 20px;">{{ $t("homeNewText.bb26") }}</div>
@@ -1792,7 +1792,7 @@
 		text-align: center;
 
 		td {
-			min-width: 150px;
+			// min-width: 150px;
 		}
 	}
 
@@ -2066,16 +2066,10 @@
 			padding: 0px 20px;
 			box-sizing: border-box;
 		}
-
-		.travel_text3 {
-			font-size: 24px;
-			font-weight: bold;
-			margin-bottom: 20px;
-		}
-
-		.travel_text4 {
-			width: 225px;
-			font-size: 16px;
+		
+		.travel_area_box{
+			display: flex;
+			align-items: center;
 		}
 	}
 
@@ -2150,6 +2144,11 @@
 				/* 下浮高度 */
 			}
 		}
+		
+		.trade_box1{
+			width: 480px;
+			margin-top: 90px;
+		}
 	}
 
 	.jump_btn3 {
@@ -2279,4 +2278,120 @@
 		border-radius: 80px;
 		background-color: #3269EB;
 	}
+	
+	@media (max-width:1200px){
+		.illustration_area{
+			width: 100%;
+			.left{
+				max-width: 500px;
+				padding: 0px 15px;
+				margin-bottom: 20px;
+				
+				.title{
+					font-size: 45px;
+				}
+			}
+			.right{
+				width: 500px;
+				height: 660px;
+			}
+			
+			.right_box {
+				bottom: 80px;
+			}
+		}
+		
+		.title1{
+			width: 100%;
+		}
+		
+		.title2{
+			width: 100%;
+		}
+		
+		.travel_area{
+			width: 100%;
+		}
+		
+		.learn_area{
+			width: 100%;
+			flex-wrap: wrap;
+		}
+		.learn_btns{
+			width: 100%;
+		}
+		.positionBox{
+			width: 100%;
+			padding: 0px 20px;
+		}
+		.container{
+			width: 100%;
+		}
+	}
+	
+	@media (max-width:800px){
+		.illustration_area{
+			width: 100%;
+			display: block;
+			position: relative;
+			
+			.left{
+				max-width: 800px;
+				margin-top: 380px;
+				text-align: center;
+				.title{
+					font-size: 45px;
+				}
+			}
+			
+			.right{
+				width: 500px;
+				height: 400px;
+				position: absolute;
+				top: -290px;
+				left: 50%;
+				transform: translateX(-50%);
+				
+				.right_box{
+					bottom: 10px;
+				}
+			}
+		}
+		
+		.learn_area{
+			padding: 0px 20px;
+			justify-content: center;
+		}
+		
+		.learn_area_box{
+			margin-top: 20px;
+		}
+		
+		.travel_area{
+			justify-content: center;
+		}
+		
+		.travel_area_box{
+			display: none !important;
+		}
+		
+		.positionBox_box2{
+			display: none;
+		}
+		
+		.positionBox .trade_box1{
+			margin: auto;
+		}
+		
+		.CryptoJourney{
+			padding: 0px 20px;
+			height: 100%;
+		}
+	}
+	
+	@media (max-width:850px){
+		.illustration_area .right_box {
+			bottom: 150px;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/static/css/bootstrap.min.css b/static/css/bootstrap.min.css
index e9522f4..12199f6 100644
--- a/static/css/bootstrap.min.css
+++ b/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