|
|
@@ -32,12 +32,12 @@
|
|
|
:key="card.title"
|
|
|
type="button"
|
|
|
class="drive-card overflow-hidden"
|
|
|
+ :style="{
|
|
|
+ '--bg-image': `url(${card.pcBg})`,
|
|
|
+ '--mobile-bg-image': `url(${card.mobileBg})`,
|
|
|
+ }"
|
|
|
@click="openDrive(card)"
|
|
|
- >
|
|
|
- <!-- <div>
|
|
|
- <el-image :src="dr1"></el-image>
|
|
|
- </div> -->
|
|
|
- </button>
|
|
|
+ ></button>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
@@ -75,7 +75,6 @@ const userStore = useUserStore();
|
|
|
type DriveCard = {
|
|
|
title: string;
|
|
|
description: string;
|
|
|
- // icon: string;
|
|
|
url: string;
|
|
|
bgColor: string;
|
|
|
pcBg: string;
|
|
|
@@ -86,7 +85,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "经营驾驶舱",
|
|
|
description: "查看经营分析、经营指标与执行情况。",
|
|
|
- // icon: driveIcon1,
|
|
|
url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1",
|
|
|
bgColor: "#3876e0",
|
|
|
pcBg: drivePc1,
|
|
|
@@ -95,7 +93,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "生产驾驶舱",
|
|
|
description: "查看生产运营态势、核心指标与执行情况。",
|
|
|
- // icon: driveIcon2,
|
|
|
url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/dbc9cf73-81ce-43f1-9923-45cdfa5d5d3a?preview=true&page_number=1",
|
|
|
bgColor: "#0f766e",
|
|
|
pcBg: drivePc2,
|
|
|
@@ -104,7 +101,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "财务驾驶舱",
|
|
|
description: "查看财务分析、预算执行与经营数据表现。",
|
|
|
- // icon: driveIcon3,
|
|
|
url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1",
|
|
|
bgColor: "#ca8a04",
|
|
|
pcBg: drivePc3,
|
|
|
@@ -113,7 +109,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "供应链驾驶舱",
|
|
|
description: "查看供应链分析、物料需求与执行。",
|
|
|
- // icon: driveIcon4,
|
|
|
url: "#",
|
|
|
bgColor: "#7c3aed",
|
|
|
pcBg: drivePc4,
|
|
|
@@ -122,7 +117,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "市场驾驶舱",
|
|
|
description: "查看市场分析、销售数据与执行情况。",
|
|
|
- // icon: driveIcon5,
|
|
|
url: "#",
|
|
|
bgColor: "#16a34a",
|
|
|
pcBg: drivePc5,
|
|
|
@@ -131,7 +125,6 @@ const driveCards: DriveCard[] = [
|
|
|
{
|
|
|
title: "QHSE驾驶舱",
|
|
|
description: "查看安全、健康、环境与质量数据。",
|
|
|
- // icon: driveIcon6,
|
|
|
url: "#",
|
|
|
bgColor: "#dc2626",
|
|
|
pcBg: drivePc6,
|
|
|
@@ -251,7 +244,7 @@ const openDrive = async (option: DriveCard) => {
|
|
|
width: 90%;
|
|
|
border: 1px solid rgba(79, 110, 208, 0.16);
|
|
|
border-radius: 10px;
|
|
|
- background: rgba(8, 14, 30, 0.86);
|
|
|
+ background: #070e24;
|
|
|
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
@@ -296,18 +289,18 @@ const openDrive = async (option: DriveCard) => {
|
|
|
}
|
|
|
|
|
|
.drive-card {
|
|
|
- position: relative; /* 确保内部绝对定位元素参考此容器 */
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- align-items: center; /* 垂直居中文字 */
|
|
|
- justify-content: center; /* 水平居中文字 */
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
width: 100%;
|
|
|
- height: 184px; /* 固定高度 */
|
|
|
+ height: 184px;
|
|
|
|
|
|
- /* 背景图设置 */
|
|
|
- background-image: url("@/assets/images/dr1.png"); /* 注意：在 style 中引用静态资源可能需要 ~@ 或直接路径，Vite/Vue3通常支持 @ */
|
|
|
- background-size: contain; /* 关键：覆盖整个区域，裁剪多余部分，无间距 */
|
|
|
- background-position: center; /* 关键：居中显示 */
|
|
|
+ /* 使用 CSS 变量动态绑定背景图 */
|
|
|
+ background-image: var(--bg-image);
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
text-align: center;
|
|
|
@@ -327,21 +320,13 @@ const openDrive = async (option: DriveCard) => {
|
|
|
box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42);
|
|
|
}
|
|
|
|
|
|
-.drive-card__icon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- border-radius: 22px;
|
|
|
- color: #fff;
|
|
|
- font-size: 42px;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
+/* 补充缺失的内容样式，确保文字能显示在背景图上 */
|
|
|
.drive-card__content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
min-width: 0;
|
|
|
flex: 1;
|
|
|
+ /* 根据原设计可能需要调整文字颜色或背景遮罩以确保可读性 */
|
|
|
}
|
|
|
|
|
|
.drive-card__title {
|
|
|
@@ -349,6 +334,7 @@ const openDrive = async (option: DriveCard) => {
|
|
|
color: #f4f7ff;
|
|
|
font-size: 28px;
|
|
|
font-weight: 700;
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
.drive-card__text {
|
|
|
@@ -356,9 +342,12 @@ const openDrive = async (option: DriveCard) => {
|
|
|
color: rgba(191, 203, 235, 0.82);
|
|
|
font-size: 16px;
|
|
|
line-height: 1.7;
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
.drive-card__arrow {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
color: rgba(210, 220, 248, 0.82);
|
|
|
font-size: 34px;
|
|
|
flex-shrink: 0;
|
|
|
@@ -400,22 +389,17 @@ const openDrive = async (option: DriveCard) => {
|
|
|
|
|
|
.drive-card {
|
|
|
min-height: 100px;
|
|
|
- height: 0px;
|
|
|
- width: 100vw;
|
|
|
+ height: 100px; /* 修正原代码中 height: 0px 的问题，确保卡片有高度 */
|
|
|
+ width: 100%; /* 修正原代码中 width: 100vw 可能导致溢出问题，通常用 100% */
|
|
|
padding: 0;
|
|
|
margin-top: 0;
|
|
|
|
|
|
- /* padding: 22px 18px; */
|
|
|
- background-image: url("@/assets/images/mobile.png");
|
|
|
+ /* 使用 CSS 变量动态绑定移动端背景图 */
|
|
|
+ background-image: var(--mobile-bg-image);
|
|
|
background-size: contain;
|
|
|
background-position: center center;
|
|
|
}
|
|
|
|
|
|
- /* .drive-card__icon {
|
|
|
- width: 88px;
|
|
|
- height: 88px;
|
|
|
- } */
|
|
|
-
|
|
|
.drive-card__title {
|
|
|
font-size: 20px;
|
|
|
}
|
