add bg

src/boot/naiveUI.js

@@ -12,6 +12,7 @@ import {
   NFlex,
   NGrid,
   NGridItem,
+  NImage,
   NInput,
   NInputNumber,
   NMenu,
@@ -20,6 +21,7 @@ import {
   NPagination,
   NPopover,
   NSelect,
+  NSkeleton,
   NSpin,
   NUpload,
   NUploadDragger,
@@ -46,7 +48,9 @@ export default boot(({ app }) => {
       NMenu,
       NAvatar,
       NDataTable,
-      NPagination
+      NPagination,
+      NImage,
+      NSkeleton
     ],
   });
   app.use(naive);

src/pages/Login.vue

@@ -5,27 +5,12 @@
         <div
           class="carousel"
           :id="'silder' + (index + 1)"
-          v-for="(item, index) in 7"
+          v-for="(item, index) in images"
         >
           <div class="carousel-track-container">
             <ul class="carousel-track" :id="'silder-track' + (index + 1)">
-              <li class="carousel-slide">
+              <li class="carousel-slide" v-for="(v, i) in item.imgs">
-                <img src="../assets/image/train.png" />
+                <img :src="v" />
-              </li>
-              <li class="carousel-slide">
-                <img src="../assets/image/glass.png" />
-              </li>
-              <li class="carousel-slide">
-                <img src="../assets/image/ast.png" />
-              </li>
-              <li class="carousel-slide">
-                <img src="../assets/image/oldman.png" />
-              </li>
-              <li class="carousel-slide">
-                <img src="../assets/image/patato.png" />
-              </li>
-              <li class="carousel-slide">
-                <img src="../assets/image/henshin.png" />
               </li>
             </ul>
           </div>
@@ -494,6 +479,82 @@ const isPwd = ref(true);
 const readed = ref(false);
 const registType = ref(1);
 const isFlipped = ref(false);
+const requireImg = (imgPath) => {
+  return new URL(`../assets/image/bg/${imgPath}`, import.meta.url).href;
+};
+// 滚动图片组
+const images = [
+  {
+    imgs: [
+      requireImg("1.jpg"),
+      requireImg("2.jpg"),
+      requireImg("3.jpg"),
+      requireImg("4.jpg"),
+      requireImg("5.jpg"),
+      requireImg("6.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("7.jpg"),
+      requireImg("8.jpg"),
+      requireImg("9.jpg"),
+      requireImg("10.jpg"),
+      requireImg("11.jpg"),
+      requireImg("12.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("13.jpg"),
+      requireImg("14.jpg"),
+      requireImg("15.jpg"),
+      requireImg("16.jpg"),
+      requireImg("17.jpg"),
+      requireImg("18.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("19.jpg"),
+      requireImg("20.jpg"),
+      requireImg("21.jpg"),
+      requireImg("22.jpg"),
+      requireImg("23.jpg"),
+      requireImg("24.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("25.jpg"),
+      requireImg("26.jpg"),
+      requireImg("27.jpg"),
+      requireImg("28.jpg"),
+      requireImg("29.jpg"),
+      requireImg("30.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("31.jpg"),
+      requireImg("32.jpg"),
+      requireImg("33.jpg"),
+      requireImg("34.jpg"),
+      requireImg("35.jpg"),
+      requireImg("36.jpg"),
+    ],
+  },
+  {
+    imgs: [
+      requireImg("37.jpg"),
+      requireImg("38.jpg"),
+      requireImg("39.jpg"),
+      requireImg("40.jpg"),
+      requireImg("41.jpg"),
+      requireImg("42.jpg"),
+    ],
+  },
+];
 // 滚动逻辑
 function startScrolling(carousel, track) {
   const slides = Array.from(track.children);

src/pages/create/index.vue

@@ -180,6 +180,16 @@
             </div>
             <div class="model-box">
               <div class="row animate__animated animate__bounceIn">
+                <n-skeleton
+                 v-for="(n, index) in 7"
+                  v-if="loading"
+                  :style="{
+                    marginLeft: index === 0 || index === 4 ? '0' : '32px',
+                    marginBottom: '25px',
+                  }"
+                  class="style-box cursor-pointer"
+                />
+
                 <div
                   class="style-box card cursor-pointer"
                   v-for="(n, index) in modelArr"
@@ -191,7 +201,7 @@
                     marginBottom: '25px',
                   }"
                 >
-                  <img style="width: 100%; height: 100%" :src="n.replaceImg" />
+                  <img style="width: 100%; height: 100%" :src="n.sqImage" />
                 </div>
                 <div class="all-box cursor-pointer" @click="openAll">
                   全部模型
@@ -443,6 +453,7 @@ import { useRoute, useRouter } from "vue-router";
 import img34 from "../../assets/image/ai/34.png";
 import img43 from "../../assets/image/ai/43.png";
 import img916 from "../../assets/image/ai/169.png";
+const loading = ref(false);
 const router = useRouter();
 const scrollAreaRef = ref(null);
 const plane = ref(null);
@@ -602,8 +613,6 @@ const getUserInfo = async() => {
   } catch (error) {
     console.error(error);
   }
-
-
 };
 // 模型列表中选择模型
 const selectedModel = (model) => {
@@ -644,22 +653,26 @@ const handleChange = (file, List) => {
 };
 // 获取模型列表
 const getModelList = async () => {
+  loading.value = true;
   try {
     await ModelApi.getModelList({
       page: 1,
       pageSize: 10,
     }).then((res) => {
       if (res.status === 0) {
+        loading.value = false;
         modelArr.value = res.data.list.slice(0, 7).map((item, index) => ({
           ...item,
           nowSelect: index === 0,
         }));
         seletedModel.value = modelArr.value[0];
       } else {
+        loading.value = false;
         processError(res.msg);
       }
     });
   } catch (error) {
+    loading.value = false;
     console.error(error);
   }
 };