调整首页切换语言位置

src/views/HomeRecommend.vue

@@ -6,8 +6,14 @@
         @click="turnToNewPage('/')"
         src="@/assets/images/homePage/aidaIcon.png"
       />
-			<div class="gallery_btn login white" @click="setLogin">Login</div>
-			<div class="gallery_btn" @click="signUp">Sign up</div>
+      <div class="gallery_btn login white" @click="setLogin">{{ t('Login.Login') }}</div>
+      <div class="gallery_btn" @click="signUp">{{ t('Login.SignUp') }}</div>
+      <div class="language_btn">
+        <div @click="handleChangeLanguage">
+          <i class="fi fi-rr-globe"></i>
+          {{ isChinese ? 'CN' : 'EN' }}
+        </div>
+      </div>
     </div>
 
 		<div class="content">
@@ -158,7 +164,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.homeRecommend_max{
+.homeRecommend_max {
   width: 100%;
   height: 100%;
   display: flex;
@@ -166,91 +172,115 @@ export default defineComponent({
   @media (max-width: 768px) {
     flex-direction: column;
   }
-	> .header{
+  > .header {
     padding: 3.2rem 4rem;
     z-index: 2;
     margin-left: auto;
     display: flex;
+    column-gap: 2rem;
     align-items: center;
     position: absolute;
     right: 0;
     @media (max-width: 768px) {
       position: relative;
-			justify-content: space-between;
+      justify-content: flex-end;
       width: 100%;
-			padding: .7rem 1.4rem;
+      padding: 0.7rem 1.4rem;
       margin-left: auto;
       background-color: #fff;
     }
-		> .homeRecommend_logo{
+    > .homeRecommend_logo {
       display: none;
       @media (max-width: 768px) {
         display: block;
         height: 2.5rem;
+        margin-right: auto;
       }
     }
-		> .gallery_btn{
-			margin-right: 2rem;
+    .language_btn {
+      color: #fff;
+      cursor: pointer;
+	  font-size: 2.5rem;
+	  >div {
+		display: flex;
+		>i{
+			display: flex;
+			align-items: center;
+			font-size: 2.5rem;
+			margin-right: .7rem;
+		}
+	  }
+      @media (max-width: 768px) {
+		  font-size: 1.5rem;
+        color: #000;
+		>div {
+			>i{
+				font-size: 1.5rem;
+				margin-right: .7rem;
+			}
+		}
+      }
+    }
+    > .gallery_btn {
+      // margin-right: 2rem;
       border: none;
       font-size: 1.7rem;
       width: 13rem;
       line-height: 6rem;
       font-weight: 500;
       border-radius: 4rem;
-			&:last-child{
+      &:last-child {
         margin-right: 0;
       }
-			&.login{
+      &.login {
         @media (max-width: 768px) {
           display: none;
         }
       }
       @media (max-width: 768px) {
-				font-size: .72rem;
+        font-size: 0.72rem;
         width: 5.2rem;
         line-height: 2.4rem;
         padding: 0;
-				
       }
     }
-		
   }
-	> .content{
+  > .content {
     flex: 1;
     position: relative;
-		> .bg{
+    > .bg {
       width: 100%;
       height: 100%;
       position: absolute;
       left: 50%;
       top: 50%;
-			transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       object-fit: cover;
       display: none;
-			&.pc{
+      &.pc {
         @media (min-width: 768px) {
           display: block;
         }
       }
-			&.mobile{
+      &.mobile {
         @media (max-width: 768px) {
           display: block;
         }
       }
     }
-		> .title{
+    > .title {
       display: none;
       position: absolute;
       left: 50%;
       top: 50%;
-			transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       text-align: center;
       @media (max-width: 768px) {
         margin-top: -2rem;
-				> img{
+        > img {
           width: 17rem;
         }
-				> .text{
+        > .text {
           width: max-content;
           text-align: center;
         }
@@ -259,7 +289,7 @@ export default defineComponent({
         display: block;
       }
     }
-		> .beForm{
+    > .beForm {
       position: absolute;
       font-size: 2.1rem;
       bottom: 10rem;
@@ -269,19 +299,19 @@ export default defineComponent({
         left: 50%;
         color: #fff;
         bottom: 1rem;
-				font-size: .8rem;
+        font-size: 0.8rem;
         text-align: center;
         transform: translateX(-50%);
       }
     }
-		> .learnMore{
+    > .learnMore {
       position: absolute;
       bottom: 29rem;
       right: 10rem;
       width: 53.4rem;
       text-align: right;
       z-index: 2;
-			> img{
+      > img {
         height: 19.5rem;
         margin-bottom: 2rem;
         display: none;
@@ -298,7 +328,7 @@ export default defineComponent({
       // 	font-weight: 400;
       // 	margin-bottom: 2rem;
       // }
-			> .btn{
+      > .btn {
         line-height: 6rem;
         width: 18rem;
         font-size: 2rem;