更新weui2.0.0

package.json

@@ -17,7 +17,7 @@
     "vue": "^2.6.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
-    "weui": "^1.1.3"
+    "weui": "^2.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",

src/assets/css/common.css

@@ -224,3 +224,29 @@ html {
   height: 100%;
   /* overflow: scroll; */
 }
+
+/* 🔥 👉 修改 input or textarea 的placeholder样式 */
+/*
+ *  - [修改input里placeholder颜色](https://blog.csdn.net/AmberWu/article/details/54909451 )
+ *  - [HTML input placeholder的样式设置](https://blog.csdn.net/qinjm8888/article/details/79047638)
+ */
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: #999;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #999;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #999;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: #999;
+}

src/assets/css/wechat.css

@@ -154,4 +154,59 @@
 .mh-input__wrapper .mh-input:valid + .mh-input-clear {
   display: block;
 }
-/* --------👆 input End 👆--------*/
+/* --------👆 input End 👆--------*/
+
+.mh-btn {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 14px;
+  padding-right: 14px;
+  box-sizing: border-box;
+  font-size: 18px;
+  text-align: center;
+  text-decoration: none;
+  color: #ffffff;
+  line-height: 44px;
+  border-radius: 4px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  overflow: hidden;
+}
+.mh-btn:after {
+  content: " ";
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+
+.mh-btn_primary {
+  background-color: rgb(90, 200, 110);
+}
+.mh-btn_primary:not(.mh-btn_disabled):visited {
+  color: #ffffff;
+}
+.mh-btn_primary:not(.mh-btn_disabled):active {
+  color: rgba(255, 255, 255, 0.6);
+  background-color: #179b16;
+}
+
+.mh-btn_disabled {
+  color: rgba(255, 255, 255, 0.6);
+}
+.mh-btn_disabled.mh-btn_default {
+  color: rgba(0, 0, 0, 0.3);
+  background-color: #f7f7f7;
+}
+.mh-btn_disabled.mh-btn_primary {
+  background-color: #9ed99d;
+}

src/main.js

@@ -51,6 +51,7 @@ MHPreferenceSettingHelper.initialize()
 //   router.replace('/mainframe')
 // }
 
+
 // 记录样式
 router.afterEach((to, from) => {
   // ...

src/router.js

@@ -33,10 +33,14 @@ import ContactInfo from './views/contacts/ContactInfo.vue'
 // 资料设置
 import DataSetting from './views/contacts/DataSetting.vue'
 
+// 登陆界面
+const Login = resolve => require(['./views/login/Login.vue'], resolve)
 // 当前账号登陆
 import CurrentLogin from './views/login/CurrentLogin.vue'
 // 其他账号登陆
 import OtherLogin from './views/login/OtherLogin.vue'
+// 语言选择
+import LanguagePicker from './views/login/languagePicker/LanguagePicker.vue';
 
 // 主页
 const Homepage = resolve => require(['./views/homepage/Homepage.vue'], resolve)
@@ -51,7 +55,7 @@ export default new Router({
   routes: [
     {
       path: '/',
-      redirect: '/homepage'
+      redirect: '/login'
     },
     {
       path: '/homepage',
@@ -104,11 +108,21 @@ export default new Router({
       name: 'current-login',
       component: CurrentLogin
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
     {
       path: '/test',
       name: 'test',
       component: Test
     },
+    {
+      path: '/language-picker',
+      name: 'LanguagePicker',
+      component: LanguagePicker
+    },
     {
       path: '/current-login/other-login',
       name: 'other-login',

src/views/login/CurrentLogin.vue

@@ -88,8 +88,8 @@
           class="mh-btn mh-btn_primary"
           :class="{ 'mh-btn_disabled': loginBtnDisabled }"
           @click="login"
-          >登录</a
-        >
+          >登录
+        </a>
       </div>
       <!-- 底部更多面板 -->
       <div class="mh-current-login__more">
@@ -360,61 +360,6 @@ export default {
   padding: 0 16px;
 }
 
-.mh-btn {
-  position: relative;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 14px;
-  padding-right: 14px;
-  box-sizing: border-box;
-  font-size: 18px;
-  text-align: center;
-  text-decoration: none;
-  color: #ffffff;
-  line-height: 2.55555556;
-  border-radius: 5px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  overflow: hidden;
-}
-.mh-btn:after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-transform: scale(0.5);
-  transform: scale(0.5);
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: 10px;
-}
-
-.mh-btn_primary {
-  background-color: #1aad19;
-}
-.mh-btn_primary:not(.mh-btn_disabled):visited {
-  color: #ffffff;
-}
-.mh-btn_primary:not(.mh-btn_disabled):active {
-  color: rgba(255, 255, 255, 0.6);
-  background-color: #179b16;
-}
-
-.mh-btn_disabled {
-  color: rgba(255, 255, 255, 0.6);
-}
-.mh-btn_disabled.mh-btn_default {
-  color: rgba(0, 0, 0, 0.3);
-  background-color: #f7f7f7;
-}
-.mh-btn_disabled.mh-btn_primary {
-  background-color: #9ed99d;
-}
-
 /* 获取验证码 */
 .captcha-btn {
   border: 1px solid #353535;

src/views/login/Login.vue

@@ -1,15 +1,87 @@
 <template>
-  <div></div>
+  <div class="_full-container">
+    <div class="_full-content">
+      <!-- 背景图片 -->
+      <div class="background-image"></div>
+      <!-- 语言按钮 -->
+      <a href="javascript:;" class="language" @click="skipToLanguageList"
+        >中文简体</a
+      >
+
+      <div class="login-register">
+        <!-- 登陆按钮 -->
+        <a href="javascript:;" class="mh-btn mh-btn_primary login">登录</a>
+        <!-- 注册按钮 -->
+        <a href="javascript:;" class="mh-btn mh-btn_primary register">注册</a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-// 用户第一次使用微信时的登陆界面
+// 用户第一次使用微信时的登陆界面 [登陆/注册]
 export default {
   name: "login",
   data() {
     return {};
+  },
+  methods: {
+    skipToLanguageList() {
+      this.$router.push({
+        name: "LanguagePicker",
+        params: {
+          language: "简体中文"
+        }
+      });
+    }
   }
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.background-image {
+  width: 100%;
+  height: 100%;
+  background-image: url("~@/assets/images/login/BootImage_375x667.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.language {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.7);
+  top: 20px;
+  right: 20px;
+  display: block;
+  font-size: 12px;
+  text-align: right;
+}
+
+.login-register {
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.login,
+.register {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  height: 44px;
+}
+.login {
+  margin-right: 10px;
+  background-color: #fff;
+  color: #57be6a;
+}
+
+.register {
+  margin-left: 10px;
+}
+</style>