Merge branch 'flow' of ruiqigogs/yf-portal-vue into master

src/views/index.vue

@@ -18,9 +18,12 @@
                 'opacity-0': currentIndex !== index,
                 'z-10': currentIndex === index,
                 'z-0 pointer-events-none': currentIndex !== index,
-              }">
+              }"
+            >
               <div class="hero-copy carousel-caption">
-                <div class="hero-script text-[68px] font-italic text-[#0c4eb5]"> HELLO </div>
+                <div class="hero-script text-[68px] font-italic text-[#0c4eb5]">
+                  HELLO
+                </div>
                 <p class="hero-text mt-6 text-[24px] text-[#5f6f83]">
                   {{ slide.text }}
                 </p>
@@ -28,12 +31,18 @@
 
               <!-- 轮播背景图 -->
               <div class="hero-visual absolute inset-0">
-                <img :src="slide.image" alt="Banner" class="w-full h-full object-cover" />
+                <img
+                  :src="slide.image"
+                  alt="Banner"
+                  class="w-full h-full object-cover"
+                />
               </div>
             </div>
 
             <!-- 指示器 -->
-            <div class="carousel-indicators absolute bottom-4 left-1/2 z-30 flex transform -translate-x-1/2 space-x-2">
+            <div
+              class="carousel-indicators absolute bottom-4 left-1/2 z-30 flex transform -translate-x-1/2 space-x-2"
+            >
               <button
                 v-for="(_, i) in slides"
                 :key="i"
@@ -42,7 +51,8 @@
                   'bg-[#0c4eb5]': currentIndex === i,
                   'bg-[#d1ddea]': currentIndex !== i,
                 }"
-                class="w-3 h-3 rounded-full transition-colors"></button>
+                class="w-3 h-3 rounded-full transition-colors"
+              ></button>
             </div>
           </div>
         </div>
@@ -54,28 +64,46 @@
             v-for="section in portalSections"
             :key="section.code"
             class="platform-block"
-            :style="{ minHeight: section.height }">
+            :style="{ minHeight: section.height }"
+          >
             <div class="platform-block__header">
               <div class="platform-block__title-wrap">
                 <p class="platform-block__title">{{ section.title }}</p>
-                <span class="platform-block__subtitle">{{ section.subtitle }}</span>
+                <span class="platform-block__subtitle">{{
+                  section.subtitle
+                }}</span>
               </div>
               <span class="platform-block__watermark">{{ section.code }}</span>
             </div>
 
-            <div v-if="section.apps?.length" class="grid grid-cols-2 gap-4 p-6 md:grid-cols-4">
+            <div
+              v-if="section.apps?.length"
+              class="grid grid-cols-2 gap-4 p-6 md:grid-cols-4"
+            >
               <button
                 v-for="(app, appIndex) in section.apps"
                 :key="`${section.code}-${appIndex}-${app.label}`"
                 type="button"
                 :class="[
                   'platform-app',
-                  boldLabes.includes(app.label) ? 'platform-app--active' : 'platform-app--ghost',
+                  boldLabes.includes(app.label)
+                    ? 'platform-app--active'
+                    : 'platform-app--ghost',
                 ]"
-                @click="handlePortalAppClick(app)">
+                @click="handlePortalAppClick(app)"
+              >
                 <span class="platform-app__icon">
-                  <img v-if="app.image" :src="app.image" :alt="app.label" class="h-7 w-7 object-contain rounded-md" />
-                  <Icon v-else :icon="app.icon || 'mdi:dots-grid'" class="text-[24px]" />
+                  <img
+                    v-if="app.image"
+                    :src="app.image"
+                    :alt="app.label"
+                    class="h-7 w-7 object-contain rounded-md"
+                  />
+                  <Icon
+                    v-else
+                    :icon="app.icon || 'mdi:dots-grid'"
+                    class="text-[24px]"
+                  />
                 </span>
                 <span class="text-[#004098] text-sm">{{ app.label }}</span>
               </button>
@@ -96,23 +124,39 @@
               <article
                 v-for="(notice, noticeIndex) in notices"
                 :key="`${notice.title}-${noticeIndex}`"
-                class="notice-item cursor-pointer">
+                class="notice-item cursor-pointer"
+              >
                 <div class="notice-item__desc">{{ notice.desc }}</div>
               </article>
             </div>
           </section>
 
-          <section class="side-card side-card--notice rounded-md p-2" :style="{ minHeight: '190px' }">
+          <section
+            class="side-card side-card--notice rounded-md p-2"
+            :style="{ minHeight: '190px' }"
+          >
             <div class="side-card__header w-[91%] ml-[15px]">
               <div class="notice-badge px-2">{{ todoPanelTitle }}</div>
-              <button type="button" class="side-card__more" @click="router.push('/todo-list')"> 全部任务 </button>
+              <button
+                type="button"
+                class="side-card__more"
+                @click="router.push('/todo-list')"
+              >
+                全部任务
+              </button>
             </div>
             <div class="space-y-2 p-4 pt-2">
-              <div v-if="!userStore.getUser.username" class="flex h-full items-center justify-center">
+              <div
+                v-if="!userStore.getUser.username"
+                class="flex h-full items-center justify-center"
+              >
                 <div class="text-[#8a9ab0] pt-10">登录后查看</div>
               </div>
 
-              <div v-if="!oaTasks.length && userStore.getUser.username" class="flex h-full items-center justify-center">
+              <div
+                v-if="!oaTasks.length && userStore.getUser.username"
+                class="flex h-full items-center justify-center"
+              >
                 <div class="text-[#8a9ab0]">暂无数据</div>
               </div>
 
@@ -121,25 +165,32 @@
                 v-for="task in oaTasks"
                 :key="task.requestId"
                 @click="handleTask(task)"
-                class="todo-item rounded-md cursor-pointer">
+                class="todo-item rounded-md cursor-pointer"
+              >
                 <div class="flex min-w-0 items-start justify-between gap-3">
                   <div class="min-w-0">
-                    <div class="truncate text-[14px] font-semibold text-[#0d4a9d]">
+                    <div
+                      class="truncate text-[14px] font-semibold text-[#0d4a9d]"
+                    >
                       {{ task.requestName }}
                     </div>
                     <div class="mt-1 text-[12px] text-[#8a9ab0]">
                       创建人：{{ task.creatorName }} · {{ task.createTime }}
                     </div>
                   </div>
-                  <span :class="['todo-item__tag', getTagClass(task.requesLevel)]">{{
-                    getTagName(task.requesLevel)
-                  }}</span>
+                  <span
+                    :class="['todo-item__tag', getTagClass(task.requesLevel)]"
+                    >{{ getTagName(task.requesLevel) }}</span
+                  >
                 </div>
               </article>
             </div>
           </section>
 
-          <section class="side-card side-card--content p-2 rounded-md" :style="{ minHeight: '180px' }">
+          <section
+            class="side-card side-card--content p-2 rounded-md"
+            :style="{ minHeight: '180px' }"
+          >
             <div class="side-card__header w-[90%] ml-[15px]">
               <div class="notice-badge">{{ newsPanelTitle }}</div>
               <button type="button" class="side-card__more">
@@ -147,10 +198,20 @@
               </button>
             </div>
             <div class="space-y-2 p-4 pt-2">
-              <article v-for="news in newsList" :key="news.title" class="news-mini cursor-pointer rounded-md">
-                <img :src="news.image" :alt="news.title" class="h-[34px] w-[52px] rounded-[8px] object-cover" />
+              <article
+                v-for="news in newsList"
+                :key="news.title"
+                class="news-mini cursor-pointer rounded-md"
+              >
+                <img
+                  :src="news.image"
+                  :alt="news.title"
+                  class="h-[34px] w-[52px] rounded-[8px] object-cover"
+                />
                 <div class="min-w-0 flex-1">
-                  <div class="line-clamp-2 text-[13px] font-semibold leading-[1.45] text-[#41597d]">
+                  <div
+                    class="line-clamp-2 text-[13px] font-semibold leading-[1.45] text-[#41597d]"
+                  >
                     {{ news.title }}
                   </div>
                   <div class="mt-2 text-[12px] text-[#9cadc0]">
@@ -163,12 +224,16 @@
 
           <section
             class="side-card side-card--placeholder rounded-md"
-            :style="{ minHeight: '78px', backgroundColor: '#3575e4' }">
+            :style="{ minHeight: '78px', backgroundColor: '#3575e4' }"
+          >
             <div class="placeholder-panel flex flex-col text-left">
               <div class="text-sm">需要帮助？</div>
-              <div class="text-[10px]"> 遇到系统操作问题？我们的7 x 24 小时AI助手随时待命。 </div>
+              <div class="text-[10px]">
+                遇到系统操作问题？我们的7 x 24 小时AI助手随时待命。
+              </div>
               <div
-                class="bg-white text-sm text-center text-[#004098] py-1 px-2 rounded-full mt-2 w-[30%] cursor-pointer">
+                class="bg-white text-sm text-center text-[#004098] py-1 px-2 rounded-full mt-2 w-[30%] cursor-pointer"
+              >
                 立即咨询
               </div>
             </div>
@@ -182,920 +247,972 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, onUnmounted, ref } from 'vue';
-  import * as authUtil from '@/utils/auth';
-  import * as dd from 'dingtalk-jsapi';
-  import Header from '@components/home/header.vue';
-  import Footer from '@components/home/Footer.vue';
-  import { useRouter } from 'vue-router';
-  import axios from 'axios';
-  import { Icon } from '@iconify/vue';
-  import { ElLoading } from 'element-plus';
-  import { getMCSsoToken, ssoLogin, zentaoSsoLogin, getOATasks } from '@/api/user';
-  import { useUserStore } from '@/stores/useUserStore';
-  import { getAccessToken } from '@/utils/auth';
-  import banner1 from '@/assets/images/banner1.png';
-  import banner2 from '@/assets/images/banner2.jpg';
-  import banner3 from '@/assets/images/banner3.jpg';
-  import img3 from '@/assets/images/3.jpg';
-  import oaimage from '@/assets/images/oa.jpg';
-  import crmimage from '@/assets/images/crm.jpg';
-  import ehrimage from '@/assets/images/ehr.jpg';
-  import scmimage from '@/assets/images/scm.png';
-  import erpimage from '@/assets/images/fm.jpg';
-  import driveimage from '@/assets/images/drive.jpg';
-  import pmsimage from '@/assets/images/pms.jpeg';
-  import zhonghangimage from '@/assets/images/中航.png';
-  import lianyouimage from '@/assets/images/lianyou.jpeg';
-  import qhseimage from '@/assets/images/qhse.jpg';
-  import zuanjingimage from '@/assets/images/zuanjing.jpeg';
-  import yalieimage from '@/assets/images/yalie.png';
-  import zhuqiimage from '@/assets/images/zhuqi.png';
-  import pmimage from '@/assets/images/pm.jpg';
-  import dataimage from '@/assets/images/data.jpg';
-  import thinkimage from '@/assets/images/think.jpg';
-  import aiimage from '@/assets/images/ai.png';
-  import agentimage from '@/assets/images/agent.jpeg';
-  import videoimage from '@/assets/images/video.png';
-  import fileagent from '@/assets/images/fileagent.png';
-  import zhiduagent from '@/assets/images/zhiduagent.png';
-  import jishuimage2 from '@/assets/images/jishuimage.png';
-  import zhanlueimage from '@/assets/images/zhanlue.jpg'; // 战略解码
-  import safeimage from '@/assets/images/safe.png'; // 安全合规管理
-  import zuzhiimage from '@/assets/images/zuzhi.jpg';
-  import youimage from '@/assets/images/youcnag.png'; // ai智能体
-  import hongpan from '@/assets/images/鸿盘.jpg'; // ai智能体
-
-  type PortalApp = {
-    label: string;
-    icon?: string;
-    image?: string;
-    active?: boolean;
-  };
-
-  type PortalSection = {
-    code: string;
-    title: string;
-    subtitle: string;
-    height: string;
-    apps?: PortalApp[];
-  };
-
-  type NoticeItem = {
-    title: string;
-    desc: string;
-  };
-
-  type SidePanel = {
-    title: string;
-    height: string;
-  };
-
-  type TodoTask = {
-    title: string;
-    meta: string;
-    tag: string;
-    tagClass: string;
-  };
-
-  type NewsItem = {
-    title: string;
-    date: string;
-    image: string;
-  };
-
-  const router = useRouter();
-  const userStore = useUserStore();
-
-  const noticeLabel = '公告';
-  const todoPanelTitle = '待办中心';
-  const newsPanelTitle = '新闻';
-
-  const portalSections: PortalSection[] = [
-    {
-      code: '数',
-      title: '数字化运营平台',
-      subtitle: '高效协同 · 战略洞察',
-      height: '220px',
-      apps: [
-        {
-          label: 'OA办公',
-          image: oaimage,
-          active: true,
-        },
-        { label: '客户管理(CRM)', image: crmimage },
-        { label: '人力资源(EHR)', image: ehrimage },
-        { label: '供应商管理(SRM)', image: scmimage },
-        { label: '财务管理(FM)', image: erpimage },
-        { label: '经营驾驶舱(MC)', image: driveimage },
-        { label: '项目管理(PM)', image: pmimage },
-        { label: '技术研发管理', image: jishuimage2 },
-        { label: '战略解码与执行', image: zhanlueimage },
-        { label: '组织资产管理', image: zuzhiimage },
-        { label: '风控合规管理', image: safeimage },
-        { label: '研发需求管理', image: jishuimage2 },
-        { label: '鸿盘', image: hongpan },
-      ],
-    },
-    {
-      code: '智',
-      title: '智慧指挥平台',
-      subtitle: '高效协同 · 战略洞察',
-      height: '210px',
-      apps: [
-        { label: '设备管理(PMS)', image: pmsimage, active: true },
-        { label: '中航北斗', image: zhonghangimage },
-        { label: '质量安全管理(QHSE)', image: qhseimage },
-        { label: '智慧连油', image: lianyouimage },
-        { label: '智慧注气', image: zhuqiimage },
-        { label: '智能钻井', image: zuanjingimage },
-        { label: '智慧压裂', image: yalieimage },
-        { label: '数字油藏', image: youimage },
-        { label: '视频中心(VCS)', image: videoimage },
-      ],
-    },
-    {
-      code: 'AI',
-      title: 'Chat BI平台',
-      subtitle: '高效协同 · 战略洞察',
-      height: '160px',
-      apps: [
-        { label: '全局数据治理(数据中台)', image: dataimage, active: true },
-        { label: '智能决策', image: thinkimage },
-        { label: '行业AI大模型', image: aiimage },
-        { label: 'AI智能体(智能交互)', image: agentimage },
-        { label: '工艺文件智能体', image: fileagent },
-        { label: '集团制度智能体', image: zhiduagent },
-      ],
-    },
-  ];
-
-  let boldLabes = ref([
-    'OA办公',
-    '客户管理(CRM)',
-    '设备管理(PMS)',
-    '中航北斗',
-    '智慧连油',
-    '质量安全管理(QHSE)',
-    '智慧注气',
-    '视频中心(VCS)',
-    '研发需求管理',
-    '经营驾驶舱(MC)',
-  ]);
-
-  const getGreeting = () => {
-    const hour = new Date().getHours();
-    if (hour < 12) return '早上好';
-    if (hour < 18) return '下午好';
-    return '晚上好';
-  };
-
-  // 添加轮播数据
-  const slides = ref([
-    {
-      image: banner1,
-      text: getGreeting() + '，保持热爱，奔赴目标！',
-    },
-    {
-      image: banner2,
-      text: '数字化转型，驱动未来增长',
-    },
-    {
-      image: banner3,
-      text: '智慧平台，赋能高效协同',
-    },
-  ]);
-
-  // 当前索引
-  const currentIndex = ref(0);
-  let slideTimer: ReturnType<typeof setInterval> | null = null;
-
-  // 下一页
-  const nextSlide = () => {
-    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
-  };
+import { onMounted, onUnmounted, ref } from "vue";
+import * as authUtil from "@/utils/auth";
+import * as dd from "dingtalk-jsapi";
+import Header from "@components/home/header.vue";
+import Footer from "@components/home/Footer.vue";
+import { useRouter } from "vue-router";
+import axios from "axios";
+import { Icon } from "@iconify/vue";
+import { ElLoading } from "element-plus";
+import {
+  getMCSsoToken,
+  ssoLogin,
+  zentaoSsoLogin,
+  getOATasks,
+} from "@/api/user";
+import { useUserStore } from "@/stores/useUserStore";
+import { getAccessToken } from "@/utils/auth";
+import banner1 from "@/assets/images/banner1.png";
+import banner2 from "@/assets/images/banner2.jpg";
+import banner3 from "@/assets/images/banner3.jpg";
+import img3 from "@/assets/images/3.jpg";
+import oaimage from "@/assets/images/oa.jpg";
+import crmimage from "@/assets/images/crm.jpg";
+import ehrimage from "@/assets/images/ehr.jpg";
+import scmimage from "@/assets/images/scm.png";
+import erpimage from "@/assets/images/fm.jpg";
+import driveimage from "@/assets/images/drive.jpg";
+import pmsimage from "@/assets/images/pms.jpeg";
+import zhonghangimage from "@/assets/images/中航.png";
+import lianyouimage from "@/assets/images/lianyou.jpeg";
+import qhseimage from "@/assets/images/qhse.jpg";
+import zuanjingimage from "@/assets/images/zuanjing.jpeg";
+import yalieimage from "@/assets/images/yalie.png";
+import zhuqiimage from "@/assets/images/zhuqi.png";
+import pmimage from "@/assets/images/pm.jpg";
+import dataimage from "@/assets/images/data.jpg";
+import thinkimage from "@/assets/images/think.jpg";
+import aiimage from "@/assets/images/ai.png";
+import agentimage from "@/assets/images/agent.jpeg";
+import videoimage from "@/assets/images/video.png";
+import fileagent from "@/assets/images/fileagent.png";
+import zhiduagent from "@/assets/images/zhiduagent.png";
+import jishuimage2 from "@/assets/images/jishuimage.png";
+import zhanlueimage from "@/assets/images/zhanlue.jpg"; // 战略解码
+import safeimage from "@/assets/images/safe.png"; // 安全合规管理
+import zuzhiimage from "@/assets/images/zuzhi.jpg";
+import youimage from "@/assets/images/youcnag.png"; // ai智能体
+import hongpan from "@/assets/images/鸿盘.jpg"; // ai智能体
+
+type PortalApp = {
+  label: string;
+  icon?: string;
+  image?: string;
+  active?: boolean;
+};
+
+type PortalSection = {
+  code: string;
+  title: string;
+  subtitle: string;
+  height: string;
+  apps?: PortalApp[];
+};
+
+type NoticeItem = {
+  title: string;
+  desc: string;
+};
+
+type SidePanel = {
+  title: string;
+  height: string;
+};
+
+type TodoTask = {
+  title: string;
+  meta: string;
+  tag: string;
+  tagClass: string;
+};
+
+type NewsItem = {
+  title: string;
+  date: string;
+  image: string;
+};
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const noticeLabel = "公告";
+const todoPanelTitle = "待办中心";
+const newsPanelTitle = "新闻";
+
+const portalSections: PortalSection[] = [
+  {
+    code: "数",
+    title: "数字化运营平台",
+    subtitle: "高效协同 · 战略洞察",
+    height: "220px",
+    apps: [
+      {
+        label: "OA办公",
+        image: oaimage,
+        active: true,
+      },
+      { label: "客户管理(CRM)", image: crmimage },
+      { label: "人力资源(EHR)", image: ehrimage },
+      { label: "供应商管理(SRM)", image: scmimage },
+      { label: "财务管理(FM)", image: erpimage },
+      { label: "经营驾驶舱(MC)", image: driveimage },
+      { label: "项目管理(PM)", image: pmimage },
+      { label: "技术研发管理", image: jishuimage2 },
+      { label: "战略解码与执行", image: zhanlueimage },
+      { label: "组织资产管理", image: zuzhiimage },
+      { label: "风控合规管理", image: safeimage },
+      { label: "研发需求管理", image: jishuimage2 },
+      { label: "鸿盘", image: hongpan },
+    ],
+  },
+  {
+    code: "智",
+    title: "智慧指挥平台",
+    subtitle: "高效协同 · 战略洞察",
+    height: "210px",
+    apps: [
+      { label: "设备管理(PMS)", image: pmsimage, active: true },
+      { label: "中航北斗", image: zhonghangimage },
+      { label: "质量安全管理(QHSE)", image: qhseimage },
+      { label: "智慧连油", image: lianyouimage },
+      { label: "智慧注气", image: zhuqiimage },
+      { label: "智能钻井", image: zuanjingimage },
+      { label: "智慧压裂", image: yalieimage },
+      { label: "数字油藏", image: youimage },
+      { label: "视频中心(VCS)", image: videoimage },
+    ],
+  },
+  {
+    code: "AI",
+    title: "Chat BI平台",
+    subtitle: "高效协同 · 战略洞察",
+    height: "160px",
+    apps: [
+      { label: "全局数据治理(数据中台)", image: dataimage, active: true },
+      { label: "智能决策", image: thinkimage },
+      { label: "行业AI大模型", image: aiimage },
+      { label: "AI智能体(智能交互)", image: agentimage },
+      { label: "工艺文件智能体", image: fileagent },
+      { label: "集团制度智能体", image: zhiduagent },
+    ],
+  },
+];
+
+let boldLabes = ref([
+  "OA办公",
+  "客户管理(CRM)",
+  "设备管理(PMS)",
+  "中航北斗",
+  "智慧连油",
+  "质量安全管理(QHSE)",
+  "智慧注气",
+  "视频中心(VCS)",
+  "研发需求管理",
+  "经营驾驶舱(MC)",
+  "项目管理(PM)",
+  "鸿盘",
+]);
+
+const getGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 12) return "早上好";
+  if (hour < 18) return "下午好";
+  return "晚上好";
+};
+
+// 添加轮播数据
+const slides = ref([
+  {
+    image: banner1,
+    text: getGreeting() + "，保持热爱，奔赴目标！",
+  },
+  {
+    image: banner2,
+    text: "数字化转型，驱动未来增长",
+  },
+  {
+    image: banner3,
+    text: "智慧平台，赋能高效协同",
+  },
+]);
+
+// 当前索引
+const currentIndex = ref(0);
+let slideTimer: ReturnType<typeof setInterval> | null = null;
+
+// 下一页
+const nextSlide = () => {
+  currentIndex.value = (currentIndex.value + 1) % slides.value.length;
+};
+
+const notices: NoticeItem[] = [
+  {
+    title: "集团总部关于办公楼设备维保的说明",
+    desc: "关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知",
+  },
+  {
+    title: "集团总部关于办公楼设备维保的说明",
+    desc: "关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知",
+  },
+];
+
+const newsList: NewsItem[] = [
+  {
+    title: "科瑞石油成功交付首套自动化钻机",
+    date: "2026-04-18",
+    image: banner1,
+  },
+  {
+    title: "DeepOil 智慧平台荣获行业创新奖",
+    date: "2026-04-15",
+    image: banner2,
+  },
+  {
+    title: "数字人才培养“扬帆计划”正式启动",
+    date: "2026-04-12",
+    image: img3,
+  },
+];
+
+const protectedOpen = (url: string) => {
+  if (userStore.getUser.username && getAccessToken()) {
+    window.open(url, "_blank");
+  } else {
+    router.push({ path: "/login" });
+  }
+};
 
-  const notices: NoticeItem[] = [
-    {
-      title: '集团总部关于办公楼设备维保的说明',
-      desc: '关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知',
-    },
-    {
-      title: '集团总部关于办公楼设备维保的说明',
-      desc: '关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知',
-    },
-  ];
+const handlePortalAppClick = async (app: PortalApp) => {
+  if (!app.label) return;
 
-  const newsList: NewsItem[] = [
-    {
-      title: '科瑞石油成功交付首套自动化钻机',
-      date: '2026-04-18',
-      image: banner1,
-    },
-    {
-      title: 'DeepOil 智慧平台荣获行业创新奖',
-      date: '2026-04-15',
-      image: banner2,
-    },
-    {
-      title: '数字人才培养“扬帆计划”正式启动',
-      date: '2026-04-12',
-      image: img3,
-    },
-  ];
+  if (app.label === "项目管理(PM)") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=yyhy`,
+    );
+  }
 
-  const protectedOpen = (url: string) => {
+  if (app.label === "OA办公") {
     if (userStore.getUser.username && getAccessToken()) {
-      window.open(url, '_blank');
-    } else {
-      router.push({ path: '/login' });
-    }
-  };
-
-  const handlePortalAppClick = async (app: PortalApp) => {
-    if (!app.label) return;
-
-    if (app.label === '项目管理(PM)') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=yyhy`);
-    }
-
-    if (app.label === 'OA办公') {
-      if (userStore.getUser.username && getAccessToken()) {
-        const res = await ssoLogin({ username: userStore.getUser.username });
-        if (res) {
-          window.open(`https://yfoa.keruioil.com/wui/index.html?ssoToken=${res}#/main`, '_blank');
-        }
-      } else {
-        router.push({ path: '/login' });
+      const res = await ssoLogin({ username: userStore.getUser.username });
+      if (res) {
+        window.open(
+          `https://yfoa.keruioil.com/wui/index.html?ssoToken=${res}#/main`,
+          "_blank",
+        );
       }
+    } else {
+      router.push({ path: "/login" });
     }
+  }
 
-    if (app.label === '客户管理(CRM)') {
-      protectedOpen(
-        `https://crm-tencent.xiaoshouyi.com/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=${getAccessToken()}`
-      );
-    }
+  if (app.label === "客户管理(CRM)") {
+    protectedOpen(
+      `https://crm-tencent.xiaoshouyi.com/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=${getAccessToken()}`,
+    );
+  }
 
-    if (app.label === '设备管理(PMS)') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}`);
-    }
+  if (app.label === "设备管理(PMS)") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}`,
+    );
+  }
 
-    if (app.label === '中航北斗') {
-      protectedOpen('https://zhbdgps.cn');
-    }
+  if (app.label === "中航北斗") {
+    protectedOpen("https://zhbdgps.cn");
+  }
 
-    if (app.label === '智慧连油') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=zhly`);
-    }
+  if (app.label === "智慧连油") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=zhly`,
+    );
+  }
 
-    if (app.label === '智慧注气') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=znzq`);
-    }
+  if (app.label === "智慧注气") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=znzq`,
+    );
+  }
 
-    if (app.label === '视频中心(VCS)') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=spzx`);
-    }
+  if (app.label === "视频中心(VCS)") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=spzx`,
+    );
+  }
 
-    if (app.label === '质量安全管理(QHSE)') {
-      protectedOpen(`${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=qhse`);
-    }
+  if (app.label === "质量安全管理(QHSE)") {
+    protectedOpen(
+      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=qhse`,
+    );
+  }
 
-    if (app.label === '经营驾驶舱(MC)') {
-      if (userStore.getUser.username && getAccessToken()) {
-        const res = await getMCSsoToken();
-        if (res) {
-          window.open(
-            `https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1&ssoToken=${res}`,
-            '_blank'
-          );
-        }
-      } else {
-        router.push({ path: '/login' });
+  if (app.label === "经营驾驶舱(MC)") {
+    if (userStore.getUser.username && getAccessToken()) {
+      const res = await getMCSsoToken();
+      if (res) {
+        window.open(
+          `https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1&ssoToken=${res}`,
+          "_blank",
+        );
       }
+    } else {
+      router.push({ path: "/login" });
     }
+  }
 
-    if (app.label === '研发需求管理') {
-      if (userStore.getUser.username && getAccessToken()) {
-        const res = await zentaoSsoLogin({
-          username: userStore.getUser.username,
-        });
-        if (res) {
-          window.open(
-            `http://project.deepoil.cc/zentao/api.php?m=user&f=apilogin&account=${res.jobNumber}&code=${res.code}&time=${res.timestamp}&token=${res.token}`,
-            '_blank'
-          );
-        }
-      } else {
-        router.push({ path: '/login' });
+  if (app.label === "研发需求管理") {
+    if (userStore.getUser.username && getAccessToken()) {
+      const res = await zentaoSsoLogin({
+        username: userStore.getUser.username,
+      });
+      if (res) {
+        window.open(
+          `http://project.deepoil.cc/zentao/api.php?m=user&f=apilogin&account=${res.jobNumber}&code=${res.code}&time=${res.timestamp}&token=${res.token}`,
+          "_blank",
+        );
       }
+    } else {
+      router.push({ path: "/login" });
     }
+  }
 
-    if (app.label === '鸿盘') {
-      if (userStore.getUser.username && getAccessToken()) {
-        window.open(`https://pan.keruioil.com:52180`, '_blank');
-      } else {
-        router.push({ path: '/login' });
-      }
+  if (app.label === "鸿盘") {
+    if (userStore.getUser.username && getAccessToken()) {
+      window.open(`https://pan.keruioil.com:52180`, "_blank");
+    } else {
+      router.push({ path: "/login" });
     }
-  };
-
-  async function loginWithDingTalk() {
-    const ddCorpId = import.meta.env.VITE_DD_CORPID;
-    const ddClientId = import.meta.env.VITE_DD_CLIENTID;
-
-    if (!ddCorpId || !ddClientId) return;
-
-    dd.requestAuthCode({
-      corpId: ddCorpId,
-      clientId: ddClientId,
-      success: (res: any) => {
-        const { code } = res;
-
-        axios
-          .post(
-            import.meta.env.BASE_URL + '/admin-api/system/auth/h5SocialLogin',
-            {
-              code,
-              type: 20,
-              state: new Date().getTime(),
+  }
+};
+
+async function loginWithDingTalk() {
+  const ddCorpId = import.meta.env.VITE_DD_CORPID;
+  const ddClientId = import.meta.env.VITE_DD_CLIENTID;
+
+  if (!ddCorpId || !ddClientId) return;
+
+  dd.requestAuthCode({
+    corpId: ddCorpId,
+    clientId: ddClientId,
+    success: (res: any) => {
+      const { code } = res;
+
+      axios
+        .post(
+          import.meta.env.BASE_URL + "/admin-api/system/auth/h5SocialLogin",
+          {
+            code,
+            type: 20,
+            state: new Date().getTime(),
+          },
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "tenant-id": 1,
             },
-            {
-              headers: {
-                'Content-Type': 'application/json',
-                'tenant-id': 1,
-              },
-            }
-          )
-          .then(response => {
-            authUtil.setToken(response.data.data);
-            router.push({
-              path: '/login',
-            });
+          },
+        )
+        .then((response) => {
+          authUtil.setToken(response.data.data);
+          router.push({
+            path: "/login",
           });
-      },
-      fail: (err: any) => {
-        console.log('err :>> ', err);
-      },
-    });
-  }
+        });
+    },
+    fail: (err: any) => {
+      console.log("err :>> ", err);
+    },
+  });
+}
 
-  function dingTalkAutoLogin() {
-    const ua = window.navigator.userAgent.toLowerCase();
+function dingTalkAutoLogin() {
+  const ua = window.navigator.userAgent.toLowerCase();
 
-    if (ua.includes('dingtalk') || ua.includes('dingtalkwork')) {
-      loginWithDingTalk();
+  if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
+    loginWithDingTalk();
+  }
+}
+
+const getTagClass = (tag: string) => {
+  return tag === "0"
+    ? "bg-[#dbe8ff] text-[#3f74ff]"
+    : tag === "1"
+      ? "bg-[#ffe1e3] text-[#ff5d66]"
+      : tag === "2"
+        ? "bg-[#dfe8f3] text-[#6f7f94]"
+        : "bg-[#dbe8ff] text-[#3f74ff]";
+};
+
+const getTagName = (tag: string) => {
+  return tag === "0"
+    ? "正常"
+    : tag === "1"
+      ? "重要"
+      : tag === "2"
+        ? "紧急"
+        : "正常";
+};
+
+let oaTasks = ref([]);
+onMounted(async () => {
+  dingTalkAutoLogin();
+  slideTimer = setInterval(nextSlide, 5000);
+
+  if (userStore.getUser.username) {
+    try {
+      const res = await getOATasks({
+        id: userStore.getUser.username,
+        pageNum: 1,
+        pageSize: 10,
+      });
+      oaTasks.value = res.todoList.slice(0, 3);
+    } finally {
     }
   }
+});
 
-  const getTagClass = (tag: string) => {
-    return tag === '0'
-      ? 'bg-[#dbe8ff] text-[#3f74ff]'
-      : tag === '1'
-        ? 'bg-[#ffe1e3] text-[#ff5d66]'
-        : tag === '2'
-          ? 'bg-[#dfe8f3] text-[#6f7f94]'
-          : 'bg-[#dbe8ff] text-[#3f74ff]';
-  };
-
-  const getTagName = (tag: string) => {
-    return tag === '0' ? '正常' : tag === '1' ? '重要' : tag === '2' ? '紧急' : '正常';
-  };
-
-  let oaTasks = ref([]);
-  onMounted(async () => {
-    dingTalkAutoLogin();
-    slideTimer = setInterval(nextSlide, 5000);
-
-    if (userStore.getUser.username) {
-      try {
-        const res = await getOATasks({
-          id: userStore.getUser.username,
-          pageNum: 1,
-          pageSize: 10,
-        });
-        oaTasks.value = res.todoList.slice(0, 3);
-      } finally {
-      }
-    }
+const handleTask = async (row) => {
+  const res = await ssoLogin({
+    username: userStore.getUser.username,
   });
 
-  const handleTask = async row => {
-    const res = await ssoLogin({
-      username: userStore.getUser.username,
-    });
-
-    if (res) {
-      const ua = window.navigator.userAgent.toLowerCase();
-      if (ua.includes('dingtalk') || ua.includes('dingtalkwork')) {
-        dd.biz.util.openLink({
-          url: 'https://yfoa.keruioil.com/wui/index.html' + '?ssoToken=' + res + '#/main', // 先跳你的 SSO 链接
-          onSuccess: () => {
-            // 延迟跳目标业务地址（和你原来 setTimeout 逻辑一致）
-            setTimeout(() => {
-              dd.biz.util.openLink({
-                url: `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1776063595284#/main/workflow/req?requestid=${row.requestId}`,
-              });
-            }, 100);
-          },
-        });
-      } else {
-        const loading = ElLoading.service({
-          lock: true,
-          text: '正在跳转，请稍候...',
-          background: 'rgba(0, 0, 0, 0.7)',
-        });
-        const newTab = window.open('', '_blank');
-        newTab.location.href = 'https://yfoa.keruioil.com/wui/index.html' + '?ssoToken=' + res + '#/main';
-
-        setTimeout(function () {
-          newTab.location.href = `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1776063595284#/main/workflow/req?requestid=${row.requestId}`;
+  if (res) {
+    const ua = window.navigator.userAgent.toLowerCase();
+    if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
+      dd.biz.util.openLink({
+        url:
+          "https://yfoa.keruioil.com/wui/index.html" +
+          "?ssoToken=" +
+          res +
+          "#/main", // 先跳你的 SSO 链接
+        onSuccess: () => {
+          // 延迟跳目标业务地址（和你原来 setTimeout 逻辑一致）
           setTimeout(() => {
-            loading.close();
-          }, 500);
-        }, 100);
-      }
+            dd.biz.util.openLink({
+              url: `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1776063595284#/main/workflow/req?requestid=${row.requestId}`,
+            });
+          }, 100);
+        },
+      });
+    } else {
+      const loading = ElLoading.service({
+        lock: true,
+        text: "正在跳转，请稍候...",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const newTab = window.open("", "_blank");
+      newTab.location.href =
+        "https://yfoa.keruioil.com/wui/index.html" +
+        "?ssoToken=" +
+        res +
+        "#/main";
+
+      setTimeout(function () {
+        newTab.location.href = `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1776063595284#/main/workflow/req?requestid=${row.requestId}`;
+        setTimeout(() => {
+          loading.close();
+        }, 500);
+      }, 100);
     }
-  };
+  }
+};
 
-  onUnmounted(() => {
-    if (slideTimer) {
-      clearInterval(slideTimer);
-      slideTimer = null;
-    }
-  });
+onUnmounted(() => {
+  if (slideTimer) {
+    clearInterval(slideTimer);
+    slideTimer = null;
+  }
+});
 </script>
 
 <style scoped>
-  .portal-home {
-    --portal-blue: #2f6fdb;
-    --portal-blue-dark: #1b57bc;
-    --portal-blue-soft: #d7e7ff;
-    --portal-panel: #deebfb;
-    --portal-panel-soft: #edf5ff;
-    --portal-line: #a8c4f2;
-    background-color: #eef3f9;
-    background-image: url('../assets//images/bg666.png');
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    background-attachment: fixed;
-  }
-
-  .hero-banner {
-    position: relative;
-    min-height: 220px;
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.96) 0%,
-      rgba(241, 247, 255, 0.92) 36%,
-      rgba(223, 237, 255, 0.95) 100%
+.portal-home {
+  --portal-blue: #2f6fdb;
+  --portal-blue-dark: #1b57bc;
+  --portal-blue-soft: #d7e7ff;
+  --portal-panel: #deebfb;
+  --portal-panel-soft: #edf5ff;
+  --portal-line: #a8c4f2;
+  background-color: #eef3f9;
+  background-image: url("../assets//images/bg666.png");
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-attachment: fixed;
+}
+
+.hero-banner {
+  position: relative;
+  min-height: 220px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.96) 0%,
+    rgba(241, 247, 255, 0.92) 36%,
+    rgba(223, 237, 255, 0.95) 100%
+  );
+  box-shadow: 0 16px 34px rgba(59, 112, 190, 0.08);
+}
+
+.hero-banner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(140deg, rgba(206, 223, 247, 0.25) 0%, transparent 28%),
+    radial-gradient(
+      circle at 74% 24%,
+      rgba(83, 146, 255, 0.14),
+      transparent 18%
+    ),
+    radial-gradient(
+      circle at 88% 16%,
+      rgba(255, 255, 255, 0.94),
+      transparent 14%
     );
-    box-shadow: 0 16px 34px rgba(59, 112, 190, 0.08);
-  }
-
-  .hero-banner::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background:
-      linear-gradient(140deg, rgba(206, 223, 247, 0.25) 0%, transparent 28%),
-      radial-gradient(circle at 74% 24%, rgba(83, 146, 255, 0.14), transparent 18%),
-      radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.94), transparent 14%);
-    pointer-events: none;
-  }
-
+  pointer-events: none;
+}
+
+.hero-banner__inner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  min-height: 220px;
+  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.3fr);
+  align-items: center;
+  gap: 24px;
+  padding: 22px 36px 18px 58px;
+}
+
+.hero-copy {
+  /* padding-top: 10px; */
+}
+
+.hero-script {
+  color: #0c4eb5;
+  font-size: 68px;
+  font-style: italic;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  font-family: "Comic Sans MS", "Segoe Script", cursive;
+}
+
+.hero-text {
+  margin-top: 18px;
+  color: #5f6f83;
+  font-size: 24px;
+  letter-spacing: 0.1em;
+}
+
+.hero-progress {
+  margin-top: 48px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.hero-progress__active {
+  height: 4px;
+  width: 56px;
+  border-radius: 999px;
+  background: #1f67d1;
+}
+
+.hero-progress__line {
+  height: 3px;
+  width: 64px;
+  border-radius: 999px;
+  background: rgba(49, 113, 207, 0.18);
+}
+
+.hero-visual {
+  position: relative;
+  min-height: 180px;
+}
+
+.hero-orb,
+.hero-cube,
+.hero-ring {
+  position: absolute;
+}
+
+.hero-orb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 28px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.98),
+    rgba(226, 239, 255, 0.95)
+  );
+  color: #65a4ff;
+  box-shadow:
+    0 18px 35px rgba(65, 122, 206, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.88);
+}
+
+.hero-orb::after {
+  content: "";
+  position: absolute;
+  inset: auto 16px 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(93, 154, 255, 0.12);
+  filter: blur(8px);
+}
+
+.hero-orb--cloud {
+  left: 10%;
+  top: 28px;
+  height: 106px;
+  width: 126px;
+  transform: rotate(-10deg);
+}
+
+.hero-orb--shield {
+  left: 46%;
+  top: 64px;
+  height: 118px;
+  width: 120px;
+  transform: rotate(8deg);
+}
+
+.hero-orb--chart {
+  right: 4%;
+  top: 0;
+  height: 138px;
+  width: 150px;
+  transform: rotate(6deg);
+}
+
+.hero-cube {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.94),
+    rgba(226, 239, 255, 0.9)
+  );
+  box-shadow: 0 18px 35px rgba(65, 122, 206, 0.1);
+}
+
+.hero-cube--one {
+  left: 26%;
+  top: -2px;
+  height: 46px;
+  width: 46px;
+  transform: rotate(36deg);
+}
+
+.hero-cube--two {
+  left: 33%;
+  top: 18px;
+  height: 34px;
+  width: 34px;
+  transform: rotate(32deg);
+}
+
+.hero-ring {
+  left: 13%;
+  top: 108px;
+  height: 42px;
+  width: 128px;
+  border-radius: 999px;
+  background: rgba(83, 146, 255, 0.1);
+  box-shadow: inset 0 0 0 10px rgba(238, 245, 255, 0.72);
+}
+
+.platform-block {
+  overflow: hidden;
+  background: linear-gradient(180deg, #dce9fb 0%, #d9e8fb 100%);
+  box-shadow: 0 12px 28px rgba(58, 110, 187, 0.08);
+}
+
+.platform-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 0 24px 0 34px;
+  background: linear-gradient(90deg, #316fd8 0%, #82aef0 100%);
+}
+
+.platform-block__title-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 28px;
+}
+
+.platform-block__title {
+  color: #fff;
+  font-size: 18px;
+
+  letter-spacing: 0.03em;
+}
+
+.platform-block__subtitle {
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.platform-block__watermark {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 44px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.04em;
+}
+
+.platform-app {
+  display: flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  border-radius: 8px;
+  padding: 0 18px;
+  font-size: 14px;
+  cursor: pointer;
+
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+}
+
+.platform-app:hover {
+  transform: translateY(-1px);
+}
+
+.platform-app--active {
+  background: rgba(255, 255, 255, 0.66);
+  font-weight: bold;
+}
+
+.platform-app--ghost {
+  background: rgba(255, 255, 255, 0.66);
+  color: #53719b;
+}
+
+.platform-app__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+.side-card {
+  overflow: hidden;
+  background: #e8f1f8;
+  /* box-shadow: 0 12px 28px rgba(58, 110, 187, 0.06); */
+}
+
+.side-card--content {
+  padding-top: 10px;
+}
+
+.side-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 20px;
+  padding-right: 10px;
+
+  border-radius: 100px;
+  background: #d5e6fc;
+}
+
+.notice-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+  min-width: 54px;
+  /* padding: 0 5px 0 10px; */
+  background: #004098;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 100px;
+}
+
+.notice-badge::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -15px;
+}
+
+.side-card__more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: #0f53b4;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.notice-item {
+  background: #fff;
+  padding: 8px 14px;
+  box-shadow: 0 8px 22px rgba(63, 107, 169, 0.06);
+  border-radius: 10px;
+}
+
+.notice-item__title,
+.notice-item__desc {
+  color: #507698;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.panel-title {
+  padding: 0 16px;
+  color: #2f4d79;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.todo-item {
+  background: rgba(255, 255, 255, 0.88);
+  padding: 8px 14px;
+  box-shadow: 0 8px 22px rgba(63, 107, 169, 0.05);
+}
+
+.todo-item__tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.news-mini {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.88);
+  padding: 5px 12px;
+  box-shadow: 0 8px 22px rgba(63, 107, 169, 0.05);
+  border: none;
+}
+
+.placeholder-panel {
+  display: flex;
+  height: 100%;
+  /* align-items: center; */
+  padding: 16px;
+  justify-content: start;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+}
+
+@media (max-width: 1279px) {
   .hero-banner__inner {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    min-height: 220px;
-    grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.3fr);
-    align-items: center;
-    gap: 24px;
-    padding: 22px 36px 18px 58px;
-  }
-
-  .hero-copy {
-    /* padding-top: 10px; */
+    grid-template-columns: 1fr;
+    padding: 28px 28px 20px;
   }
 
   .hero-script {
-    color: #0c4eb5;
-    font-size: 68px;
-    font-style: italic;
-    font-weight: 500;
-    letter-spacing: 0.04em;
-    line-height: 1;
-    font-family: 'Comic Sans MS', 'Segoe Script', cursive;
+    font-size: 52px;
   }
 
   .hero-text {
-    margin-top: 18px;
-    color: #5f6f83;
-    font-size: 24px;
-    letter-spacing: 0.1em;
+    font-size: 18px;
   }
 
   .hero-progress {
-    margin-top: 48px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .hero-progress__active {
-    height: 4px;
-    width: 56px;
-    border-radius: 999px;
-    background: #1f67d1;
-  }
-
-  .hero-progress__line {
-    height: 3px;
-    width: 64px;
-    border-radius: 999px;
-    background: rgba(49, 113, 207, 0.18);
+    margin-top: 28px;
   }
 
   .hero-visual {
-    position: relative;
-    min-height: 180px;
-  }
-
-  .hero-orb,
-  .hero-cube,
-  .hero-ring {
-    position: absolute;
-  }
-
-  .hero-orb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 28px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 239, 255, 0.95));
-    color: #65a4ff;
-    box-shadow:
-      0 18px 35px rgba(65, 122, 206, 0.14),
-      inset 0 1px 0 rgba(255, 255, 255, 0.88);
-  }
-
-  .hero-orb::after {
-    content: '';
-    position: absolute;
-    inset: auto 16px 10px;
-    height: 10px;
-    border-radius: 999px;
-    background: rgba(93, 154, 255, 0.12);
-    filter: blur(8px);
-  }
-
-  .hero-orb--cloud {
-    left: 10%;
-    top: 28px;
-    height: 106px;
-    width: 126px;
-    transform: rotate(-10deg);
-  }
-
-  .hero-orb--shield {
-    left: 46%;
-    top: 64px;
-    height: 118px;
-    width: 120px;
-    transform: rotate(8deg);
-  }
-
-  .hero-orb--chart {
-    right: 4%;
-    top: 0;
-    height: 138px;
-    width: 150px;
-    transform: rotate(6deg);
-  }
-
-  .hero-cube {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(226, 239, 255, 0.9));
-    box-shadow: 0 18px 35px rgba(65, 122, 206, 0.1);
-  }
-
-  .hero-cube--one {
-    left: 26%;
-    top: -2px;
-    height: 46px;
-    width: 46px;
-    transform: rotate(36deg);
-  }
-
-  .hero-cube--two {
-    left: 33%;
-    top: 18px;
-    height: 34px;
-    width: 34px;
-    transform: rotate(32deg);
-  }
-
-  .hero-ring {
-    left: 13%;
-    top: 108px;
-    height: 42px;
-    width: 128px;
-    border-radius: 999px;
-    background: rgba(83, 146, 255, 0.1);
-    box-shadow: inset 0 0 0 10px rgba(238, 245, 255, 0.72);
-  }
-
-  .platform-block {
-    overflow: hidden;
-    background: linear-gradient(180deg, #dce9fb 0%, #d9e8fb 100%);
-    box-shadow: 0 12px 28px rgba(58, 110, 187, 0.08);
+    min-height: 220px;
   }
+}
 
+@media (max-width: 767px) {
   .platform-block__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 44px;
-    padding: 0 24px 0 34px;
-    background: linear-gradient(90deg, #316fd8 0%, #82aef0 100%);
+    padding: 0 16px 0 18px;
   }
 
   .platform-block__title-wrap {
-    display: flex;
-    align-items: baseline;
-    gap: 28px;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
   .platform-block__title {
-    color: #fff;
-    font-size: 18px;
-
-    letter-spacing: 0.03em;
+    font-size: 16px;
   }
 
   .platform-block__subtitle {
-    color: rgba(255, 255, 255, 0.95);
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .platform-block__watermark {
-    color: rgba(255, 255, 255, 0.4);
-    font-size: 44px;
-    font-weight: 800;
-    line-height: 1;
-    letter-spacing: 0.04em;
-  }
-
-  .platform-app {
-    display: flex;
-    min-height: 34px;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 12px;
-    border-radius: 8px;
-    padding: 0 18px;
-    font-size: 14px;
-    cursor: pointer;
-
-    transition:
-      transform 0.2s ease,
-      box-shadow 0.2s ease,
-      background 0.2s ease;
-  }
-
-  .platform-app:hover {
-    transform: translateY(-1px);
-  }
-
-  .platform-app--active {
-    background: rgba(255, 255, 255, 0.66);
-    font-weight: bold;
-  }
-
-  .platform-app--ghost {
-    background: rgba(255, 255, 255, 0.66);
-    color: #53719b;
-  }
-
-  .platform-app__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: currentColor;
-  }
-
-  .side-card {
-    overflow: hidden;
-    background: #e8f1f8;
-    /* box-shadow: 0 12px 28px rgba(58, 110, 187, 0.06); */
-  }
-
-  .side-card--content {
-    padding-top: 10px;
-  }
-
-  .side-card__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 20px;
-    padding-right: 10px;
-
-    border-radius: 100px;
-    background: #d5e6fc;
-  }
-
-  .notice-badge {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 25px;
-    min-width: 54px;
-    /* padding: 0 5px 0 10px; */
-    background: #004098;
-    color: #fff;
-    font-size: 14px;
-    font-weight: bold;
-    border-radius: 100px;
-  }
-
-  .notice-badge::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: -15px;
-  }
-
-  .side-card__more {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background: transparent;
-    color: #0f53b4;
-    cursor: pointer;
     font-size: 12px;
   }
 
-  .notice-item {
-    background: #fff;
-    padding: 8px 14px;
-    box-shadow: 0 8px 22px rgba(63, 107, 169, 0.06);
-    border-radius: 10px;
-  }
-
-  .notice-item__title,
-  .notice-item__desc {
-    color: #507698;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .panel-title {
-    padding: 0 16px;
-    color: #2f4d79;
-    font-size: 15px;
-    font-weight: 700;
-  }
-
-  .todo-item {
-    background: rgba(255, 255, 255, 0.88);
-    padding: 8px 14px;
-    box-shadow: 0 8px 22px rgba(63, 107, 169, 0.05);
-  }
-
-  .todo-item__tag {
-    display: inline-flex;
-    align-items: center;
-    border-radius: 999px;
-    padding: 2px 8px;
-    font-size: 11px;
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
-  .news-mini {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background: rgba(255, 255, 255, 0.88);
-    padding: 5px 12px;
-    box-shadow: 0 8px 22px rgba(63, 107, 169, 0.05);
-    border: none;
-  }
-
-  .placeholder-panel {
-    display: flex;
-    height: 100%;
-    /* align-items: center; */
-    padding: 16px;
-    justify-content: start;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-  }
-
-  @media (max-width: 1279px) {
-    .hero-banner__inner {
-      grid-template-columns: 1fr;
-      padding: 28px 28px 20px;
-    }
-
-    .hero-script {
-      font-size: 52px;
-    }
-
-    .hero-text {
-      font-size: 18px;
-    }
-
-    .hero-progress {
-      margin-top: 28px;
-    }
-
-    .hero-visual {
-      min-height: 220px;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .platform-block__header {
-      padding: 0 16px 0 18px;
-    }
-
-    .platform-block__title-wrap {
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
-    .platform-block__title {
-      font-size: 16px;
-    }
-
-    .platform-block__subtitle {
-      font-size: 12px;
-    }
-
-    .platform-block__watermark {
-      font-size: 34px;
-    }
-
-    .hero-banner__inner {
-      padding: 24px 18px 20px;
-    }
-
-    .hero-script {
-      font-size: 44px;
-    }
-
-    .hero-progress {
-      margin-top: 22px;
-    }
-  }
-
-  .carousel-container {
-    position: relative;
-    height: 220px;
-    overflow: hidden;
-  }
-
-  .carousel-slide {
-    position: relative;
-    background-size: cover;
-    background-position: center;
-  }
-
-  .hero-visual img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  .platform-block__watermark {
+    font-size: 34px;
   }
 
-  .carousel-caption {
-    position: absolute;
-    left: 40px;
-    top: 40%;
-    z-index: 2;
-    transform: translateY(-50%);
-    text-align: left;
+  .hero-banner__inner {
+    padding: 24px 18px 20px;
   }
 
-  .carousel-indicators {
-    display: flex;
-    gap: 8px;
-    z-index: 30;
+  .hero-script {
+    font-size: 44px;
   }
 
-  .carousel-indicators button {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+  .hero-progress {
+    margin-top: 22px;
   }
+}
+
+.carousel-container {
+  position: relative;
+  height: 220px;
+  overflow: hidden;
+}
+
+.carousel-slide {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+}
+
+.hero-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.carousel-caption {
+  position: absolute;
+  left: 40px;
+  top: 40%;
+  z-index: 2;
+  transform: translateY(-50%);
+  text-align: left;
+}
+
+.carousel-indicators {
+  display: flex;
+  gap: 8px;
+  z-index: 30;
+}
+
+.carousel-indicators button {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+}
 </style>