refactor(*): standardize component

slimkit · Sep 26, 2018 · 3a8baf2 · 3a8baf2
1 parent 385f722
commit 3a8baf2
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 147 deletions.
diff --git a/src/page/UserFans.vue b/src/page/UserFans.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="p-user-fans">
-    <nav class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1">
+
+    <nav class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1" style="padding: 0 10px;">
       <div class="m-box m-aln-center m-flex-shrink0 ">
         <svg class="m-style-svg m-svg-def" @click="goBack">
           <use xlink:href="#base-back"/>
@@ -26,6 +27,7 @@
       </ul>
       <div class="m-box m-justify-end"/>
     </nav>
+
     <main style="padding-top: 0.9rem">
       <jo-load-more
         ref="loadmore"

diff --git a/src/page/find/Find.vue b/src/page/find/Find.vue
@@ -1,85 +1,77 @@
 <template>
   <div class="p-find-person">
-    <header class="m-pos-f m-box m-aln-center m-justify-bet m-lim-width m-bb1 m-main m-head-top">
+
+    <header class="m-pos-f m-box m-aln-center m-justify-bet m-lim-width m-bb1 m-main m-head-top" style="padding: 0 10px;">
       <div class="m-box m-aln-center m-flex-grow0 m-flex-shrink0">
-        <svg 
-          class="m-style-svg m-svg-def" 
-          @click="goBack">
-          <use 
-            xmlns:xlink="http://www.w3.org/1999/xlink" 
-            xlink:href="#base-back"/>
+        <svg class="m-style-svg m-svg-def" @click="goBack">
+          <use xlink:href="#base-back"/>
         </svg>
       </div>
-      <div 
-        class="m-box m-aln-center m-flex-grow1 m-flex-shrink1 m-head-search-box" 
-        @click="showSearchUser">
-        <svg class="m-style-svg m-svg-def placeholder"> 
-          <use 
-            xmlns:xlink="http://www.w3.org/1999/xlink" 
-            xlink:href="#base-search"/>
+      <div class="m-box m-aln-center m-flex-grow1 m-flex-shrink1 m-head-search-box" @click="showSearchUser">
+        <svg class="m-style-svg m-svg-def placeholder">
+          <use xlink:href="#base-search"/>
         </svg>
         <span class="placeholder">搜索</span>
       </div>
-      <div 
-        class="m-box m-aln-center m-flex-grow0 m-flex-shrink0 m-justify-end m-location" 
-        @click="switchLocation">
-        <svg 
-          :class="loading?'m-svg-small':'m-svg-def'" 
-          class="m-style-svg">
+      <div class="m-box m-aln-center m-flex-grow0 m-flex-shrink0 m-justify-end m-location" @click="switchLocation">
+        <svg :class="loading?'m-svg-small':'m-svg-def'" class="m-style-svg">
           <use :xlink:href="loading ? `#base-loading` : `#find-location`"/>
         </svg>
         <span class="m-location-label m-text-cut">{{ location }}</span>
       </div>
     </header>
+
     <main style="padding-top: 0.9rem">
       <div class="m-pos-f m-box m-aln-center m-justify-bet m-sub-nav m-bb1 m-main">
-        <router-link 
-          replace 
-          exact 
-          tag="div" 
-          exact-active-class="active" 
-          to="/find/pop" 
+        <router-link
+          replace
+          exact
+          tag="div"
+          exact-active-class="active"
+          to="/find/pop"
           class="m-sub-nav-item">
           <a>热门</a>
         </router-link>
-        <router-link 
-          replace 
-          exact 
-          tag="div" 
-          exact-active-class="active" 
-          to="/find/new" 
+        <router-link
+          replace
+          exact
+          tag="div"
+          exact-active-class="active"
+          to="/find/new"
           class="m-sub-nav-item">
           <a>最新</a>
         </router-link>
-        <router-link 
-          replace 
-          exact 
-          tag="div" 
-          exact-active-class="active" 
-          to="/find/rec" 
+        <router-link
+          replace
+          exact
+          tag="div"
+          exact-active-class="active"
+          to="/find/rec"
           class="m-sub-nav-item">
           <a>推荐</a>
         </router-link>
-        <router-link 
-          replace 
-          exact 
-          tag="div" 
-          exact-active-class="active" 
-          to="/find/ner" 
+        <router-link
+          replace
+          exact
+          tag="div"
+          exact-active-class="active"
+          to="/find/ner"
           class="m-sub-nav-item">
           <a>附近</a>
         </router-link>
       </div>
       <keep-alive>
-        <router-view 
-          class="p-find-body" 
+        <router-view
+          class="p-find-body"
           style="padding-top: 0.9rem"/>
       </keep-alive>
     </main>
   </div>
 </template>
+
 <script>
 import { getCurrentPosition } from "@/api/bootstrappers.js";
+
 export default {
   name: "Find",
   data() {
@@ -130,7 +122,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .p-find-person {
   .m-sub-nav {
     top: 90px;

diff --git a/src/page/message/list/comments.vue → src/page/message/list/MyComments.vue b/src/page/message/list/comments.vue → src/page/message/list/MyComments.vue
@@ -1,42 +1,25 @@
 <template>
-  <div :class="`${prefixCls}`">
-    <header
-      slot="head"
-      class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
-        <svg
-          class="m-style-svg m-svg-def"
-          @click="goBack">
-          <use
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            xlink:href="#base-back"/>
-        </svg>
-      </div>
-      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
-        <span>收到的评论</span>
-      </div>
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end"/>
-    </header>
-    <div
-      :class="`${prefixCls}-container`"
-      style="padding-top: 0.9rem">
+  <div class="msgList">
+
+    <common-header>收到的评论</common-header>
+
+    <div class="msgList-container">
       <load-more
         ref="loadmore"
         :on-refresh="onRefresh"
         :on-load-more="onLoadMore"
-        :class="`${prefixCls}-loadmore`">
+        class="msgList-loadmore">
         <div
           v-for="comment in comments"
-          :class="`${prefixCls}-item`"
-          :key="`comment-key-${comment.id}`">
-          <component
-            :is="items[comment.commentable_type]"
-            :comment="comment"/>
+          :key="`comment-key-${comment.id}`"
+          class="msgList-item">
+          <component :is="items[comment.commentable_type]" :comment="comment"/>
         </div>
       </load-more>
     </div>
   </div>
 </template>
+
 <script>
 /**
  * 消息-评论列表
@@ -143,5 +126,7 @@ export default {
   }
 };
 </script>
-<style lang="less" src="../style.less">
+
+<style lang="less" >
+@import url("../style.less");
 </style>
diff --git a/src/page/message/list/likes.vue → src/page/message/list/MyLikes.vue b/src/page/message/list/likes.vue → src/page/message/list/MyLikes.vue
@@ -1,26 +1,9 @@
 <template>
   <div :class="`${prefixCls}`">
-    <header
-      slot="head"
-      class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
-        <svg
-          class="m-style-svg m-svg-def"
-          @click="goBack">
-          <use
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            xlink:href="#base-back"/>
-        </svg>
-      </div>
-      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
-        <span>收到的赞</span>
-      </div>
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end"/>
-    </header>
 
-    <div
-      :class="`${prefixCls}-container`"
-      style="padding-top: 0.9rem">
+    <common-header>收到的赞</common-header>
+
+    <div :class="`${prefixCls}-container`">
       <load-more
         ref="loadmore"
         :on-refresh="onRefresh"
@@ -31,9 +14,7 @@
           v-if="like.id"
           :class="`${prefixCls}-item`"
           :key="like.id">
-          <component
-            :is="items[like.likeable_type]"
-            :like="like"/>
+          <component :is="items[like.likeable_type]" :like="like"/>
         </div>
       </load-more>
     </div>
@@ -118,5 +99,7 @@ export default {
   }
 };
 </script>
-<style lang="less" src="../style.less">
+
+<style lang="less">
+@import url("../style.less");
 </style>
diff --git a/src/page/message/list/notification.vue → src/page/message/list/MyNotifications.vue b/src/page/message/list/notification.vue → src/page/message/list/MyNotifications.vue
@@ -1,47 +1,32 @@
 <template>
   <div :class="`${prefixCls}`">
-    <header 
-      slot="head" 
-      class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
-        <svg 
-          class="m-style-svg m-svg-def" 
-          @click="goBack">
-          <use 
-            xmlns:xlink="http://www.w3.org/1999/xlink" 
-            xlink:href="#base-back"/>
-        </svg>
-      </div>
-      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
-        <span>系统通知</span>
-      </div>
-      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end"/>
-    </header>
+
+    <common-header> 系统通知 </common-header>
+
     <load-more
       ref="loadmore"
       :on-refresh="onRefresh"
       :on-load-more="onLoadMore"
-      :class="`${prefixCls}-loadmore`"
-      style="padding-top: 0.9rem"
-    >
-      <section 
-        v-for="notification in notifications" 
-        :key="notification.id" 
+      :class="`${prefixCls}-loadmore`" >
+      <section
+        v-for="notification in notifications"
+        :key="notification.id"
         class="m-box m-aln-st m-main m-bb1 notification-item">
         <h5 class="m-flex-grow1 m-flex-shrink1">{{ notification.data.content }}</h5>
         <p class="m-flex-grow0 m-flex-shrink0">{{ notification.created_at | time2tips }}</p>
       </section>
     </load-more>
   </div>
 </template>
+
 <script>
 import _ from "lodash";
 import { getNotifications } from "@/api/message.js";
 
 const prefixCls = "notification";
 
 export default {
-  name: "Notification",
+  name: "MyNotifications",
   data() {
     return {
       prefixCls,
@@ -83,14 +68,17 @@ export default {
   }
 };
 </script>
-<style lang="less">
+
+<style lang="less" scoped>
 .notification-item {
   padding: 30px;
+
   h5 {
     color: #333;
     font-size: 30px;
     font-weight: 400;
   }
+
   p {
     margin-left: 30px;
     color: #999;

diff --git a/src/page/message/style.less b/src/page/message/style.less
@@ -171,6 +171,7 @@
             display: flex;
             align-items: flex-start;
             color: #999;
+
             &-link {
                 color: #333;
             }
@@ -182,6 +183,7 @@
                 margin: 0;
             }
             section.userInfo {
+                flex:auto;
                 width: 350px;
                 margin-left: 20px;
                 margin-right: 20px;