|
|
@@ -1,18 +1,16 @@
|
|
|
-<template>
|
|
|
+<template>
|
|
|
<div class="bg-white">
|
|
|
<Header />
|
|
|
|
|
|
<section
|
|
|
- class="relative w-full overflow-hidden mt-15 md:pb-30 pb-50 pt-9 h-[400px]"
|
|
|
+ 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="min-w-full h-full relative">
|
|
|
+ <div class="relative h-full min-w-full">
|
|
|
<video
|
|
|
- class="absolute inset-0 w-full h-full object-cover"
|
|
|
+ class="absolute inset-0 h-full w-full object-cover"
|
|
|
autoplay
|
|
|
muted
|
|
|
loop
|
|
|
@@ -25,32 +23,32 @@
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- class="relative z-10 w-full mx-auto h-full px-20 flex items-center mt-5 pt-10"
|
|
|
+ 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="text-2xl md:text-4xl text-white/90 pt-2 font-bold leading-tight slide-up-fade-in"
|
|
|
+ class="slide-up-fade-in pt-2 text-2xl font-bold leading-tight text-white/90 md:text-4xl"
|
|
|
>
|
|
|
山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
|
|
|
</h1>
|
|
|
<p
|
|
|
- class="mt-3 md:text-4 text-sm md:text-base text-white/90 leading-relaxed slide-up-fade-in"
|
|
|
+ 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="mt-4 md:mt-6 flex gap-3 slide-up-fade-in"
|
|
|
+ class="slide-up-fade-in mt-4 flex gap-3 md:mt-6"
|
|
|
style="animation-delay: 0.4s"
|
|
|
>
|
|
|
<a
|
|
|
- class="bg-[#0644a1] hover:bg-[#0a53c1] text-white px-4 py-2 cursor-pointer"
|
|
|
+ class="cursor-pointer bg-[#0644a1] px-4 py-2 text-white hover:bg-[#0a53c1]"
|
|
|
>
|
|
|
了解平台
|
|
|
</a>
|
|
|
<a
|
|
|
- class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 cursor-pointer"
|
|
|
+ class="cursor-pointer bg-white/10 px-4 py-2 text-white hover:bg-white/20"
|
|
|
>
|
|
|
联系我们
|
|
|
</a>
|
|
|
@@ -60,23 +58,188 @@
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
|
- class="max-w-[1200px] mx-auto px-2 mb-8 mt-6 flex justify-center items-center gap-3"
|
|
|
+ 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"
|
|
|
>
|
|
|
- <p class="text-2xl">提供多维度、更可靠的数智化服务</p>
|
|
|
+ <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="w-full mx-auto px-4 md:px-20 mb-8 mt-5">
|
|
|
- <div class="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
|
|
|
+ <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"
|
|
|
- :bg2="cardBgs"
|
|
|
/>
|
|
|
</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"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h3 class="font-bold tracking-[0.02em] text-slate-800">
|
|
|
+ 待办中心
|
|
|
+ </h3>
|
|
|
+ </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"
|
|
|
+ >
|
|
|
+ <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
|
|
|
+ :class="[
|
|
|
+ 'mt-1 shrink-0 rounded-sm px-1.5 py-0.5 text-[10px]',
|
|
|
+ task.tagClass,
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ task.tag }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </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"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ <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-[98px] w-[128px] shrink-0">
|
|
|
+ <img
|
|
|
+ :src="news.image"
|
|
|
+ :alt="news.title"
|
|
|
+ class="h-full w-full rounded-[18px] object-cover"
|
|
|
+ />
|
|
|
+ <div class="news-thumb__overlay">
|
|
|
+ <span>news</span>
|
|
|
+ <span>news</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="min-w-0 flex-1">
|
|
|
+ <div
|
|
|
+ class="line-clamp-2 text-[18px] font-bold leading-[1.45] text-[#29466f] md:text-[20px]"
|
|
|
+ >
|
|
|
+ {{ news.title }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-4 text-[14px] text-[#98a7bb]">
|
|
|
+ {{ news.date }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</section>
|
|
|
|
|
|
<Footer />
|
|
|
@@ -84,7 +247,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, onUnmounted } from "vue";
|
|
|
+import { onMounted, onUnmounted, ref } from "vue";
|
|
|
import * as authUtil from "@/utils/auth";
|
|
|
import * as dd from "dingtalk-jsapi";
|
|
|
import { getUnreadNotifyMessageCount } from "@/api/user";
|
|
|
@@ -103,14 +266,13 @@ import g1 from "@/assets/images/g1.png";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import axios from "axios";
|
|
|
import { useUserStore } from "@/stores/useUserStore";
|
|
|
-const router = useRouter();
|
|
|
+import { Icon } from "@iconify/vue";
|
|
|
|
|
|
+const router = useRouter();
|
|
|
const userStore = useUserStore();
|
|
|
+
|
|
|
const bgImages = [banner1, caiwu, banner2];
|
|
|
-// 2. 定义当前显示的图片索引
|
|
|
const currentBgIndex = ref(0);
|
|
|
-
|
|
|
-// 3. 轮播定时器引用
|
|
|
let bgInterval: number | null = null;
|
|
|
|
|
|
type Card = {
|
|
|
@@ -121,12 +283,35 @@ type Card = {
|
|
|
items: Array<{ label: string; tag?: "新" | "热" }>;
|
|
|
id: string;
|
|
|
};
|
|
|
+
|
|
|
+type TodoTask = {
|
|
|
+ title: string;
|
|
|
+ meta: string;
|
|
|
+ tag: string;
|
|
|
+ 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 cards: Card[] = [
|
|
|
{
|
|
|
name: "device",
|
|
|
title: "数字运营平台",
|
|
|
- desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支持",
|
|
|
+ desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支撑。",
|
|
|
id: "management",
|
|
|
bg: img1,
|
|
|
items: [
|
|
|
@@ -137,9 +322,7 @@ const cards: Card[] = [
|
|
|
{ label: "财务管理(FM)" },
|
|
|
{ label: "经营驾驶舱(MC)", tag: "新" },
|
|
|
{ label: "项目管理(PM)" },
|
|
|
-
|
|
|
{ label: "技术研发管理" },
|
|
|
-
|
|
|
{ label: "组织资产管理" },
|
|
|
{ label: "风控合规管理" },
|
|
|
{ label: "战略解码与执行" },
|
|
|
@@ -149,14 +332,14 @@ const cards: Card[] = [
|
|
|
{
|
|
|
name: "scene",
|
|
|
title: "智慧指挥平台",
|
|
|
- desc: "深入工业场景，为中小企业数字化升级赋能",
|
|
|
+ desc: "深入工业场景，为中小企业数字化升级赋能。",
|
|
|
id: "command",
|
|
|
bg: img2,
|
|
|
items: [
|
|
|
{ label: "设备管理(PMS)" },
|
|
|
{ label: "中航北斗" },
|
|
|
{ label: "质量安全管理(QHSE)" },
|
|
|
- { label: "智慧连油" },
|
|
|
+ { label: "智慧炼油" },
|
|
|
{ label: "智慧注气" },
|
|
|
{ label: "智能钻井" },
|
|
|
{ label: "智慧压裂" },
|
|
|
@@ -167,7 +350,7 @@ const cards: Card[] = [
|
|
|
{
|
|
|
name: "factory",
|
|
|
title: "Chat BI平台",
|
|
|
- desc: "工厂上云，高效协同，生产效率和产品质量提升",
|
|
|
+ desc: "工厂上云，高效协同，提升生产效率和产品质量。",
|
|
|
id: "chatbi",
|
|
|
bg: img3,
|
|
|
items: [
|
|
|
@@ -181,6 +364,62 @@ const cards: Card[] = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+const todoTasks: TodoTask[] = [
|
|
|
+ {
|
|
|
+ title: "项目立项审批 - QHSE升级",
|
|
|
+ meta: "发起人：李智慧 · 2小时前",
|
|
|
+ tag: "紧急",
|
|
|
+ tagClass: "bg-[#ffe1e3] text-[#ff5d66]",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "合同会签 - 油服工程中心",
|
|
|
+ meta: "发起人：王志刚 · 4小时前",
|
|
|
+ tag: "普通",
|
|
|
+ tagClass: "bg-[#dbe8ff] text-[#3f74ff]",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "报销单待审批",
|
|
|
+ meta: "来自：财务管理系统 · 昨天",
|
|
|
+ tag: "待办",
|
|
|
+ tagClass: "bg-[#dfe8f3] text-[#6f7f94]",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+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: "科瑞石油成功交付首套自动化钻机",
|
|
|
+ date: "2026-04-18",
|
|
|
+ image: banner1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "DeepOil 智慧平台荣获行业创新奖",
|
|
|
+ date: "2026-04-15",
|
|
|
+ image: banner2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "数字人才培养“扬帆计划”正式启动",
|
|
|
+ date: "2026-04-12",
|
|
|
+ image: img3,
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
async function loginWithDingTalk() {
|
|
|
const ddCorpId = import.meta.env.VITE_DD_CORPID;
|
|
|
const ddClientId = import.meta.env.VITE_DD_CLIENTID;
|
|
|
@@ -197,7 +436,7 @@ async function loginWithDingTalk() {
|
|
|
.post(
|
|
|
import.meta.env.BASE_URL + "/admin-api/system/auth/h5SocialLogin",
|
|
|
{
|
|
|
- code: code,
|
|
|
+ code,
|
|
|
type: 20,
|
|
|
state: new Date().getTime(),
|
|
|
},
|
|
|
@@ -208,11 +447,9 @@ async function loginWithDingTalk() {
|
|
|
},
|
|
|
},
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
- console.log("钉钉免登res>>>>>>>>>>>>>>>>>>", res.data.data);
|
|
|
-
|
|
|
- authUtil.setToken(res.data.data);
|
|
|
-
|
|
|
+ .then((response) => {
|
|
|
+ console.log("钉钉免登返回结果", response.data.data);
|
|
|
+ authUtil.setToken(response.data.data);
|
|
|
router.push({
|
|
|
path: "/login",
|
|
|
});
|
|
|
@@ -237,8 +474,8 @@ function dingTalkAutoLogin() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const unreadCount = ref(0); // 未读消息数量
|
|
|
-// 获得未读消息数
|
|
|
+const unreadCount = ref(0);
|
|
|
+
|
|
|
const getUnreadCount = async () => {
|
|
|
getUnreadNotifyMessageCount().then((data) => {
|
|
|
unreadCount.value = data;
|
|
|
@@ -248,20 +485,11 @@ const getUnreadCount = async () => {
|
|
|
onMounted(() => {
|
|
|
dingTalkAutoLogin();
|
|
|
|
|
|
- // 首次加载小红点
|
|
|
- // getUnreadCount();
|
|
|
- // 轮询刷新小红点
|
|
|
- // setInterval(
|
|
|
- // () => {
|
|
|
- // if (userStore.getIsSetUser) {
|
|
|
- // console.log("轮询刷新小红点");
|
|
|
- // getUnreadCount();
|
|
|
- // } else {
|
|
|
- // unreadCount.value = 0;
|
|
|
- // }
|
|
|
- // },
|
|
|
- // 1000 * 60 * 1,
|
|
|
- // );
|
|
|
+ void bgImages;
|
|
|
+ void currentBgIndex;
|
|
|
+ void cardBgs;
|
|
|
+ void unreadCount;
|
|
|
+ void getUnreadCount;
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
@@ -272,25 +500,22 @@ onUnmounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 修改垂直滚动条 */
|
|
|
::-webkit-scrollbar {
|
|
|
- width: 5px; /* 修改宽度 */
|
|
|
+ width: 5px;
|
|
|
}
|
|
|
+
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
-/* 修改滚动条轨道背景色 */
|
|
|
::-webkit-scrollbar-track {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
-/* 修改滚动条滑块颜色 */
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background-color: #0a5f73;
|
|
|
}
|
|
|
|
|
|
-/* 修改滚动条滑块悬停时的颜色 */
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
background-color: #30459c;
|
|
|
}
|
|
|
@@ -308,16 +533,64 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.slide-up-fade-in {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(20px);
|
|
|
- animation: slideUpFadeIn 0.8s forwards ease-out;
|
|
|
+.todo-panel {
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ circle at top left,
|
|
|
+ rgba(47, 103, 255, 0.06),
|
|
|
+ transparent 28%
|
|
|
+ ),
|
|
|
+ linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
|
|
}
|
|
|
|
|
|
-@keyframes slideUpFadeIn {
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+.todo-panel__icon-check {
|
|
|
+ position: relative;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border: 3px solid #2f67ff;
|
|
|
+ border-radius: 9999px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-panel__icon-check::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);
|
|
|
+}
|
|
|
+
|
|
|
+.todo-task-card {
|
|
|
+ background: #f8fafc;
|
|
|
+ box-shadow: 0 10px 24px rgba(30, 81, 171, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.news-item {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.news-thumb__overlay {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ 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;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ text-transform: lowercase;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
}
|
|
|
</style>
|
