refactor: update css

diff --git a/.gitignore b/.gitignore
index afa7492..1851560 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ dist/
 npm-debug.log
 yarn-error.log
 key.pem
+*.crx
 
 # Editor directories and files
 .idea

diff --git a/src/language/cn.js b/src/assets/language/cn.js
similarity index 100%
rename from src/language/cn.js
rename to src/assets/language/cn.js

diff --git a/src/language/en.js b/src/assets/language/en.js
similarity index 100%
rename from src/language/en.js
rename to src/assets/language/en.js

diff --git a/src/language/index.js b/src/assets/language/index.js
similarity index 100%
rename from src/language/index.js
rename to src/assets/language/index.js

diff --git a/src/assets/style.css b/src/assets/style.css
index 6530aad..3e82444 100644 (file)
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -189,16 +189,16 @@ hr {
   width: 100%;
   position: relative;
   display: inline-block;
-  font-size: 0.7rem;
+  font-size: 18px;
   font-weight: 400;
   font-family: inherit;
   text-decoration: none;
   text-align: center;
   margin: 0;
   background: #dddddd;
-  padding: 0 0.6rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
+  padding: 10px 20px;
+  height: 35px;
+  line-height: 18px;
   border-radius: 0.2rem;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -215,6 +215,10 @@ hr {
   color: #212121;
   background-color: #bdbdbd;
 }
+.btn-small {
+  width: 50%;
+  height: 50%;
+}
 .btn-primary {
   color: #ffffff;
   background-color: #282f38;
@@ -234,23 +238,42 @@ hr {
   cursor: pointer;
 }
 .btn-group {
-  padding: 5px 50px;
-  line-height: 45px;
+  padding: 0px 45px;
+  line-height: 55px;
+}
+
+.list {
+}
+
+.list-item {
+  padding: 5px 10px;
+}
+.list-item:active,
+.list-item:hover,
+.list-item.active {
+  background-color: #1bc1b0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.list-item i {
+  margin-right: 5px;
 }
 
 .form {
-  font-size: 14px;
+  font-size: 18px !important;
 }
 
 .form-item {
-  margin: 10px 0;
-  padding: 5px 10px;
+  margin: 15px 0;
+  padding: 0 10px;
   background-color: #282f38;
   border-radius: 5px;
 }
 
 .form-item label {
   display: inline-flex;
+  font-size: 16px;
+  line-height: 15px;
 }
 .form-item input {
   border: none;
@@ -259,11 +282,15 @@ hr {
   display: inline-block;
   width: 100%;
 }
+
+.form-item input,select {
+  font: 15px system-ui;
+}
+
 .form-item-label {
   text-align: right;
   vertical-align: middle;
   float: left;
-  font-size: 12px;
   line-height: 1;
   padding: 10px 12px 10px 0;
   box-sizing: border-box;
@@ -271,5 +298,4 @@ hr {
 .form-item-content {
   position: relative;
   line-height: 32px;
-  font-size: 12px;
 }

diff --git a/src/popup/dialog/component.vue b/src/popup/components/dialog/component.vue
similarity index 99%
rename from src/popup/dialog/component.vue
rename to src/popup/components/dialog/component.vue
index 15a190c..47e787d 100644 (file)
--- a/src/popup/dialog/component.vue
+++ b/src/popup/components/dialog/component.vue
@@ -48,7 +48,7 @@
 }
 
 .modal-footer {
-  height: 20px;
+  height: 35px;
 }
 
 .modal-enter .modal-container,

diff --git a/src/popup/dialog/index.js b/src/popup/components/dialog/index.js
similarity index 97%
rename from src/popup/dialog/index.js
rename to src/popup/components/dialog/index.js
index 600f705..8e2166e 100644 (file)
--- a/src/popup/dialog/index.js
+++ b/src/popup/components/dialog/index.js
@@ -1,5 +1,5 @@
-import dialog from "./component"
 import Vue from 'vue';
+import dialog from "./component"
 
 let instance;
 const dialogInstance = {

diff --git a/src/popup/components/menu-page/index.js b/src/popup/components/menu-page/index.js
new file mode 100644 (file)
index 0000000..41c2fb7
--- /dev/null
+++ b/src/popup/components/menu-page/index.js
@@ -0,0 +1,9 @@
+import MenuPage from "./page"
+
+const menuPageInstance = {
+  install: function (Vue, options) {
+    Vue.component('MenuPage', MenuPage);
+  },
+};
+
+export default menuPageInstance;
\ No newline at end of file

diff --git a/src/popup/components/menu-page/page.vue b/src/popup/components/menu-page/page.vue
new file mode 100644 (file)
index 0000000..9912b06
--- /dev/null
+++ b/src/popup/components/menu-page/page.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="mp bg-gray">
+        <div>
+            <i class="iconfont btn-close" @click="back">&#xe605;</i>
+            <div class="title">{{title}}</div>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: ""
+  },
+  methods: {
+    back() {
+      this.$emit("back");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mp {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 40px 30px;
+}
+.title {
+  font-size: 24px;
+  margin-bottom: 35px;
+}
+.content {
+  word-wrap: break-word;
+  font-size: 18px;
+}
+</style>
\ No newline at end of file

diff --git a/src/popup/home/components/menu-backup.vue b/src/popup/home/components/menu-backup.vue
index ab34b91..839e43d 100644 (file)
--- a/src/popup/home/components/menu-backup.vue
+++ b/src/popup/home/components/menu-backup.vue
@@ -1,20 +1,13 @@
 <style scoped>
-.content {
-  margin: 30px 0;
-  padding: 0 10px;
-}
+
 </style>
 
 <template>
-    <div class="mc2warp bg-gray">
-        <section>
-            <i class="iconfont btn-close" @click="back">&#xe605;</i>
-            <h3>备份种子</h3>
-        </section>
-        <section class="content">
-          <div class="btn bg-green" @click="backup">备份</div>
-        </section>
-    </div>
+    <MenuPage title="备份" @back="back">
+      <div style="text-align: center">
+        <div style="width: 200px;" class="btn bg-green" @click="backup">备份</div>
+      </div>
+    </MenuPage>
 </template>
 
 <script>

diff --git a/src/popup/home/components/menu-creation.vue b/src/popup/home/components/menu-creation.vue
index 7018291..0e19fc7 100644 (file)
--- a/src/popup/home/components/menu-creation.vue
+++ b/src/popup/home/components/menu-creation.vue
@@ -3,47 +3,44 @@
   margin: 50px 0;
 }
 .form-item .btn {
+  width: 200px;
   margin-top: 15px;
 }
 </style>
 
 <template>
-    <div class="mc2warp bg-gray">
-        <section>
-            <i class="iconfont btn-close" @click="back">&#xe605;</i>
-            <h3>创建账户</h3>
-        </section>
-        <section class="form">
+    <MenuPage title="创建账户" @back="back">
+      <div class="form">
           <div class="form-item">
             <label class="form-item-label">账户别名</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 76px;">
               <input type="text" v-model="formItem.accAlias">
             </div>
           </div>
           <div class="form-item">
             <label class="form-item-label">密钥别名</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 76px;">
               <input type="text" v-model="formItem.keyAlias">
             </div>
           </div>
           <div class="form-item">
             <label class="form-item-label">密钥密码</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 76px;">
               <input type="password" v-model="formItem.passwd1">
             </div>
           </div>
           <div class="form-item">
             <label class="form-item-label">重复密码</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 76px;">
               <input type="password" v-model="formItem.passwd2">
             </div>
           </div>
           <div class="tips">{{tips}}</div>
-          <div class="form-item bg-gray">
+          <div class="form-item bg-gray" style="text-align: center">
             <div class="btn bg-green" @click="create">创建账户</div>
           </div>
-        </section>
-    </div>
+        </div>
+    </MenuPage>
 </template>
 
 <script>
@@ -97,7 +94,7 @@ export default {
           loader.hide();
           this.$dialog.show({
             header: "提示",
-            body: err.message,
+            body: err.message
           });
           // this.tips = err.message;
         });

diff --git a/src/popup/home/components/menu-help.vue b/src/popup/home/components/menu-help.vue
index 71606fb..e8b610b 100644 (file)
--- a/src/popup/home/components/menu-help.vue
+++ b/src/popup/home/components/menu-help.vue
@@ -1,22 +1,11 @@
 <style scoped>
-.content {
-  margin: 50px 0;
-  word-wrap: break-word;
-  font-size: 14px;
-}
 </style>
 
 <template>
-    <div class="mc2warp bg-gray">
-        <section>
-            <i class="iconfont btn-close" @click="back">&#xe605;</i>
-            <h3>{{ $t("help.title") }}</h3>
-        </section>
-        <section class="content">
-          <p>{{ $t("help.page") }}</p>
-          <a href="http://github.com/bytom/bytom/wiki" target="_blank">http://github.com/bytom/bytom/wiki</a>
-        </section>
-    </div>
+    <MenuPage :title="$t('help.title')" @back="back">
+        <p>{{ $t("help.page") }}</p>
+        <a href="http://github.com/bytom/bytom/wiki" target="_blank">http://github.com/bytom/bytom/wiki</a>
+    </MenuPage>
 </template>
 
 <script>

diff --git a/src/popup/home/components/menu-recovery.vue b/src/popup/home/components/menu-recovery.vue
index 69dd7a3..bc5e99a 100644 (file)
--- a/src/popup/home/components/menu-recovery.vue
+++ b/src/popup/home/components/menu-recovery.vue
@@ -8,18 +8,12 @@ input {
 </style>
 
 <template>
-    <div class="mc2warp bg-gray">
-        <section>
-            <i class="iconfont btn-close" @click="back">&#xe605;</i>
-            <h3>导入账户</h3>
-        </section>
-        <section class="body">
-          <div class="form-item">
-              <input type="file" ref="file" @change="tirggerFile($event)">
-          </div>
-          <div class="btn bg-green" @click="recovery">从种子导入</div>
-        </section> 
+  <MenuPage title="导入账户" @back="back">
+    <div class="form-item">
+        <input type="file" ref="file" @change="tirggerFile($event)">
     </div>
+    <div class="btn bg-green" @click="recovery">从种子导入</div>
+  </MenuPage>
 </template>
 
 <script>

diff --git a/src/popup/home/components/menu-settings.vue b/src/popup/home/components/menu-settings.vue
index 84d436e..be91b9c 100644 (file)
--- a/src/popup/home/components/menu-settings.vue
+++ b/src/popup/home/components/menu-settings.vue
@@ -1,39 +1,33 @@
 <style scoped>
-.content{
-    margin: 50px 0;
-  font-size: 14px;
+.row {
+  margin: 25px 0;
 }
-.content div{
-    margin: 20px 0;
+.value {
+  font-size: 15px;
+  line-height: 30px;
 }
 </style>
 
 <template>
-    <div class="mc2warp bg-gray">
-        <section>
-            <i class="iconfont btn-close" @click="back">&#xe605;</i>
-            <h3>{{ $t("setting.title") }}</h3>
-        </section>
-        <section class="content">
-            <div>
-                <p>{{ $t("setting.version") }}</p>
-                <p>1.0.1-2c74b9a</p>
-            </div>
-            <div>
-                <p>{{ $t("setting.lang") }}</p>
-                <select v-model="selected" @change="onChange()">
-                    <option value="cn">中文</option>
-                    <option value="en">English</option>
-                </select>
-            </div>
-            <div>
-                <p>{{ $t("setting.unit") }}</p>
-                <select name="" id="">
-                    <option value="">BTM</option>
-                </select>
-            </div>
-        </section>
-    </div>
+    <MenuPage :title="$t('setting.title')" @back="back">
+        <div class="row">
+            <p>{{ $t("setting.version") }}</p>
+            <p class="value">1.0.1-2c74b9a</p>
+        </div>
+        <div class="row">
+            <p>{{ $t("setting.lang") }}</p>
+            <select class="value" v-model="selected" @change="onChange()">
+                <option value="cn">中文</option>
+                <option value="en">English</option>
+            </select>
+        </div>
+        <div class="row">
+            <p>{{ $t("setting.unit") }}</p>
+            <select class="value">
+                <option value="">BTM</option>
+            </select>
+        </div>
+    </MenuPage>
 </template>
 
 <script>
@@ -41,7 +35,7 @@ export default {
   name: "",
   data() {
     return {
-      selected: 'cn'
+      selected: "cn"
     };
   },
   methods: {
@@ -54,7 +48,7 @@ export default {
     },
     close: function() {
       this.$emit("on-exit");
-    },
+    }
   },
   mounted: function() {
     if (localStorage.lang) {

diff --git a/src/popup/home/components/transfer.vue b/src/popup/home/components/transfer.vue
index 892c7b1..4ea5fe7 100644 (file)
--- a/src/popup/home/components/transfer.vue
+++ b/src/popup/home/components/transfer.vue
@@ -11,24 +11,22 @@
   height: 150px;
 }
 .balance {
-  display: flex;
-  position: absolute;
-  right: 0px;
-  margin: 30px 50px;
+  text-align: center;
+  margin-top: 15px;
 }
 .balance .token-icon {
-  height: 30px;
-  width: 30px;
-  line-height: 35px;
+  height: 38px;
+  width: 38px;
+  margin-right: 5px;
 }
-.balance h1 {
-  font-size: 38px;
-  line-height: 32px;
-  margin-left: 10px;
+.balance .token-amount {
+  display: inline-block;
+  font-size: 45px;
+  line-height: 45px;
 }
-.balance span {
-  line-height: 42px;
-  margin-left: 3px;
+.balance .token-amount .asset {
+  font-size: 18px;
+  margin-left: 2px;
 }
 .mask {
   z-index: 3 !important;
@@ -54,9 +52,10 @@
 
 .btn-inline {
   display: flex;
+  padding: 0;
 }
 .btn-inline .btn {
-  margin: 0 10px;
+  margin: 10px 15px;
 }
 </style>
 
@@ -67,15 +66,13 @@
       leave-active-class="animated fadeOutLeft faster">
       <div v-show="show" class="warp bg-gray">
         <section class="header bg-green">
-            <i class="iconfont icon-back" @click="show=false; confirmClose()"></i>
-            <div class="balance">
-              <img src="../../../assets/logo.png" class="token-icon">
-              <div style="display: flex">
-                <h1>{{balance}}</h1>
-                <span> BTM</span>
-              </div>
-            </div>
+          <i class="iconfont icon-back" @click="show=false; confirmClose()"></i>
+          <div class="balance">
+            <img src="../../../assets/logo.png" class="token-icon">
+            <div class="token-amount">{{balance}}<span class="asset">BTM</span></div>
+          </div>
         </section>
+        
         <section v-show="maskShow" class="mask"></section>
         <section class="form">
           <div class="form-item-group">
@@ -94,15 +91,15 @@
           </div>
           <div class="form-item">
             <label class="form-item-label">地址</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 80px;">
               <input type="text" v-model="transaction.to">
             </div>
           </div>
           <div class="form-item">
             <label class="form-item-label">数量</label>
-            <div class="form-item-content" style="margin-left: 60px; display: flex;">
+            <div class="form-item-content" style="margin-left: 80px; display: flex;">
               <input type="text" v-model="transaction.amount">
-              <span style="width: 30px;">{{unit}}</span>
+              <span style="width: 40px; font-size: 15px;">{{unit}}</span>
             </div>
           </div>
           <!-- <div class="form-item">
@@ -112,20 +109,14 @@
           </div> -->
           <div class="form-item">
             <label class="form-item-label">矿工费用</label>
-            <div class="form-item-content" style="margin-left: 60px;">
+            <div class="form-item-content" style="margin-left: 80px;">
               <select v-model="transaction.fee">
                 <option value="">标准</option>
               </select>
             </div>
           </div>
           <br>
-          <div class="form-item">
-            <label class="form-item-label">交易密码</label>
-            <div class="form-item-content" style="margin-left: 60px;">
-              <input type="password" v-model="transaction.passwd">
-            </div>
-          </div>
-          <div class="btn-group">
+          <div style="width: 200px; margin: 0 auto;">
             <div class="btn bg-green" @click="confirmOpen">发送交易</div>
           </div>
         </section>
@@ -138,8 +129,8 @@
         <div v-show="confirmShow" class="confirm form bg-gray">
             <div class="form-item">
               <label class="form-item-label">密码确认</label>
-              <div class="form-item-content" style="margin-left: 60px;">
-                <input type="password" v-model="confirmPasssword" autofocus>
+              <div class="form-item-content" style="margin-left: 85px;">
+                <input type="password" v-model="transaction.passwd" autofocus>
               </div>
             </div>
             <div class="btn-group btn-inline">
@@ -165,7 +156,6 @@ export default {
       balance: 0,
       accounts: [],
       unit: "单位",
-      confirmPasssword: "",
       assets: {
         ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
       },
@@ -203,10 +193,10 @@ export default {
       this.maskShow = false;
     },
     confirmTransfer: function() {
-      if (this.confirmPasssword != this.transaction.passwd) {
+      if (this.transaction.passwd != "") {
         this.$dialog.show({
           header: "提示",
-          body: "密码不一致",
+          body: "密码不能为空"
         });
         return;
       }
@@ -227,22 +217,20 @@ export default {
       )
         .then(ret => {
           console.log(ret);
-          
+
           loader.hide();
           this.close();
           this.confirmClose();
           this.$emit("on-success");
-          this.confirmPasssword = "";
           this.transaction.passwd = "";
         })
         .catch(error => {
           loader.hide();
           this.confirmClose();
           this.transaction.passwd = "";
-          this.confirmPasssword = "";
           this.$dialog.show({
             header: "提示",
-            body: error.message,
+            body: error.message
           });
         });
     }

diff --git a/src/popup/home/main.vue b/src/popup/home/main.vue
index 30a177d..8323994 100644 (file)
--- a/src/popup/home/main.vue
+++ b/src/popup/home/main.vue
@@ -2,66 +2,75 @@
 .warp {
   z-index: 1;
 }
-.account {
-  font-size: 18px;
+
+.topbar {
+  font-size: 19px;
+}
+.topbar .topbar-left {
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 20px;
+  padding-left: 20px;
 }
-.account .btn-menu {
+.topbar-left .btn-menu {
   float: left;
-  margin: 20px 8px 0 20px;
+  margin-right: 8px;
 }
-.account .btn-toggle {
+.topbar-left .btn-menu i {
+  font-size: 100%;
+}
+.topbar-left .alias {
+  height: 25px;
+  font-size: 19px;
+  line-height: 28px;
+}
+
+.topbar .topbar-right {
   float: right;
-  margin-top: 15px;
+  margin-top: 20px;
   margin-right: 20px;
   border: 2px solid #fff;
   border-radius: 18px;
   padding: 0 10px;
-  font-size: 12px;
+  font: 12px system-ui;
   text-align: center;
 }
 
-.lamp {
+.topbar-right .lamp {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   background-color: #02f823;
+  margin-right: 2px;
+  position: relative;
+  top: -2px;
 }
 
-.account .alias {
-  height: 25px;
-}
-.account span {
-  display: block;
-  padding-top: 20px;
-  font-size: 18px;
-  font-weight: bold;
-  width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.balance {
+.content {
   margin-top: 20px;
   text-align: center;
   padding: 0 30px 20px;
 }
-.balance .token-icon {
+.content .token-icon {
   display: inline-flex;
   height: 40px;
   width: 40px;
-  /* background: #fff; */
-  /* border: 1px solid #dedede; */
-  /* border-radius: 25px; */
   padding: 8px;
   margin: 8px;
 }
-.balance .amount {
+.content .amount {
   padding-bottom: 10px;
 }
-.balance .token-amount {
-  font-size: 32px;
+.content .token-amount {
+  font-size: 45px;
+  line-height: 45px;
+}
+.token-amount .asset {
+  font-size: 18px;
+  margin-left: 2px;
 }
 .qrcode {
   margin-left: 5px;
@@ -70,26 +79,25 @@
 }
 .btn-transfer {
   width: 200px;
-  font-size: 20px;
-  line-height: 22px;
-  height: 40px;
-  line-height: 40px;
+  /* font-size: 20px; */
+  /* line-height: 22px; */
+  /* height: 40px; */
 }
 
 .transactions {
-  font-size: 14px;
+  font-size: 15px;
   /* line-height: 40px; */
   /* display: contents; */
 }
 .transactions h3 {
-  padding: 10px;
-  margin: 0;
+  font-size: 18px;
+  font-weight: inherit;
   color: #cacaca;
+  text-align: center;
+  padding: 5px 0;
 }
 .transactions .list {
   padding: 0 10px;
-  /* overflow-y: scroll; */
-  
 }
 .list-item {
   display: block;
@@ -114,21 +122,23 @@
 <template>
   <div class="warp">
     <section class="bg-green">
-      <div class="row account">
-          <a class="btn-menu" href="#"><i class="iconfont icon-menu" @click="$refs.menu.open()"></i></a>
-          <span class="btn-toggle">
+      <div class="topbar">
+          <div class="topbar-right">
             <i class="lamp"></i>
             <select v-model="network" @change="netToggle">
               <option value="mainnet">BYTOM主网络</option>
               <option value="testnet">BYTOM测试网络</option>
             </select>
-          </span>
-          <span class="alias">{{accountInfo.alias}}</span>
+          </div>
+          <div class="topbar-left">
+            <a class="btn-menu" href="#"><i class="iconfont icon-menu" @click="$refs.menu.open()"></i></a>
+            <span class="alias">{{accountInfo.alias}}</span>
+          </div>
       </div>
-      <div class="row balance">
+      <div class="content">
           <img src="../../assets/logo.png" class="token-icon">
           <div v-if="accountInfo.address!=undefined" class="amount">
-              <div class="token-amount">{{accountInfo.balance}} BTM</div>
+              <div class="token-amount">{{accountInfo.balance}}<span class="asset">BTM</span></div>
               <p class="account-address">
                 <span class="address-text" :title="addressTitle" :data-clipboard-text="accountInfo.address">{{accountInfo.address_short}}</span>
                 <i class="iconfont qrcode" @click="showQrcode">&#xe7dd;</i>
@@ -264,35 +274,34 @@ export default {
         return;
       }
 
-      bytom.Transaction.list(
-        this.accountInfo.guid,
-        this.accountInfo.address
-      ).then(ret => {
-        let transactions = ret.data.transactions;
-        if (transactions == null) {
-          this.transcations = [];
-          return;
-        }
+      bytom.Transaction.list(this.accountInfo.guid, this.accountInfo.address)
+        .then(ret => {
+          let transactions = ret.data.transactions;
+          if (transactions == null) {
+            this.transcations = [];
+            return;
+          }
 
-        this.transcationsFormat(transactions);
-        console.log("formatTx", transactions);
-        this.transcations = transactions;
-      }).catch(error => {
-        console.log(error);
-      });
+          this.transcationsFormat(transactions);
+          console.log("formatTx", transactions);
+          this.transcations = transactions;
+        })
+        .catch(error => {
+          console.log(error);
+        });
     }
   },
   mounted() {
     this.network = localStorage.bytomNet;
     this.refreshTransactions();
 
-    this.clipboard.on("success", (e) => {
+    this.clipboard.on("success", e => {
       this.$dialog.show({
         header: this.$t("dialog.header"),
         body: this.$t("dialog.copy.success"),
       });
     });
-    this.clipboard.on("error", (e) => {
+    this.clipboard.on("error", e => {
       this.$dialog.show({
         header: this.$t("dialog.header"),
         body: this.$t("dialog.copy.fail"),

diff --git a/src/popup/home/menu.vue b/src/popup/home/menu.vue
index 9d66145..2d48a7c 100644 (file)
--- a/src/popup/home/menu.vue
+++ b/src/popup/home/menu.vue
@@ -1,11 +1,4 @@
 <style scoped>
-.btn-close {
-  color: #ffffff;
-  font-weight: bold;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
 .mc-wrap {
   position: fixed;
   top: 0;
@@ -13,94 +6,81 @@
   right: 0;
   bottom: 0;
   z-index: 9999;
-  width: 60%;
+  width: 55%;
   height: 100%;
   padding: 40px;
   background-color: #3c454b;
 }
-
-.mc2warp {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 40px;
-}
-.account-list {
+.accounts {
   width: 100%;
-  height: 230px;
+  height: 200px;
   overflow-x: hidden;
   overflow-y: scroll;
+  margin-bottom: 25px;
 }
-.account-list::-webkit-scrollbar {
+.accounts::-webkit-scrollbar {
   display: none;
 }
-.account-list ul {
-  margin-top: 30px;
-}
-.account-list i {
-  font-size: 28px;
-  line-height: 45px;
-  margin-right: 18px;
+.accounts i {
+  font-size: 24px;
 }
 
-ul {
-  display: grid;
+.menu {
+  border-top: 1px solid #c9c9c9;
+  padding-top: 15px;
 }
-ul li {
-  display: flex;
-  padding: 5px 0;
-}
-li i {
-  margin: 0 8px;
+.account {
+  width: 150px;
+  display: inline-block;
+  vertical-align: middle;
 }
-.acc-alias {
+.account-alias {
   width: 150px;
+  font-size: 19px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.account-asset {
+  font-size: 15px;
+}
 </style>
 
 <template>
 <div>
   <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
   <div v-show="maskShow" class="mask"></div>
-    <transition name="left-menu" 
+    <transition name="left-menu" v-on:after-leave="close"
         enter-active-class="animated slideInLeft faster" 
-        leave-active-class="animated slideOutLeft faster" 
-        v-on:after-leave="close">
-      <div v-show="show" class="mc-wrap bg-gray">
-        <section>
-          <i class="iconfont btn-close" @click="close">&#xe605;</i>
-          <h3>账号切换</h3>
-        </section>
-        <section class="account-list">
-          <ul>
-            <!--  class="active" -->
-            <div v-for="(account, index) in accounts" :key="index">
-                <li :class="(currentAccount != undefined && account.address == currentAccount.address) ? 'active': ''" @click="accountSelected(account)">
-                  <i class="iconfont icon-user"></i>
-                  <div>
-                      <p v-if="account.alias" class="acc-alias">{{account.alias}}</p>
-                      <p v-else>账户{{index+1}}</p>
-                      <p>{{account.balance}} BTM</p>
-                  </div>
-              </li>
+        leave-active-class="animated slideOutLeft faster">
+      <div v-show="show" class="mc-wrap">
+        <MenuPage title="账号切换" @back="close">
+          <div class="list accounts">
+            <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
+              <div :class="(currentAccount != undefined && account.address == currentAccount.address) ? 'list-item active': 'list-item'">
+                <i class="iconfont icon-user"></i>
+                <div class="account">
+                    <div class="account-alias">{{account.alias}}</div>
+                    <div class="account-asset">{{account.balance}} BTM</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="list menu">
+            <div class="list-item" @click="currView='creation'">
+              <i class="iconfont icon-plusbox"></i>创建账户
             </div>
-          </ul>
-        </section>
-        <hr>
-        <section class="menu-list">
-            <ul>
-                <li @click="currView='creation'"><i class="iconfont icon-plusbox"></i>创建账户</li>
-                <!-- <li @click="currView='recovery'"><i class="iconfont icon-import"></i>导入账号</li> -->
-                <li @click="currView='backup'"><i class="iconfont icon-backup"></i>备份</li>
-                <li @click="currView='help'"><i class="iconfont icon-help"></i>帮助</li>
-                <li @click="currView='settings'"><i class="iconfont icon-settings"></i>设置</li>
-            </ul>
-        </section>
+            <div class="list-item" @click="currView='backup'">
+              <i class="iconfont icon-backup"></i>备份
+            </div>
+            <div class="list-item" @click="currView='help'">
+              <i class="iconfont icon-help"></i>帮助
+            </div>
+            <div class="list-item" @click="currView='settings'">
+              <i class="iconfont icon-settings"></i>设置
+            </div>
+          </div>
+        </MenuPage>
 
         <!-- child-page -->
         <div>
@@ -187,7 +167,7 @@ export default {
           this.$emit("accounts-clear");
           return;
         }
-        
+
         if (localStorage.currentAccount != undefined) {
           this.currentAccount = JSON.parse(localStorage.currentAccount);
         } else {

diff --git a/src/popup/index.js b/src/popup/index.js
index 2f1ecb0..303ca0f 100644 (file)
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -1,39 +1,43 @@
 import Vue from "vue";
 import App from "./App.vue";
-import Loading from 'vue-loading-overlay';
 import moment from "moment";
-import vuescroll from 'vuescroll/dist/vuescroll-native';
-import 'vuescroll/dist/vuescroll.css';
+import Loading from "vue-loading-overlay";
+import vuescroll from "vuescroll/dist/vuescroll-native";
+import Dialog from "./components/dialog";
+import MenuPage from "./components/menu-page";
+import VueI18n from "vue-i18n";
+import messages from "../assets/language";
 import "../assets/style.css";
-import 'vue-loading-overlay/dist/vue-loading.css';
-import Dialog from "./dialog/index"
-import VueI18n from 'vue-i18n'
-import messages from '../language'
+import "vuescroll/dist/vuescroll.css";
+import "vue-loading-overlay/dist/vue-loading.css";
 
-Vue.use(VueI18n);
-Vue.use(Loading);
 Vue.use(vuescroll);
 Vue.use(Dialog);
+Vue.use(MenuPage);
+Vue.use(Loading);
+Vue.use(VueI18n);
 Vue.prototype.$vuescrollConfig = {
   bar: {
-    mode: 'pure-native',
+    mode: "pure-native",
     keepShow: true,
-    background: '#c9c9c9'
+    background: "#c9c9c9"
   }
 };
 Vue.filter("moment", function(value, formatString) {
   formatString = formatString || "YYYY-MM-DD HH:mm:ss";
   return moment(value * 1000).format(formatString);
 });
-let lang = 'en';
-if(localStorage.lang) {
+
+let lang = "cn";
+if (localStorage.lang) {
   lang = localStorage.lang;
 }
 const i18n = new VueI18n({
-  fallbackLocale: 'en',
+  fallbackLocale: "en",
   locale: lang,
-  messages,
-})
+  messages
+});
+
 new Vue({
   el: "#app",
   i18n: i18n,

diff --git a/src/popup/login/components/form-addon.vue b/src/popup/login/components/form-addon.vue
index 6aa2fe0..5c067e6 100644 (file)
--- a/src/popup/login/components/form-addon.vue
+++ b/src/popup/login/components/form-addon.vue
@@ -8,11 +8,11 @@
             <img src="../../../assets/logo.png">
         </section>
         <section class="login-content">
-            <h4>创建账户</h4>
+            <div class="title">创建账户</div>
             <div class="form">
                 <div class="form-item">
                     <label class="form-item-label">选择网络</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 75px;">
                         <select name="net" v-model="selected" @change="onChange()">
                             <option value="mainnet">BYTOM主网络</option>
                             <option value="testnet">BYTOM测试网络</option>
@@ -21,25 +21,25 @@
                 </div>
                 <div class="form-item">
                     <label class="form-item-label">账户别名</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 76px;">
                         <input type="text" v-model="formItem.accAlias" autofocus>
                     </div>
                 </div>
                 <div class="form-item">
                     <label class="form-item-label">密钥别名</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 76px;">
                         <input type="text" v-model="formItem.keyAlias">
                     </div>
                 </div>
                 <div class="form-item">
                     <label class="form-item-label">密钥密码</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 76px;">
                         <input type="password" v-model="formItem.passwd1">
                     </div>
                 </div>
                 <div class="form-item">
                     <label class="form-item-label">重复密码</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 76px;">
                         <input type="password" v-model="formItem.passwd2">
                     </div>
                 </div>

diff --git a/src/popup/login/components/form-recover.vue b/src/popup/login/components/form-recover.vue
index 6c9fb4e..2b242c9 100644 (file)
--- a/src/popup/login/components/form-recover.vue
+++ b/src/popup/login/components/form-recover.vue
@@ -7,11 +7,11 @@
             <img src="../../../assets/logo.png">
         </section>
         <section class="login-content">
-            <h4>从种子导入</h4>
+            <div class="title">从种子导入</div>
             <div class="form">
                 <div class="form-item">
                     <label class="form-item-label">备份文件</label>
-                    <div class="form-item-content" style="margin-left: 60px;">
+                    <div class="form-item-content" style="margin-left: 75px;">
                       <input type="file" @change="tirggerFile($event)">
                     </div>
                 </div>

diff --git a/src/popup/login/components/protocol.vue b/src/popup/login/components/protocol.vue
index 8d9841b..201a83a 100644 (file)
--- a/src/popup/login/components/protocol.vue
+++ b/src/popup/login/components/protocol.vue
@@ -1,10 +1,7 @@
 <style scoped>
-.login-content {
-  height: 414px;
-  font-size: 12px;
-}
-.login-footer {
-  padding: 20px 85px;
+.protocol {
+  height: 385px;
+  /* font-size: 12px; */
 }
 </style>
 <template>
@@ -12,12 +9,12 @@
         <section class="login-header bg-green">
             <img src="../../../assets/logo.png">
         </section>
-        <section class="login-content">
-            <h4>钱包使用条款</h4>
+        <section class="login-content protocol">
+            <div class="title">钱包使用条款</div>
             <p>1.是范德萨发</p>
         </section>
-        <section class="login-footer bg-green">
-            <div class="btn btn-primary" @click="confirm">确认</div>
+        <section class="welcome-bottom bg-green">
+            <div class="btn btn-primary btn-startup" @click="confirm">确认</div>
         </section>
     </div>
 </template>

diff --git a/src/popup/login/components/welcome.vue b/src/popup/login/components/welcome.vue
index 7898129..13b3735 100644 (file)
--- a/src/popup/login/components/welcome.vue
+++ b/src/popup/login/components/welcome.vue
@@ -1,19 +1,27 @@
-<style scoped>
+<style>
 .welcome-top {
-  height: 534px;
+  height: 505px;
   text-align: center;
-  font-size: 15px;
-  background: url('../../../assets/welcome.jpeg') no-repeat;
+  font-size: 18px;
+  background: url("../../../assets/welcome.jpeg") no-repeat;
   background-size: 100%;
 }
 .welcome-top p {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 70px;
+  bottom: 100px;
 }
 .welcome-bottom {
-  padding: 20px 85px;
+  height: 95px;
+}
+.btn-startup {
+  width: 200px;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
 }
 </style>
 
@@ -23,7 +31,7 @@
             <p>欢迎使用BYTOM精简Chrome钱包</p>
         </section>
         <section class="welcome-bottom bg-green">
-            <div class="btn btn-primary" @click="start">开始使用</div>
+            <div class="btn btn-primary btn-startup" @click="start">开始使用</div>
         </section>
     </div>
 </template>
@@ -35,9 +43,9 @@ export default {
     return {};
   },
   methods: {
-      start: function(){
-          this.$emit("next")
-      }
+    start: function() {
+      this.$emit("next");
+    }
   }
 };
 </script>
\ No newline at end of file

diff --git a/src/popup/login/main.vue b/src/popup/login/main.vue
index cc8916f..3a23d43 100644 (file)
--- a/src/popup/login/main.vue
+++ b/src/popup/login/main.vue
@@ -17,11 +17,11 @@
 }
 .login-content {
   padding: 30px;
-  font-size: 12px;
 }
-.login-content h4 {
+.login-content .title {
   text-align: center;
-  font-size: 18px;
+  font-size: 24px;
+  margin-bottom: 20px;
 }
 .login-footer {
   padding: 20px 85px;