2023-11-2-1

src/component/HomePage/Header.vue

@@ -64,15 +64,21 @@
 			<!-- <div class="select_item" @click="showBindEmailModal()">
 				<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
 			</div> -->
+			<div class="select_item" @click.stop="isLanguage = !isLanguage">
+				<span class="icon iconfont icon-yuyan"></span>
+				<span class="select_item_des">{{$t('Header.language')}}</span>
+			</div>
 			<div class="select_item" @click="logout()">
 				<span class="icon iconfont icon-tuichu"></span
 				><span class="select_item_des">{{$t('Header.logOff')}}</span>
 			</div>
-			<div class="select_item" @click="setLocale()">
-				<span class="icon iconfont icon-yuyan"></span>
-				<span class="select_item_des">切换语言</span>
-			</div>
+			
 		</nav>
+		<ul class="select_block select_list" v-show="isLanguage && isShowOperate">
+			<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
+				<span class="select_item_des">{{ item.name }}</span>
+			</li>
+		</ul>
         <a-modal
             class="modal_component"
             v-model:visible="bindEmailVisible"
@@ -177,6 +183,18 @@ export default defineComponent({
             numTime: 30,
             timerSec: null,
             modalWarning: null,
+            isLanguage: false,
+			language:[
+				{name:'English',value:'en'},
+				{name:'中文',value:'cn'},
+				{name:'한국인',value:'kr'},
+				{name:'にほんご',value:'ja'},
+				{name:'Русский',value:'ru'},
+				{name:'Français',value:'fr'},
+				{name:'แบบไทย',value:'th'},
+				{name:'Tiếng Việt',value:'vn'},
+				{name:'Italiano',value:'it'},
+			]
         };
     },
     mounted() {
@@ -214,6 +232,7 @@ export default defineComponent({
         //关闭下拉图标
         closeShowOperateContent() {
             this.isShowOperate = false;
+			this.isLanguage = false
             document.removeEventListener("click", this.closeShowOperateContent);
         },
 
@@ -350,12 +369,13 @@ export default defineComponent({
                 }
             }, 1000);
         },
-		setLocale(){
+		setLocale(v){
 			// window.location.reload();
 			let name = 'home'
 			let noRefresh = true;
             this.$router.push({ name: name, params: { noRefresh: noRefresh } });
-			this.locale == 'zh-cn'?this.locale = 'en':this.locale = 'zh-cn'
+			this.locale = v
+			// this.locale == 'zh-cn'?this.locale = 'en':this.locale = 'zh-cn'
 		}
     },
 });
@@ -501,7 +521,10 @@ export default defineComponent({
 	box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	border: 1px solid #000000;
-
+	&.select_list{
+		// display: none;
+		transform: translateX(105%);
+	}
 	.select_item {
 		padding-left: 1.5rem;
 		height: 4.1rem;