抖音音乐榜

src/assets/img/icon/collect-white.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539944516004" class="icon" style="" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1932" xmlns:xlink="http://www.w3.org/1999/xlink" width="203.125" height="200"><defs><style type="text/css"></style></defs><path d="M177.812755 934.420799l46.095851-257.966283c2.695389-15.143908-2.527566-30.567179-14.003945-41.262776L14.733563 452.469162c-28.840862-26.952862-12.94687-73.967642 26.897603-79.524195l269.74863-37.622876c15.836687-2.223644 29.509081-11.753695 36.59343-25.507954l120.647801-234.709603c17.810644-34.650171 69.270666-34.650171 87.082334 0l120.647801 234.709603c7.086395 13.754259 20.75572 23.283286 36.5658 25.507954l269.775236 37.622876c39.819914 5.556553 55.711859 52.571333 26.926256 79.524195L814.393121 635.19174c-11.44875 10.695596-16.671705 26.118867-13.978363 41.262776l46.098921 257.966283c6.807033 38.09462-34.845623 67.131957-70.465888 49.152467l-241.295602-121.81437c-14.141068-7.111978-31.035854-7.111978-45.179992 0l-241.295602 121.81437C212.655308 1001.551732 171.002652 972.514395 177.812755 934.420799L177.812755 934.420799zM534.75219 812.217572l238.684124 120.478955c11.864212 6.001691 25.75764-3.695159 23.50739-16.365736L751.34518 661.141762c-2.694365-15.115256 2.529613-30.56411 13.948687-41.289382l193.115276-180.692339c9.613962-9.003048 4.306072-24.676006-8.974395-26.5374l-266.858814-37.232996c-15.810081-2.196015-29.482475-11.727089-36.5658-25.481348L526.667048 117.729332c-5.947456-11.532661-23.090904-11.532661-29.037337 0L378.316302 349.909321c-7.086395 13.754259-20.756743 23.285333-36.566824 25.481348L74.891687 412.623665c-13.280468 1.861394-18.560728 17.534352-8.974395 26.507724l193.0856 180.720991c11.447726 10.724249 16.670681 26.174126 13.975293 41.289382l-45.569872 255.18903c-2.276856 12.670577 11.587919 22.367427 23.480784 16.365736l238.682078-120.478955C503.716336 805.074895 520.610098 805.074895 534.75219 812.217572L534.75219 812.217572zM534.75219 812.217572" p-id="1933" fill="#ffffff"></path></svg>

src/assets/img/icon/collect.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702140748" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7467" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 134.608l121.136 248.451 270.871 39.867L708.005 616.305l46.265 273.088L512 760.464 269.73 889.393l46.266-273.088L119.993 422.926l270.873-39.867L512 134.608M512 77.923c-21.302 0-40.771 12.251-50.204 31.583l-108.12 221.763-241.724 35.547c-21.109 3.118-38.637 18.047-45.227 38.583-6.563 20.535-1.094 43.066 14.165 58.106l174.921 172.598L214.549 879.82c-3.609 21.274 5.032 42.767 22.286 55.43 9.762 7.163 21.301 10.827 32.896 10.827 8.914 0 17.882-2.16 26.087-6.509L512 824.505l216.239 115.063c8.176 4.349 17.117 6.509 26.03 6.509 11.622 0 23.188-3.664 32.923-10.827 17.256-12.69 25.896-34.181 22.287-55.43l-41.29-243.718L943.11 463.504c15.256-15.04 20.727-37.571 14.164-58.106-6.589-20.536-24.118-35.465-45.228-38.583l-241.722-35.547L562.229 109.533C552.797 90.174 533.328 77.923 512 77.923L512 77.923z" p-id="7468"></path></svg>

src/assets/img/icon/pause.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539874117023" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M256 810.666667h170.666667V213.333333H256v597.333334z m341.333333-597.333334v597.333334h170.666667V213.333333h-170.666667z" p-id="1959" fill="#ffffff"></path></svg>

src/assets/img/icon/play.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539575406495" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1072" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912.724884 429.355681L208.797545 13.198638C151.603449-20.597874 64.01249 12.198741 64.01249 95.790112V927.904219c0 74.992259 81.391599 120.187594 144.785055 82.591475l703.927339-415.957064c62.793518-36.996181 62.993498-128.186768 0-165.182949z" fill="#cdcdcd" p-id="1073"></path></svg>

src/components/DouyinCode.vue

@@ -14,7 +14,7 @@
 
         <div class="video-poster">
           <img src="../assets/img/poster/1.jpg" class="poster">
-          <img src="../assets/img/icon/play.svg" class="play">
+          <img src="../assets/img/icon/play-white.png" class="play">
         </div>
       </div>
       <div class="toolbar">

src/components/Other.vue

@@ -21,7 +21,7 @@
               </div>
               <div class="my-buttons ">
                 <div class="collect">
-                  <img src="../assets/img/icon/collect-white.svg" alt="">
+                  <img src="../assets/img/icon/star-white.png" alt="">
                   <span class="mr5p">收藏</span>
                 </div>
                 <div class="add-friend">

src/components/Video.vue

@@ -8,7 +8,7 @@
            :autoplay="isPlay" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
-    <img src="../assets/img/icon/play.svg" class="pause" v-if="!isPlaying">
+    <img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
     <div class="float" @click.stop="checkDbClick">
       <!--       @click.stop="togglePlayVideo" -->
       <div :style="{opacity:isMove ? 0:1}" class="normal">
@@ -279,27 +279,7 @@ export default {
       return globalMethods.$likeNum(v)
     },
     $duration(v) {
-      if (!v) return
-      let m = Math.floor(v / 60)
-      // let s = v % 60
-      let s = Math.round(v % 60)
-      let str = ''
-      if (m === 0) {
-        str = '00'
-      } else if (m > 0 && m < 10) {
-        str = '0' + m
-      } else {
-        str = m
-      }
-      str += ':'
-      if (s === 0) {
-        str += '00'
-      } else if (s > 0 && s < 10) {
-        str += '0' + s
-      } else {
-        str += s
-      }
-      return str
+      return globalMethods.$duration(v)
     },
     attention() {
       let option = this.$refs['attention-option']

src/config/index.js

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

src/pages/home/Music.vue

@@ -28,7 +28,7 @@
               <div class="peoples">>1 人使用</div>
             </div>
             <div class="collection">
-              <img src="../../assets/img/icon/collect-white.svg" alt="">
+              <img src="../../assets/img/icon/star-white.png" alt="">
               <span>收藏</span>
             </div>
           </div>

src/pages/home/MusicRankList.vue

@@ -19,9 +19,36 @@
           name="musicRankList"
           v-model:active-index="contentIndex">
         <SlideItem>
+          <!--          TODO 点击收藏后，如果歌手在抖音有账号，就在item下面展示歌手条目-->
           <div class="list">
-            <div class="item">
-
+            <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
+              <div class="left">
+                <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                <div v-else class="rank">{{ index + 1 }}</div>
+                <div class="music">
+                  <div class="cover-wrapper">
+                    <img src="../../assets/img/icon/avatar/1.png" alt="" class="cover">
+                    <img v-if="!item.is_play" src="../../assets/img/icon/play-white.png" alt="" class="play">
+                    <img v-if="item.is_play" src="../../assets/img/icon/pause-white.png" alt="" class="play">
+                  </div>
+                  <div class="desc">
+                    <span class="name">{{ item.name }}</span>
+                    <div class="author">{{ item.author }}</div>
+                    <div class="bottom">
+                      <div class="duration">{{ $duration(item.duration) }}</div>
+                      <div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
+                     @click="toggleCollect(item)">
+                <img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
+                <img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
+              </div>
             </div>
           </div>
         </SlideItem>
@@ -43,28 +70,40 @@ export default {
       contentIndex: 0,
       hotList: [
         {
-          name: '阳光宅男',
+          name: '阳光宅男阳光宅男阳光宅男阳光宅男阳光宅男',
           cover: '',
           author: '周杰伦',
-          duration: 60,
-          hot: 37441000,
-          is_collect: false
+          duration: 99,
+          use_count: 37441000,
+          is_collect: false,
+          is_play: false,
         },
         {
           name: '阳光宅男',
           cover: '',
           author: '周杰伦',
           duration: 60,
-          hot: 37441000,
-          is_collect: false
+          use_count: 37441000,
+          is_collect: false,
+          is_play: false,
         },
         {
           name: '阳光宅男',
           cover: '',
           author: '周杰伦',
           duration: 60,
-          hot: 37441000,
-          is_collect: false
+          use_count: 37441000,
+          is_collect: false,
+          is_play: false,
+        },
+        {
+          name: '阳光宅男',
+          cover: '',
+          author: '周杰伦',
+          duration: 60,
+          use_count: 37441000,
+          is_collect: false,
+          is_play: false,
         },
       ]
     }
@@ -72,7 +111,19 @@ export default {
   computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    toggleCollect(item) {
+      item.is_collect = !item.is_collect
+      if (item.is_collect) {
+        this.$notice('收藏成功')
+      } else {
+        this.$notice('取消收藏')
+      }
+    },
+    togglePlay(item) {
+      item.is_play = !item.is_play
+    }
+  }
 }
 </script>
 
@@ -91,6 +142,99 @@ export default {
 
   .content {
     padding-top: 6rem;
+
+    .list {
+      .item {
+        padding: 1rem 1.5rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left {
+          width: 73%;
+          display: flex;
+          align-items: center;
+
+          .rank {
+            width: 1.8rem;
+            height: 1.8rem;
+            line-height: 1.8rem;
+            text-align: center;
+            margin-right: 1.5rem;
+          }
+
+          .music {
+            display: flex;
+
+            .cover-wrapper {
+              margin-right: 1rem;
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .play {
+                width: 3rem;
+                height: 3rem;
+                position: absolute;
+              }
+
+              .cover {
+                border-radius: .2rem;
+                @width: 6rem;
+                width: @width;
+                height: @width;
+              }
+            }
+
+            .desc {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+
+              .name {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                max-width: 60%;
+              }
+
+              .author, .bottom {
+                font-size: 1.2rem;
+                color: @second-text-color;
+              }
+
+              .bottom {
+                display: flex;
+
+                .duration {
+                  margin-right: 1.4rem;
+                  position: relative;
+
+                  &:after {
+                    content: '';
+                    position: absolute;
+                    width: 1.5px;
+                    height: 1.5px;
+                    background: white;
+                    right: -7px;
+                    top: 7px;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .right {
+          img {
+            width: 2rem;
+            height: 2rem;
+            margin-left: 2rem;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/pages/me/VideoDetail.vue

@@ -23,7 +23,7 @@
         </div>
         <div class="permission-setting" v-if="isMy">
           <div class="right">
-            <img src="../../assets/img/icon/play.svg" alt="">
+            <img src="../../assets/img/icon/play-white.png" alt="">
             <span>3030浏览</span>
           </div>
           <div class="share-btn" @click="dialog.permissionDialog = true">权限设置</div>

src/pages/me/我的动态.vue

@@ -23,7 +23,7 @@
           <div class="music">
             <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
             <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
-            <img src="../../assets/img/icon/play.svg" alt="" class="play">
+            <img src="../../assets/img/icon/play-white.png" alt="" class="play">
             <img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false">
           </div>
         </div>

src/pages/message/components/ChatMessage.vue

@@ -17,7 +17,7 @@
              v-if="message.type ===  MESSAGE_TYPE.DOUYIN_VIDEO">
           <img class="poster" :src="message.data.poster" alt=""/>
           <div class="title">{{ message.data.title }}</div>
-          <img src="../../../assets/img/icon/play.svg" class="pause"/>
+          <img src="../../../assets/img/icon/play-white.png" class="pause"/>
           <div class="author">
             <img class="video-avatar" :src="message.data.author.avatar" alt="">
             <span class="name">{{ message.data.author.name }}</span>
@@ -27,7 +27,7 @@
         <div class="douyin_video"
              v-if="message.type ===  MESSAGE_TYPE.VIDEO">
           <img class="poster" :src="message.data.poster" alt=""/>
-          <img src="../../../assets/img/icon/play.svg" class="pause"/>
+          <img src="../../../assets/img/icon/play-white.png" class="pause"/>
         </div>
 
         <div class="audio"

src/utils/global-methods.js

@@ -323,4 +323,27 @@ export default {
         return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
     }
   },
+  $duration(v) {
+    if (!v) return
+    let m = Math.floor(v / 60)
+    // let s = v % 60
+    let s = Math.round(v % 60)
+    let str = ''
+    if (m === 0) {
+      str = '00'
+    } else if (m > 0 && m < 10) {
+      str = '0' + m
+    } else {
+      str = m
+    }
+    str += ':'
+    if (s === 0) {
+      str += '00'
+    } else if (s > 0 && s < 10) {
+      str += '0' + s
+    } else {
+      str += s
+    }
+    return str
+  },
 }