选择男家或地区页面

src/App.vue

@@ -43,6 +43,7 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
+        '/country-choose',
         '/edit-userinfo',
         '/edit-userinfo-item',
         '/video-detail',

src/assets/scss/custom.scss

@@ -29,6 +29,13 @@
       background: $main-bg;
     }
   }
+  &.no-padding {
+    padding:0;
+  }
+
+  &.border{
+    border-bottom: 1px solid $line-color;
+  }
 
   &:active {
     background: $active-main-bg;

src/components/BaseHeader.vue

@@ -38,6 +38,7 @@ export default {
   width: 100%;
   position: fixed;
   background: $main-bg;
+  z-index: 2;
 
   .header {
     display: flex;

src/components/Search.vue

@@ -5,10 +5,10 @@
       <input type="text" :placeholder="placeholder" v-model="value">
       <div class="suffix">
         <slot v-if="$slots.default"></slot>
-        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click="clear">
+        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">
       </div>
     </div>
-    <div v-if="isShowText" class="notice" :style="{color : notice}" @click="$emit('notice')">搜索</div>
+    <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">搜索</div>
   </div>
 </template>
 

src/pages/home/Attention.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="attention">
     <header>
-      <span>双流</span>
+      <span @click="$nav('/country-choose')">双流</span>
       <div class="arrow"></div>
     </header>
     <div class="ad">

src/pages/me/Me.vue

@@ -355,20 +355,18 @@ export default {
         background: rgba(82, 80, 80, 0.5);
 
         img {
-          padding: 4px;
-          height: 16px;
-          width: 16px;
+          padding: .6rem;
+          width: 1.8rem;
         }
       }
 
       .right {
         img {
-          margin-left: 20px;
+          margin-left: 2rem;
           border-radius: 50%;
           background: rgba(82, 80, 80, 0.5);
-          padding: 4px;
-          height: 16px;
-          width: 16px;
+          padding: .6rem;
+          width: 1.8rem;
         }
       }
     }

src/pages/message/Chat.vue

@@ -28,7 +28,8 @@
         <template v-else>
           <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png" alt="">
           <img src="../../assets/img/icon/message/emoji-black.png" alt="">
-          <img @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
+          <img v-if="showOption" @click="showOption = !showOption" src="../../assets/img/icon/message/close-black.png" alt="">
+          <img v-else @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
         </template>
       </div>
       <div class="record" v-else>
@@ -37,10 +38,34 @@
       </div>
       <div class="options" v-if="showOption">
         <div class="option-wrapper">
-          <div class="option" v-for="i in 7">
-            <img src="../../assets/img/icon/举报.svg" alt="">
+          <div class="option">
+            <img src="../../assets/img/icon/message/photo.png" alt="">
             <span>照片</span>
           </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/camera2.png" alt="">
+            <span>拍摄</span>
+          </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/redpack.png" alt="">
+            <span>红包</span>
+          </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/video.png" alt="">
+            <span>视频通话</span>
+          </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/audio.png" alt="">
+            <span>语音通话</span>
+          </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/come-on.png" alt="">
+            <span>一起看视频</span>
+          </div>
+          <div class="option">
+            <img src="../../assets/img/icon/message/come-chang.png" alt="">
+            <span>一起唱</span>
+          </div>
         </div>
       </div>
     </div>
@@ -495,12 +520,14 @@ export default {
     }
 
     .options {
-      padding-top: 1.5rem;
+      font-size: 1.4rem;
+      width: 100vw;
+      padding: 1.5rem;
       height: 30vh;
       box-sizing: border-box;
 
       .option-wrapper {
-        padding: 1.5rem;
+        box-sizing: border-box;
         $grid-width: calc((100vw - 3rem) / 4);
         color: black;
         display: grid;
@@ -517,7 +544,7 @@ export default {
             border-radius: .4rem;
             background: whitesmoke;
             padding: 1rem;
-            width: 2.5rem;
+            width: 3rem;
             margin-bottom: 1rem;
           }
         }

src/pages/message/ChatDetail.vue

@@ -25,20 +25,20 @@
         <div class="row" @click="$nav('/set-remark')">
           <div class="left">设备备注</div>
           <div class="right">
-            <img src="../../assets/img/icon/back.png" alt="">
+            <back direction="right" scale="1.2" ></back>
           </div>
         </div>
         <!-- TODO 没做        -->
         <div class="row">
           <div class="left">举报</div>
           <div class="right">
-            <img src="../../assets/img/icon/back.png" alt="">
+            <back direction="right" scale="1.2" ></back>
           </div>
         </div>
         <div class="row" @click="blockDialog = true">
           <div class="left">拉黑</div>
           <div class="right">
-            <img src="../../assets/img/icon/back.png" alt="">
+            <back direction="right" scale="1.2" ></back>
           </div>
         </div>
       </div>
@@ -52,7 +52,7 @@
         <div class="notice">
           拉黑后，对方将无法搜索到你，也不能再给你发私信
         </div>
-        <div class="row">确认拉黑</div>
+        <div class="row red">确认拉黑</div>
         <div class="row">不让 TA 看</div>
         <div class="space"></div>
         <div class="row" @click="blockDialog = false">取消</div>
@@ -164,6 +164,10 @@ export default {
       &:nth-last-child(1) {
         border-top: none;
       }
+
+      &.red{
+        color: $primary-btn-color;
+      }
     }
 
     .space {

src/pages/message/Message.vue

@@ -54,57 +54,16 @@
           </div>
         </div>
       </div>
-      <div class="not-more">
-        暂时没有更多了
-      </div>
-    </div>
-    <div class="line mt1r"></div>
-    <div class="recommend">
-      <div class="title">
-        <div class="left">
-          朋友推荐
-          <img src="../../assets/img/icon/close-white.png" alt="">
-        </div>
-        <img class="right" src="../../assets/img/icon/close-white.png" alt="">
-      </div>
-      <div class="list">
-        <div class="item" v-for="i in 5">
-          <img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
-          <div class="content">
-            <div class="left">
-              <div class="name">A</div>
-              <div class="detail">
-                该用户关注了你
-              </div>
-            </div>
-            <div class="right">
-              <div class="button">回关</div>
-              <div class="button">移除</div>
-            </div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
-          <div class="content">
-            <div class="left">
-              <div class="name">A</div>
-              <div class="detail">
-                该用户关注了你
-              </div>
-            </div>
-            <div class="right">
-              <div class="button">回头</div>
-              <div class="button">移除</div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
     <Footer v-bind:init-tab="4"/>
 
     <from-bottom-dialog v-model="createChatDialog">
       <div class="create-chat-wrapper" v-show="!showJoinedChat">
-        <Search class="ml2r mr2r" placeholder="搜索用户" v-model="createChatSearchKey"></Search>
+        <Search :isShowText="isShowText"
+                @click="isShowText = true"
+                @notice="isShowText = false;"
+                @clear="isShowText = false"
+                class="ml2r mr2r" placeholder="搜索用户" v-model="createChatSearchKey"></Search>
         <template v-if="createChatSearchKey">
           <div class="search-result" v-if="searchFriends.length">
             <div class="search-result-item" v-for="item in searchFriends"
@@ -115,8 +74,8 @@
                   <span class="name">{{ item.name }}</span>
                   <span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
                 </div>
-                <img v-if="item.select" src="../../assets/img/icon/back.png" alt="">
-                <img v-if="!item.select" src="../../assets/img/icon/close.svg" alt=""></div>
+                <img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
+                <img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt=""></div>
             </div>
           </div>
           <div class="no-result" v-else>
@@ -142,8 +101,8 @@
               <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
               <div class="right">
                 <span>{{ item.name }}</span>
-                <img v-if="item.select" src="../../assets/img/icon/back.png" alt="">
-                <img v-if="!item.select" src="../../assets/img/icon/close.svg" alt="">
+                <img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
+                <img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt="">
               </div>
             </div>
           </div>
@@ -195,8 +154,8 @@ export default {
     return {
       createChatSearchKey: '',
       showJoinedChat: false,
-      // createChatDialog: false,
       createChatDialog: false,
+      isShowText: false,
       text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
       friends: [
         {
@@ -272,7 +231,8 @@ export default {
   },
   mounted() {
   },
-  methods: {}
+  methods: {
+  }
 }
 </script>
 
@@ -335,6 +295,7 @@ export default {
         margin-bottom: 2rem;
         display: flex;
         align-items: center;
+        //background: #fff;
 
         &:nth-child(1) {
           margin-top: 1rem;
@@ -355,7 +316,7 @@ export default {
           justify-content: space-between;
 
           img {
-            height: 1.5rem;
+            height: 2rem;
           }
         }
       }
@@ -430,7 +391,7 @@ export default {
           }
 
           img {
-            height: 1.5rem;
+            height: 2rem;
           }
         }
       }

src/utils/global-methods.js

@@ -134,7 +134,7 @@ export default {
     return parseFloat(val)
   },
   $setCss(el, key, value) {
-    // console.log(value)
+    console.log(value)
     if (key === 'transform') {
       //直接设置不生效
       el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;