CSS i18n && select

diff --git a/src/app/entry/welcome.vue b/src/app/entry/welcome.vue
index 541f801..da5cc1e 100644 (file)
--- a/src/app/entry/welcome.vue
+++ b/src/app/entry/welcome.vue
@@ -32,8 +32,8 @@
   <section id="welcome">
     <transition-group name="panels">
       <Welcome class="view" key="welcome" v-show="view.welcome" @next="currView='protocol'"></Welcome>
-      <Protocol class="view" key="protocol" v-show="view.protocol" @next="currView='formAddon'"></Protocol>
-      <FormAddon class="view" key="formAddon" v-show="view.formAddon" @next="currView='formRecover'" @success="loadHome"></FormAddon>
+      <Protocol class="view" key="protocol" v-show="view.protocol" @next="protocolNext"></Protocol>
+      <FormAddon class="view" key="formAddon" :i18n="i18n" v-show="view.formAddon" @next="currView='formRecover'" @success="loadHome"></FormAddon>
       <FormRecover class="view" key="formRecover" v-show="view.formRecover" @back="currView='formAddon'" @success="loadHome"></FormRecover>
     </transition-group>
   </section>
@@ -44,6 +44,7 @@ import Welcome from "../welcome/welcome";
 import Protocol from "../welcome/protocol";
 import FormAddon from "../welcome/form-addon";
 import FormRecover from "../welcome/form-recover";
+import {have} from "../../assets/language"
 
 export default {
   components: {
@@ -54,6 +55,7 @@ export default {
   },
   data() {
     return {
+      i18n: "cn",
       currView: "welcome"
     };
   },
@@ -69,6 +71,12 @@ export default {
     }
   },
   methods: {
+    protocolNext() {
+      if(have(localStorage.lang)) {
+        this.i18n = localStorage.lang;
+      }
+      this.currView='formAddon';
+    },
     loadHome: function() {
       this.$emit("succ");
     }

diff --git a/src/app/home/menu-settings.vue b/src/app/home/menu-settings.vue
index d4d12a1..e65f900 100644 (file)
--- a/src/app/home/menu-settings.vue
+++ b/src/app/home/menu-settings.vue
@@ -9,6 +9,7 @@
 .setting {
   margin: 5px 0 0 0;
   width: 120px;
+  height: 32px;
 }
 .form-item-content .select {
   height: 32px;

diff --git a/src/app/welcome/form-addon.vue b/src/app/welcome/form-addon.vue
index c64f843..4cdcb30 100644 (file)
--- a/src/app/welcome/form-addon.vue
+++ b/src/app/welcome/form-addon.vue
@@ -1,8 +1,17 @@
 
 <style scoped>
+.content {
+  margin-left: 135px;
+}
+.content-cn {
+  margin-left: 85px;
+}
 .form-item-label {
   width: 135px;
 }
+.form-item-label-cn {
+  width: 85px;
+}
 </style>
 
 <template>
@@ -14,35 +23,32 @@
             <div class="title">{{ $t('createAccount.title') }}</div>
             <div class="form">
                 <div class="form-item">
-                    <label class="form-item-label">{{ $t('createAccount.select') }}</label>
-                    <div class="form-item-content" style="margin-left: 135px;">
-                        <select name="net" v-model="selected" @change="onChange()">
-                            <option value="mainnet">{{ $t('main.mainNet') }}</option>
-                            <option value="testnet">{{ $t('main.testNet') }}</option>
-                        </select>
+                    <label :class="formItemLabel">{{ $t('createAccount.select') }}</label>
+                    <div :class="formItemContent">
+                        <v-select :clearable="false" v-model="selected" style="height: 32px;font: 15;" :options="nets"></v-select>
                     </div>
                 </div>
                 <div class="form-item">
-                    <label class="form-item-label">{{ $t('createAccount.accountAlias') }}</label>
-                    <div class="form-item-content" style="margin-left: 135px;">
+                    <label :class="formItemLabel">{{ $t('createAccount.accountAlias') }}</label>
+                    <div :class="formItemContent">
                         <input type="text" v-model="formItem.accAlias" autofocus>
                     </div>
                 </div>
                 <div class="form-item">
-                    <label class="form-item-label">{{ $t('createAccount.keyAlias') }}</label>
-                    <div class="form-item-content" style="margin-left: 135px;">
+                    <label :class="formItemLabel">{{ $t('createAccount.keyAlias') }}</label>
+                    <div :class="formItemContent">
                         <input type="text" v-model="formItem.keyAlias">
                     </div>
                 </div>
                 <div class="form-item">
-                    <label class="form-item-label">{{ $t('createAccount.keyPassword') }}</label>
-                    <div class="form-item-content" style="margin-left: 135px;">
+                    <label :class="formItemLabel">{{ $t('createAccount.keyPassword') }}</label>
+                    <div :class="formItemContent">
                         <input type="password" v-model="formItem.passwd1">
                     </div>
                 </div>
                 <div class="form-item">
-                    <label class="form-item-label">{{ $t('createAccount.confirmPassword') }}</label>
-                    <div class="form-item-content" style="margin-left: 135px;">
+                    <label :class="formItemLabel">{{ $t('createAccount.confirmPassword') }}</label>
+                    <div :class="formItemContent">
                         <input type="password" v-model="formItem.passwd2">
                     </div>
                 </div>
@@ -57,14 +63,41 @@
 
 <script>
 import bytom from "../common/bytom";
+let mainNet = null;
+let testNet = null;
 export default {
   name: "",
   data() {
     return {
-      selected: 'mainnet',
+      nets: [],
+      selected: mainNet,
       formItem: {}
     };
   },
+  computed : {
+    formItemLabel: function() {
+      if (this.i18n == "cn") {
+        return "form-item-label form-item-label-cn";
+      } else if (this.i18n == "en") {
+        return "form-item-label";
+      }
+      return "form-item-label form-item-label-cn";
+    },
+    formItemContent: function() {
+      if (this.i18n == "cn") {
+        return "form-item-content content-cn";
+      } else if (this.i18n == "en") {
+        return "form-item-content content";
+      }
+      return "form-item-label form-item-label-cn";
+    }
+  },
+  props: {
+    i18n: {
+      type: String,
+      default: 'cn',
+    }
+  },
   methods: {
     create: function() {
       if (this.formItem.passwd1 != this.formItem.passwd2) {
@@ -99,15 +132,27 @@ export default {
     recover: function() {
       this.$emit("next");
     },
-    onChange() {
-      localStorage.bytomNet = this.selected;
-      bytom.System.setupNet(this.selected);
+  },
+  watch: {
+    selected: function(value) {
+      localStorage.bytomNet = value.value;
+      bytom.System.setupNet(value.value);
     }
   },
   mounted() {
+    mainNet = {label: this.$t('main.mainNet'), value: "mainnet"};
+    testNet = {label: this.$t('main.testNet'), value: "testnet"};
+    this.nets = [mainNet, testNet];
     if (localStorage.bytomNet != undefined) {
       bytom.System.setupNet(localStorage.bytomNet);
-      this.selected = localStorage.bytomNet;
+      if (localStorage.bytomNet == "mainnet") {
+        this.selected = mainNet;
+      } else if (localStorage.bytomNet == "testnet") {
+        this.selected = testNet;
+      }
+    } else {
+      this.selected = mainNet;
+      localStorage.bytomNet = "mainnet";
     }
   }
 };

diff --git a/src/assets/language/index.js b/src/assets/language/index.js
index 8ee0aa0..48f04f7 100644 (file)
--- a/src/assets/language/index.js
+++ b/src/assets/language/index.js
@@ -13,7 +13,7 @@ export function have(lang) {
     return false;
   }
   for (let i = 0; i < langSet.length; i++) {
-    if (lang == langSet) {
+    if (lang == langSet[i]) {
       return true;
     }
   }