很久以后得整理

2023-01-29 15:06:46 +08:00
parent b7c25adeee
commit a3c872c7d7
37 changed files with 2488 additions and 2165 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -259,7 +259,7 @@ button.n-button{
  display: flex;
  flex-direction: column;
  height: 100vh;
-  user-select: none;
+  // user-select: none;
  #top {
    height: 40px;
    display: flex;
--- a/src/components/svgIcon.vue
+++ b/src/components/svgIcon.vue
@@ -36,5 +36,6 @@ const svgClass = computed(()=> {
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
+  overflow: hidden;
 }
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -75,6 +75,7 @@ const routes = [
        path: "v",
        name: "videos.v",
        component: () => import("../views/videos/V.vue"),
+        // component: () => import("../views/videos/V.jsx"),
      },
      {
        path: "mv",
--- a/src/views/common/Nav.vue
+++ b/src/views/common/Nav.vue
@@ -11,16 +11,22 @@ const router = useRouter()
  <NSpace id="nav" justify="end">
    <n-button circle size="small" @click="router.back()" >
      <template #icon>
-        <n-icon>
+        <!-- <n-icon>
          <ChevronBack />
-        </n-icon>
+        </n-icon> -->
+        <!-- <n-icon> -->
+          <svg-icon name="ChevronBack" class="" />
+        <!-- </n-icon> -->
      </template>
    </n-button>
    <n-button circle size="small" @click="router.forward()">
      <template #icon>
-        <n-icon>
+        <!-- <n-icon>
          <ChevronForward />
-        </n-icon>
+        </n-icon> -->
+        <!-- <n-icon> -->
+          <svg-icon name="ChevronForward" class="" />
+        <!-- </n-icon> -->
      </template>
    </n-button>
  </NSpace>
--- a/src/views/common/SongCtrl.vue
+++ b/src/views/common/SongCtrl.vue
@@ -101,7 +101,7 @@ const play = async (id, im = true) => {
  await getSongUrl(id)
    .then((res) => {
      if (null !== res.data.data[0].url) {
-        audioEl.value.src = res.data.data[0].url;
+        audioEl.value.src = res.data.data[0].url.replace('http://', 'https://');
        store.commit("saveSettings", {
          songId: id,
        });
--- a/src/views/discover/Recommend.vue
+++ b/src/views/discover/Recommend.vue
@@ -12,7 +12,7 @@
        v-for="(b, idx) in banners"
        :key="idx"
      >
-        <img class="carousel-img" :src="b.imageUrl" @click="clickBanner(b.targetId, b.targetType)" />
+        <img class="carousel-img" :src="b.imageUrl.replace('http://', 'https://')" @click="clickBanner(b.targetId, b.targetType)" />
        <span class="title">{{ b.typeTitle }}</span>
      </div>
    </n-carousel>
@@ -44,7 +44,7 @@
        >
          <div class="c2-list">
            <div class="play-btn"  @click="play(song.id)">
-              <img v-lazy="song.album.blurPicUrl" />
+              <img v-lazy="song.album.blurPicUrl.replace('http://', 'https://')" />
              <n-button
                text
                class="start-play-bg"
@@ -99,30 +99,39 @@
      推荐MV 
      <svg-icon name="ChevronForward" class="mx-1" />
    </div>
-    <div class=" mt-1 grid grid-cols-4 gap-5">
+    <div class="mt-1 grid grid-cols-4 gap-4">
      <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 
+        <div class="relative group cursor-pointer">
+          <img :src="mv.picUrl" class="rounded-t-md object-cover w-full aspect-video" />
+          <div class="w-full aspect-video flex justify-center items-center  absolute top-0 pt-2 group-hover:visible invisible">
+            <div class="rounded-full bg-white/75 w-7 h-7 md:w-9 md:h-9"></div>
+          </div>
+          <div class="w-full aspect-video flex justify-center items-center  absolute top-0 pt-2 pl-[3px] md:pl-[5px] group-hover:visible invisible">
+            <svg-icon name="Play" class="text-xl md:text-3xl" :style="{
+              color: store.state.theme.themeOverrides.common.primaryColor,
+            }" />
+          </div>
+          <!-- <div class="m-1 h-7 w-7 bg-white bg-opacity-70 
          absolute bottom-0 right-0
-          rounded-full"></div>
-          <div class="
+          rounded-full
+          group-hover:visible invisible"></div>
+          <div class="group-hover:visible invisible
            text-xl
-            absolute
+            absolute right-[6px] bottom-[8px]
            flex items-center"
            :style="{
              color: store.state.theme.themeOverrides.common.primaryColor,
-              bottom: 8 + 'px',
-              right: 2 + 'px',
+              //bottom: 8 + 'px',
+              //right: 2 + 'px',
            }"
          >
-            <svg-icon name="Play" class="mx-1" />
-          </div>
+            <svg-icon name="Play" class="" />
+          </div> -->
          
        </div>
        <div class="mx-1 mt-1 text-gray-800 text-sm truncate">
@@ -195,8 +204,30 @@
        </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,
+      }"
+    >
+      推荐歌单 
+      <svg-icon name="ChevronForward" class="mx-1" />
+    </div>
+     <div class=" mt-1 grid grid-cols-4 gap-4">
+       <div v-for="p in personalized" :key="p.id"
+        class="rounded-md border border-gray-200"
+       >
+         <img :src="p.picUrl" class="rounded-t-md object-cover aspect-square" />
+         <div class="m-1 text-sm text-gray-500 card-span">
+           {{ p.name }}
+         </div>
+       </div>
+     </div>
    <!-- 推荐歌单 -->
-    <div>
+    <!-- <div>
      <n-button
        text
        icon-placement="right"
@@ -230,7 +261,7 @@
          </n-card>
        </n-grid-item>
      </n-grid>
-    </div>
+    </div> -->
  </div>
 </template>

--- a/src/views/videos/V.jsx
+++ b/src/views/videos/V.jsx
@@ -0,0 +1,61 @@
+import { withModifiers, defineComponent, ref } from "vue";
+import styled from "vue3-styled-components";
+
+// const V = defineComponent({
+//   setup() {
+//     const count = ref(0);
+
+//     const inc = () => {
+//       count.value++;
+//     };
+
+//     return () => (
+//       <div onClick={inc}>{count.value}</div>
+//     );
+//   },
+// });
+const wp = styled.div`
+  color: red;
+  font-size: 32px;
+`
+
+const V = {
+  setup(){
+    const desc = ref('说明测试哈啊哈')
+    return {desc}
+  },
+  data() {
+    return { 
+      visible: true,
+      title: '这是一个标题测试',
+    };
+  },
+  mounted(){
+    console.log('mounted');
+  },
+  render() {
+    const clsBtn = `px-4 py-1 text-sm text-purple-600 font-semibold 
+    rounded-full border border-purple-200 
+    hover:text-white hover:bg-purple-600 hover:border-transparent 
+    focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2`
+    return <>
+            <div>{this.title}<br/>
+            {this.desc}<br/>
+            {this.visible.toString()}</div>
+            <input 
+              className=" p-1 rounded text-xs border" 
+              vShow={this.visible} 
+              vModel={this.title}
+            />
+            <button className={clsBtn}>
+              按钮
+            </button>
+            <div className={`px-4 py-1 text-sm text-purple-600`}>
+              class测试
+            </div>
+            <wp>这是一个测试div</wp>
+          </>;
+  },
+};
+
+export default V;
--- a/src/views/videos/V.vue
+++ b/src/views/videos/V.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { NButton, NSpace, NIcon } from "naive-ui";
 import PlayCircle from '@/assets/svgs/PlayCircle.svg'
+import ChevronForward from "@/assets/svgs/ChevronForward.svg";
 import {ref} from 'vue'
 import sparkMD from 'spark-md5' 
 import CryptoJS from 'crypto-js';
@@ -58,9 +59,32 @@ const fileChange = (e) => {

 </script>
 <template>
-  <div>
-    
-  </div>
+  <n-button circle>
+    <template #icon>
+      <svg-icon name="HeartOutline" />
+    </template>
+  </n-button>
+  <n-button
+        text
+        icon-placement="right"
+        size="large"
+        type="primary"
+        style="font-size: 1.3em; margin-top: 6px"
+      >
+        <template #icon>
+          <n-icon>
+            <svg-icon name="ChevronForward" class="" />
+          </n-icon>
+        </template>
+        最新音乐
+      </n-button>
+  
+  <svg-icon name="Play" class="text-xl md:text-3xl text-blue-500" />
+  <svg-icon name="ChevronForward" class="mx-1 text-orange-500" />
+  <n-icon class=" text-red-500">
+    <PlayCircle />
+  </n-icon>
+
 </template>

 <script>
@@ -69,4 +93,4 @@ export default {};

 <style lang="less" scoped>

-</style>>
+</style>