初始化

src/assets/styles/v-layout.scss

@@ -154,6 +154,10 @@ $--base-super-radius: 24px;
 
 /* 页面 选项卡 */
 .v-tabs {
+  padding: 0 $--base-medium-space;
+  margin-left:$--base-super-space;
+  margin-right:$--base-super-space;
+  background-color: $--color-bg;
   .el-tabs__item {
     height: 36px
   }
@@ -459,7 +463,8 @@ $--base-super-radius: 24px;
 
 .v-container {
   width: 1000px;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 body {
@@ -593,7 +598,8 @@ body {
 
 /* 图片瀑布列表 */
 .ai-pages-image-list {
-  column-count: 3; /* 列数 */
+  padding: 0 $--base-super-space;
+  column-count: 4; /* 列数 */
   column-gap: $--base-small-space; /* 列间距 */
   .ai-pages-image-list-item {
     break-inside: avoid-column; /* 防止内容断裂 */
@@ -667,7 +673,9 @@ body {
       margin-bottom: $--base-nomal-space;
       overflow: hidden;
     }
-
+    .item-content {
+      padding-top: $--base-small-space;
+    }
     .title {
       padding: 0 $--base-nomal-space;
       font-size: $--base-nomal-font;
@@ -712,8 +720,7 @@ body {
     cursor: pointer;
 
     .item-image {
-      height: 150px;
-      margin-bottom: $--base-nomal-space;
+      height: 115px;
       overflow: hidden;
     }
 
@@ -760,10 +767,13 @@ body {
     }
 
     .item-image {
+      margin-top: $--base-medium-space;
+      margin-left: $--base-medium-space;
       height: 50px;
-      margin: $--base-medium-space;
     }
-
+    .item-content {
+      padding-top: $--base-small-space;
+    }
     .title {
       position: relative;
       z-index: 9;
@@ -992,9 +1002,13 @@ body {
 
 .ai-pages-upload {
   position: relative;
-  border: 1px dashed #DAE4F7;
-  background-color: #fff;
+  height: 200px;
+  box-shadow: 0 3px 10px 0 rgba(5, 7, 59, 0.06);
+  background: #fff;
+  border: 1px solid #F5FAFF;
+  border-radius: 20px;
   text-align: center;
+  overflow: hidden;
 
   .el-upload {
     display: block;

src/views/pages/AI-Document-Writing/index.vue

@@ -8,7 +8,7 @@
       </div>
       <!-- 页面 上传  -->
       <el-upload
-        class="ai-pages-upload  m-t-large"
+        class="ai-pages-upload m-t-large"
         drag
         action="https://jsonplaceholder.typicode.com/posts/"
         multiple>
@@ -40,7 +40,6 @@
 </template>
 
 <script>
-import {getAccessToken} from "@/utils/auth";
 import img01 from "@/assets/ai-test/img01.png"
 import img02 from "@/assets/ai-test/img02.png"
 import img03 from "@/assets/ai-test/img03.png"

src/views/pages/AI-Image-Generate/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="ai-pages">
-    <main class="ai-pages-main v-container">
+    <main class="ai-pages-main">
       <!-- 页面 头部  -->
-      <div class="ai-pages-top">
+      <div class="ai-pages-top v-container">
         <div class="ai-pages-logo text-center"><img src="@/assets/ai-images/aie.png" class="logo"/></div>
         <div class="ai-pages-title text-center">图像生成</div>
         <div class="ai-pages-title-explain text-center">创意高效迭代，让灵感自然生长</div>
       </div>
       <!-- 页面 输入框  -->
-      <div class="ai-pages-input">
+      <div class="ai-pages-input v-container">
         <el-input
           type="textarea"
           placeholder="说说你的灵感..."
@@ -38,7 +38,7 @@
         <el-tab-pane label="商品" name="6"></el-tab-pane>
         <el-tab-pane label="风景" name="7"></el-tab-pane>
       </el-tabs>
-      <div class="ai-pages-image-list m-t-large">
+      <div class="ai-pages-image-list">
         <div class="ai-pages-image-list-item">
           <img
             src="https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/f07f983fa6d768d72418adc446845e4f_1747137086767445966.png~tplv-a9rns2rl98-web-operation.webp?rk3s=25bff839&amp;x-expires=1750386398&amp;x-signature=CKRyqMkd8sK%2FMgXPw%2BsCT8QczZg%3D"
@@ -80,7 +80,6 @@
             style="width: 100%; height: 100%;">
         </div>
       </div>
-
     </main>
   </div>
 </template>

src/views/pages/AI-Video-Generate/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="ai-pages">
-    <main class="ai-pages-main v-container">
+    <main class="ai-pages-main">
       <!-- 页面 头部  -->
-      <div class="ai-pages-top">
+      <div class="ai-pages-top v-container">
         <div class="ai-pages-logo text-center"><img src="@/assets/ai-images/aie.png" class="logo"/></div>
         <div class="ai-pages-title text-center">视频生成</div>
         <div class="ai-pages-title-explain text-center">创意高效迭代，让灵感自然生长</div>
       </div>
       <!-- 页面 输入框  -->
-      <div class="ai-pages-input">
+      <div class="ai-pages-input v-container">
         <el-input
           type="textarea"
           placeholder="说说你的灵感..."
@@ -33,7 +33,7 @@
         <el-tab-pane label="素材" name="0"></el-tab-pane>
         <el-tab-pane label="短片" name="1"></el-tab-pane>
       </el-tabs>
-      <div class="ai-pages-image-list m-t-large">
+      <div class="ai-pages-image-list">
         <div class="ai-pages-image-list-item">
           <img
             src="https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/f07f983fa6d768d72418adc446845e4f_1747137086767445966.png~tplv-a9rns2rl98-web-operation.webp?rk3s=25bff839&amp;x-expires=1750386398&amp;x-signature=CKRyqMkd8sK%2FMgXPw%2BsCT8QczZg%3D"

src/views/pages/AI-Voice-Generate/index.vue

@@ -50,6 +50,10 @@
 </template>
 
 <script>
+import img01 from "@/assets/ai-test/v-voice01.png"
+import img02 from "@/assets/ai-test/v-voice02.png"
+import img03 from "@/assets/ai-test/v-voice03.png"
+import img04 from "@/assets/ai-test/v-voice04.png"
 export default {
   name: 'index',
   data() {
@@ -67,19 +71,23 @@ export default {
       this.ExampleList = [
         {
           name: "自然流畅发音",
-          description: "模拟人类语音韵律与语调，发音清晰自然，适配多种语言，提升听觉体验。"
+          description: "模拟人类语音韵律与语调，发音清晰自然，适配多种语言，提升听觉体验。",
+          img:img01
         },
         {
           name: "多风格音色定制",
-          description: "支持性别、年龄、情感等多维度音色调整，满足新闻播报、有声书等个性化场景需求。"
+          description: "支持性别、年龄、情感等多维度音色调整，满足新闻播报、有声书等个性化场景需求。",
+          img:img02
         },
         {
           name: "高效文本转语音",
-          description: "快速将文本转化为语音，支持实时生成，缩短内容制作周期，适用于紧急播报时效性场景。"
+          description: "快速将文本转化为语音，支持实时生成，缩短内容制作周期，适用于紧急播报时效性场景。",
+          img:img03
         },
         {
           name: "多场景灵活适配",
-          description: "兼容智能客服、新闻媒体等多元场景，通过参数调整优化语音表现，增强用户交互沉浸感。"
+          description: "兼容智能客服、新闻媒体等多元场景，通过参数调整优化语音表现，增强用户交互沉浸感。",
+          img:img04
         },
       ]
     },