添加直播页面

src/App.vue

@@ -4,8 +4,8 @@
       <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
     </transition>
     <transition :name="transitionName">
-<!--      <keep-alive>-->
+      <!--      <keep-alive>-->
-<!--      </keep-alive>-->
+      <!--      </keep-alive>-->
       <component :is="Component"/>
 
     </transition>
@@ -45,7 +45,7 @@ export default {
       this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
 
       //footer下面的5个按钮，对跳不要用动画
-      let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish']
+      let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish','/home/live']
       if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
         return this.transitionName = ''
       }

src/components/slide/SlideRowList.vue

@@ -3,7 +3,7 @@
     <div class="indicator-home" v-if="showIndicator">
       <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
       <div class="toolbar" ref="toolbar" :style="toolbarStyle">
-        <div class="left">直播</div>
+        <div class="left" @click="$nav('/home/live')">直播</div>
         <div class="tab-ctn">
           <div class="tabs" ref="tabs">
             <div class="tab"

src/pages/home/LivePage.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="LivePage">
+    <div class="live-wrapper">
+      <img src="../../assets/img/poster/6.jpg" alt="">
+    </div>
+    <div class="float">
+      <div class="top">
+        <div class="left">
+          <div class="liver">
+            <img class="avatar" src="../../assets/img/icon/avatar/10.png" alt="">
+            <div class="desc">
+              <div class="desc-wrapper">
+                <div class="name">大司马大司马大司马</div>
+                <div class="count">2万本场点赞</div>
+              </div>
+              <div class="follow-btn">关注</div>
+            </div>
+          </div>
+          <div class="left-bottom">
+            <div class="tag">#唱歌</div>
+            <div class="rank">江苏第15名</div>
+          </div>
+        </div>
+        <div class="right">
+          <img src="../../assets/img/icon/avatar/1.png" alt="" class="follower">
+          <img src="../../assets/img/icon/avatar/2.png" alt="" class="follower">
+          <img src="../../assets/img/icon/avatar/3.png" alt="" class="follower">
+          <div class="follower-count">107</div>
+          <back img="close" mode="light"/>
+        </div>
+      </div>
+      <div class="bottom">
+
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "LivePage",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.LivePage {
+  width: 100vw;
+  height: 100vh;
+  color: white;
+  font-size: 1.4rem;
+  position: relative;
+
+  .live-wrapper {
+    width: 100vw;
+    height: 100vh;
+
+    img {
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+
+  .float {
+    position: absolute;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+
+    .top {
+      margin-top: 1rem;
+
+      .left {
+        .liver {
+          box-sizing: border-box;
+          width: 45vw;
+          background: yellowgreen;
+          display: flex;
+          padding: .2rem .2rem .2rem .1rem;
+          align-items: center;
+          border-radius: 2rem;
+
+          .avatar {
+            border-radius: 50%;
+            width: 3rem;
+            height: 3rem;
+          }
+
+          .desc {
+
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+
+            .desc-wrapper {
+              width: 60%;
+
+              .name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+
+              .count {
+                font-size: 1rem;
+              }
+            }
+
+            .follow-btn {
+              height: 3.8rem;
+              width: 4rem;
+              background: @primary-btn-color;
+              border-radius: 3rem;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 1.2rem;
+            }
+          }
+        }
+
+      }
+
+      .right {
+
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -50,7 +50,8 @@ import Report from "../pages/home/Report";
 import SubmitReport from "../pages/home/SubmitReport";
 import RequestUpdate from "../pages/me/RequestUpdate";
 import Test4 from "../pages/Test4";
-import Search from "../pages/home/Search";
+import Search from "../pages/home/SearchPage";
+import LivePage from "../pages/home/LivePage";
 
 const routes = [
   // {path: '', component: Music},
@@ -66,6 +67,7 @@ const routes = [
   {path: '/home/music-rank-list', component: MusicRankList},
   {path: '/home/report', component: Report},
   {path: '/home/search', component: Search},
+  {path: '/home/live', component: LivePage},
 
 
   {path: '/attention', component: Attention},