From 0021da419744ff48eb4f3ac7522198915459439a Mon Sep 17 00:00:00 2001
From: CoderMikeHe <491273090@qq.com>
Date: Mon, 3 Jun 2019 18:22:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E9=99=86=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |   4 +-
 src/assets/css/wechat.css                  |  59 ++++++++
 src/assets/images/input/input_clear.png    | Bin 0 -> 573 bytes
 src/main.js                                |  37 +++++-
 src/views/discover/moments/Moments.vue     |  53 ++------
 src/views/discover/moments/css/moments.css |  34 +++--
 src/views/login/CurrentLogin.vue           | 148 ++++++++++++---------
 src/views/login/Login.vue                  |  15 +++
 8 files changed, 222 insertions(+), 128 deletions(-)
 create mode 100644 src/assets/images/input/input_clear.png
 create mode 100644 src/views/login/Login.vue

diff --git a/src/App.vue b/src/App.vue
index 49dac0c..11d7cc4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,9 @@
       :enter-active-class="enterAnimate"
       :leave-active-class="leaveAnimate"
     >
-      <!-- 按需加载路由：- [另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新](https://segmentfault.com/a/1190000012083511) -->
+      <!-- 🔥按需加载路由：- [另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新](https://segmentfault.com/a/1190000012083511) -->
+      <!-- - [vue-router 之 keep-alive](https://www.jianshu.com/p/0b0222954483) -->
+      <!-- - [<keep-alive>组件缓存问题](https://github.com/vuejs/vue-router/issues/811) -->
       <keep-alive>
         <!-- 这里是会被缓存的视图组件 -->
         <router-view v-if="$route.meta.keepAlive"></router-view>
diff --git a/src/assets/css/wechat.css b/src/assets/css/wechat.css
index bcea7e6..6e4e4ce 100644
--- a/src/assets/css/wechat.css
+++ b/src/assets/css/wechat.css
@@ -96,3 +96,62 @@
 }
 
 /* --------👆 mh-cell End 👆--------*/
+
+
+/* --------👇 input Start 👇--------*/
+.mh-input__wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+.mh-input__wrapper .mh-input{
+  width: 100%;
+  border: 0;
+  outline: 0;
+  -webkit-appearance: none;
+  background-color: transparent;
+  font-size: inherit;
+  color: inherit;
+  height: 40px;
+  line-height: 40px;
+  -webkit-appearance: searchfield;
+  box-sizing: border-box;
+  /* 🔥 CSS设置input的光标颜色
+  * - [用css改变input光标的3种方法](https://blog.csdn.net/qq_39234685/article/details/83180468)
+  */
+  caret-color:rgb(10, 193, 42);
+}
+
+.mh-input__wrapper .mh-input::-webkit-outer-spin-button,
+.mh-input__wrapper .mh-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* - [css居中布局方法](https://www.w3cschool.cn/css/css-center.html) */
+.mh-input__wrapper .mh-input-clear {
+  width: 30px;
+  height: 30px;
+  display: none;
+  position: relative;
+}
+
+.mh-input__wrapper .mh-input-clear .mh-input-clear__clear {
+  width: 20px;
+  height: 20px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  position: absolute;
+}
+
+/* - [使用CSS3 实现input框旁边的清空input内容按钮的显隐](https://www.cnblogs.com/benbendu/p/7055645.html) */
+.mh-input__wrapper .mh-input:valid + .mh-input-clear {
+  display: block;
+}
+/* --------👆 input End 👆--------*/
\ No newline at end of file
diff --git a/src/assets/images/input/input_clear.png b/src/assets/images/input/input_clear.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e88de72c5ee7788fb6438c5ce291678f94fa034
GIT binary patch
literal 573
zcmV-D0>b@?P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800066Nkl<ZSV!$v
z-Aw{P5T3c^T}!|Uv;(mMu>z%oBiSRo`AXPLqyw=6p#!KuJJ1sF`IZ|qWFg4y-tOrc
zUf3rR=4QT`@0%ZlBR@QHd^iE9Re|Af*j}&Kw*b%qfHnYJSqk3);1d8ALWucjG~(Y;
zFA9JS{0IOKQC<P2d7k$tlgTP%9|SNM47x>8JR{<H$l3n?M6^nhq&FUqXI0--0?4wA
zGk&fU*kRjKN=<z}yZ|_JB6|H}@XhClc;~Bx6998=jCreDb{|-#!x(en(u5O$lyZuQ
z_f2HK^+7~0TI-UCO8~6mKU~4Nltoc=ec(7qk|Z-9bwY@X!xk+8kW!|I_~glcs+8)v
zDzwcoP`#2MT>xf?$iv3>N+2SG0};)&*4=%_E&%U{cp2b-2ZHUG+eqCkl~O!KcdrB>
z%QA`--v$KRMh4%wRZ9Jc`D+0Cs%{j3lrl)c0q5isrlXQ!3Z#^kBJ>E(+Z_k{Axeba
zHVmje21K|Gs|FDf^=*gv)-o@hrEh^n4WhcLj_eqo0db?49oj1Jm2(ywAYk{E=XpDN
z8L_h_*D(>@Xss8{{ZfVes0Yawn5_hht1ca1MAY?VzV#ox3E41B)ALrVHHp0uSa8Oe
zw2`B9pCT*H4rgYsrEB~DlCK^_oCzToji2QWb%N7P6a^;$|5<@=A(lBXGNc$800000
LNkvXXu0mjfXGi&^

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index aea3cad..625d00a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -143,7 +143,7 @@ new Vue({
 // - [JavaScript数组去重（12种方法，史上最全）](https://segmentfault.com/a/1190000016418021)
 
 // 👉行内元素和块状元素
-// - [https://blog.csdn.net/cc18868876837/article/details/78060347](常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析)
+// - [常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析](https://blog.csdn.net/cc18868876837/article/details/78060347)
 // - [Html中行内元素有哪些？块级元素有哪些？](https://www.cnblogs.com/Jackie0714/p/4923639.html)
 // - [HTML哪些是块级元素，哪些是行内元素](https://www.cnblogs.com/yxm440/p/7667539.html)
 
@@ -174,6 +174,41 @@ new Vue({
 // - [移动端长按事件](https://www.cnblogs.com/imsomnus/p/6429074.html)
 // - [Js实现移动端长按事件](https://www.jianshu.com/p/11bb9629aa09)
 
+//  👉 Vue事件
+// - [Vue2.0学习笔记：Vue事件修饰符的使用](https://www.cnblogs.com/xuqp/p/9406971.html)
+
+// 👉 vue路由高级语法糖
+// - [vue路由高级语法糖](https://www.cnblogs.com/lhl66/p/8665042.html)
+
+// 👉 localStorage & sessionStorage
+// - [JS 详解 Cookie、 LocalStorage 与 SessionStorage](https://www.cnblogs.com/minigrasshopper/p/8064367.html)
+// - [Window​.session​Storage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage)
+// - [HTML5 sessionStorage会话存储](https://www.cnblogs.com/polk6/p/5512979.html)
+
+// 👉 浅析CSS——元素重叠及position定位的z-index顺序
+// - [浅析CSS——元素重叠及position定位的z-index顺序](https://www.cnblogs.com/xcsn/p/4664404.html)
+
+// 👉 Body & Html 高度
+// - [关于html与body的高度问题](https://www.cnblogs.com/xiaoyuersdch/p/9156240.html)
+// - [Html设置html与body元素高度问题](https://www.cnblogs.com/qlqwjy/p/7284365.html)
+// - [CSS之BODY高度问题](https://www.jianchuankeji.com/blog/archives/462)
+
+// 👉 文本超过两行展示‘全文’
+// - [Vue 中文本内容超出规定行数后展开收起的处理](https://www.jianshu.com/p/09154ebf5f44)
+// - [判断文字数量超过2行 添加展开按钮 未超过两行则不显示按钮 溢出部分显示省略号](https://www.jianshu.com/p/9d76d4a75e6f)
+// - [H5超出文字显示“展开全部”按钮](https://segmentfault.com/q/1010000011700305?sort=created)
+
+// 👉 vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
+// - [vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为](https://blog.csdn.net/qq_34645412/article/details/79100669)
+
+// 👉 get​Computed​Style
+// - [Window​.get​Computed​Style()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle)
+// - [JS使用getComputedStyle()方法获取CSS属性值](https://www.cnblogs.com/tongzhou/p/6432807.html)
+// - [原生JS getComputedStyle的方法解析](https://www.imooc.com/article/27812)
+
+// 👉 一字一句的搞懂vue-cli之vue webpack template配置
+// - [一字一句的搞懂vue-cli之vue webpack template配置](https://segmentfault.com/a/1190000012472099)
+
 
 
 /// --------🔥 Third Lib 🔥-------------
diff --git a/src/views/discover/moments/Moments.vue b/src/views/discover/moments/Moments.vue
index d5a15e6..292de90 100644
--- a/src/views/discover/moments/Moments.vue
+++ b/src/views/discover/moments/Moments.vue
@@ -1,7 +1,7 @@
 // 朋友圈
 <template>
   <div class="_full-container" @touchstart="touchstartAction">
-    <div class="_full-content" id="ko">
+    <div class="_full-content">
       <!-- 导航栏透明 -->
       <NavigationBar
         title="朋友圈"
@@ -25,13 +25,12 @@
       <div
         class="moment__refresh"
         :style="refreshStyle"
-        :class="{ kkk: topStatus === 'loading' }"
+        :class="{ 'moment__refresh--loading': topStatus === 'loading' }"
       ></div>
       <!-- 单条说说 -->
       <div
         class="moment__wrapper"
         ref="momentWrapper"
-        id="drag"
         @touchstart="startDrag"
         @touchmove="onDrag"
         @touchend="stopDrag"
@@ -41,7 +40,6 @@
         <!-- 背景页：需要有数据方可显示 -->
         <div class="moment__background" v-show="moments.length"></div>
         <div
-          id="drag-inner"
           :style="transform"
           :class="{ moment__dropped: topDropped || bottomDropped }"
         >
@@ -176,7 +174,7 @@
                 <p class="mh-moment__time">
                   {{ moment.created_at | dateFormat }}
                 </p>
-                <transition name="fade">
+                <transition name="show-more">
                   <!-- $event 当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值 -->
                   <MomentOperationMore
                     class="more-wrapper__operation"
@@ -275,8 +273,6 @@ import MHMoments4 from "@/assets/js/MHMoments4.js";
 import MomentOperationMore from "./view/MomentOperationMore";
 import MomentProfile from "./view/MomentProfile";
 import { mapState } from "vuex";
-// 工具类
-import utils from "@/assets/utils/utils.js";
 // helper
 import helper from "./js/momentsHelper.js";
 // 图片预览
@@ -312,17 +308,13 @@ export default {
         "<img src=" +
         require("@/assets/images/moments/wx_albumInformationLikeHL_15x15.png") +
         " width='15' height='15'>",
-      // 全文或收起
-      expanded: false,
 
       // 当前显示的moment
       tempMoment: {},
       // 要删除的评论数据的索引 {section , row}
       delCmtIndexPath: {},
-      rotes: false,
       startY: "", //保存touch时的Y坐标
       translate: 0, //保存向下滑动的距离
-      duration: 0, //动画持续时间，0就是没有动画
       // 刷新控件隐藏的位置
       refreshHiddenValue: -30,
       // 刷新控件最终显示的位置
@@ -436,7 +428,7 @@ export default {
       // 🔥 web原生滚动
       // - [scrollTo](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo)
       // - [scroll、scrollBy和 scrollTo三种方法定位滚动条位置，以及在vue中使用的注意事项](https://blog.csdn.net/github_39598787/article/details/80310997)
-      document.getElementById("drag").scrollTo({
+      this.momentWrapperEl.scrollTo({
         top: 0,
         behavior: "smooth"
       });
@@ -486,14 +478,11 @@ export default {
     // 开始拖拽
     startDrag(e) {
       this.touchSate = 1;
-
-      this.rotes = false;
-      this.duration = 0; // 关闭动画
       this.translate = 0; // 滑动距离归0
       let t = e.targetTouches[0]; // 获得开始Y坐标
 
       this.startY = t.clientY;
-      let scrollTop = document.getElementById("drag").scrollTop;
+      let scrollTop = this.momentWrapperEl.scrollTop;
       // 记录一下起始 st
       this.startScrollTop = scrollTop;
 
@@ -515,11 +504,9 @@ export default {
     // 正在拖拽
     onDrag(e) {
       this.touchSate = 2;
-      let scrollEventTarget = document.getElementById("drag");
-      let scrollTop = scrollEventTarget.scrollTop;
+      let scrollEventTarget = this.momentWrapperEl;
       let currentY = e.targetTouches[0].clientY;
       let currentScrollTop = scrollEventTarget.scrollTop;
-
       // 偏移距离
       let distance = (currentY - this.startY) / 2;
       // 上拉or下拉
@@ -558,7 +545,6 @@ export default {
             }
           }
         }
-        // console.log("++++ 下拉过程中 ++++");
       }
 
       // 如果滚动条已经在顶部了。就没必要做下拉刷新了,且会触发 onscroll 事件
@@ -587,31 +573,18 @@ export default {
           // 阻止默认事件，在微信浏览器中尤为有用，至于为什么，你去试就知道了。
         }
       }
-
-      // console.log(
-      //   "--- scrollTop " +
-      //   scrollTop +
-      //   " --- direction " +
-      //   this.direction +
-      //   " --- distance " +
-      //   distance +
-      //   " --- translate " +
-      //   this.translate +
-      //   " --- bottomReached " +
-      //   this.bottomReached
-      // );
     },
     // 🔥检查是否滚动到底部
     // - https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
     checkBottomReached() {
-      let scrollEventTarget = document.getElementById("drag");
+      let scrollEventTarget = this.momentWrapperEl;
       let a = scrollEventTarget.scrollTop + scrollEventTarget.clientHeight;
       let b = scrollEventTarget.scrollHeight;
       return a >= b;
     },
     // 结束拖拽
     stopDrag() {
-      let scrollTop = document.getElementById("drag").scrollTop;
+      let scrollTop = this.momentWrapperEl.scrollTop;
       this.touchSate = 0;
       if (
         this.direction === "down" &&
@@ -660,12 +633,6 @@ export default {
       // 这里假设 只要露出上拉加载的 80%就认为可以刷新
       let sh = e.target.scrollHeight - 50;
       let st = e.target.scrollTop + e.target.clientHeight;
-
-      // console.log("+++ start +++");
-      // console.log("sh === " + sh);
-      // console.log("st === " + st);
-      // console.log("touchState === " + this.touchSate);
-
       // 必须是touchEnd的情况下有效，且不是正在下拉刷新
       if (
         st >= sh &&
@@ -678,7 +645,6 @@ export default {
         // 上拉加载事件
         this.bottomMethod();
       }
-
       // 获取屏幕宽度
       let clientWidth = document.documentElement.clientWidth;
       let topOffset = clientWidth - 64 - 75;
@@ -687,7 +653,6 @@ export default {
       if (this.lastOpacity !== opacity) {
         this.lastOpacity = opacity;
       }
-
       // lastRefreshTop
       this.lastRefreshTop = scrollTop;
     },
@@ -1099,9 +1064,7 @@ export default {
     handleDomDatas(start) {
       // 容错处理
       if (this.$refs.content === undefined) return;
-
       // 获取DOM元素列表
-      this.$refs.content;
       let length = this.$refs.content.length;
       for (let i = start; i < length; i++) {
         // 取出元素
diff --git a/src/views/discover/moments/css/moments.css b/src/views/discover/moments/css/moments.css
index e8fa8d5..1093d8e 100644
--- a/src/views/discover/moments/css/moments.css
+++ b/src/views/discover/moments/css/moments.css
@@ -1,5 +1,4 @@
 /* 点击高亮 */
-/* 点击高亮 */
 .mh-moment--tap-highlight {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: inherit;
@@ -9,14 +8,14 @@
   background-color: #c7c7c5;
 }
 /* 🔥 弹簧动效 https://www.w3cplus.com/animation/spring-animation-in-css.html */
-.fade-enter-active,
-.fade-leave-active {
+.show-more-enter-active,
+.show-more-leave-active {
   width: 181px;
   height: 40px;
   transition: width 0.25s ease-in-out;
 }
-.fade-enter,
-.fade-leave-to {
+.show-more-enter,
+.show-more-leave-to {
   width: 0;
   height: 40px;
 }
@@ -26,13 +25,13 @@
   transition: 0.25s;
 }
 
-.kkk {
+.moment__refresh--loading {
   opacity: 1;
   top: 60px;
-  animation: rotale 1.25s linear infinite;
-  -webkit-animation: rotale 1.25s linear infinite;
+  animation: rotate 1.25s linear infinite;
+  -webkit-animation: rotate 1.25s linear infinite;
 }
-@keyframes rotale {
+@keyframes rotate {
   from {
     transform: rotate(0deg);
   }
@@ -49,17 +48,16 @@
   /*
   https://segmentfault.com/q/1010000012872663 
   和你的页面布局有关。
-正常情况下滚动条是属于 html 的，页面撑开可以正常获取document.documentElement.scrollTop。
-在滚动条属于 html 或 body 的情况下document.body.scrollTop || document.documentElement.scrollTop能正常拿到相应值。
-
-如果都为0，那说明：
+  正常情况下滚动条是属于 html 的，页面撑开可以正常获取document.documentElement.scrollTop。
+  在滚动条属于 html 或 body 的情况下document.body.scrollTop || document.documentElement.scrollTop能正常拿到相应值。
 
-当前滚动条位置就是在顶部。
-没有产生滚动。
-你当前的滚动条不再属于 html 或者 body。
-其它我没想到的= =。 
+  如果都为0，那说明：
 
-*/
+  当前滚动条位置就是在顶部。
+  没有产生滚动。
+  你当前的滚动条不再属于 html 或者 body。
+  其它我没想到的= =。 
+  */
   overflow-y: scroll;
   overflow-x: hidden;
   background-color: #fff;
diff --git a/src/views/login/CurrentLogin.vue b/src/views/login/CurrentLogin.vue
index a7d2a46..c50a943 100644
--- a/src/views/login/CurrentLogin.vue
+++ b/src/views/login/CurrentLogin.vue
@@ -19,12 +19,26 @@
               <label class="mh-current-login__label">密码</label>
             </div>
             <div class="mh-current-login__cell-bd">
-              <input
-                class="mh-current-login__input"
-                type="password"
-                placeholder="请填写QQ密码"
-                v-model="password"
-              />
+              <div class="mh-input__wrapper">
+                <input
+                  required="required"
+                  class="mh-input"
+                  type="password"
+                  placeholder="请填写QQ密码"
+                  v-model="password"
+                />
+                <a
+                  href="javascript:;"
+                  class="mh-input-clear"
+                  @click="clearAllPassword"
+                >
+                  <img
+                    src="@/assets/images/input/input_clear.png"
+                    class="mh-input-clear__clear"
+                    alt=""
+                  />
+                </a>
+              </div>
             </div>
           </div>
           <div
@@ -36,15 +50,30 @@
               <label class="mh-current-login__label">验证码</label>
             </div>
             <div class="mh-current-login__cell-bd">
-              <input
-                class="mh-current-login__input"
-                type="text"
-                placeholder="请输入验证码"
-                v-model="captcha"
-              />
+              <div class="mh-input__wrapper input-captcha">
+                <input
+                  required="required"
+                  class="mh-input"
+                  type="tel"
+                  maxlength="6"
+                  placeholder="请输入验证码"
+                  v-model="captcha"
+                />
+                <a
+                  href="javascript:;"
+                  class="mh-input-clear"
+                  @click="clearAllCaptcha"
+                >
+                  <img
+                    src="@/assets/images/input/input_clear.png"
+                    class="mh-input-clear__clear"
+                    alt=""
+                  />
+                </a>
+              </div>
             </div>
             <div class="mh-current-login__cell-ft">
-              <button class="mh-current-login__btn">获取验证码</button>
+              <div class="captcha-btn">获取验证码</div>
             </div>
           </div>
         </transition>
@@ -116,13 +145,13 @@ export default {
   methods: {
     itemDidClick(idx) {
       switch (idx) {
-      case 0:
-        break;
-      case 1:
-        break;
-      default:
-        this.showActionSheet = true;
-        break;
+        case 0:
+          break;
+        case 1:
+          break;
+        default:
+          this.showActionSheet = true;
+          break;
       }
     },
     // 配置actionsheet items
@@ -142,17 +171,12 @@ export default {
     didClickItem(idx) {
       if (idx === 0) return;
       switch (idx) {
-      case 1:
-        console.log("history 2 " + window.history.length);
-        console.log(window.history);
-        this.$router.push("/current-login/other-login");
-        console.log("history 3 " + window.history.length);
-        console.log(window.history);
-        break;
-      case 2:
-        break;
-      default:
-        break;
+        case 1:
+          break;
+        case 2:
+          break;
+        default:
+          break;
       }
     },
     changeBtnDidClick() {
@@ -199,6 +223,13 @@ export default {
           console.log("导航完成");
         });
       }, 3000);
+    },
+    // 清除按钮事件
+    clearAllPassword() {
+      this.password = "";
+    },
+    clearAllCaptcha() {
+      this.captcha = "";
     }
   },
   computed: {
@@ -253,7 +284,7 @@ export default {
 }
 
 .mh-current-login__container {
-  background-color: #ffffff;
+  margin-top: 44px;
   font-size: 17px;
   overflow: hidden;
   position: relative;
@@ -273,9 +304,9 @@ export default {
 .mh-current-login__cell:after {
   content: " ";
   position: absolute;
-  left: 0;
+  left: 16px;
   bottom: 0;
-  right: 0;
+  right: 16px;
   height: 1px;
   border-bottom: 1px solid #d8d8d8;
   color: #d8d8d8;
@@ -283,7 +314,6 @@ export default {
   transform-origin: 0 100%;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
-  left: 16px;
   z-index: 2;
 }
 
@@ -315,34 +345,18 @@ export default {
   word-break: break-all;
 }
 
-.mh-current-login__input {
-  width: 100%;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  background-color: transparent;
-  font-size: inherit;
-  color: inherit;
-  height: 40px;
-  line-height: 40px;
-  -webkit-appearance: searchfield;
-  box-sizing: border-box;
-}
-
-.mh-current-login__input::-webkit-outer-spin-button,
-.mh-current-login__input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.input-captcha {
+  padding-right: 40px;
 }
 
 .mh-current-login__change-btn {
-  margin: 5px 16px;
-}
-.mh-current-login__change-btn span {
-  background-color: aqua;
+  margin: 10px 16px;
+  color: #5b6a91;
+  font-size: 15px;
 }
+
 .mh-current-login__login {
-  margin-top: 60px;
+  margin-top: 68px;
   padding: 0 16px;
 }
 
@@ -401,15 +415,25 @@ export default {
   background-color: #9ed99d;
 }
 
+/* 获取验证码 */
+.captcha-btn {
+  border: 1px solid #353535;
+  color: #353535;
+  background-color: transparent;
+  padding: 2px 5px;
+  font-size: 13px;
+  border-radius: 3px;
+}
+
 /* 底部更多列表 */
 .mh-current-login__more {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 10px;
-  color: blue;
+  color: #5b6a91;
   text-align: center;
-  font-size: 16px;
+  font-size: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
@@ -429,11 +453,9 @@ export default {
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: red;
+  background-color: #000;
   -webkit-transform: scale(0.5);
   -ms-transform: scale(0.5);
   transform: scale(0.5);
 }
-
-/* https://www.w3cplus.com/css/caret-color.html */
 </style>
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
new file mode 100644
index 0000000..26ae300
--- /dev/null
+++ b/src/views/login/Login.vue
@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+// 用户第一次使用微信时的登陆界面
+export default {
+  name: "login",
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped></style>