修改video详情页面

src/assets/scss/color.scss

@@ -1,4 +1,7 @@
 $main-bg: rgb(22, 26, 37);
 $second-text-color: rgb(143, 143, 158);
-$second-btn-color: rgb(58,58,70);
+$second-btn-color: rgb(58, 58, 70);
 $line-color: rgb(37, 45, 66);
+
+
+$primary-btn-color: rgb(252, 47, 86);

src/assets/scss/index.scss

@@ -5,22 +5,20 @@
 @import "custom";
 //自定义的一些快捷css类
 @import "color";
-//颜色
-@import "dialog";
-//弹窗
+//颜色 
 @import "layout"; //布局
 
 
 html, body {
-    width: 100%;
-    height: 100%;
-    background: #2e3244;
-    font-size: 62.5%;
-    margin: 0;
-    padding: 0;
+  width: 100%;
+  height: 100%;
+  background: #2e3244;
+  font-size: 62.5%;
+  margin: 0;
+  padding: 0;
 }
 
 p {
-    padding: 0;
-    margin: 0;
+  padding: 0;
+  margin: 0;
 }

src/assets/scss/variables.scss

@@ -0,0 +1 @@
+$footer-height: 60px;

src/components/Search.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="search">
+    <img src="../assets/img/icon/pause.svg" alt="">
+    <input type="text" placeholder="搜索">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Search"
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/scss/color";
+
+.search {
+  height: 36px;
+  background: rgb(59, 59, 71);
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+
+  img {
+    height: 15px;
+    width: 15px;
+    margin: 0 10px;
+  }
+
+  input {
+    font-size: 1.6rem;
+    color: white;
+    height: 50%;
+    width: 100%;
+    outline: none;
+    border: none;
+    background: transparent;
+
+    &::-webkit-input-placeholder {
+      color: $second-text-color;
+    }
+  }
+}
+
+</style>

src/components/slide/SlideList.vue

@@ -405,7 +405,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/color";
+@import "../../assets/scss/index";
 
 #base-slide-wrapper {
   width: 100%;

src/pages/home/Index.vue

@@ -166,7 +166,7 @@ import Comment from '../../components/Comment.vue'
 import Other from '../../components/Other.vue'
 import Share from '../../components/Share.vue'
 import Footer from "../../components/Footer.vue"
-import mp41 from '../../assets/video/1.mp4'
+import mp41 from '../../assets/video/5.mp4'
 import mp42 from '../../assets/video/2.mp4'
 import mp43 from '../../assets/video/3.mp4'
 import mp44 from '../../assets/video/4.mp4'

src/pages/home/Message.vue

@@ -6,10 +6,7 @@
         <span @click="nav('/myCard')">创建群聊</span>
       </div>
     </div>
-    <div class="search">
-      <img src="../../assets/img/icon/pause.svg" alt="">
-      <input type="text" placeholder="搜索">
-    </div>
+    <Search class="m20p"></Search>
     <div class="line mb20p"></div>
     <div class="friends  pl10p ">
       <div class="friend pr10p pl10p" v-for="item in 10">
@@ -107,11 +104,13 @@
 
 <script>
 import Footer from '../../components/Footer.vue'
+import Search from "../../components/Search";
 
 export default {
   name: "Message",
   components: {
-    Footer
+    Footer,
+    Search
   },
   data() {
     return {}
@@ -125,7 +124,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/color";
+@import "../../assets/scss/index";
 
 #Message {
   background: $main-bg;
@@ -147,35 +146,6 @@ export default {
     }
   }
 
-  .search {
-    height: 36px;
-    background: rgb(59, 59, 71);
-    margin: 20px;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-
-    img {
-      height: 15px;
-      width: 15px;
-      margin: 0 10px;
-    }
-
-    input {
-      font-size: 1.6rem;
-      color: white;
-      height: 50%;
-      width: 100%;
-      outline: none;
-      border: none;
-      background: transparent;
-
-      &::-webkit-input-placeholder {
-        color: $second-text-color;
-      }
-    }
-  }
-
   .friends {
     overflow-x: scroll;
     display: flex;
@@ -310,7 +280,7 @@ export default {
             font-size: 1.8rem;
             color: white;
             display: flex;
-            align-items: start;
+            align-items: flex-start;
 
             .tag {
               margin-left: 5px;
@@ -368,7 +338,7 @@ export default {
 
     }
 
-    .not-more{
+    .not-more {
       color: $second-text-color;
       text-align: center;
       padding: 20px;
@@ -384,6 +354,7 @@ export default {
 
       .left {
         color: $second-text-color;
+
         img {
           width: 10px;
           height: 10px;
@@ -444,13 +415,13 @@ export default {
           align-items: center;
 
           .button {
-            background: rgb(252,47,86);
+            background: $primary-btn-color;
             margin-left: 8px;
             padding: 8px 20px;
             border-radius: 3px;
 
             &:nth-last-child(1) {
-              background: rgb(58,58,67);
+              background: rgb(58, 58, 67);
             }
           }
         }

src/pages/me/Me.vue

@@ -306,7 +306,7 @@ export default {
 </script>
 
 <style scoped lang='scss'>
-@import "../../assets/scss/color";
+@import "../../assets/scss/index";
 
 .fade-enter-active,
 .fade-leave-active {

src/pages/me/VideoDetail.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="home-index">
     <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
-      <SlideItem >
+      <SlideItem>
+        <div class="search-ctn">
+          <img src="../../assets/img/icon/back.png" alt="" class="back">
+          <Search></Search>
+        </div>
         <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
           <SlideItem :style="itemTop" v-for="(item,index)  of videos">
             <Video
@@ -13,6 +17,18 @@
             ></Video>
           </SlideItem>
         </SlideList>
+        <div class="share-to-friend" v-if="!isMy">
+          <span>留下你的精彩评论吧</span>
+          <div class="share-btn" @click="dialog.shareToFriend = true">分享给朋友</div>
+        </div>
+        <div class="permission-setting" v-if="isMy">
+          <div class="right">
+            <img src="../../assets/img/icon/play.svg" alt="">
+            <span>3030浏览</span>
+          </div>
+          <div class="share-btn" @click="dialog.permissionDialog = true">权限设置</div>
+        </div>
+
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
         <div>
@@ -59,6 +75,78 @@
         </div>
       </SlideItem>
     </SlideList>
+
+    <transition name="share-dialog">
+      <div class="share-dialog" v-if="dialog.shareToFriend ">
+        <div class="heng-gang">
+          <div class="content"></div>
+        </div>
+        <div class="collection" @click="dialog.shareToFriend  = false">
+          <img src="../../assets/img/icon/me/collection-black.png" alt="">
+          收藏
+        </div>
+        <div class="friends">
+          <div class="friend" v-for="i in 6">
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="right">
+              <span>三分钟情、</span>
+              <div class="share-btn">分享</div>
+            </div>
+          </div>
+          <div class="friend">
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="right">
+              <span>更多好友</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <transition name="share-dialog">
+      <div class="permission-dialog" v-if="dialog.permissionDialog">
+        <div class="heng-gang">
+          <div class="content"></div>
+        </div>
+        <div class="setting" @click="dialog.permissionDialog = false">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <span>公开  所有人可见</span>
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          </div>
+        </div>
+        <div class="setting">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <span>朋友  互关朋友可见</span>
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          </div>
+        </div>
+        <div class="setting">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <span>私密  仅自己见</span>
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          </div>
+        </div>
+        <div class="setting" style="border-bottom: none;">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <span>不给谁看</span>
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          </div>
+        </div>
+        <div class="space">
+
+        </div>
+        <div class="setting pb40p">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <span>更多好友</span>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -73,10 +161,11 @@ import mp42 from "../../assets/video/2.mp4";
 import mp43 from "../../assets/video/3.mp4";
 import mp44 from "../../assets/video/4.mp4";
 import mp45 from "../../assets/video/5.mp4";
+import Search from "../../components/Search";
 
 export default {
   name: "VideoDetail",
-  components: {Footer, Comment, Share, Other},
+  components: {Footer, Comment, Share, Other, Search},
   data() {
     return {
       list: [1, 2, 3, 4, 5],
@@ -136,7 +225,12 @@ export default {
       total: 10,
       baseActiveIndex: 0,
       videoActiveIndex: 0,
-      canMove: false
+      canMove: false,
+      dialog: {
+        shareToFriend: false,
+        permissionDialog: false,
+      },
+      isMy: true
     }
   },
   computed: {
@@ -154,9 +248,251 @@ export default {
 
 }
 </script>
+
 <style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.share-dialog-enter-active,
+.share-dialog-leave-active {
+  transition: transform 0.2s ease;
+}
+
+.share-dialog-enter-from,
+.share-dialog-leave-to {
+  transform: translate3d(0, 50vh, 0);
+}
+
 #home-index {
   height: 100%;
   width: 100%;
+
+  .search-ctn {
+    z-index: 9;
+    position: fixed;
+    top: 10px;
+    left: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+
+    .back {
+      width: 20px;
+      height: 20px;
+      margin-right: 20px;
+    }
+
+    .search {
+      width: 100%;
+      background: rgba(50, 50, 50, .8);
+    }
+  }
+
+  .share-to-friend {
+    color: $second-text-color;
+    height: $footer-height;
+    z-index: 9;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .share-btn {
+      color: darkgray;
+      padding: 6px 14px;
+      background: rgb(44, 44, 44);
+      border-radius: 50px;
+    }
+
+  }
+
+  .permission-setting {
+    color: $second-text-color;
+    height: $footer-height;
+    z-index: 9;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 1.4rem;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .share-btn {
+      color: darkgray;
+      padding: 6px 14px;
+      background: rgb(44, 44, 44);
+      border-radius: 50px;
+    }
+
+  }
+
+  .share-dialog {
+    padding: 10px 10px 0 10px;
+    z-index: 9;
+    position: fixed;
+    width: 100%;
+    max-height: 50vh;
+    overflow: auto;
+    bottom: 0;
+    background: whitesmoke;
+    box-sizing: border-box;
+    border-radius: 5px 5px 0 0;
+
+    .heng-gang {
+      display: flex;
+      justify-content: center;
+
+      .content {
+        border-radius: 2px;
+        height: 4px;
+        width: 30px;
+        background: darkgray;
+        margin-bottom: 5px;
+      }
+    }
+
+    .collection {
+      margin: 10px 0;
+      background: white;
+      width: 100%;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      font-size: 1.6rem;
+      font-weight: bold;
+      padding: 10px;
+      box-sizing: border-box;
+
+      img {
+        background: white;
+        width: 35px;
+        height: 35px;
+        margin-right: 10px;
+      }
+
+    }
+
+    .friends {
+      background: white;
+      border-radius: 6px 6px 0 0;
+
+      width: 100%;
+
+      .friend {
+        box-sizing: border-box;
+        padding: 10px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        //border-bottom: 1px solid ghostwhite;
+        border-bottom: 1px solid gainsboro;
+
+        img {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+        }
+
+        .right {
+          margin: 0 5px 0 15px;
+          font-size: 1.6rem;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .share-btn {
+            font-size: 1.4rem;
+            color: white;
+            padding: 5px 20px;
+            background: $primary-btn-color;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .permission-dialog {
+    padding: 10px 0 0 0;
+    z-index: 9;
+    position: fixed;
+    width: 100%;
+    max-height: 50vh;
+    overflow: auto;
+    bottom: 0;
+    background: white;
+    box-sizing: border-box;
+    border-radius: 5px 5px 0 0;
+
+    .heng-gang {
+      display: flex;
+      justify-content: center;
+
+      .content {
+        border-radius: 2px;
+        height: 4px;
+        width: 30px;
+        background: darkgray;
+        margin-bottom: 10px;
+      }
+    }
+
+    .space {
+      height: 10px;
+      background: whitesmoke;
+    }
+
+    .setting {
+      background: white;
+      box-sizing: border-box;
+      padding: 10px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      //border-bottom: 1px solid ghostwhite;
+      border-bottom: 1px solid gainsboro;
+
+      img {
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+      }
+
+      .right {
+        margin: 0 5px 0 15px;
+        font-size: 1.4rem;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .share-btn {
+          font-size: 1.4rem;
+          color: white;
+          padding: 5px 20px;
+          background: $primary-btn-color;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
 }
 </style>