提交

src/view/fenghui/index.vue

@@ -1,6 +1,11 @@
 <template>
     <div :class="{ fenghui: true, en: langSelect === 'en' }">
-        <div class="swith" :style="componentId !== '' ? 'position: fixed; color: #000000' : ''">
+        <div class="languageList">
+            <div @click="() => langChange({ selectedValues: [item.value] })"
+                :class="{ languageItem: true, 'languageItem-act': langSelect === item.value }" v-for="item in langObj"
+                v-text="item.text" :key="item.value"></div>
+        </div>
+        <div class="swith" v-show="componentId" :style="componentId !== '' ? 'position: fixed; color: #000000' : ''">
             <div class="title" @click="showLange = true">
                 {{ langObjT[langSelect] }}
                 <van-icon name="arrow-down" />
@@ -13,12 +18,12 @@
         </div>
         <Introduction v-if="!componentId" :langType="langSelect" @saveData="saveData" />
         <!-- 动态组件 -->
-        <Fore25 ref="fore25" v-if="componentId === 'fore25'" :verificationCode="verificationCode"
-            :langType="langSelect" @closeComponent="closeComponent" />
-        <Chin25 ref="chin25" v-if="componentId === 'chin25'" :verificationCode="verificationCode"
-            :langType="langSelect" @closeComponent="closeComponent" />
-        <Work25 ref="work25" v-if="componentId === 'work25'" :verificationCode="verificationCode"
-            :langType="langSelect" @closeComponent="closeComponent" />
+        <Fore25 ref="fore25" v-if="componentId === 'fore25'" :verificationCode="verificationCode" :langType="langSelect"
+            @closeComponent="closeComponent" />
+        <Chin25 ref="chin25" v-if="componentId === 'chin25'" :verificationCode="verificationCode" :langType="langSelect"
+            @closeComponent="closeComponent" />
+        <Work25 ref="work25" v-if="componentId === 'work25'" :verificationCode="verificationCode" :langType="langSelect"
+            @closeComponent="closeComponent" />
 
         <Fore25-recurrence ref="fore25Recurrence" v-if="componentId === 'fore25Recurrence'" :subData="subData"
             :verificationCode="verificationCode" :langType="langSelect" @closeComponent="closeComponent" />
@@ -58,10 +63,12 @@ const subData = ref({})
 const langObj = [
     { text: '中文', value: 'zh' },
     { text: 'English', value: 'en' },
+    // { text: 'Español', value: 'es' },
 ]
 const langObjT = {
-    zh: 'English',
-    en: '中文',
+    zh: '中文',
+    en: 'English',
+    es: 'Español',
 }
 const saveData = (code, verification, data) => {
     if (code !== undefined) {
@@ -137,6 +144,39 @@ html {
         margin: 0;
     }
 
+    .languageList {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 20px;
+        font-size: 0.875rem;
+        color: #cbc9d6;
+        text-align: center;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+
+
+        .languageItem {
+            flex: 1;
+            position: relative;
+            height: 2em;
+
+            &-act {
+                color: #fff;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 90%;
+                    height: 1px;
+                    background: #fff;
+                    bottom: 0;
+                    left: 5%
+                }
+            }
+        }
+    }
+
     .swith {
         position: absolute;
         right: 10px;

src/view/fenghui/introduction.vue

@@ -270,6 +270,7 @@ const saveLogin = () => {
 
 <style lang="scss">
 .introduce {
+    padding-top: 30px;
     box-sizing: border-box;
     color: #ffffff;
     padding-bottom: 10px;

src/view/fenghui/lang.js

@@ -298,5 +298,6 @@ export default {
             { "text": "Comprehensive Support Group - Volunteers", "value": "综合保障组-志愿者" },
             { "text": "Comprehensive Support Group - Others", "value": "综合保障组-其他" }
         ]
-    }
+    },
+    "es": {}
 }