修改登陆界面的样式

CoderMikeHe · Jun 3, 2019 · 0021da4 · 0021da4
1 parent f3cc16e
commit 0021da4
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 128 deletions.
diff --git 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
@@ -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 👆--------*/
diff --git a/src/assets/images/input/input_clear.png b/src/assets/images/input/input_clear.png
diff --git 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.sessionStorage](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)
+
+// 👉 getComputedStyle
+// - [Window.getComputedStyle()](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
@@ -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
@@ -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;