From bd19a30ca1aa41b090a05acc6060a560dcba677d Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 25 Jul 2019 00:20:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96me=E9=A1=B5=E9=9D=A2=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/Me.vue      |  16 ++---
 src/pages/home/Message.vue | 134 +++++++++++++++++++++----------------
 2 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/src/pages/home/Me.vue b/src/pages/home/Me.vue
index 5bb3855..e800be8 100644
--- a/src/pages/home/Me.vue
+++ b/src/pages/home/Me.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="Me">
-        <div class="wrapper" >
+        <div class="wrapper">
             <div class="left">
                 <header>
                     <img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
@@ -155,7 +155,7 @@
                         </div>
                     </div>
                 </div>
-                <my-footer v-bind:init-tab="5" ></my-footer>
+                <my-footer v-bind:init-tab="5"></my-footer>
             </div>
             <div class="right">
                 <ul>
@@ -282,7 +282,7 @@
                             }
                             isDrawRight = moveXDistance < 0
                             if (isDrawRight) {
-                                wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
+                                wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue + 'px'
                             } else {
                                 wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
                             }
@@ -293,7 +293,7 @@
                             }
                             isDrawRight = moveXDistance < 0
                             if (isDrawRight) {
-                                wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance + 'px'
+                                wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance - judgeValue + 'px'
                             } else {
                                 wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance + 'px'
                             }
@@ -312,7 +312,7 @@
                     //点击的是左边，并且是菜单展开状态，并且移动距离等于 0，那么就收起来
                     let left = getCss(wrapper, 'left')
                     if (e.path.includes(leftEl) && left !== 0 && moveXDistance === 0) {
-                        wrapper.style.transition = 'all .3s'
+                        wrapper.style.transition = 'all .2s'
                         wrapper.style.left = 0
                         leftEl.style.opacity = 1
                         resetConfig()
@@ -322,7 +322,7 @@
                     }
                     if (isCanRightWiping) {
                         if (!moveXDistance) return
-                        wrapper.style.transition = 'all .3s'
+                        wrapper.style.transition = 'all .2s'
                         let endTime = Date.now()
                         let gapTime = endTime - startTime
 
@@ -471,7 +471,7 @@
                         e.stopPropagation()
                         if (isDrawRight) {
                             indicator.style.marginLeft = (1.5 + (currentSwiperItemIndex + 0) * 33 + Math.abs(moveXDistance) / width / 3 * 100) + '%'
-                            tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
+                            tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue + 'px'
                         } else {
                             if (currentSwiperItemIndex === 0) {
                                 return tabs.style.left = 0
@@ -482,7 +482,7 @@
                             } else {
                                 indicator.style.marginLeft = '1.5%'
                             }
-                            tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
+                            tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance - judgeValue + 'px'
                         }
                     }
                 })
diff --git a/src/pages/home/Message.vue b/src/pages/home/Message.vue
index 15b6728..f8fbb75 100644
--- a/src/pages/home/Message.vue
+++ b/src/pages/home/Message.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="message">
-        <div class="container p15p">
-            <div class="header">
+    <div id="Message">
+        <div class="container">
+            <div class="header pt15p">
                 <div class="title">
                     <p class="tac fb c-white ">消息</p>
                     <span>联系人</span>
                 </div>
             </div>
-            <div class="toolbar mt20p">
+            <div class="line mt20p"></div>
+            <div class="toolbar mt30p">
                 <div>
                     <img src="../../assets/img/icon/msg-icon1.png" alt="">
                     <span>粉丝</span>
@@ -25,47 +26,38 @@
                     <span>随拍互动</span>
                 </div>
             </div>
-            <div class="messages mt20p">
-                <div class="message oh mt15p">
-                    <div class="content pull-left ">
-                        <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
-                        <div class="pull-right comment-container">
+            <div class="line mt20p"></div>
+            <div class="messages  mt10p">
+                <div class="message top">
+                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
+                    <div class="content">
+                        <div class="left">
                             <div class="name">游戏小助手</div>
                             <div class="detail">抖出好游戏</div>
                         </div>
-                    </div>
-                    <div class="love pull-right">
-                        <span class="f14 block">20:54</span>
-                    </div>
-                </div>
-                <div class="message oh mt15p">
-                    <div class="content pull-left ">
-                        <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
-                        <div class="pull-right comment-container">
-                            <div class="name">抖音小助手</div>
-                            <div class="detail">抖音美好奇妙夜小贴士</div>
+                        <div class="right">
+                            <div class="f14">20:54</div>
+                            <div class="number">9</div>
                         </div>
                     </div>
-                    <div class="love pull-right">
-                        <span class="f14 block">20:54</span>
-                    </div>
                 </div>
-                <div class="message oh mt15p">
-                    <div class="content pull-left ">
-                        <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
-                        <div class="pull-right comment-container">
-                            <div class="name">TTentau</div>
-                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                <div class="message">
+                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
+                    <div class="content">
+                        <div class="left">
+                            <div class="name">游戏小助手</div>
+                            <div class="detail">抖出好游戏</div>
+                        </div>
+                        <div class="right">
+                            <div class="f14">20:54</div>
+                            <div class="number">9</div>
                         </div>
-                    </div>
-                    <div class="love pull-right">
-                        <span class="f14 block">20:54</span>
                     </div>
                 </div>
             </div>
-            <p class="tac">无更多消息</p>
+            <p class="tac mt18p f12">无更多消息</p>
         </div>
-        <Footer v-bind:init-tab="4" />
+        <Footer v-bind:init-tab="4"/>
     </div>
 </template>
 
@@ -78,8 +70,7 @@
             Footer
         },
         data() {
-            return {
-            }
+            return {}
         },
         created() {
 
@@ -90,7 +81,7 @@
 </script>
 
 <style scoped lang="scss">
-    .message {
+    #Message {
         font-size: 1.6rem;
         background: #2e3244;
         color: #b8b9c1;
@@ -129,38 +120,67 @@
 
         }
 
-        .messages {
+        .line {
+            margin: 0 20px;
             border-top: 1px solid #494950;
+        }
+
+        .messages {
 
             .message {
-                .content {
-                    float: left;
-                    width: 85%;
+                padding:13px 20px;
+                display: flex;
+                align-items: center;
 
-                    .head-image {
-                        width: 40px;
-                        border-radius: 50%;
-                        float: left;
-                    }
+                &.top{
+                    background: #353a4f;
+                }
+                &:active{
+                    background: #353a4f;
+                }
 
-                    .comment-container {
-                        width: 85%;
+                .head-image {
+                    margin-right: 20px;
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+                }
+
+                .content {
+                    flex: 1;
+                    display: flex;
+                    justify-content: space-between;
 
-                        .time {
-                            color: gray;
+                    .left {
+                        .name {
+                            color: white;
                         }
-                    }
 
-                }
+                        .detail {
+                            margin-top: 5px;
+                            font-size: 14px;
+                        }
+                    }
 
-                .love {
-                    text-align: center;
+                    .right {
+                        font-size: 14px;
+                        text-align: center;
+
+                        .number {
+                            display: inline-block;
+                            min-height: 20px;
+                            min-width: 20px;
+                            text-align: center;
+                            color: black;
+                            margin-top: 5px;
+                            /*padding: 5px;*/
+                            background: yellow;
+                            border-radius: 50%;
 
-                    .love-image {
-                        width: 30px;
-                        border-radius: 50%;
+                        }
                     }
                 }
+
             }
         }
     }