活动详情页

src/router/index.ts

@@ -14,6 +14,39 @@ const routes: RouteRecordRaw[] = [
     name: "Login",
     component: () => import("@/views/login/index.vue"),
   },
+  {
+    path: "/active",
+    name: "Active",
+    component: () => import("@/views/saleActive/index.vue"),
+    redirect: "/active/newUser",
+    children: [
+      {
+        path: "newUser",
+        name: "newUser",
+        component: () => import("@/views/saleActive/newUser.vue"),
+      },
+      {
+        path: "newUserDetail",
+        name: "newUserDetail",
+        component: () => import("@/views/saleActive/newUserDetail.vue"),
+      },
+      {
+        path: "oldBringsNew",
+        name: "oldBringsNew",
+        component: () => import("@/views/saleActive/oldBringsNew.vue"),
+      },
+      {
+        path: "openDetail",
+        name: "openDetail",
+        component: () => import("@/views/saleActive/openDetail.vue"),
+      },
+      {
+        path: "invite",
+        name: "invite",
+        component: () => import("@/views/saleActive/invite.vue"),
+      },
+    ],
+  },
   {
     path: "/404",
     name: "404",
@@ -92,6 +125,11 @@ const routes: RouteRecordRaw[] = [
         name: "LayoutHome",
         component: () => import("@/views/home/index.vue"),
       },
+      {
+        path: "yingxiao",
+        name: "yingxiao",
+        component: () => import("@/views/yingxiao/index.vue"),
+      },
       {
         path: "market",
         name: "LayoutMarket",
@@ -253,25 +291,25 @@ const router = createRouter({
   routes,
 });
 // ====== 添加全局前置守卫 ======
-router.beforeEach((to, from, next) => {
+// router.beforeEach((to, from, next) => {
-  console.log("Navigating to:", to.path);
+//   console.log("Navigating to:", to.path);
-  const list = ["/layout/home","/document/introdution","/layout/admin/home"];
+//   const list = ["/layout/home", "/document/introdution", "/layout/admin/home"];
-  if (list.indexOf(to.path) != -1) {
+//   if (list.indexOf(to.path) != -1) {
-    next();
+//     next();
-    return;
+//     return;
-  } else {
+//   } else {
-    const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
+//     const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
-    const isLoginPage = to.path === "/login";
+//     const isLoginPage = to.path === "/login";
-    if (!token && !isLoginPage) {
+//     if (!token && !isLoginPage) {
-      // 没有 token 且不是去登录页 → 跳转登录
+//       // 没有 token 且不是去登录页 → 跳转登录
-      next({ path: "/login" });
+//       next({ path: "/login" });
-    } else if (token && isLoginPage) {
+//     } else if (token && isLoginPage) {
-      // 已登录却访问登录页 → 跳转首页（可选）
+//       // 已登录却访问登录页 → 跳转首页（可选）
-      next({ path: "/layout/home" });
+//       next({ path: "/layout/home" });
-    } else {
+//     } else {
-      // 正常访问
+//       // 正常访问
-      next();
+//       next();
-    }
+//     }
-  }
+//   }
-});
+// });
 export default router;

src/views/admin/index.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="admin-layout">
-    <!-- 左侧菜单 -->
+    <div style="background-color: #ffffff;display: flex;flex-direction: column;align-items: center;border-right: 1px solid #e8e8e8;">
-    <a-menu
+      <div style="height: 70px;width: 90%;display: flex;justify-content: center;border-bottom: 1px solid #e8e8e8;align-items: center;">
-        v-model:openKeys="state.openKeys"
+        <a-button type="primary" style="width: 200px;" @click="router.push('/layout/admin/home')">
-        v-model:selectedKeys="state.selectedKeys"
+          <template #icon>
-        class="admin-sidebar"
+           <AppstoreAddOutlined />
-        :mode="state.mode"
+          </template>
-        :items="items"
+          总览
-        :theme="state.theme"
+        </a-button>
-        @select="handleMenuSelect"
+      </div>
-     />
+      <div>
+        <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" class="admin-sidebar"
+          :mode="state.mode" :items="items" :theme="state.theme" @select="handleMenuSelect" />
+      </div>
+
+    </div>
     <!-- 右侧内容区 -->
     <div class="admin-contain">
       <router-view />
@@ -28,6 +33,7 @@ import {
   LaptopOutlined,
   MoneyCollectOutlined,
   TeamOutlined,
+  AppstoreAddOutlined
 } from '@ant-design/icons-vue';
 import type { MenuMode, MenuTheme } from 'ant-design-vue';
 import { ItemType } from 'ant-design-vue';
@@ -44,7 +50,7 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
-  { path: '/layout/admin/home', name: '总览', icon: HomeOutlined },
+  // { path: '/layout/admin/home', name: '总览', icon: HomeOutlined },
   { path: '/layout/admin/instance', name: '容器实例', icon: ConsoleSqlOutlined },
   // { path: '/layout/admin/fileStore', name: '文件存储', icon: FolderOpenOutlined },
   { path: '/layout/admin/image', name: '镜像', icon: GlobalOutlined },
@@ -155,9 +161,11 @@ const changeTheme = (checked: boolean) => {
 }
 
 .admin-sidebar {
+  border-inline-end: 0px !important;
   width: 256px;
   flex-shrink: 0;
   height: 100%;
+  border-right: 0px;
 }
 
 .admin-contain {

src/views/home/index.vue

@@ -18,7 +18,7 @@
       </a-carousel>
     </div>
     <div class="one">
-      <div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;">
+      <div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;cursor: pointer;" @click="router.push(item.path)">
         <div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
         <div>
           <h3>{{ item.title }}</h3>
@@ -71,7 +71,7 @@
             <div class="avatary_item">
               <div>
                 <div class="title" style="font-size: 28px;">海量高性能 GPU 集群算力</div>
-                <div class="subtitle" style="text-align: left;font-size: 18px;">搭载 NVIDIA A100/H100/H800 等高性能
+                <div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">搭载 NVIDIA A100/H100/H800 等高性能
                   GPU，拥有强悍算力与超高显存带宽，精准适配不同精度需求，大幅提升运算效率与资源利用率；同时优化稀疏矩阵运算，有效减少 AI 模型的冗余计算。</div>
               </div>
               <img src="@/assets/jimeng.png" alt="" srcset="" width="300" height="300">
@@ -80,7 +80,7 @@
               <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 class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">
                   本平台支持按需计费与包周期计费两种正式模式，适配短期突发算力需求与长期稳定部署场景。按需计费按实结算，避免资源浪费；包周期计费性价比更优，保障持续运算。用户可自主择选，兼顾成本与效率，助力业务高效推进。
                 </div>
               </div>
@@ -88,11 +88,11 @@
             <div class="avatary_item">
               <div>
                 <div class="title" style="font-size: 28px;">低价高配 算力性价比超高</div>
-                <div class="subtitle" style="text-align: left;font-size: 18px;">
+                <div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">
-                 更强更全 AI 算力集群，即刻解锁算力租用服务
+                算力性价比之王！花一半钱享翻倍算力，顶级硬件配置 + 灵活计费模式，无隐形消费。中小团队、初创企业无需负担高昂成本，轻松拥抱 AI 时代，高性价比之选。
                 </div>
               </div>
-              <img src="@/assets/jimeng2.png" alt="" srcset="" width="300">
+              <img src="@/assets/jimeng2.png" alt="" srcset="" width="300" height="300px">
             </div>
           </div>
         </div>
@@ -135,6 +135,7 @@
 <script lang="ts" setup>
 import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
 import { ref } from 'vue'
+import { useRouter } from 'vue-router';
 import { getBannerList, getGpuList, getAdvantage, getHotProduct } from '@/apis/home';
 import one from '@/assets/1.png'
 import two from '@/assets/2.png'
@@ -145,23 +146,28 @@ 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';
+import defaultBanner from '@/assets/333.png';
+const router = useRouter();
 const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
 const source = ref([])
 const oneList = ref([
   {
     img: youhuiquan,
     title: '算力免费领',
-    description: '完成认证/问卷获得算力券'
+    description: '完成认证/问卷获得算力券',
+    path:'/active/newUser'
   },
   {
     img: yaoqinghaoyou,
     title: '邀约优算友',
-    description: '邀请好友可获得算力券'
+    description: '邀请好友可获得算力券',
+     path:'/active/invite'
   },
   {
     img: goumaijilu,
     title: '开业重磅福利',
-    description: '购算力，享豪礼'
+    description: '购算力，享豪礼',
+     path:'/active/newUser'
   }
 ])
 const advantageList = ref([])
@@ -256,7 +262,7 @@ const getAdvantageList = async () => {
 
 
 
-fetchBannerList();
+// fetchBannerList();
 getGPUList();
 getAdvantageList();
 
@@ -343,8 +349,9 @@ getAdvantageList();
       &>div {
         display: flex;
         // flex-direction: column;
-        align-items: spance-between;
+        align-items: flex-start;
-        gap: 50px;
+        justify-content: space-between;
+        gap: 100px;
         &>div{
           display: flex;
           flex-direction: column;

src/views/layout/index.vue

@@ -66,6 +66,7 @@ import avatar from '@/assets/avator.png'
 const router = useRouter()
 const route = useRoute()
 const isHome = ref(true)
+const isLogin = ref(!!localStorage.getItem('token'))
 const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
 // 根据当前路由初始化菜单选中项（去掉 /layout 前缀）
 const getActiveKeyFromRoute = () => {
@@ -93,7 +94,7 @@ watch(() => route.path, () => {
 const leftRoutes = ref([
     { key: '/home', label: '首页' },
     { key: '/market', label: '算力中心' },
-    // { key: '/yunmain', label: '云主机' }
+    { key: '/yingxiao', label: '营销活动' }
 ])
 const rightRoutes = ref([
     { key: '/document', label: '用户文档' },

src/views/saleActive/index.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="active_body">
+        <div class="login-logo">
+            <div style="cursor: pointer;">Fast亼算云</div>
+            <div style="display: flex;align-items: center;">
+                <a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;"
+                    :items="rightRoutes" @click="({ key }) => handleMenuClick(key)" />
+                <template v-if="!isLogin">
+                    <a-button type="primary" @click="router.push('/login')" style="margin-left: 20px;">登录 / 注册</a-button>
+                </template>
+            </div>
+        </div>
+        <div>
+            <router-view />
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const isLogin = ref(!!localStorage.getItem('token'));
+const current = ref('');
+const rightRoutes = ref([
+    { key: '/home', label: '首页' },
+    { key: '/document', label: '用户文档' },
+    { key: '/admin/home', label: '控制台' }
+])
+// 点击菜单跳转
+const handleMenuClick = (key) => {
+    if (key === '/document') {
+        window.open(key, '_blank');
+    } else {
+        // 否则按照正常方式在当前标签页跳转
+        const fullPath = `/layout${key}`;
+        router.push(fullPath);
+    }
+}
+</script>
+<style scoped>
+.login-logo {
+    background-color: rgba(255, 255, 255, 0.2);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20px;
+    letter-spacing: 2px;
+    width: 100%;
+    padding: 0 20px;
+    border-bottom: 1px solid #C9C9C9;
+}
+</style>

src/views/saleActive/invite.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="active_body">
+        <div class="active_banner">
+            <img src="@/assets/222.png" alt="" srcset="" width="100%">
+        </div>
+        <div class="active_content">
+            <div style="margin-top: 20px;width: 80%;">
+                <div style="display: flex;justify-content: space-between;align-items: center;">
+                    <div style="font-size: 24px;font-weight: bold;">丰厚奖励与回报</div>
+                    <!-- <div style="font-size: 14px;color:#1677ff;cursor: pointer;" @click="router.push('/active/newUserDetail')">活动详情 ></div> -->
+                </div>
+                <div style="display: flex;align-items: center;gap: 30px;justify-content: space-between;">
+                    <div
+                        style="background-color: #ffffff;margin: 20px 0;padding: 30px;flex: 1;border-radius: 10px;border: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
+                        <div>
+                            <div>新用户可获得50算力券</div>
+                            <div style="color: rgba(16, 80, 244, 1);margin-top: 20px;cursor: pointer;"
+                                @click="router.push({path: '/active/newUserDetail',query: {type: 'invite'}})">规则详情
+                            </div>
+                        </div>
+                        <div> <img src="@/assets/123.png" alt="" srcset="" width="50px"></div>
+                    </div>
+                    <div
+                        style="background-color: #ffffff;margin: 20px 0;padding: 30px;flex: 1;border-radius: 10px;border: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
+                        <div>
+                            <div>老用户获得该笔首次购买金额 3% 的账户余额奖励</div>
+                            <div style="color: rgba(16, 80, 244, 1);margin-top: 20px;cursor: pointer;"
+                                 @click="router.push({path: '/active/newUserDetail',query: {type: 'invite'}})">规则详情
+                            </div>
+                        </div>
+                        <div> <img src="@/assets/124.png" alt="" srcset="" width="50px"></div>
+
+                    </div>
+                </div>
+            </div>
+            <div style="margin-top: 20px;width: 80%;">
+                <div style="display: flex;justify-content: space-between;align-items: center;">
+                    <div style="font-size: 24px;font-weight: bold;margin-bottom: 20px;">邀请流程</div>
+                    <!-- <div style="font-size: 14px;color:#1677ff;cursor: pointer;">活动详情 ></div> -->
+                </div>
+                <div style="">
+                    <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 1</div>
+                            <div>加入邀约优算友计划</div>
+                            <div style="font-size: 14px;color: #666666;">注册Fast亼算云账号并完成个人实名认证的新老用户均可加入</div>
+                        </div>
+                        <div style="width: 200px;text-align: center;"><img src="@/assets/arrow-right.png" alt=""
+                                width="30px"></div>
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 2</div>
+                            <div>获取邀请链接/邀请码并分享</div>
+                            <div>复制邀请链接/邀请码，分享给新客户</div>
+                        </div>
+                    </div>
+                    <div style="display: flex;justify-content: flex-end;align-items: center;margin: 20px 0;">
+                        <div style="width: calc((100% - 200px)/2);text-align: center;"><img
+                                src="@/assets/arrow-down.png" alt="" width="30px"></div>
+                    </div>
+                    <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 4</div>
+                            <div>佣金到账</div>
+                            <div>Fast亼算云核算返利金额，入账至绑定账户</div>
+                        </div>
+                        <div style="width: 200px;text-align: center;margin-bottom: 20px;"><img
+                                src="@/assets/arrow-right1.png" alt="" width="30px"></div>
+
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 3</div>
+                            <div>客户注册后完成实名认证、调查问卷并购买</div>
+                            <div style="font-size: 14px;color: #666666;">客户通过推广链接注册建立关联，并购买产品</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="three"></div>
+    <div class="footer">
+        <div class="footer_contain">
+            <div>
+                <div style="color: #000000;">服务热线:</div>
+                <div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
+                <div>邮箱:service@hzzxxd.com</div>
+                <div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
+            </div>
+            <div>
+                <div style="color: #000000;">快速导航</div>
+                <div>算力中心</div>
+                <div>云主机</div>
+                <div>用户文档</div>
+            </div>
+            <div style="display: flex;align-items: center;gap: 60px;">
+                <div style="display: flex;flex-direction: column;align-items: center;">
+                    <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                    <div>公众号</div>
+                </div>
+                <div style="display: flex;flex-direction: column;align-items: center;">
+                    <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                    <div>企业微信</div>
+                </div>
+            </div>
+        </div>
+        <div
+            style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
+            苏备案号20251124号</div>
+    </div>
+
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
+</script>
+<style scoped>
+.active_body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.active_banner {
+    width: 100%;
+    height: auto;
+}
+
+.active_content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(246, 250, 254);
+    padding-bottom: 50px;
+}
+
+.step {
+    flex: 1;
+    height: 120px;
+    border-radius: 8px;
+    border: 1px solid rgba(219, 219, 219, 1);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-around;
+    gap: 5px;
+    padding: 0 20px;
+}
+
+.three {
+
+    width: 100%;
+    height: 180px;
+    background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
+}
+
+.footer {
+    height: 260px;
+    background-color: #ffffff;
+    width: 100%;
+
+    .footer_contain {
+        width: 1200px;
+        margin: 0 auto;
+        height: calc(100% - 45px);
+        display: flex;
+        justify-content: space-around;
+        align-items: self-start;
+        padding: 20px 0;
+
+        &>div {
+            line-height: 30px;
+            color: #3a3939;
+        }
+    }
+}
+</style>

src/views/saleActive/newUser.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="active_body">
+        <div class="active_banner">
+            <img src="@/assets/group.png" alt="" srcset="" width="100%">
+        </div>
+        <div class="active_content">
+            <div style="margin-top: 20px;width: 80%;">
+                <div style="display: flex;justify-content: space-between;align-items: center;">
+                    <div style="font-size: 24px;font-weight: bold;">活动说明</div>
+                    <div style="font-size: 14px;color:#1677ff;cursor: pointer;"
+                        @click="router.push('/active/newUserDetail')">活动详情 ></div>
+                </div>
+                <div
+                    style="background-color: #ffffff;margin: 20px 0;padding: 30px;border-radius: 8px;border-radius: 10px;border: 1px solid #e8e8e8;display: flex;align-items: center;gap: 30px;">
+                    <div>
+                        <p>一、活动对象：平台全体未注册新用户</p>
+                        <p>二、活动福利：完成注册+认证，即可免费领取20算力券（无门槛使用，可直接兑换对应算力服务）</p>
+                        <p>三、注意事项：1. 每个新用户仅可参与一次活动，重复注册或认证无效；2. 算力券无使用门槛，不设找零、不兑现，逾期未使用将自动失效（具体有效期以券面显示为准）；3.
+                            若在注册或认证过程中有疑问，可联系平台客服咨询。</p>
+                        <p>四、活动声明：平台保留在法律允许范围内对本活动的最终解释权，如有活动调整将提前公示。</p>
+                    </div>
+                    <div>
+                        <img src="@/assets/aa.png" alt="" srcset="" width="100px">
+                    </div>
+                </div>
+            </div>
+            <div style="margin-top: 20px;width: 80%;">
+                <div style="display: flex;justify-content: space-between;align-items: center;">
+                    <div style="font-size: 24px;font-weight: bold;margin-bottom: 20px;">操作流程</div>
+                    <!-- <div style="font-size: 14px;color:#1677ff;cursor: pointer;">活动详情 ></div> -->
+                </div>
+                <div style="">
+                    <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 1</div>
+                            <div>注册Fast亼算云账号</div>
+                            <div style="font-size: 14px;color: #666666;">进入Fast亼算云官网并注册Fast亼算云账号</div>
+                        </div>
+                        <div style="width: 200px;text-align: center;"><img src="@/assets/arrow-right.png" alt=""
+                                width="30px"></div>
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 2</div>
+                            <div>完成实名认证</div>
+                            <div>注册完成后，前往进行实名认证</div>
+                        </div>
+                    </div>
+                    <div style="display: flex;justify-content: flex-end;align-items: center;margin: 20px 0;">
+                        <div style="width: calc((100% - 200px)/2);text-align: center;"><img
+                                src="@/assets/arrow-down.png" alt="" width="30px"></div>
+                    </div>
+                    <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 4</div>
+                            <div>客户完成实名认证后完成调查问卷</div>
+                            <div>完成实名认证后，填写算力调查问卷</div>
+                        </div>
+                        <div style="width: 200px;text-align: center;margin-bottom: 20px;"><img
+                                src="@/assets/arrow-right1.png" alt="" width="30px"></div>
+                        <div class="step">
+                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 3</div>
+                            <div>算力券到账</div>
+                            <div style="font-size: 14px;color: #666666;">优惠券自动发放给用户，可在控制台中查看，请在有限期内使用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="three"></div>
+        <div class="footer">
+            <div class="footer_contain">
+                <div>
+                    <div style="color: #000000;">服务热线:</div>
+                    <div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
+                    <div>邮箱:service@hzzxxd.com</div>
+                    <div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
+                </div>
+                <div>
+                    <div style="color: #000000;">快速导航</div>
+                    <div>算力中心</div>
+                    <div>云主机</div>
+                    <div>用户文档</div>
+                </div>
+                <div style="display: flex;align-items: center;gap: 60px;">
+                    <div style="display: flex;flex-direction: column;align-items: center;">
+                        <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                        <div>公众号</div>
+                    </div>
+                    <div style="display: flex;flex-direction: column;align-items: center;">
+                        <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                        <div>企业微信</div>
+                    </div>
+                </div>
+            </div>
+            <div
+                style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
+                苏备案号20251124号</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
+</script>
+<style scoped>
+.active_body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.active_banner {
+    width: 100%;
+    height: auto;
+}
+
+.active_content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(246, 250, 254);
+    padding-bottom: 50px;
+}
+
+.step {
+    flex: 1;
+    height: 120px;
+    border-radius: 8px;
+    border: 1px solid rgba(219, 219, 219, 1);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-around;
+    gap: 5px;
+    padding: 0 20px;
+}
+
+.three {
+
+    width: 100%;
+    height: 180px;
+    background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
+}
+
+.footer {
+    height: 260px;
+    background-color: #ffffff;
+    width: 100%;
+
+    .footer_contain {
+        width: 1200px;
+        margin: 0 auto;
+        height: calc(100% - 45px);
+        display: flex;
+        justify-content: space-around;
+        align-items: self-start;
+        padding: 20px 0;
+
+        &>div {
+            line-height: 30px;
+            color: #3a3939;
+        }
+    }
+}
+</style>

src/views/saleActive/newUserDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="detail_container">
+    <div class="detail_left">
+      <div
+        :class="{ active: currentTab === 'new' }"
+        @click="switchTab('new')"
+      >
+        一、新用户福利：注册 + 认证 = 20 算力券（无门槛兑算力）
+      </div>
+      <div
+        :class="{ active: currentTab === 'invite' }"
+        @click="switchTab('invite')"
+      >
+        二、老带新裂变奖励：新用户 50 算力券 + 老用户 3% 账户余额
+      </div>
+      <div
+        :class="{ active: currentTab === 'gift' }"
+        @click="switchTab('gift')"
+      >
+        三、开业重磅福利｜购算力，享豪礼！
+      </div>
+    </div>
+    <div class="detail_right">
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed,onMounted } from 'vue';
+import NewUser from './newUserRegister.vue';
+import OldBringsNew from './oldBringsNew.vue';
+import OpenDetail from './openDetail.vue';
+import { useRoute } from 'vue-router';
+import { on } from 'events';
+const route = useRoute();
+onMounted(() => {
+  const type = route.query.type;
+  if (type === 'invite') {
+    currentTab.value = 'invite';
+  } else if (type === 'gift') {
+    currentTab.value = 'gift';
+  } else {
+    currentTab.value = 'new';
+  }
+});
+// 当前激活的 tab 标识
+const currentTab = ref<'new' | 'invite' | 'gift'>('new');
+
+// 根据 currentTab 动态返回组件
+const currentComponent = computed(() => {
+  switch (currentTab.value) {
+    case 'new':
+      return NewUser;
+    case 'invite':
+      return OldBringsNew;
+    case 'gift':
+      return OpenDetail;
+    default:
+      return NewUser;
+  }
+});
+
+// 切换 tab
+const switchTab = (tab: 'new' | 'invite' | 'gift') => {
+  currentTab.value = tab;
+};
+</script>
+
+<style scoped>
+.detail_container {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  height: calc(100vh - 50px);
+}
+
+.detail_left {
+  padding: 20px;
+  width: 240px;
+  height: 100%;
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+
+.detail_left > div {
+  margin-bottom: 20px;
+  padding: 12px;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.detail_left > div:hover {
+  background-color: #e0e0e0;
+}
+
+.detail_left > div.active {
+  background-color: #1890ff;
+  color: #ffffff;
+}
+
+.detail_right {
+    overflow-y: scroll;
+  flex: 1;
+  height: 100%;
+  background-color: #ffffff;
+  padding: 60px 30px;
+  border-radius: 8px;
+}
+</style>

src/views/saleActive/newUserRegister.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <h2 style="text-align: center;height: 80px;border-bottom: 1px solid #ccc;">新用户福利：注册 + 认证 = 20 算力券（无门槛兑算力）</h2>
+        <div class="card">
+            <div class="title">适用对象</div>
+            <div class="content">
+                <div><span style="color: #000000;">个人用户：</span>手机号注册 📱 + 实名认证 ✅ + 算力需求问卷 📝</div>
+                <div><span style="color: #000000;">企业用户：</span>手机号注册 📱 + 实名认证 ✅ + 企业认证 📇</div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">操作步骤</div>
+            <div class="content">
+                1.新用户通过手机号验证码完成账号注册 📱（需绑定有效手机号，同一手机号仅可注册 1 个账号 🚫）；<br>
+                2.登录账号后，根据用户类型提交认证材料 📋：个人用户：上传本人有效身份证正反面照片，完成身份核验 ✅；企业用户：上传企业营业执照（含统一社会信用代码）📇、法定代表人身份证正反面照片，完成企业信息核验
+                ✅；<br>
+                3.完成基础认证后，按类型补充材料 📝：个人用户：填写《算力需求问卷》（问卷仅收集与算力使用相关的必要信息，不涉及无关隐私 🛡️）；企业用户：完成企业对公账户验证或授权联系人身份核验
+                🏢；所有材料审核通过后（审核时效≤1 个工作日 ⏱️），即时发放 20 算力券至账户 🎁。
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">活动规则</div>
+            <div class="content">
+                1.算力券用途 💳：仅可在 Fast 亼算平台内兑换算力点，无使用门槛，不支持折现、转赠、提现 🚫；有效期 ⏳：自发放之日起 7 个自然日，逾期未使用自动失效，不予补发<br> 2.❌；<br>
+                3.信息保护
+                🛡️：平台仅收集实名认证、企业认证所需的必要信息，将按照《个人信息保护法》《网络安全法》采取加密存储、访问权限管控等安全措施，不泄露、篡改、滥用用户信息，未经用户同意不向第三方提供（法律规定除外）🔒；<br>
+                4.禁止行为
+                ⚠️：严禁虚假注册、冒用他人身份信息 / 企业信息认证、恶意重复注册、刷券等违规行为 🚫；<br> 5.违规处理
+                ⚖️：若用户存在上述违规行为，平台有权取消奖励资格、冻结账户、追回已使用的算力券对应的权益，情节严重的将依法追究法律责任，并向相关监管部门报备。
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style scoped>
+.title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: rgba(0, 41, 156, 1);
+}
+
+.card {
+    width: 100%;
+    padding: 20px 10px;
+    border-bottom: 1px solid #ccc;
+}
+
+.content {
+    font-size: 16px;
+    color: #333333;
+    line-height: 30px;
+}
+</style>

src/views/saleActive/oldBringsNew.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <h2 style="text-align: center;height: 80px;border-bottom: 1px solid #ccc;">老带新裂变奖励：新用户 50 算力券 + 老用户 3% 账户余额
+        </h2>
+        <div class="card">
+            <div class="title">适用对象</div>
+            <div class="content">
+                <div><span style="color: #000000;">老用户：</span>已完成实名认证（个人 / 企业）✅ 且账户状态正常的 🚀 Fast 亼算云平台注册用户；</div>
+                <div><span style="color: #000000;">新用户：</span>未注册过 Fast 亼算云平台账号、未使用过相同手机号 📱 / 身份信息 🆔 / 设备 💻 注册的用户
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">邀请操作步骤</div>
+            <div class="content">
+                1.老用户登录 Fast 亼算平台，进入 “邀请好友” 专区 🎉，生成专属邀请链接 / 邀请码（每人仅限 1 个专属邀请标识，不可转让）🔗；<br>
+                2.老用户通过合法渠道分享邀请链接 / 邀请码给潜在新用户 📤；<br>
+                3.新用户通过该专属链接 / 邀请码完成账号注册，并按本流程第一条要求完成全部认证（个人用户：实名认证 ✅ + 问卷 📝；企业用户：实名认证 ✅ + 企业认证 📇）；
+                4.新用户认证通过后，即时发放 50 算力券 至其账户 🎁；<br>
+                5.新用户完成首次算力点购买（指注册后首次通过现金、账户余额等合规方式支付购买算力点，不包含兑换、赠送的算力点）💰，且订单完成（无退款、取消情形）后 ✅，老用户即时获得该笔首次购买金额 3% 的账户余额奖励
+                🎊。
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">奖励规则</div>
+            <div class="content">
+                1.新用户奖励 🎁：<br>
+                <li>50 算力券有效期：自发放之日起 7 个自然日 ⏳，逾期未使用自动失效，不予补发 ❌；</li>
+                <li>新用户仅可通过 1 个老用户的邀请链接注册，不可重复领取邀请奖励 🚫。</li>
+                2.老用户奖励 💰：<br>
+                <li>账户余额用途：可用于 Fast 亼算平台内购买算力点 💻，或按 Fast 亼算平台公示的提现规则申请提现（提现需完成实名认证升级核验，符合反洗钱要求）🏦；</li>
+                <li>提现要求：提现时需提供与实名认证一致的收款账户信息 📋，Fast 亼算平台将对提现申请进行合规审核（审核时效≤7 个工作日 ⏱️），最低提现金额、手续费等以平台公示为准 📜；</li>
+                <li>邀请上限：无邀请人数限制 🚀，多邀多得，奖励金额上不封顶 🎉；</li>
+                <li>奖励核算：首次购买金额以订单实际支付金额为准（扣除优惠券、算力券抵扣部分后）💸。</li>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style scoped>
+.title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: rgba(0, 41, 156, 1);
+}
+
+.card {
+    width: 100%;
+    padding: 20px 10px;
+    border-bottom: 1px solid #ccc;
+}
+
+.content {
+    font-size: 16px;
+    color: #333333;
+    line-height: 30px;
+}
+</style>

src/views/saleActive/openDetail.vue

@@ -0,0 +1,138 @@
+<template>
+    <div>
+        <h2 style="text-align: center;height: 80px;border-bottom: 1px solid #ccc;">开业重磅福利｜购算力，享豪礼！
+        </h2>
+        <div>📢 新用户首次充值账户余额后，30 天内用该余额购买算力点，实际消费金额达标即享 3 选 1 赠礼，先到先得，兑完即止！</div>
+        <div class="card">
+            <div class="title">充值赠礼（3 选 1）</div>
+            <div class="content">
+                <table border="1" cellspacing="0" cellpadding="8" style="width: 100%; text-align: left; border-collapse: collapse;" class="gift-table">
+                    <thead>
+                        <tr>
+                            <th>充值到账户余额后购买算力点金额</th>
+                            <th>爆款礼品三选一</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>一次性算力点金额满3000元</td>
+                            <td>
+                                1. 京东E卡500元；<br />
+                                2. 富士instax mini SE 拍立得相机；<br />
+                                3. 上海迪士尼成人门票1张
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>一次性算力点金额满7000元</td>
+                            <td>
+                                1.53°飞天茅台（500ml）*1瓶；<br>
+                                2.Nintendo Switch OLED版；<br>
+                                3.SK-II神仙水套装（230ml+清莹露230ml）
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>一次性算力点金额满30000元</td>
+                            <td>
+                                1.大疆Mini 5 Pro无人机畅飞套装；<br>
+                                2.Apple watch series 11钛金属 提供GPS+蜂窝网络，46毫米；<br>
+                                3.赫莲娜黑绷带50ml+小露珠200ml
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>一次性算力点金额满60000元</td>
+                            <td>
+                                1.iPhone 17 Pro（1TB）；<br>
+                                2.HUAWEI Mate 80 RS 非凡大师 20GB+1TB 玄黑 ULTIMATE DESIGN<br>
+                                3.苹果MacBook Pro 14英寸（M5芯片/16G/1TB）
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">重要须知</div>
+            <div class="content">
+                <li>1.👤 活动对象：平台新注册用户，同一手机号、身份证号、企业主体、设备 ID 视为同一用户，仅享 1 次首充福利</li>
+                <li>📢 达标提醒：用户消费达标后，官网将实时推送「有待领取权益」通知</li>
+                <li>✍️ 信息填写：需在达标后 7 个工作日内，点击通知进入信息填写页面，选择礼品并填写收货信息</li>
+                <li>🚚 礼品发货：客服收到用户提交的信息后，7 个工作日内安排发货。礼品发货后，客服将通过官网私信同步物流单号，用户可在「消息中心」查询物流信息</li>
+                <li>💼 对公要求：实际消费≥8000 元需通过对公账户打款（详询客服获取账户信息）</li>
+                <li>🔄 退款规则：用户领礼后申请算力点退款，若导致消费金额未达阶梯标准，需退回礼品或按官方售价补差价，否则平台有权追回</li>
+                <li>✅ 信息规范：用户需填写真实有效的收货信息，因信息错误导致礼品无法送达或丢失，平台不承担补发责任</li>
+                <li>⚠️ 违规处理：严禁恶意注册、虚假交易、刷礼等行为，一经发现取消赠礼资格，并保留追究法律责任的权利</li>
+            </div>
+            <div style="color: #000000;">✨ 充值余额→购算力→官网一键兑礼，达标即领豪礼，高效运算快人一步！</div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style scoped>
+.title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: rgba(0, 41, 156, 1);
+}
+
+.card {
+    width: 100%;
+    padding: 20px 10px;
+    border-bottom: 1px solid #ccc;
+}
+
+.content {
+    font-size: 16px;
+    color: #333333;
+    line-height: 30px;
+}
+
+.multi-line-content>div {
+    line-height: 1.6;
+    padding: 4px 0;
+    /* 可选：增加行间距 */
+}
+  .gift-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
+    margin: 20px 0;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .gift-table th,
+  .gift-table td {
+    padding: 16px 12px;
+    text-align: center; /* 水平居中 */
+    vertical-align: middle; /* 垂直居中 */
+    border: 1px solid #e8e8e8;
+    line-height: 1.5;
+  }
+
+  .gift-table th {
+    background-color: #f9f9f9;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .gift-table tr:nth-child(even) {
+    background-color: #fcfcfc;
+  }
+
+  .gift-table tr:hover {
+    background-color: #f5faff;
+  }
+
+  /* 小屏优化 */
+  @media (max-width: 600px) {
+    .gift-table th,
+    .gift-table td {
+      padding: 12px 8px;
+      font-size: 14px;
+    }
+  }
+</style>

src/views/yingxiao/index.vue

@@ -0,0 +1,306 @@
+<template>
+    <div style="background-color: rgba(250, 251, 253,1);">
+
+        <div class="active_banner">
+            <img src="@/assets/yingxiaobanner.png" alt="" srcset="" width="100%">
+        </div>
+        <div style="width: 100%;display: flex;align-items: center;justify-content: space-around;">
+            <div style="background-color: #ffffff;height: 50px;line-height: 50px;flex: 1;text-align: center;border:1px dashed #2b6ff7;">活动介绍</div>
+            <div style="background-color: #2b6ff7;height: 50px;line-height: 50px;flex: 1;text-align: center;color: #ffffff;">活动奖励</div>
+            <div style="background-color: #2b6ff7;height: 50px;line-height: 50px;flex: 1;text-align: center;color: #ffffff;">活动须知</div>
+        </div>
+        <div class="one">
+            <img src="@/assets/yingxiao.png" alt="" srcset="" width="1200px">
+        </div>
+
+        <div class="three"></div>
+        <div class="footer">
+            <div class="footer_contain">
+                <div>
+                    <div style="color: #000000;">服务热线:</div>
+                    <div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
+                    <div>邮箱:service@hzzxxd.com</div>
+                    <div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
+                </div>
+                <div>
+                    <div style="color: #000000;">快速导航</div>
+                    <div>算力中心</div>
+                    <div>云主机</div>
+                    <div>用户文档</div>
+                </div>
+                <div style="display: flex;align-items: center;gap: 60px;">
+                    <div style="display: flex;flex-direction: column;align-items: center;">
+                        <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                        <div>公众号</div>
+                    </div>
+                    <div style="display: flex;flex-direction: column;align-items: center;">
+                        <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
+                        <div>企业微信</div>
+                    </div>
+                </div>
+            </div>
+            <div
+                style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
+                苏备案号20251124号</div>
+        </div>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+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 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';
+import defaultBanner from '@/assets/333.png';
+const router = useRouter();
+const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
+const source = ref([])
+const oneList = ref([
+    {
+        img: youhuiquan,
+        title: '算力免费领',
+        description: '完成认证/问卷获得算力券',
+        path: '/active/newUser'
+    },
+    {
+        img: yaoqinghaoyou,
+        title: '邀约优算友',
+        description: '邀请好友可获得算力券',
+        path: '/active/invite'
+    },
+    {
+        img: goumaijilu,
+        title: '开业重磅福利',
+        description: '购算力，享豪礼',
+        path: '/active/newUser'
+    }
+])
+const advantageList = ref([])
+const bannerList = ref<any[]>([
+    { id: 0, image_url: defaultBanner3 },
+    { id: 1, image_url: defaultBanner4 }
+]);
+
+const onChange = (current: number) => {
+    console.log(current);
+};
+
+
+// 请求轮播
+const fetchBannerList = async () => {
+    try {
+        const res: any = await getBannerList();
+        // 处理返回的数据
+        if (res && Array.isArray(res) && res.length > 0) {
+            const processedList = res.map((item: any, index: number) => {
+                // 确保每个item都有id
+                const processedItem = {
+                    id: item.id || index,
+                    image_url: item.image_url || defaultBanner
+                };
+
+                // 处理http协议问题
+                if (processedItem.image_url && processedItem.image_url.startsWith('http://')) {
+                    processedItem.image_url = processedItem.image_url.replace('http://', 'https://');
+                }
+
+                return processedItem;
+            });
+
+            bannerList.value = processedList;
+        } else {
+            // API返回空数据或无效数据，使用默认图片
+            bannerList.value = [{ id: 0, image_url: defaultBanner }];
+        }
+    } catch (error: any) {
+        console.error('轮播图请求失败:', error);
+        // 请求失败时使用默认图片
+        bannerList.value = [{ id: 0, image_url: defaultBanner }];
+    }
+};
+
+// 请求GPU列表
+const getGPUList = async () => {
+    try {
+        // const res: any = await getGpuList();
+        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);
+    }
+}
+
+// 请求产品优势
+const getAdvantageList = async () => {
+    try {
+        // const res: any = await getAdvantage();
+        const list = [
+            { title: '高性能算力', description: '采用最新一代GPU，提供强大计算能力，满足各种复杂任务需求。' },
+            { title: '灵活计费模式', description: '支持按需付费和包月套餐，用户可根据实际需求选择最合适的计费方式。' },
+            { title: '全球节点覆盖', description: '在多个地区设有数据中心，确保用户无论身处何地都能享受低延迟的服务体验。' },
+            { title: '专业技术支持', description: '提供7x24小时技术支持，确保用户在使用过程中遇到的问题能够及时得到解决。' }
+        ];
+
+        // 给每个 item 添加 img 字段
+        list.forEach((item: any, index: number) => {
+            if (index === 0) {
+                item.img = one;
+            } else if (index === 1) {
+                item.img = two;
+            } else if (index === 2) {
+                item.img = three;
+            } else {
+                item.img = firth;
+            }
+        });
+
+        // advantageList.value = list;
+    } catch (error: any) {
+        console.error('产品优势请求失败:', error);
+    }
+}
+
+
+
+
+// fetchBannerList();
+getGPUList();
+getAdvantageList();
+
+</script>
+<style scoped lang="scss">
+.banner-slide {
+    width: 100%;
+    height: 600px;
+    // background: url('@/assets/banner2.png') no-repeat center / cover;
+}
+
+.one {
+    background: rgb(250, 251, 253);
+    margin: 30px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.two {
+    // background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
+    padding-bottom: 80px;
+
+    &>div {
+        width: 1200px;
+        margin: 0 auto;
+
+        .title {
+            font-size: 28px;
+            font-weight: 700;
+            text-align: center;
+        }
+
+        &>div:first-child {
+            padding: 44px 0;
+        }
+
+        .subtitle {
+            margin-top: 20px;
+            color: rgb(153, 153, 153);
+            text-align: center;
+        }
+
+        .list_card {
+            margin-top: 30px;
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+
+            &>div {
+                flex: 1;
+                background-color: #ffffff;
+                line-height: 30px;
+                transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+                /* 更长的过渡时间和不同的缓动函数 */
+            }
+
+            &>div:hover {
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            }
+        }
+
+        .avatary_list {
+            // display: grid;
+            // grid-template-columns: repeat(2, 1fr);
+            // gap: 50px;
+
+            &>div {
+                display: flex;
+                // flex-direction: column;
+                align-items: flex-start;
+                justify-content: space-between;
+                gap: 100px;
+
+                &>div {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-start;
+                    align-items: flex-start;
+                }
+            }
+
+            .title {
+                color: #59b2f2;
+                font-size: 18px;
+                font-weight: bold;
+                line-height: 30px;
+                margin-top: 20px;
+            }
+
+            .subtitle {
+                color: #666666;
+            }
+        }
+    }
+
+}
+
+.three {
+    height: 180px;
+    background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
+}
+
+.footer {
+    height: 260px;
+    background-color: #ffffff;
+    width: 100%;
+
+    .footer_contain {
+        width: 1200px;
+        margin: 0 auto;
+        height: calc(100% - 45px);
+        display: flex;
+        justify-content: space-around;
+        align-items: self-start;
+        padding: 20px 0;
+
+        &>div {
+            line-height: 30px;
+            color: #3a3939;
+        }
+    }
+}
+
+/* For demo */
+</style>