2026新UI
This commit is contained in:
lnljyang
@@ -1,100 +1,64 @@
|
||||
<template>
|
||||
<div class="cards-container">
|
||||
<!-- 四个卡片 -->
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<div class="top-cards-wrapper">
|
||||
<!-- 左侧卡片1 -->
|
||||
<div class="top-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/left/1.svg" alt="" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">{{ cards[0].label }}</div>
|
||||
<div class="card-value">
|
||||
<span class="number">{{ cards[0].value }}</span>
|
||||
<span class="unit">{{ cards[0].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[0].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-0"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/1.svg" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
|
||||
<!-- 左侧卡片2 -->
|
||||
<div class="top-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/left/2.svg" alt="" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">{{ cards[1].label }}</div>
|
||||
<div class="card-value">
|
||||
<span class="number">{{ cards[1].value }}</span>
|
||||
<span class="unit">{{ cards[1].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[1].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-1"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/2.svg" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
|
||||
<!-- 中间标题区域 -->
|
||||
<div class="center-title">
|
||||
<div class="title-text">羚牛全国车辆信息</div>
|
||||
<div class="status-badge">922 功能中</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧卡片1 -->
|
||||
<div class="top-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/left/3.svg" alt="" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">{{ cards[2].label }}</div>
|
||||
<div class="card-value">
|
||||
<span class="number">{{ cards[2].value }}</span>
|
||||
<span class="unit">{{ cards[2].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[2].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-2"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/3.svg" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
|
||||
<!-- 右侧卡片2 -->
|
||||
<div class="top-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/left/4.svg" alt="" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">{{ cards[3].label }}</div>
|
||||
<div class="card-value">
|
||||
<span class="number">{{ cards[3].value }}</span>
|
||||
<span class="unit">{{ cards[3].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[3].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-3"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/4.svg" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,31 +74,31 @@ export default {
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
value: "452/807",
|
||||
unit: "辆",
|
||||
label: "在线车数",
|
||||
srcValue: "@/assets/img/left_top_lv.png",
|
||||
value: "8463.91",
|
||||
unit: "kg",
|
||||
label: "当日减碳量",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "561",
|
||||
value: "1027.98",
|
||||
unit: "kg",
|
||||
label: "当日减碳",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
label: "当日用氢量",
|
||||
srcValue: "@/assets/img/left/2.svg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "534",
|
||||
unit: "kg",
|
||||
label: "当日用氢量",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
value: "403 / 977",
|
||||
unit: "辆",
|
||||
label: "在线数量",
|
||||
srcValue: "@/assets/img/left/3.svg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: "3300",
|
||||
value: "18012.87",
|
||||
unit: "km",
|
||||
label: "当日里程",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
label: "当日行驶里程",
|
||||
srcValue: "@/assets/img/left/4.svg",
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -162,16 +126,22 @@ export default {
|
||||
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
|
||||
}
|
||||
|
||||
// 当日减碳量
|
||||
let change = this.cards[0];
|
||||
change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
|
||||
change.value = dayCarbon;
|
||||
this.$set(this.cards, 0, change);
|
||||
|
||||
// 当日用氢量
|
||||
change = this.cards[1];
|
||||
change.value = dayCarbon;
|
||||
this.$set(this.cards, 1, change);
|
||||
change = this.cards[2];
|
||||
change.value = dayHydrogen;
|
||||
this.$set(this.cards, 1, change);
|
||||
|
||||
// 在线数量
|
||||
change = this.cards[2];
|
||||
change.value = res.data.onLineCount + " / " + res.data.vehicleCount;
|
||||
this.$set(this.cards, 2, change);
|
||||
|
||||
// 当日行驶里程
|
||||
change = this.cards[3];
|
||||
change.value = dayMileage;
|
||||
this.$set(this.cards, 3, change);
|
||||
@@ -182,144 +152,110 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体背景 */
|
||||
.cards-container {
|
||||
.top-cards-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
padding-left: 0px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
background-image: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
.images {
|
||||
width: 65px;
|
||||
height: 70px;
|
||||
margin-left: 10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
/* 单个卡片 */
|
||||
.card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 卡片信息区域 */
|
||||
.card-info {
|
||||
margin-bottom: 120px; /* 给下方图标区域留出空间 */
|
||||
margin-left: 10px;
|
||||
/* 数据卡片 */
|
||||
.top-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.value-line {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
width: 120px;
|
||||
.top-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-weight: 700;
|
||||
color: #1976d2; /* 高亮数字颜色 */
|
||||
margin-right: 6px;
|
||||
.card-icon {
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 212, 170, 0.05));
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
.card-icon img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
.card-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 54%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
.card-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 背后闪动的竖直矩形 */
|
||||
.icon-bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-image: none;
|
||||
background-color: rgba(25, 118, 210, 0.1);
|
||||
background-repeat: no-repeat;
|
||||
animation: blink 1s infinite alternate;
|
||||
top: -15%;
|
||||
}
|
||||
.icon-bg-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.icon-bg-1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.icon-bg-2 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.icon-bg-3 {
|
||||
animation-delay: 0.6s;
|
||||
.card-value .number {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #00D4AA;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 圆形平台 */
|
||||
.platform-circle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: radial-gradient(rgba(25, 118, 210, 0.3), transparent 70%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
|
||||
.card-value .unit {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 28px;
|
||||
color: #1976d2;
|
||||
/* 中间标题区域 */
|
||||
.center-title {
|
||||
flex: 1.2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 212, 170, 0.2);
|
||||
}
|
||||
|
||||
/* 关键帧动画：闪动 */
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
.title-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 图标模拟，可用 Font Awesome 等替换 */
|
||||
.icon-phone::before {
|
||||
content: "☎";
|
||||
}
|
||||
.icon-shield::before {
|
||||
content: "⛨";
|
||||
}
|
||||
.icon-star::before {
|
||||
content: "★";
|
||||
}
|
||||
.icon-protect::before {
|
||||
content: "🛡";
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
background: #00D4AA;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 212, 170, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user