change button style

public/locales/en.json

@@ -1,6 +1,7 @@
 {
   "message": {
-    "hello": "中",
+    "china": "中文",
+    "english": "English",
     "back": "Back",
     "cancel": "Cancel",
     "to": "To",

public/locales/zh.json

@@ -1,6 +1,7 @@
 {
   "message": {
-    "hello": "En",
+    "china": "中文",
+    "english": "English",
     "back": "返回",
     "cancel": "取消",
     "to": "至",

src/assets/images/lang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1708954274349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13419" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18"><path d="M892.489143 917.942857a35.620571 35.620571 0 0 1-39.643429-31.451428 36.571429 36.571429 0 0 1 0-6.509715v-140.361143c0-38.546286-25.380571-38.546286-34.962285-38.546285a43.885714 43.885714 0 0 0-45.129143 43.154285V880.274286a39.277714 39.277714 0 0 1-78.409143 0v-212.845715a35.766857 35.766857 0 0 1 33.206857-38.180571 47.981714 47.981714 0 0 1 41.691429 20.333714 102.4 102.4 0 0 1 62.976-20.333714 92.818286 92.818286 0 0 1 99.035428 102.912v147.968a36.571429 36.571429 0 0 1-10.166857 27.136 39.058286 39.058286 0 0 1-28.452571 10.678857z m-267.117714-8.557714H471.04c-49.005714 0-70.875429-21.942857-70.875429-70.363429V622.153143c0-48.64 21.942857-70.363429 70.875429-70.363429h147.529143a37.083429 37.083429 0 1 1 0 74.166857H485.376a10.313143 10.313143 0 0 0-4.096 0.585143v63.414857h121.417143a34.011429 34.011429 0 0 1 37.376 36.132572 34.596571 34.596571 0 0 1-37.376 36.571428H480.987429v68.681143a12.288 12.288 0 0 0 0.365714 3.584 31.232 31.232 0 0 0 3.876571 0H625.371429a35.254857 35.254857 0 0 1 37.376 32.914286 35.84 35.84 0 0 1 0 4.022857 34.669714 34.669714 0 0 1-31.817143 37.302857 35.620571 35.620571 0 0 1-5.632 0zM298.422857 479.012571a36.571429 36.571429 0 0 1-41.106286-38.692571V350.573714H159.524571c-52.516571 0-75.995429-23.478857-75.995428-75.776V167.424c0-52.077714 23.478857-75.337143 75.995428-75.337143h97.718858V56.027429a35.547429 35.547429 0 0 1 32.621714-38.253715 36.571429 36.571429 0 0 1 6.582857 0c34.669714 0 41.984 20.772571 41.984 38.180572v36.132571h98.669714c52.516571 0 75.995429 23.259429 75.995429 75.337143v107.373714c0 52.443429-23.478857 75.776-75.995429 75.776H338.505143V440.32a36.571429 36.571429 0 0 1-33.645714 38.765714 36.571429 36.571429 0 0 1-6.436572 0zM172.032 168.521143c-7.314286 0-8.118857 0.658286-8.118857 8.118857v89.380571c0 7.314286 0.658286 8.192 8.118857 8.192h85.284571V168.521143H171.958857z m166.546286 105.618286h86.235428c7.314286 0 8.118857-0.950857 8.118857-8.118858V176.566857c0-7.314286-0.950857-8.118857-8.118857-8.118857h-86.308571v105.691429zM512.146286 1024a512 512 0 0 1-497.371429-632.758857 41.325714 41.325714 0 0 1 49.298286-30.061714 40.740571 40.740571 0 0 1 30.134857 49.078857 431.542857 431.542857 0 0 0 417.938286 532.187428 40.740571 40.740571 0 1 1 0 81.554286z m456.557714-354.450286a40.740571 40.740571 0 0 1-39.643429-50.761143 431.542857 431.542857 0 0 0-416.914285-537.307428 40.740571 40.740571 0 1 1 0-81.481143 512 512 0 0 1 496.201143 638.829714 40.813714 40.813714 0 0 1-39.789715 30.72z" fill="#eeeeee" p-id="13420"></path></svg>

src/layout/components/Navbar.vue

@@ -4,7 +4,19 @@
       <router-link to="/">
         <img src="@/assets/JCCE-logo.png">
       </router-link>
-      <el-button round @click="changeLang">{{ $t('message.hello') }}</el-button>
+      <el-dropdown class="avatar-container" trigger="hover">
+        <div class="avatar-wrapper">
+          <img class="langBtn" src="@/assets/images/lang.svg">
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="changeLang('zh')">
+            {{ $t('message.china') }}
+          </el-dropdown-item>
+          <el-dropdown-item @click.native="changeLang('en')">
+            {{ $t('message.english') }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
     <div class="top-title">{{ $t('page.title') }}</div>
     <div class="right-menu">
@@ -72,8 +84,8 @@ export default {
     }
   },
   methods: {
-    changeLang() {
-      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
+    changeLang(locale) {
+      this.$i18n.locale = locale
     },
     changeLight() {
       document.documentElement.setAttribute('jcceTheme', 'jcceLight')
@@ -143,9 +155,13 @@ export default {
   margin-bottom: calc(-8vh + 20px);
   .left-pic{
     width: 24%;
+    display: flex;
     img{
       height: 3.9vh;
-      margin-left: 20px;
+      margin: 0 20px;
+    }
+    .langBtn{
+      padding: 0.5vh;
     }
   }
   .top-title{
@@ -178,6 +194,7 @@ export default {
     font-size: 14px;
     display: flex;
     justify-content: flex-end;
+    white-space: nowrap;
     &:focus {
       outline: none;
     }