yf-portal-vue/src/views/index.vue

<template>
  <div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
    <Header />

    <main class="mx-auto max-w-[1200px] px-6 pb-8 pt-20">
      <section class="hero-banner overflow-hidden rounded-[6px] relative">
        <div class="">
          <!-- 轮播容器 -->
          <div class="carousel-container relative h-full">
            <!-- 轮播项 -->
            <div
              class="carousel-slide absolute inset-0 transition-opacity duration-500 ease-in-out"
              v-for="(slide, index) in slides"
              :key="index"
              v-show="currentIndex === index"
              :class="{
                'opacity-100': currentIndex === index,
                '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>
                <p class="hero-text mt-6 text-[24px] text-[#5f6f83]">
                  {{ slide.text }}
                </p>
              </div>

              <!-- 轮播背景图 -->
              <div class="hero-visual absolute inset-0">
                <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"
            >
              <span
                v-for="(_, i) in slides"
                :key="i"
                @click="currentIndex = i"
                :class="{
                  'bg-[#0c4eb5]': currentIndex === i,
                  'bg-[#2f333c]/50': currentIndex !== i,
                }"
                class="w-3 h-3 rounded-full transition-colors"
              ></span>
            </div>
          </div>
        </div>
      </section>

      <section class="mt-3 grid gap-4 xl:grid-cols-[1.74fr_0.74fr]">
        <div class="space-y-4">
          <article
            v-for="section in portalSections"
            :key="section.code"
            class="platform-block"
            :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>
              </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"
            >
              <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',
                ]"
                @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]"
                  />
                </span>
                <span class="text-[#004098] text-sm">{{ app.label }}</span>
              </button>
            </div>
          </article>
        </div>

        <aside class="space-y-4">
          <section class="side-card side-card--notice rounded-md p-2">
            <div class="side-card__header w-[95%] ml-[8px]">
              <div class="notice-tabs">
                <button
                  v-for="tab in noticeTabs"
                  :key="tab.key"
                  type="button"
                  :class="[
                    'notice-tab',
                    activeNoticeTab === tab.key ? 'notice-tab--active' : '',
                  ]"
                  @click="handleNoticeTabChange(tab.key)"
                >
                  {{ tab.label }}
                </button>
              </div>
              <button type="button" class="side-card__more">
                <Icon
                  icon="mdi:dots-horizontal"
                  class="text-[22px]"
                  @click="handleNoticeMoreClick"
                />
              </button>
            </div>

            <div class="space-y-2 p-2 pt-3">
              <div
                v-if="!userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-5">登录后查看</div>
              </div>

              <div
                v-if="!currentNoticeList.length && userStore.getUser.username"
                class="flex h-[120px] items-center justify-center text-[#8a9ab0]"
              >
                暂无数据
              </div>
              <article
                v-if="userStore.getUser.username"
                v-for="notice in currentNoticeList"
                :key="notice.id"
                class="notice-item cursor-pointer"
                @click="handleNoticeItemClick(notice)"
              >
                <div class="notice-item__desc">{{ notice.docsubject }}</div>
                <div class="date text-[12px] text-[#9cadc0]">
                  {{ notice.docvaliddate }}
                </div>
              </article>
            </div>
          </section>

          <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>
            </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 class="text-[#8a9ab0] pt-10">登录后查看</div>
              </div>

              <div
                v-if="!oaTasks.length && userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">暂无待办</div>
              </div>

              <article
                v-if="userStore.getUser.username"
                v-for="task in oaTasks"
                :key="task.requestId"
                @click="handleTask(task)"
                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]"
                    >
                      {{ 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
                  >
                </div>
              </article>
            </div>
          </section>

          <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" @click="goNews">
                <Icon icon="mdi:dots-horizontal" class="text-[22px]" />
              </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 class="text-[#8a9ab0] pt-10">登录后查看</div>
              </div>

              <div
                v-if="!newsList.length && userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">暂无新闻</div>
              </div>
              <article
                v-for="news in newsList"
                :key="news.id"
                class="news-mini cursor-pointer rounded-md"
                @click="handleNoticeItemClick(news)"
              >
                <div class="min-w-0 flex-1">
                  <div
                    class="line-clamp-1 text-[13px] font-semibold leading-[1.45] text-[#41597d]"
                  >
                    {{ news.docsubject }}
                  </div>
                  <div class="mt-2 text-[12px] text-[#9cadc0]">
                    {{ news.docvaliddate }}
                  </div>
                </div>
              </article>
            </div>
          </section>

          <section
            class="side-card side-card--placeholder rounded-md"
            :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="bg-white text-sm text-center text-[#004098] py-1 px-2 rounded-full mt-2 w-[30%] cursor-pointer"
              >
                立即咨询
              </div>
            </div>
          </section>
        </aside>
      </section>
    </main>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { computed, 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,
  getNotices,
  getRedHeadFiles,
  getNews,
} 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 = {
  id?: string | number;
  title?: string;
  desc?: string;
  docsubject?: string;
};

const router = useRouter();
const userStore = useUserStore();

const todoPanelTitle = "待办中心";
const newsPanelTitle = "新闻";
const noticeTabs = [
  { key: "notice", label: "公告" },
  { key: "redHead", label: "红头文件" },
] as const;

type NoticeTabKey = (typeof noticeTabs)[number]["key"];

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 activeNoticeTab = ref<NoticeTabKey>("notice");
const noticeListMap = ref<Record<NoticeTabKey, NoticeItem[]>>({
  notice: [],
  redHead: [],
});

const newsList = ref([]);

const currentNoticeList = computed(
  () => noticeListMap.value[activeNoticeTab.value] ?? [],
);

const loadNoticeList = async (tabKey: NoticeTabKey) => {
  const requestApi = tabKey === "notice" ? getNotices : getRedHeadFiles;
  const res = await requestApi({
    pageNum: 1,
    pageSize: 10,
  });

  noticeListMap.value[tabKey] = (res?.list || []).slice(0, 3);
};

let currentTabKey = ref<NoticeTabKey>("notice");
const handleNoticeTabChange = async (tabKey: NoticeTabKey) => {
  activeNoticeTab.value = tabKey;
  currentTabKey.value = tabKey;

  // if (noticeListMap.value[tabKey].length) return;

  if (userStore.getUser.username) {
    await loadNoticeList(tabKey);
  }
};

const handleNoticeMoreClick = () => {
  router.push({
    path: "/notice-redhead",
    query: {
      tabKey: currentTabKey.value,
    },
  });
};

const protectedOpen = (url: string) => {
  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" });
    }
  }

  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 === "中航北斗") {
    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=znzq`,
    );
  }

  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 === "经营驾驶舱(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()) {
      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(),
          },
          {
            headers: {
              "Content-Type": "application/json",
              "tenant-id": 1,
            },
          },
        )
        .then((response) => {
          authUtil.setToken(response.data.data);
          router.push({
            path: "/login",
          });
        });
    },
    fail: (err: any) => {
      console.log("err :>> ", err);
    },
  });
}

function dingTalkAutoLogin() {
  const ua = window.navigator.userAgent.toLowerCase();

  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);

  await loadNoticeList("notice");

  if (userStore.getUser.username) {
    try {
      const res = await getOATasks({
        id: userStore.getUser.username,
        pageNum: 1,
        pageSize: 10,
      });
      oaTasks.value = res.todoList.slice(0, 3);

      const newList = await getNews({
        pageNum: 1,
        pageSize: 10,
      });

      newsList.value = newList.list.slice(0, 3);
    } finally {
    }
  }
});

const handleNoticeItemClick = async (notice) => {
  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/document/index.jsp?openAttachment=0&id=${notice.id}`,
            });
          }, 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/document/index.jsp?openAttachment=0&id=${notice.id}`;
        setTimeout(() => {
          loading.close();
        }, 500);
      }, 100);
    }
  }
};

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}`;
        setTimeout(() => {
          loading.close();
        }, 500);
      }, 100);
    }
  }
};

const goNews = () => {
  router.push("/news");
};

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%
  );
  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;
}

.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-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notice-tab {
  height: 25px;
  min-width: 68px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4d6f98;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.notice-tab--active {
  background: #004098;
  color: #fff;
}

.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:hover {
  box-shadow: 0 12px 28px rgba(63, 107, 169, 0.1);
  transition: all 0.2s ease;
  transform: translateY(-1px);
}

.notice-item__title,
.notice-item__desc {
  color: #507698;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.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;
}

.news-mini:hover {
  box-shadow: 0 12px 28px rgba(63, 107, 169, 0.1);
  transition: all 0.2s ease;
  transform: translateY(-1px);
}

.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;
}

.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>