推荐MV使用tailwind

src/tailwind.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+  .primary-color {
+    color: var(--n-color);
+  }
+}

src/views/common/SongCtrl.vue

@@ -123,13 +123,13 @@ const play = async (id, im = true) => {
 };
 
 const pause = (e) => {
-  console.log('点击暂停',e);
+  // console.log('点击暂停',e);
   audioEl.value.pause();
   playing.value = false;
 };
 
 const resume = async (e) => {
-  console.log('点击恢复播放',e);
+  // console.log('点击恢复播放',e);
   if (audioEl.value.readyState) {
     //如果暂停过了10分钟，需要再次载入歌曲
     // console.log(Date.now() - lastPause);
@@ -161,7 +161,7 @@ const favorite = () => {
 };
 
 const removeCurrentSong = (e) => {
-  console.log('从播放列表中删除',e);
+  // console.log('从播放列表中删除',e);
   if(e?.pointerId!=-1)
     pubsub.publish("zp.removeCurrPlayingSong", {
       id: store.state.settings.songId,

src/views/discover/Recommend.vue

@@ -87,9 +87,54 @@
         </n-grid-item>
       </n-grid>
     </div>
+    <!-- tailwind 推荐MV -->
+    <div class="
+      mt-4
+      text-xl
+      flex items-center"
+      :style="{
+        color: store.state.theme.themeOverrides.common.primaryColor,
+      }"
+    >
+      推荐MV 
+      <svg-icon name="ChevronForward" class="mx-1" />
+    </div>
+    <div class=" mt-1 grid grid-cols-4 gap-5">
+      <div 
+        v-for="(mv, idx) in personalizedMV"
+        :key="mv.id"
+        class=" border border-gray-200 rounded-md
+        "
+      >
+        <div class="relative">
+          <img :src="mv.picUrl" class="rounded-t-md object-cover xs:h-14 sm:h-16 md:h-20 w-full" />
+          <div class="m-1 h-7 w-7 bg-white bg-opacity-70 
+          absolute bottom-0 right-0
+          rounded-full"></div>
+          <div class="
+            text-xl
+            absolute
+            flex items-center"
+            :style="{
+              color: store.state.theme.themeOverrides.common.primaryColor,
+              bottom: 8 + 'px',
+              right: 2 + 'px',
+            }"
+          >
+            <svg-icon name="Play" class="mx-1" />
+          </div>
+          
+        </div>
+        <div class="mx-1 mt-1 text-gray-800 text-sm truncate">
+          {{ mv.name }}
+        </div>
+        <div class="mx-1 mb-1 text-gray-500 text-xs truncate">
+          {{ mv.artistName }}
+        </div>
+      </div>
+    </div>
     <!-- 推荐MV -->
-    <div>
+    <!-- <div>
-      <!-- 标题 -->
       <n-button
         text
         icon-placement="right"
@@ -104,7 +149,6 @@
         </template>
         推荐MV
       </n-button>
-      <!-- 列表 -->
       <n-grid
         :x-gap="18"
         :y-gap="8"
@@ -150,7 +194,7 @@
           </div>
         </n-grid-item>
       </n-grid>
-    </div>
+    </div> -->
     <!-- 推荐歌单 -->
     <div>
       <n-button

src/views/videos/V.vue

@@ -58,67 +58,9 @@ const fileChange = (e) => {
 
 </script>
 <template>
-  <!-- <NSpace>
+  <div>
-    <NButton>
+    
-      <template #icon>
-        <n-icon>
-          <PlayCircle/>
-        </n-icon>
-      </template>
-      NIcon 按钮
-    </NButton>
-    <NButton>
-      <template #icon>
-        <n-icon>
-          <svg-icon name="PlayCircle"></svg-icon>
-        </n-icon>
-      </template>
-      svg-sprite-loader 按钮
-    </NButton>
-    <NButton text style="font-size: 40px">
-        <n-icon>
-          <svg-icon name="Dots" />
-        </n-icon>
-      svg-sprite-loader 按钮
-    </NButton>
-    <NButton>
-      <template #icon>
-        <n-icon>
-          <svg-icon name="PlayCircle"></svg-icon>
-        </n-icon>
-      </template>
-      svg-sprite-loader 按钮
-    </NButton>
-  </NSpace> -->
-  <n-space>
-    <n-button @click="edit">
-      新增
-    </n-button>
-    <n-button>
-      编辑
-    </n-button>
-    <n-button>
-      保存
-    </n-button>
-  </n-space>
-  <div class="edit" v-show="showEditor">
-    <div class="title">标题哈啊哈</div>
-    <div class="content">
-      Content 编辑内容
-    </div>
-    <div class="footer">
-      Footer 尾部
-    </div>
   </div>
-  <input type="file" id="file" @change="fileChange">
-  
-  <div class="max-w-sm my-3 mx-auto hover:bg-purple-900  hover:text-white hover:cursor-pointer
-    border-gray-100 border px-2 py-3 
-    text-xs bg-white 
-    rounded-md shadow-md">
-    这是一个测试
-  </div>
-
 </template>
 
 <script>