添加轮播

Author: path-yu

.gitignore

@@ -27,3 +27,4 @@ coverage
 *.sln
 *.sw?
 components.d.ts
+yarn.lock

src/components/Layout/Layout.vue

@@ -4,9 +4,14 @@ import LayoutLeftMenu from '@/components/Layout/components/LayoutLeftMenu.vue';
 </script>
 
 <template>
-  <div :class="['transition-colors','duration-300']">
+  <div
+    style="width: 75vw;margin: auto;"
+    :class="['transition-colors','duration-300']"
+  >
     <base-header />
-    <layout-left-menu />
+    <div>
+      <layout-left-menu />
+    </div>
   </div>
 </template>
 

src/index.css

@@ -14,7 +14,7 @@
   @apply bg-zinc-50 dark:bg-black
 }
 .bg-second-main{
-  @apply bg-zinc-200 dark:bg-secondBack;
+  @apply bg-zinc-100 dark:bg-secondBack;
 }
 ::-webkit-scrollbar {
  display: none;

src/views/RecommendSongListView.vue

@@ -1,13 +1,52 @@
 <script setup lang="ts">
-
+import { computed, ref } from 'vue';
+const effectRef = ref<'slide' | 'fade' | 'card'>('slide');
+const isCardRef = computed(() => effectRef.value === 'card');
 </script>
 
 <template>
   <div>
-    Song List
+    <n-carousel
+      effect="card"
+      draggable
+      prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
+      next-slide-style="transform: translateX(50%) translateZ(-800px);"
+      style="height: 240px"
+      :show-dots="true"
+    >
+      <n-carousel-item :style="{ width: '50%' }">
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+        >
+      </n-carousel-item>
+      <n-carousel-item :style="{ width: '55%' }">
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+        >
+      </n-carousel-item>
+      <n-carousel-item :style="{ width: '55%' }">
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+        >
+      </n-carousel-item>
+      <n-carousel-item :style="{ width: '55%' }">
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+        >
+      </n-carousel-item>
+    </n-carousel>
   </div>
 </template>
 
 <style scoped>
-
+.carousel-img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 </style>