|
|
@@ -1,283 +1,218 @@
|
|
|
-<template>
|
|
|
- <div class="bg-white">
|
|
|
+<template>
|
|
|
+ <div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
|
|
|
<Header />
|
|
|
|
|
|
- <section
|
|
|
- class="relative mt-15 h-[400px] w-full overflow-hidden pt-9 pb-50 md:pb-30"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="absolute inset-0 flex transition-transform duration-700 ease-in-out"
|
|
|
- >
|
|
|
- <div class="relative h-full min-w-full">
|
|
|
- <video
|
|
|
- class="absolute inset-0 h-full w-full object-cover"
|
|
|
- autoplay
|
|
|
- muted
|
|
|
- loop
|
|
|
- playsinline
|
|
|
- :src="bgvideo"
|
|
|
- >
|
|
|
- 您的浏览器不支持 HTML5 视频。
|
|
|
- </video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="relative z-10 mx-auto mt-5 flex h-full w-full items-center px-20 pt-10"
|
|
|
- >
|
|
|
- <div class="max-w-4xl">
|
|
|
- <h1
|
|
|
- class="slide-up-fade-in pt-2 text-2xl font-bold leading-tight text-white/90 md:text-4xl"
|
|
|
- >
|
|
|
- 山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
|
|
|
- </h1>
|
|
|
- <p
|
|
|
- class="slide-up-fade-in mt-3 text-sm leading-relaxed text-white/90 md:text-base md:text-4"
|
|
|
- style="animation-delay: 0.2s"
|
|
|
- >
|
|
|
- 连接经营管理、生产指挥与数据智能，打造石油能源行业的一体化数字化平台，
|
|
|
- 为企业提供高效协同、智能决策与可靠的数字化服务。
|
|
|
- </p>
|
|
|
- <div
|
|
|
- class="slide-up-fade-in mt-4 flex gap-3 md:mt-6"
|
|
|
- style="animation-delay: 0.4s"
|
|
|
- >
|
|
|
- <a
|
|
|
- class="cursor-pointer bg-[#0644a1] px-4 py-2 text-white hover:bg-[#0a53c1]"
|
|
|
- >
|
|
|
- 了解平台
|
|
|
- </a>
|
|
|
- <a
|
|
|
- class="cursor-pointer bg-white/10 px-4 py-2 text-white hover:bg-white/20"
|
|
|
- >
|
|
|
- 联系我们
|
|
|
- </a>
|
|
|
+ <main class="mx-auto max-w-[1500px] px-6 pb-8 pt-24">
|
|
|
+ <section class="hero-banner overflow-hidden rounded-[6px]">
|
|
|
+ <div class="hero-banner__inner">
|
|
|
+ <div class="hero-copy">
|
|
|
+ <div class="hero-script">HELLO</div>
|
|
|
+ <p class="hero-text">{{ heroGreeting }}</p>
|
|
|
+ <div class="hero-progress">
|
|
|
+ <span class="hero-progress__active"></span>
|
|
|
+ <span class="hero-progress__line"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="hero-visual">
|
|
|
+ <div class="hero-orb hero-orb--cloud">
|
|
|
+ <Icon icon="mdi:cloud-outline" class="text-[54px]" />
|
|
|
+ </div>
|
|
|
+ <div class="hero-orb hero-orb--shield">
|
|
|
+ <Icon icon="mdi:shield-search-outline" class="text-[52px]" />
|
|
|
+ </div>
|
|
|
+ <div class="hero-orb hero-orb--chart">
|
|
|
+ <Icon icon="mdi:chart-areaspline" class="text-[66px]" />
|
|
|
+ </div>
|
|
|
+ <div class="hero-cube hero-cube--one"></div>
|
|
|
+ <div class="hero-cube hero-cube--two"></div>
|
|
|
+ <div class="hero-ring"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section
|
|
|
- class="mx-auto mt-6 mb-8 flex max-w-[1200px] items-center justify-center gap-3 px-2"
|
|
|
- ></section>
|
|
|
-
|
|
|
- <section
|
|
|
- class="mx-auto mt-5 mb-8 flex w-[95%] flex-col justify-between gap-6 md:flex-row md:px-20"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="flex cursor-pointer items-center gap-3 border border-[#dbeafe] bg-[#eff6ff] w-full text-sm text-[#02409b] px-2 py-3 rounded-md"
|
|
|
- >
|
|
|
- <span
|
|
|
- class="bg-[#2563eb] text-white text-[10px] font-bold inline-block px-2 py-1 rounded-md"
|
|
|
- >公告</span
|
|
|
- >
|
|
|
- <span
|
|
|
- >关于2026年度“DeepOil 数字化转型”优秀项目评选活动的通知 |
|
|
|
- 集团总部关于办公楼设备维保的说明</span
|
|
|
- >
|
|
|
-
|
|
|
- <span>
|
|
|
- <Icon
|
|
|
- icon="mdi:chevron-right"
|
|
|
- class="item-arrow w-5 h-5"
|
|
|
- color="#0644a1"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section
|
|
|
- class="mx-auto mt-5 mb-8 flex w-[95%] flex-col justify-between gap-6 md:flex-row md:px-20"
|
|
|
- >
|
|
|
- <div class="flex flex-2 flex-col justify-center gap-5">
|
|
|
- <CardItem
|
|
|
- v-for="card in cards"
|
|
|
- :key="card.id"
|
|
|
- :title="card.title"
|
|
|
- :id="card.id"
|
|
|
- :desc="card.desc"
|
|
|
- :items="card.items"
|
|
|
- :bg="card.bg"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex-1">
|
|
|
- <div
|
|
|
- class="rounded-lg bg-white p-4 shadow-[0_18px_50px_rgba(26,68,143,0.08)] md:p-5"
|
|
|
- >
|
|
|
- <div class="flex items-center justify-between">
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div
|
|
|
- class="todo-panel__icon flex h-12 w-12 items-center justify-center rounded-full"
|
|
|
- >
|
|
|
- <Icon
|
|
|
- icon="mdi:checkbox-marked-circle-outline"
|
|
|
- class="item-arrow w-5 h-5"
|
|
|
- color="#02409b"
|
|
|
- />
|
|
|
+ </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">
|
|
|
+ <h2 class="platform-block__title">{{ section.title }}</h2>
|
|
|
+ <span class="platform-block__subtitle">{{ section.subtitle }}</span>
|
|
|
</div>
|
|
|
- <h3 class="font-bold tracking-[0.02em] text-slate-800">
|
|
|
- 待办中心
|
|
|
- </h3>
|
|
|
+ <span class="platform-block__watermark">{{ section.code }}</span>
|
|
|
</div>
|
|
|
- <a
|
|
|
- class="text-[12px] font-medium text-[#0644a1] transition hover:text-[#1f52e0]"
|
|
|
- href="javascript:;"
|
|
|
- >
|
|
|
- 全部任务
|
|
|
- </a>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="mt-3 flex flex-col gap-6">
|
|
|
<div
|
|
|
- v-for="task in todoTasks"
|
|
|
- :key="task.title"
|
|
|
- class="todo-task-card flex items-start border border-[#f1f5f9] justify-between gap-3 rounded-lg px-7 py-4"
|
|
|
+ v-if="section.apps?.length"
|
|
|
+ class="grid grid-cols-2 gap-4 p-6 md:grid-cols-4"
|
|
|
>
|
|
|
- <div class="min-w-0">
|
|
|
- <div
|
|
|
- class="truncate text-sm font-bold leading-[1.45] text-[#334155] md:text-md"
|
|
|
- >
|
|
|
- {{ task.title }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mt-3 text-[12px] leading-none text-[#64748b] md:text-[12px]"
|
|
|
- >
|
|
|
- {{ task.meta }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span
|
|
|
+ <button
|
|
|
+ v-for="(app, appIndex) in section.apps"
|
|
|
+ :key="`${section.code}-${appIndex}-${app.label}`"
|
|
|
+ type="button"
|
|
|
:class="[
|
|
|
- 'mt-1 shrink-0 rounded-sm px-1.5 py-0.5 text-[10px]',
|
|
|
- task.tagClass,
|
|
|
+ 'platform-app',
|
|
|
+ app.active ? 'platform-app--active' : 'platform-app--ghost',
|
|
|
]"
|
|
|
+ @click="handlePortalAppClick(app)"
|
|
|
>
|
|
|
- {{ task.tag }}
|
|
|
- </span>
|
|
|
+ <span class="platform-app__icon">
|
|
|
+ <img
|
|
|
+ v-if="app.image"
|
|
|
+ :src="app.image"
|
|
|
+ :alt="app.label"
|
|
|
+ class="h-7 w-7 object-contain"
|
|
|
+ />
|
|
|
+ <Icon v-else :icon="app.icon || 'mdi:dots-grid'" class="text-[24px]" />
|
|
|
+ </span>
|
|
|
+ <span>{{ app.label }}</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="mt-4 grid grid-cols-2 gap-5">
|
|
|
- <div
|
|
|
- v-for="stat in todoStats"
|
|
|
- :key="stat.label"
|
|
|
- :class="[
|
|
|
- 'rounded-lg px-6 py-4 text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]',
|
|
|
- stat.cardClass,
|
|
|
- ]"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="text-xl font-black text-blue-600"
|
|
|
- :class="stat.valueClass"
|
|
|
- >
|
|
|
- {{ stat.value }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mt-3 text-[12px] font-semibold"
|
|
|
- :class="stat.labelClass"
|
|
|
- >
|
|
|
- {{ stat.label }}
|
|
|
- </div>
|
|
|
+ <aside class="space-y-4">
|
|
|
+ <section class="side-card side-card--notice">
|
|
|
+ <div class="side-card__header">
|
|
|
+ <div class="notice-badge">{{ noticeLabel }}</div>
|
|
|
+ <button type="button" class="side-card__more">
|
|
|
+ <Icon icon="mdi:dots-horizontal" class="text-[22px]" />
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- class="rounded-lg mt-4 bg-white p-4 shadow-[0_18px_50px_rgba(26,68,143,0.08)] md:p-4"
|
|
|
- >
|
|
|
- <div class="flex items-center justify-between">
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div
|
|
|
- class="todo-panel__icon flex h-12 w-12 items-center justify-center rounded-full"
|
|
|
+ <div class="space-y-3 p-4 pt-3">
|
|
|
+ <article
|
|
|
+ v-for="(notice, noticeIndex) in notices"
|
|
|
+ :key="`${notice.title}-${noticeIndex}`"
|
|
|
+ class="notice-item cursor-pointer"
|
|
|
>
|
|
|
- <Icon
|
|
|
- icon="mdi:newspaper-variant-outline"
|
|
|
- class="item-arrow w-5 h-5"
|
|
|
- color="#02409b"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <h3 class="font-bold tracking-[0.02em] text-slate-800">
|
|
|
- 新闻中心
|
|
|
- </h3>
|
|
|
+ <div class="notice-item__title">{{ notice.title }}</div>
|
|
|
+ <div class="notice-item__desc">{{ notice.desc }}</div>
|
|
|
+ </article>
|
|
|
</div>
|
|
|
- <a
|
|
|
- class="text-[12px] font-medium text-[#0644a1] transition hover:text-[#1f52e0]"
|
|
|
- href="javascript:;"
|
|
|
- >
|
|
|
- 查看更多
|
|
|
- </a>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="mt-5 flex flex-col gap-7">
|
|
|
- <a
|
|
|
- v-for="news in newsList"
|
|
|
- :key="news.title"
|
|
|
- href="javascript:;"
|
|
|
- class="news-item flex items-center gap-4 rounded-2xl px-2 py-1 transition duration-200 hover:bg-[#f8fbff]"
|
|
|
- >
|
|
|
- <div class="news-thumb relative h-[60px] w-[80px] shrink-0">
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="side-card side-card--content" :style="{ minHeight: '190px' }">
|
|
|
+ <div class="panel-title">{{ todoPanelTitle }}</div>
|
|
|
+ <div class="space-y-3 p-4 pt-2">
|
|
|
+ <article
|
|
|
+ v-for="task in todoTasks"
|
|
|
+ :key="task.title"
|
|
|
+ class="todo-item"
|
|
|
+ >
|
|
|
+ <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-[#3a5173]">
|
|
|
+ {{ task.title }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-2 text-[12px] text-[#8a9ab0]">{{ task.meta }}</div>
|
|
|
+ </div>
|
|
|
+ <span :class="['todo-item__tag', task.tagClass]">{{ task.tag }}</span>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="side-card side-card--content" :style="{ minHeight: '180px' }">
|
|
|
+ <div class="panel-title">{{ newsPanelTitle }}</div>
|
|
|
+ <div class="space-y-3 p-4 pt-2">
|
|
|
+ <article
|
|
|
+ v-for="news in newsList"
|
|
|
+ :key="news.title"
|
|
|
+ class="news-mini cursor-pointer"
|
|
|
+ >
|
|
|
<img
|
|
|
:src="news.image"
|
|
|
:alt="news.title"
|
|
|
- class="h-full w-full rounded-[12px] object-cover"
|
|
|
+ class="h-[54px] w-[72px] rounded-[8px] object-cover"
|
|
|
/>
|
|
|
- </div>
|
|
|
- <div class="min-w-0 flex-1">
|
|
|
- <div
|
|
|
- class="text-xs font-bold text-slate-700 line-clamp-2 leading-snug"
|
|
|
- >
|
|
|
- {{ news.title }}
|
|
|
+ <div class="min-w-0 flex-1">
|
|
|
+ <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]">{{ news.date }}</div>
|
|
|
</div>
|
|
|
- <div class="mt-4 text-[12px] text-[#98a7bb]">
|
|
|
- {{ news.date }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
|
|
|
- <Footer />
|
|
|
+ <section class="side-card side-card--placeholder" :style="{ minHeight: '78px' }">
|
|
|
+ <div class="placeholder-panel">
|
|
|
+ <div class="placeholder-panel__title">{{ quickEntryTitle }}</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </aside>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, onUnmounted, ref } from "vue";
|
|
|
+import { onMounted } from "vue";
|
|
|
import * as authUtil from "@/utils/auth";
|
|
|
import * as dd from "dingtalk-jsapi";
|
|
|
-import { getUnreadNotifyMessageCount } from "@/api/user";
|
|
|
import Header from "@components/home/header.vue";
|
|
|
-import CardItem from "@components/home/CardItem.vue";
|
|
|
-import Footer from "@components/home/Footer.vue";
|
|
|
-import img1 from "@/assets/images/1.jpg";
|
|
|
-import img2 from "@/assets/images/2.jpg";
|
|
|
-import img3 from "@/assets/images/3.jpg";
|
|
|
-import caiwu from "@/assets/images/caiwu.png";
|
|
|
-import banner1 from "@/assets/images/banner1.jpg";
|
|
|
-import banner2 from "@/assets/images/model.jpeg";
|
|
|
-import bgvideo from "@/assets/bg.mp4";
|
|
|
-import bg2 from "@/assets/images/e4.png";
|
|
|
-import g1 from "@/assets/images/g1.png";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import axios from "axios";
|
|
|
-import { useUserStore } from "@/stores/useUserStore";
|
|
|
import { Icon } from "@iconify/vue";
|
|
|
+import { getMCSsoToken, ssoLogin, zentaoSsoLogin } from "@/api/user";
|
|
|
+import { useUserStore } from "@/stores/useUserStore";
|
|
|
+import { getAccessToken } from "@/utils/auth";
|
|
|
+import banner1 from "@/assets/images/banner1.jpg";
|
|
|
+import banner2 from "@/assets/images/model.jpeg";
|
|
|
+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 youimage from "@/assets/images/youcnag.png";
|
|
|
+import fileagent from "@/assets/images/fileagent.png";
|
|
|
+import zhiduagent from "@/assets/images/zhiduagent.png";
|
|
|
+import jishuimage2 from "@/assets/images/jishuimage.png";
|
|
|
+
|
|
|
+type PortalApp = {
|
|
|
+ label: string;
|
|
|
+ icon?: string;
|
|
|
+ image?: string;
|
|
|
+ active?: boolean;
|
|
|
+};
|
|
|
|
|
|
-const router = useRouter();
|
|
|
-const userStore = useUserStore();
|
|
|
-
|
|
|
-const bgImages = [banner1, caiwu, banner2];
|
|
|
-const currentBgIndex = ref(0);
|
|
|
-let bgInterval: number | null = null;
|
|
|
+type PortalSection = {
|
|
|
+ code: string;
|
|
|
+ title: string;
|
|
|
+ subtitle: string;
|
|
|
+ height: string;
|
|
|
+ apps?: PortalApp[];
|
|
|
+};
|
|
|
|
|
|
-type Card = {
|
|
|
- name: string;
|
|
|
+type NoticeItem = {
|
|
|
title: string;
|
|
|
desc: string;
|
|
|
- bg: string;
|
|
|
- items: Array<{ label: string; tag?: "新" | "热" }>;
|
|
|
- id: string;
|
|
|
+};
|
|
|
+
|
|
|
+type SidePanel = {
|
|
|
+ title: string;
|
|
|
+ height: string;
|
|
|
};
|
|
|
|
|
|
type TodoTask = {
|
|
|
@@ -287,82 +222,87 @@ type TodoTask = {
|
|
|
tagClass: string;
|
|
|
};
|
|
|
|
|
|
-type TodoStat = {
|
|
|
- value: number;
|
|
|
- label: string;
|
|
|
- cardClass: string;
|
|
|
- valueClass: string;
|
|
|
- labelClass: string;
|
|
|
-};
|
|
|
-
|
|
|
type NewsItem = {
|
|
|
title: string;
|
|
|
date: string;
|
|
|
image: string;
|
|
|
};
|
|
|
|
|
|
-const cardBgs = [bg2, g1, bg2];
|
|
|
+const router = useRouter();
|
|
|
+const userStore = useUserStore();
|
|
|
+const heroGreeting = "早上好，保持热爱，奔赴目标！";
|
|
|
+const noticeLabel = "公告";
|
|
|
+const todoPanelTitle = "待办中心";
|
|
|
+const newsPanelTitle = "新闻中心";
|
|
|
+const quickEntryTitle = "快捷入口";
|
|
|
|
|
|
-const cards: Card[] = [
|
|
|
+const portalSections: PortalSection[] = [
|
|
|
{
|
|
|
- name: "device",
|
|
|
- title: "数字运营平台",
|
|
|
- desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支撑。",
|
|
|
- id: "management",
|
|
|
- bg: img1,
|
|
|
- items: [
|
|
|
- { label: "OA办公" },
|
|
|
- { label: "客户管理(CRM)" },
|
|
|
- { label: "人力资源(EHR)" },
|
|
|
- { label: "供应商管理(SRM)" },
|
|
|
- { label: "财务管理(FM)" },
|
|
|
- { label: "经营驾驶舱(MC)", tag: "新" },
|
|
|
- { label: "项目管理(PM)" },
|
|
|
- { label: "技术研发管理" },
|
|
|
- { label: "组织资产管理" },
|
|
|
- { label: "风控合规管理" },
|
|
|
- { label: "战略解码与执行" },
|
|
|
- { label: "研发需求管理" },
|
|
|
+ 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 },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
- name: "scene",
|
|
|
+ code: "智",
|
|
|
title: "智慧指挥平台",
|
|
|
- desc: "深入工业场景，为中小企业数字化升级赋能。",
|
|
|
- id: "command",
|
|
|
- bg: img2,
|
|
|
- items: [
|
|
|
- { label: "设备管理(PMS)" },
|
|
|
- { label: "中航北斗" },
|
|
|
- { label: "质量安全管理(QHSE)" },
|
|
|
- { label: "智慧炼油" },
|
|
|
- { label: "智慧注气" },
|
|
|
- { label: "智能钻井" },
|
|
|
- { label: "智慧压裂" },
|
|
|
- { label: "数字油藏" },
|
|
|
- { label: "视频中心(VCS)" },
|
|
|
+ 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: "视频中心(VCS)", image: videoimage },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
- name: "factory",
|
|
|
+ code: "CB",
|
|
|
title: "Chat BI平台",
|
|
|
- desc: "工厂上云，高效协同，提升生产效率和产品质量。",
|
|
|
- id: "chatbi",
|
|
|
- bg: img3,
|
|
|
- items: [
|
|
|
- { label: "全局数据治理(数据中台)", tag: "热" },
|
|
|
- { label: "智能决策" },
|
|
|
- { label: "行业AI大模型", tag: "新" },
|
|
|
- { label: "AI智能体(智能交互)", tag: "新" },
|
|
|
- { label: "工艺文件智能体" },
|
|
|
- { label: "集团制度智能体" },
|
|
|
+ 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 },
|
|
|
],
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+const notices: NoticeItem[] = [
|
|
|
+ {
|
|
|
+ title: "集团总部关于办公楼设备维保的说明",
|
|
|
+ desc: "关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "集团总部关于办公楼设备维保的说明",
|
|
|
+ desc: "关于 2026 年度“DeepOil 数字化转型”优秀项目评选活动的通知",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
const todoTasks: TodoTask[] = [
|
|
|
{
|
|
|
- title: "项目立项审批 - QHSE升级",
|
|
|
+ title: "项目立项审批 - QHSE 升级",
|
|
|
meta: "发起人：李智慧 · 2小时前",
|
|
|
tag: "紧急",
|
|
|
tagClass: "bg-[#ffe1e3] text-[#ff5d66]",
|
|
|
@@ -381,23 +321,6 @@ const todoTasks: TodoTask[] = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
-const todoStats: TodoStat[] = [
|
|
|
- {
|
|
|
- value: 8,
|
|
|
- label: "待办流程",
|
|
|
- cardClass: "bg-[#dfeafc]",
|
|
|
- valueClass: "text-[#2867ff]",
|
|
|
- labelClass: "text-[#204cbe]",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 12,
|
|
|
- label: "本周已办",
|
|
|
- cardClass: "bg-[#e5f7ea]",
|
|
|
- valueClass: "text-[#0cb34f]",
|
|
|
- labelClass: "text-[#04753a]",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
const newsList: NewsItem[] = [
|
|
|
{
|
|
|
title: "科瑞石油成功交付首套自动化钻机",
|
|
|
@@ -416,6 +339,102 @@ const newsList: NewsItem[] = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+const sidePanels: SidePanel[] = [];
|
|
|
+
|
|
|
+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 === "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" });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
async function loginWithDingTalk() {
|
|
|
const ddCorpId = import.meta.env.VITE_DD_CORPID;
|
|
|
const ddClientId = import.meta.env.VITE_DD_CLIENTID;
|
|
|
@@ -444,7 +463,6 @@ async function loginWithDingTalk() {
|
|
|
},
|
|
|
)
|
|
|
.then((response) => {
|
|
|
- console.log("钉钉免登返回结果", response.data.data);
|
|
|
authUtil.setToken(response.data.data);
|
|
|
router.push({
|
|
|
path: "/login",
|
|
|
@@ -454,139 +472,441 @@ async function loginWithDingTalk() {
|
|
|
fail: (err: any) => {
|
|
|
console.log("err :>> ", err);
|
|
|
},
|
|
|
- complete: () => {
|
|
|
- console.log("11 :>> ", 11);
|
|
|
- },
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function dingTalkAutoLogin() {
|
|
|
const ua = window.navigator.userAgent.toLowerCase();
|
|
|
|
|
|
- console.log("ua>>>>>>>>>>>>>>>>>>>>>>> ", ua);
|
|
|
-
|
|
|
if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
|
|
|
loginWithDingTalk();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const unreadCount = ref(0);
|
|
|
-
|
|
|
-const getUnreadCount = async () => {
|
|
|
- getUnreadNotifyMessageCount().then((data) => {
|
|
|
- unreadCount.value = data;
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
dingTalkAutoLogin();
|
|
|
-
|
|
|
- void bgImages;
|
|
|
- void currentBgIndex;
|
|
|
- void cardBgs;
|
|
|
- void unreadCount;
|
|
|
- void getUnreadCount;
|
|
|
-});
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- if (bgInterval) {
|
|
|
- clearInterval(bgInterval);
|
|
|
- }
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 5px;
|
|
|
+.portal-home {
|
|
|
+ --portal-blue: #2f6fdb;
|
|
|
+ --portal-blue-dark: #1b57bc;
|
|
|
+ --portal-blue-soft: #d7e7ff;
|
|
|
+ --portal-panel: #deebfb;
|
|
|
+ --portal-panel-soft: #edf5ff;
|
|
|
+ --portal-line: #a8c4f2;
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- border-radius: 5px;
|
|
|
+.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: inset 0 0 0 1px rgba(190, 212, 243, 0.5);
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-track {
|
|
|
- background-color: transparent;
|
|
|
+.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;
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- background-color: #0a5f73;
|
|
|
+.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;
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-thumb:hover {
|
|
|
- background-color: #30459c;
|
|
|
+.hero-copy {
|
|
|
+ padding-top: 10px;
|
|
|
}
|
|
|
|
|
|
-.slide-up-fade-in {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(20px);
|
|
|
- animation: slideUpFadeIn 0.8s forwards ease-out;
|
|
|
+.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;
|
|
|
}
|
|
|
|
|
|
-@keyframes slideUpFadeIn {
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+.hero-text {
|
|
|
+ margin-top: 18px;
|
|
|
+ color: #5f6f83;
|
|
|
+ font-size: 24px;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
}
|
|
|
|
|
|
-.todo-panel {
|
|
|
- background:
|
|
|
- radial-gradient(
|
|
|
- circle at top left,
|
|
|
- rgba(47, 103, 255, 0.06),
|
|
|
- transparent 28%
|
|
|
- ),
|
|
|
- linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
|
|
+.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);
|
|
|
}
|
|
|
|
|
|
-.todo-panel__icon-check {
|
|
|
+.hero-visual {
|
|
|
position: relative;
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- border: 3px solid #2f67ff;
|
|
|
- border-radius: 9999px;
|
|
|
+ min-height: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-orb,
|
|
|
+.hero-cube,
|
|
|
+.hero-ring {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-orb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px solid rgba(175, 205, 250, 0.88);
|
|
|
+ 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);
|
|
|
}
|
|
|
|
|
|
-.todo-panel__icon-check::after {
|
|
|
+.hero-orb::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
- left: 6px;
|
|
|
- top: 2px;
|
|
|
- width: 6px;
|
|
|
- height: 11px;
|
|
|
- border-right: 3px solid #2f67ff;
|
|
|
- border-bottom: 3px solid #2f67ff;
|
|
|
- transform: rotate(45deg);
|
|
|
+ inset: auto 16px 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: rgba(93, 154, 255, 0.12);
|
|
|
+ filter: blur(8px);
|
|
|
}
|
|
|
|
|
|
-.todo-task-card {
|
|
|
- background: #f8fafc;
|
|
|
- box-shadow: 0 10px 24px rgba(30, 81, 171, 0.04);
|
|
|
+.hero-orb--cloud {
|
|
|
+ left: 10%;
|
|
|
+ top: 28px;
|
|
|
+ height: 106px;
|
|
|
+ width: 126px;
|
|
|
+ transform: rotate(-10deg);
|
|
|
}
|
|
|
|
|
|
-.news-item {
|
|
|
- text-decoration: none;
|
|
|
+.hero-orb--shield {
|
|
|
+ left: 46%;
|
|
|
+ top: 64px;
|
|
|
+ height: 118px;
|
|
|
+ width: 120px;
|
|
|
+ transform: rotate(8deg);
|
|
|
}
|
|
|
|
|
|
-.news-thumb__overlay {
|
|
|
- position: absolute;
|
|
|
- inset: 0;
|
|
|
+.hero-orb--chart {
|
|
|
+ right: 4%;
|
|
|
+ top: 0;
|
|
|
+ height: 138px;
|
|
|
+ width: 150px;
|
|
|
+ transform: rotate(6deg);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-cube {
|
|
|
+ border: 1px solid rgba(171, 199, 243, 0.8);
|
|
|
+ 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;
|
|
|
+ border: 10px solid rgba(83, 146, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.platform-block {
|
|
|
+ overflow: hidden;
|
|
|
+ background: linear-gradient(180deg, #dce9fb 0%, #d9e8fb 100%);
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(184, 207, 239, 0.85);
|
|
|
+}
|
|
|
+
|
|
|
+.platform-block__header {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- border-radius: 18px;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(70, 87, 109, 0.34) 0%,
|
|
|
- rgba(70, 87, 109, 0.56) 100%
|
|
|
- );
|
|
|
- color: #ffffff;
|
|
|
+ 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;
|
|
|
font-weight: 700;
|
|
|
+ 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;
|
|
|
- text-transform: lowercase;
|
|
|
- letter-spacing: 0.02em;
|
|
|
+ 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;
|
|
|
+ font-weight: 600;
|
|
|
+ transition:
|
|
|
+ transform 0.2s ease,
|
|
|
+ box-shadow 0.2s ease,
|
|
|
+ background 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.platform-app:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.platform-app--active {
|
|
|
+ background: linear-gradient(180deg, #3979e0 0%, #326fd8 100%);
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 8px 18px rgba(42, 103, 198, 0.28);
|
|
|
+}
|
|
|
+
|
|
|
+.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: rgba(245, 250, 255, 0.95);
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(226, 237, 249, 0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.side-card--content {
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.side-card__header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 32px;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: linear-gradient(90deg, rgba(236, 244, 255, 0.95), rgba(226, 239, 255, 0.92));
|
|
|
+ border-bottom: 1px solid rgba(195, 214, 239, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+.notice-badge {
|
|
|
+ position: relative;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ min-width: 64px;
|
|
|
+ padding: 0 18px 0 16px;
|
|
|
+ background: linear-gradient(180deg, #1661c9 0%, #0f53b4 100%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-badge::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -15px;
|
|
|
+ border-top: 16px solid transparent;
|
|
|
+ border-bottom: 16px solid transparent;
|
|
|
+ border-left: 15px solid #0f53b4;
|
|
|
+}
|
|
|
+
|
|
|
+.side-card__more {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 0;
|
|
|
+ background: transparent;
|
|
|
+ color: #0f53b4;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-item {
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px 14px;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(230, 237, 246, 0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.notice-item__title,
|
|
|
+.notice-item__desc {
|
|
|
+ color: #4f5f76;
|
|
|
+ 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: 12px 14px;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(228, 236, 246, 0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.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: 10px 12px;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(228, 236, 246, 0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder-panel {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #aec5e5;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder-panel__title {
|
|
|
+ opacity: 0.55;
|
|
|
+}
|
|
|
+
|
|
|
+@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;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
