登录页面和优化footer

src/App.vue

@@ -74,6 +74,7 @@ export default {
         '/login/password',
         '/login/verification-code',
         '/login/retrieve-password',
+        '/login/help',
 
 
         '/service-protocol',

src/components/Back.vue

@@ -7,11 +7,11 @@ export default {
   props: {
     mode: {
       type: String,
-      default: 'gray',//white
+      default: 'gray'
     },
-    isClose: {
+    img: {
-      type: Boolean,
+      type: String,
-      default: false
+      default: 'back'
     },
     direction: {
       type: String,
@@ -23,16 +23,11 @@ export default {
     },
   },
   data() {
-    return {
+    return {}
-      // src: require(`../assets/img/icon/components/back-${this.mode}.png`)
-    }
   },
   computed: {
     src() {
-      if (this.isClose) {
+      return require(`../assets/img/icon/components/${this.mode}-${this.img}.png`)
-        return require(`../assets/img/icon/components/close-${this.mode}.png`)
-      }
-      return require(`../assets/img/icon/components/back-${this.mode}.png`)
     }
   },
   mounted() {

src/components/BaseHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <div id='BaseHeader' :class="mode">
     <div class="header">
-      <back :isClose="isClose" :mode="isClose?'black':'gray'"
+      <back
+          :mode="backMode"
+          :img="backImg"
           @click="back()"
           class="left"
           direction="left"/>
@@ -18,7 +20,15 @@ export default {
   props: {
     mode: {
       type: String,
-      default: 'dark',//light
+      default: 'dark'
+    },
+    backMode:{
+      type: String,
+      default: 'gray'
+    },
+    backImg:{
+      type: String,
+      default: 'back',
     },
     isClose: {
       type: Boolean,
@@ -72,7 +82,7 @@ export default {
     .left {
       position: absolute;
       left: 1rem;
-      top: 1.5rem;
+      top: 2rem;
     }
 
     & > :nth-last-child(1) {

src/components/Footer.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="footer f16 " @touchmove.stop="false">
-    <div class="l-button" @click="refresh()">
+    <div class="l-button" @click="refresh(1)">
-      <span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
+      <span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
-      <img v-else src="../assets/img/icon/refresh.png" alt="" class="refresh">
+      <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
+    </div>
+    <div class="l-button" @click="refresh(2)">
+      <span v-if="!isRefresh2" :class="{active:currentTab === 2}">关注</span>
+      <img v-if="isRefresh2" src="../assets/img/icon/refresh1.png" alt="" class="refresh">
     </div>
-    <div class="l-button" @click="tab(2)"><span :class="{active:currentTab===2}">关注</span></div>
     <div class="l-button" @click="tab(3)">
       <div class="add-ctn">
-        <div class="add-one"></div>
+        <div class="add-one">
-        <div class="add-two"></div>
+          <img src="../assets/img/icon/add-light.png" alt="" class="add">
-        <img src="../assets/img/icon/add.svg" alt="" class="add">
+        </div>
       </div>
     </div>
     <div class="l-button" @click="tab(4)"><span :class="{active:currentTab===4}">消息</span></div>
@@ -24,7 +27,8 @@ export default {
   props: ['initTab'],
   data() {
     return {
-      isRefresh: false,
+      isRefresh1: false,
+      isRefresh2: false,
       currentTab: this.initTab,
     }
   },
@@ -49,15 +53,14 @@ export default {
           break
       }
     },
-    refresh() {
+    refresh(index) {
-      if (location.hash === '#/') {
+      if (this.currentTab === index) {
-        this.isRefresh = !this.isRefresh
+        this['isRefresh' + index] = !this['isRefresh' + index]
         setTimeout(() => {
-          this.isRefresh = false
+          this['isRefresh' + index] = !this['isRefresh' + index]
         }, 2000)
       } else {
-        this.currentTab = 1
+        this.tab(index)
-        this.$router.push('/')
       }
     }
   }
@@ -89,60 +92,42 @@ export default {
 
     .refresh {
       width: 25%;
-      animation: rotate .8s linear infinite;
+      animation: rotate .5s linear infinite;
     }
 
     @keyframes rotate {
-      0% {
+      from {
-        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
       }
 
-      45% {
+      to {
-        -webkit-transform: rotate(-180deg);
+        transform: rotate(-360deg);
-      }
-
-      55% {
-        -webkit-transform: rotate(-180deg);
-      }
-
-      100% {
-        -webkit-transform: rotate(-360deg);
       }
     }
 
     .add-ctn {
-      width: 70%;
+      $height: 2.7rem;
-      height: 55%;
+      $width: 4rem;
-      //background: white;
+      height: $height;
-      position: relative;
+      width: $width;
-      display: flex;
+      background: linear-gradient(to right, #59dcdf, #ff5f75);
-      justify-content: center;
+      border-radius: .5rem;
+      box-sizing: border-box;
+      padding: 0 .2rem;
 
       .add-one {
-        position: absolute;
+        box-sizing: border-box;
-        width: 100%;
         height: 100%;
-        background: linear-gradient(to right, #59dcdf, #ff5f75);
+        border-radius: .5rem;
-        border-radius: 5px;
+        border: 2px solid white;
-      }
+        background: black;
-
+        display: flex;
-      .add-two {
+        align-items: center;
-        border-radius: 5px;
+        justify-content: center;
-        position: relative;
-        width: 90%;
-        height: 100%;
-        background: white;
       }
 
       img {
-        top: 0;
+        width: 2rem;
-        bottom: 0;
-        right: 0;
-        left: 0;
-        margin: auto;
-        position: absolute;
-        width: 50%;
-        height: 50%;
       }
     }
 

src/components/Mask.vue

@@ -18,7 +18,7 @@ export default {
 <style scoped lang="scss">
 
 .Mask {
-  z-index: 2;
+  z-index: 3;
   position: fixed;
   top: 0;
   bottom: 0;

src/components/dialog/ConfirmDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ConfirmDialog " @click="$emit('dismiss')">
-    <div class="content" @click.stop="null">
+    <div class="content" @click.stop="stop">
       <div class="body">
         <div class="title" v-if="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
@@ -59,6 +59,10 @@ export default {
   },
   data() {
     return {}
+  },
+  methods: {
+    stop() {
+    }
   }
 }
 </script>

src/components/dialog/FromBottomDialog.vue

@@ -166,6 +166,7 @@ export default {
   overflow: auto;
   padding-top: 2.4rem;
   bottom: 0;
+  left: 0;
   box-sizing: border-box;
   border-radius: .5rem .5rem 0 0;
 

src/components/dialog/NoticeDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="NoticeDialog" @click="$emit('dismiss')">
-    <div class="content" @click.stop="null">
+    <div class="content" @click.stop="stop">
       <div class="body">
         <div class="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
@@ -46,6 +46,9 @@ export default {
   },
   data() {
     return {}
+  },
+  methods:{
+    stop(){}
   }
 }
 </script>

src/components/dialog/SimpleConfirmDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="SimpleConfirmDialog " @click="$emit('dismiss')">
-    <div class="content" @click.stop="null">
+    <div class="content" @click.stop="stop">
       <div class="item">{{ title }}</div>
       <div class="footer">
         <div class="cancel" @click.stop="$emit('cancel')">放弃</div>
@@ -26,6 +26,9 @@ export default {
   },
   data() {
     return {}
+  },
+  methods:{
+    stop(){}
   }
 }
 </script>

src/config/index.js

@@ -1,6 +1,6 @@
 export default {
-  // baseUrl: 'http://192.168.0.105//index.php/v1',
+  baseUrl: 'http://192.168.0.105//index.php/v1',
-  // filePreview:'http://192.168.0.105/static/uploads/',
+  filePreview:'http://192.168.0.105/static/uploads/',
-  baseUrl: 'http://192.168.10.164//index.php/v1',
+  // baseUrl: 'http://192.168.10.164//index.php/v1',
-  filePreview:'http://192.168.10.164/static/uploads/'
+  // filePreview:'http://192.168.10.164/static/uploads/'
 }

src/pages/home/Attention.vue

@@ -4,7 +4,7 @@
       <span @click="$nav('/country-choose')">双流</span>
       <div class="arrow"></div>
     </header>
-    <div class="ad">
+    <div class="ad" v-if="false">
       <div class="title">超值卖场 次日达</div>
       <div class="good-ctn">
         <div class="left">
@@ -48,34 +48,117 @@
     <div class="content">
       <div class="left">
         <div class="item" v-for="item in left">
+          <template v-if="item.type === 0">
+            <div class="wrapper">
               <img class="poster" :src="item.src"/>
-          <div class="location">
+              <img :src="item.author" alt="" class="author">
+            </div>
+            <div class="location" v-if="item.address">
               <div class="top">
                 <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-              <div class="name">电子科技大学沙河校区</div>
+                <div class="name">{{ item.address.name }}</div>
               </div>
               <div class="bottom">
-              <div class="type">大学</div>
+                <div class="type">{{ item.address.type }}</div>
                 <div class="line"></div>
-              <div class="other">1399人想去</div>
+                <div class="other">{{ item.address.number }}人想去</div>
+              </div>
+            </div>
+          </template>
+          <template v-if="item.type === 1">
+            <div class="wrapper" style="height: 49vw;overflow:hidden;">
+              <img class="poster" :src="item.src"/>
+            </div>
+          </template>
+          <template v-if="item.type === 2">
+            <div class="ranking-list">
+              <div class="desc">
+                <div class="top">
+                  <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                  <div class="name">{{ item.desc }}</div>
+                </div>
+                <div class="bottom">
+                  基于6亿抖音用户真实数据...
+                </div>
+              </div>
+              <div class="ads">
+                <div class="ad" v-for="(ad,index) in item.ads">
+                  <div class="left">
+                    <img class="ad-logo" :src="ad.src"/>
+                  </div>
+                  <div class="right">
+                    <div class="rank">TOP{{ index + 1 }}</div>
+                    <div class="name">{{ ad.name }}</div>
                   </div>
                 </div>
               </div>
             </div>
+          </template>
+          <template v-if="item.type === 3">
+            <div class="wrapper">
+              <img class="poster" :src="item.src"/>
+              <img :src="item.author" alt="" class="author">
+              <div class="live">直播中</div>
+            </div>
+          </template>
+        </div>
+
+      </div>
       <div class="right">
         <div class="item" v-for="item in right">
+          <template v-if="item.type === 0">
+            <div class="wrapper">
               <img class="poster" :src="item.src"/>
-          <div class="location">
+              <img :src="item.author" alt="" class="author">
+            </div>
+            <div class="location" v-if="item.address">
               <div class="top">
                 <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-              <div class="name">电子科技大学沙河校区</div>
+                <div class="name">{{ item.address.name }}</div>
               </div>
               <div class="bottom">
-              <div class="type">大学</div>
+                <div class="type">{{ item.address.type }}</div>
                 <div class="line"></div>
-              <div class="other">1399人想去</div>
+                <div class="other">{{ item.address.number }}人想去</div>
               </div>
             </div>
+          </template>
+          <template v-if="item.type === 1">
+            <div class="wrapper" style="height: 49vw;overflow:hidden;">
+              <img class="poster" :src="item.src"/>
+            </div>
+          </template>
+          <template v-if="item.type === 2">
+            <div class="ranking-list">
+              <div class="desc">
+                <div class="top">
+                  <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                  <div class="name">{{ item.desc }}</div>
+                </div>
+                <div class="bottom">
+                  基于6亿抖音用户真实数据...
+                </div>
+              </div>
+              <div class="ads">
+                <div class="ad" v-for="(ad,index) in item.ads">
+                  <div class="left">
+                    <img class="ad-logo" :src="ad.src"/>
+                  </div>
+                  <div class="right">
+                    <div class="rank">TOP{{ index + 1 }}</div>
+                    <div class="name">{{ ad.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-if="item.type === 3">
+            <div class="wrapper">
+              <img class="poster" :src="item.src"/>
+              <img :src="item.author" alt="" class="author">
+              <div class="live">直播中</div>
+            </div>
+          </template>
         </div>
       </div>
     </div>
@@ -98,7 +181,13 @@ export default {
       items: [],
       height: 0,
       width: 0,
-      footerHeight: 0
+      footerHeight: 0,
+      itemType: {
+        VIDEO: 0,
+        AD: 1,
+        RANKING_LIST: 2,
+        LIVE: 3,
+      }
     }
   },
   created() {
@@ -120,15 +209,46 @@ export default {
   },
   mounted() {
     for (let i = 1; i < 12; i++) {
-      this.items.push({
+      let temp = {
-        src: require(`../../assets/img/poster/${i}.jpg`)
+        src: require(`../../assets/img/poster/${i}.jpg`),
-      })
+        author: require(`../../assets/img/avatar.png`),
       }
+      temp.type = i - 1 > 3 ? 3 : i - 1
+      if (temp.type === 2) {
+        temp.desc = '成都市好友聚会美食榜'
+        temp.ads = [
+          {
+            src: require(`../../assets/img/poster/${i}.jpg`),
+            name: '烧江南烧肉'
+          },
+          {
+            src: require(`../../assets/img/poster/${i}.jpg`),
+            name: '欧叶无国界料理餐厅'
+          },
+          {
+            src: require(`../../assets/img/poster/${i}.jpg`),
+            name: '陆派玛歌庄园'
+          }
+        ]
+      }
+
+      if (i % 2 === 0) {
+        temp.address = {
+          name: '大源中央公园',
+          type: '综合商场',
+          number: 150
+        }
+      }
+      this.items.push(temp)
+    }
+    // this.$console(this.items)
   }
 }
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/scss/index";
+
 #attention {
   /*background: rgb(22，24，34);*/
   /*background: #161822;*/
@@ -159,7 +279,7 @@ export default {
     }
   }
 
-  .ad {
+  > .ad {
     padding: 10px;
     color: white;
 
@@ -251,6 +371,7 @@ export default {
               display: flex;
               justify-content: center;
               flex-direction: column;
+
               .ad-name {
                 font-weight: bold;
               }
@@ -283,7 +404,7 @@ export default {
     box-sizing: border-box;
     padding: 0 3px;
 
-    .left, .right {
+    > .left, > .right {
       width: calc(50% - 1.5px);
     }
 
@@ -292,12 +413,34 @@ export default {
       box-sizing: border-box;
       margin-bottom: 3px;
 
+      .wrapper {
+        position: relative;
+
         .poster {
           width: 100%;
           max-height: 50vh;
           display: block;
         }
 
+        .author {
+          position: absolute;
+          border-radius: 50%;
+          height: 3rem;
+          bottom: 1rem;
+          left: 1rem;
+        }
+
+        .live {
+          position: absolute;
+          padding: .2rem .5rem;
+          border-radius: .2rem;
+          top: 1rem;
+          left: 1rem;
+          color: white;
+          background: $primary-btn-color;
+        }
+      }
+
       .location {
         padding: 8px 10px 10px 10px;
         background: $douyin-bg;
@@ -330,6 +473,60 @@ export default {
           font-size: 1rem;
         }
       }
+
+      .ranking-list {
+        padding: 2rem 1rem;
+        background: $douyin-bg;
+
+        .desc {
+          .top {
+            margin-bottom: .2rem;
+            display: flex;
+            align-items: center;
+            font-size: 1.4rem;
+
+            .logo {
+              margin-right: .5rem;
+              height: 1.4rem;
+            }
+
+            .name {
+              //background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
+            }
+          }
+        }
+
+        .ads {
+          font-size: 1.2rem;
+
+          .ad {
+            background: $second-btn-color;
+            display: flex;
+            margin-top: 1rem;
+
+            .left {
+              margin-right: 1rem;
+
+              .ad-logo {
+                height: 4rem;
+                width: 4rem;
+              }
+            }
+
+            .right {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+
+              .rank {
+                color: $second-text-color;
+                margin-bottom: .2rem;
+              }
+            }
+          }
+        }
+
+      }
     }
   }
 }

src/pages/login/Base.scss

@@ -1,7 +1,7 @@
 @import "../../assets/scss/index";
 
 .content {
-  padding: 6rem 3rem;
+  padding: 3rem;
   //padding-top: 6rem;
 
   .desc {

src/pages/login/Help.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="Help">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16 fb">帮助</span>
+      </template>
+      <template v-slot:right>
+        <span class="f14">我的反馈</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <iframe src="https://kf.qq.com/touch/product/wechat_app.html" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Help",
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.Help {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    margin-top: 6rem;
+    height: calc(100vh - 6rem);
+
+    iframe{
+      padding: 0;
+      margin: 0;
+      border: none;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/pages/login/Login.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="login">
-    <BaseHeader mode="light" :isClose="true">
+    <BaseHeader mode="light" backMode="dark" backImg="close">
       <template v-slot:right>
-        <span class="f16">帮助</span>
+        <span class="f16" @click="$nav('/login/help')">帮助</span>
       </template>
     </BaseHeader>
     <div class="content">

src/pages/login/OtherLogin.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="other-login">
-    <BaseHeader mode="light" :isClose="true">
+    <BaseHeader mode="light" backMode="dark" backImg="back">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>
@@ -37,9 +37,36 @@
 
       <div class="options">
         <span class="link" @click="$nav('/login/password')">密码登录</span>
-        <span class="link">其他方式登录</span>
+        <span class="link" @click="otherLogin">其他方式登录</span>
       </div>
 
+      <from-bottom-dialog
+          v-model="isOtherLogin"
+          :show-heng-gang="false"
+          height="27rem"
+          mode="white">
+        <div class="block-dialog">
+          <div class="item">
+            <img src="../../assets/img/icon/login/toutiao-round.png" alt="">
+            <span>今日头条登录</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/login/qq.webp" alt="">
+            <span>QQ登录</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/login/wechat.webp" alt="">
+            <span>微信登录</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/login/weibo.webp" alt="">
+            <span>微博登录</span>
+          </div>
+          <div class="space"></div>
+          <div class="item" @click="isOtherLogin = false">取消</div>
+        </div>
+      </from-bottom-dialog>
+
     </div>
   </div>
 </template>
@@ -48,6 +75,7 @@ import Check from "../../components/Check";
 import Tooltip from "./components/Tooltip";
 import LoginInput from "./components/LoginInput";
 import Base from "./Base.js";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 
 export default {
   name: "OtherLogin",
@@ -55,7 +83,8 @@ export default {
   components: {
     Check,
     Tooltip,
-    LoginInput
+    LoginInput,
+    FromBottomDialog
   },
   data() {
     return {
@@ -75,6 +104,12 @@ export default {
           this.$nav('/login/verification-code')
         }, 2000)
       }
+    },
+    async otherLogin() {
+      let res = await this.check()
+      if (res) {
+        this.isOtherLogin = true
+      }
     }
   }
 }
@@ -95,5 +130,31 @@ export default {
   font-size: 1.4rem;
   background: white;
 
+  .block-dialog {
+    color: black;
+
+    .item {
+      height: 5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid gainsboro;
+
+      img {
+        height: 2.5rem;
+        margin-right: 1rem;
+      }
+
+      &:nth-last-child(1) {
+        border-top: none;
+      }
+    }
+
+    .space {
+      height: 1rem;
+      background: whitesmoke;
+    }
+  }
+
 }
 </style>

src/pages/login/PasswordLogin.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="PasswordLogin">
-    <BaseHeader mode="light" :isClose="true">
+    <BaseHeader mode="light" backMode="dark" backImg="back">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>

src/pages/login/RetrievePassword.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="RetrievePassword">
-    <BaseHeader mode="light" :isClose="true"></BaseHeader>
+    <BaseHeader mode="light" backMode="dark" backImg="back"/>
     <div class="content">
       <div class="desc">
         <div class="title">找回密码</div>

src/pages/login/VerificationCode.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="VerificationCode">
-    <BaseHeader mode="light" :isClose="true">
+    <BaseHeader mode="light" backMode="dark" backImg="back">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>

src/pages/login/components/LoginInput.vue

@@ -157,7 +157,7 @@ export default {
       margin-left: .5rem;
       width: 0;
       height: 0;
-      border: .3rem solid transparent;
+      border: .4rem solid transparent;
       border-top: .5rem solid black;
     }
 

src/pages/login/components/Tooltip.vue

@@ -40,7 +40,7 @@ export default {
 }
 
 .Tooltip {
-  z-index: 9;
+  z-index: 2;
   position: absolute;
   font-size: 1.2rem;
   color: white;

src/pages/message/Chat.vue

@@ -2,7 +2,7 @@
   <div class="Chat">
     <div class="header">
       <div class="left">
-        <back scale="1.8" @click="$back"></back>
+        <back @click="$back"></back>
         <div class="badge">12</div>
         <span>zzzz</span>
       </div>

src/router/index.js

@@ -41,6 +41,7 @@ import OtherLogin from "../pages/login/OtherLogin";
 import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
+import Help from "../pages/login/Help";
 
 const routes = [
   // {path: '', component: Music},
@@ -86,6 +87,7 @@ const routes = [
   {path: '/login/password', component: PasswordLogin},
   {path: '/login/verification-code', component: VerificationCode},
   {path: '/login/retrieve-password', component: RetrievePassword},
+  {path: '/login/help', component: Help},
 ]
 
 export default VueRouter.createRouter({

src/utils/global-methods.js

@@ -182,7 +182,6 @@ export default {
     return JSON.parse(JSON.stringify(v))
   },
   $console(v) {
-    return
     return console.log(JSON.stringify(v, null, 4))
   },
   $randomNum(minNum, maxNum) {