Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web

src/router/index.ts

@@ -255,7 +255,7 @@ const router = createRouter({
 // ====== 添加全局前置守卫 ======
 router.beforeEach((to, from, next) => {
   console.log("Navigating to:", to.path);
-  const list = ["/layout/home","/document/introdution"];
+  const list = ["/layout/home","/document/introdution","/layout/admin/home"];
   if (list.indexOf(to.path) != -1) {
     next();
     return;

src/views/home/index.vue

@@ -1,24 +1,29 @@
 <template>
-  <div>
+  <div style="background-color: rgba(250, 251, 253,1);">
-    <div style="height: 550px; overflow: hidden;">
+    <div style="height: 600px; overflow: hidden;">
-      <a-carousel :after-change="onChange" style="height: 100%;">
+      <a-carousel :after-change="onChange" style="height: 100%;" autoplay>
-        <div v-for="item in bannerList" :key="item.id" class="banner-slide" >
+        <template #prevArrow>
+          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+            <left-circle-outlined />
+          </div>
+        </template>
+        <template #nextArrow>
+          <div class="custom-slick-arrow" style="right: 10px">
+            <right-circle-outlined />
+          </div>
+        </template>
+        <div v-for="item in bannerList" :key="item.id" class="banner-slide">
           <img :src="item.image_url" alt="" srcset="" width="100%" height="100%">
         </div>
       </a-carousel>
     </div>
     <div class="one">
-      <div>
+      <div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;">
-        <h3>GPU选型</h3>
+        <div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
-        <span>如何选择合适的GPU</span>
+        <div>
-      </div>
+          <h3>{{ item.title }}</h3>
-      <div>
+          <span>{{ item.description }}</span>
-        <h3>开具发票</h3>
+        </div>
-        <span>简单快速开具发票</span>
-      </div>
-      <div>
-        <h3>新手入门</h3>
-        <span>简单几步，创建实例</span>
       </div>
     </div>
     <div class="two">
@@ -63,10 +68,31 @@
             </div>
           </div>
           <div class="avatary_list">
-            <div v-for="item in advantageList">
+            <div class="avatary_item">
-              <img :src="item.img" alt="" srcset="" width="200" height="158">
+              <div>
-              <div class="title">{{ item.title }}</div>
+                <div class="title" style="font-size: 28px;">海量高性能 GPU 集群算力</div>
-              <div class="subtitle">{{ item.description }}</div>
+                <div class="subtitle" style="text-align: left;font-size: 18px;">搭载 NVIDIA A100/H100/H800 等高性能
+                  GPU，拥有强悍算力与超高显存带宽，精准适配不同精度需求，大幅提升运算效率与资源利用率；同时优化稀疏矩阵运算，有效减少 AI 模型的冗余计算。</div>
+              </div>
+              <img src="@/assets/jimeng.png" alt="" srcset="" width="300" height="300">
+            </div>
+            <div class="avatary_item" style="margin-bottom: 50px;">
+              <img src="@/assets/gpu.png" alt="" srcset="" width="300">
+              <div>
+                <div class="title" style="font-size: 28px;">算力灵活调度</div>
+                <div class="subtitle" style="text-align: left;font-size: 18px;">
+                  本平台支持按需计费与包周期计费两种正式模式，适配短期突发算力需求与长期稳定部署场景。按需计费按实结算，避免资源浪费；包周期计费性价比更优，保障持续运算。用户可自主择选，兼顾成本与效率，助力业务高效推进。
+                </div>
+              </div>
+            </div>
+            <div class="avatary_item">
+              <div>
+                <div class="title" style="font-size: 28px;">低价高配 算力性价比超高</div>
+                <div class="subtitle" style="text-align: left;font-size: 18px;">
+                 更强更全 AI 算力集群，即刻解锁算力租用服务
+                </div>
+              </div>
+              <img src="@/assets/jimeng2.png" alt="" srcset="" width="300">
             </div>
           </div>
         </div>
@@ -107,19 +133,41 @@
 </template>
 
 <script lang="ts" setup>
-
+import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
 import { ref } from 'vue'
 import { getBannerList, getGpuList, getAdvantage, getHotProduct } from '@/apis/home';
 import one from '@/assets/1.png'
 import two from '@/assets/2.png'
 import three from '@/assets/3.png'
 import firth from '@/assets/4.png'
-import defaultBanner from '@/assets/banner2.png';
+import youhuiquan from '@/assets/youhuiquan-2.png'
+import yaoqinghaoyou from '@/assets/yaoqinghaoyou-4.png'
+import goumaijilu from '@/assets/goumaijilu.png'
+import defaultBanner3 from '@/assets/12.png';
+import defaultBanner4 from '@/assets/333.png';
 const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
 const source = ref([])
+const oneList = ref([
+  {
+    img: youhuiquan,
+    title: '算力免费领',
+    description: '完成认证/问卷获得算力券'
+  },
+  {
+    img: yaoqinghaoyou,
+    title: '邀约优算友',
+    description: '邀请好友可获得算力券'
+  },
+  {
+    img: goumaijilu,
+    title: '开业重磅福利',
+    description: '购算力，享豪礼'
+  }
+])
 const advantageList = ref([])
 const bannerList = ref<any[]>([
-  { id: 0, image_url: defaultBanner }
+  { id: 0, image_url: defaultBanner3 },
+  { id: 1, image_url: defaultBanner4 }
 ]);
 
 const onChange = (current: number) => {
@@ -163,8 +211,12 @@ const fetchBannerList = async () => {
 // 请求GPU列表
 const getGPUList = async () => {
   try {
-    const res: any = await getGpuList();
+    // const res: any = await getGpuList();
-    source.value = res;
+    source.value = [
+      { gpu_type: 'NVIDIA RTX 3090', payOnTime: 15.0, memory: 64, vram: 24, gpu_num: 1 },
+      { gpu_type: 'NVIDIA A100', payOnTime: 25.0, memory: 128, vram: 40, gpu_num: 1 },
+      { gpu_type: 'NVIDIA RTX 4090', payOnTime: 30.0, memory: 96, vram: 24, gpu_num: 1 }
+    ];
 
   } catch (error: any) {
     console.error('GPU列表请求失败:', error);
@@ -174,8 +226,13 @@ const getGPUList = async () => {
 // 请求产品优势
 const getAdvantageList = async () => {
   try {
-    const res: any = await getAdvantage();
+    // const res: any = await getAdvantage();
-    const list = res;
+    const list = [
+      { title: '高性能算力', description: '采用最新一代GPU，提供强大计算能力，满足各种复杂任务需求。' },
+      { title: '灵活计费模式', description: '支持按需付费和包月套餐，用户可根据实际需求选择最合适的计费方式。' },
+      { title: '全球节点覆盖', description: '在多个地区设有数据中心，确保用户无论身处何地都能享受低延迟的服务体验。' },
+      { title: '专业技术支持', description: '提供7x24小时技术支持，确保用户在使用过程中遇到的问题能够及时得到解决。' }
+    ];
 
     // 给每个 item 添加 img 字段
     list.forEach((item: any, index: number) => {
@@ -207,7 +264,7 @@ getAdvantageList();
 <style scoped lang="scss">
 .banner-slide {
   width: 100%;
-  height: 550px;
+  height: 600px;
   // background: url('@/assets/banner2.png') no-repeat center / cover;
 }
 
@@ -215,14 +272,18 @@ getAdvantageList();
   display: flex;
   justify-content: space-around;
   align-items: center;
-  background-color: #cfe7fe;
   padding: 30px 0;
+  width: 1200px;
+  margin: 0 auto;
+  border-radius: 27px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
 
   &>div {
     padding: 10;
     flex: 1;
     display: flex;
-    flex-direction: column;
+
     align-items: center;
 
     & span {
@@ -232,7 +293,7 @@ getAdvantageList();
 }
 
 .two {
-  background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
+  // background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
   padding-bottom: 80px;
 
   &>div {
@@ -275,14 +336,21 @@ getAdvantageList();
     }
 
     .avatary_list {
-      display: grid;
+      // display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      // grid-template-columns: repeat(2, 1fr);
-      gap: 50px;
+      // gap: 50px;
 
       &>div {
         display: flex;
-        flex-direction: column;
+        // flex-direction: column;
-        align-items: center;
+        align-items: spance-between;
+        gap: 50px;
+        &>div{
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+        }
       }
 
       .title {

src/views/layout/index.vue

@@ -9,43 +9,47 @@
                     :items="rightRoutes" @click="({ key }) => handleMenuClick(key)" />
             </div>
             <div class="user-info">
-                <a-dropdown>
+                <template v-if="!isLogin">
-                    <div style="display: flex;align-items: center;justify-content: flex-end;">
+                    <a-button type="primary" @click="router.push('/login')">登录 / 注册</a-button>
-                        <a-avatar :size="24" :src="userInfo.avatar">
+                </template>
-                            <!-- <template #icon>
+                <template v-else>
+                    <a-dropdown>
+                        <div style="display: flex;align-items: center;justify-content: flex-end;">
+                            <a-avatar :size="24" :src="userInfo.avatar">
+                                <!-- <template #icon>
                                 <UserOutlined />
                             </template> -->
-                        </a-avatar>
+                            </a-avatar>
-                        <span style="font-size: 14px;padding-left:5px;">{{ userInfo.userName }}</span>
+                            <span style="font-size: 14px;padding-left:5px;">{{ userInfo.userName }}</span>
-                    </div>
+                        </div>
-
+                        <template #overlay>
-                    <template #overlay>
+                            <a-card hoverable style="width: 300px">
-                        <a-card hoverable style="width: 300px">
+                                <template #cover>
-                            <template #cover>
+                                    <div style="background:#f5f7fa;padding:10px;line-height: 30px">
-                                <div style="background:#f5f7fa;padding:10px;line-height: 30px">
+                                        <div>{{ userInfo.userName }} <a-tag color="blue" style="margin-left: 10px;">{{
-                                    <div>{{ userInfo.userName }} <a-tag color="blue" style="margin-left: 10px;">{{
+                                            userInfo.accountType === 'USER' ? '个人认证' : '企业认证' }}</a-tag></div>
-                                            userInfo.accountType==='USER'?'个人认证':'企业认证' }}</a-tag></div>
+                                        <div>ID:{{ userInfo.id }}</div>
-                                    <div>ID:{{ userInfo.id }}</div>
-                                </div>
-                                <div style="padding: 10px;line-height: 45px;">
-                                    <div style="display: flex;justify-content: space-between;align-items: center;">
-                                        <div>可用余额：¥{{ userInfo.balace }}</div>
-                                        <!-- <a-button type="primary" danger ghost size="small">去充值</a-button> -->
                                     </div>
-                                    <div>实例数量：¥{{ userInfo.caseNum }}</div>
+                                    <div style="padding: 10px;line-height: 45px;">
-                                    <div>冻结余额：¥{{ userInfo.freezeBalace }}</div>
+                                        <div style="display: flex;justify-content: space-between;align-items: center;">
-                                    <div>未冻结余额：¥{{ userInfo.noFreezeBalace }}</div>
+                                            <div>可用余额：¥{{ userInfo.balace }}</div>
-                                </div>
+                                            <!-- <a-button type="primary" danger ghost size="small">去充值</a-button> -->
-                            </template>
+                                        </div>
-                            <template #actions>
+                                        <div>实例数量：¥{{ userInfo.caseNum }}</div>
-                                <!-- <setting-outlined key="setting" />
+                                        <div>冻结余额：¥{{ userInfo.freezeBalace }}</div>
+                                        <div>未冻结余额：¥{{ userInfo.noFreezeBalace }}</div>
+                                    </div>
+                                </template>
+                                <template #actions>
+                                    <!-- <setting-outlined key="setting" />
                                 <edit-outlined key="edit" />
                                 <ellipsis-outlined key="ellipsis" /> -->
-                                <a-button block type="text" @click="logout">退出登录</a-button>
+                                    <a-button block type="text" @click="logout">退出登录</a-button>
-                            </template>
+                                </template>
-                        </a-card>
+                            </a-card>
-                    </template>
+                        </template>
-                </a-dropdown>
+                    </a-dropdown>
+                </template>
             </div>
         </div>
         <div style="height: 60px;width: 100%;"></div>

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <div class="login-logo">
-      <div>Fast亼算云</div>
+      <div style="cursor: pointer;">Fast亼算云</div>
       <a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;" :items="rightRoutes"
         @click="({ key }) => handleMenuClick(key)" />
     </div>