From b8ced8ec593ad002e06173952acf73f405926bd9 Mon Sep 17 00:00:00 2001
From: AliooWang <64893838+AliooWang@users.noreply.github.com>
Date: 星期一, 14 四月 2025 16:56:43 +0800
Subject: [PATCH] Merge pull request #60 from zhitan-cloud/jiayu1.0
---
zhitan-vue/src/components/Breadcrumb/index.vue | 19 +
zhitan-vue/src/views/index.vue | 66 +++++---
zhitan-vue/src/assets/styles/sidebar.scss | 3
zhitan-vue/src/assets/styles/page.scss | 8
zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue | 220 +++++++++++++++++++++------
zhitan-vue/src/layout/components/TagsView/index.vue | 78 ++++++---
zhitan-vue/src/store/modules/permission.js | 26 +++
zhitan-vue/src/permission.js | 16 +
8 files changed, 318 insertions(+), 118 deletions(-)
diff --git a/zhitan-vue/src/assets/styles/page.scss b/zhitan-vue/src/assets/styles/page.scss
index f7fb7cc..d13a18a 100644
--- a/zhitan-vue/src/assets/styles/page.scss
+++ b/zhitan-vue/src/assets/styles/page.scss
@@ -163,9 +163,9 @@
display: flex;
.page-container-left {
- width: 280px;
+ width: 220px;
min-height: calc(100vh - 148px);
- border-right: 1px solid #fff;
+ border-right: 1px solid #e8e8e8;
background: #f1f4fa;
.el-tree {
@@ -194,8 +194,8 @@
}
.tree {
- height: calc(100vh - 170px) !important;
- max-height: calc(100vh - 170px) !important;
+ height: calc(100vh - 170px);
+ max-height: calc(100vh - 170px);
overflow-y: auto;
}
}
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index 52245c0..0d8d071 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/zhitan-vue/src/assets/styles/sidebar.scss
@@ -307,6 +307,7 @@
}
.main-container {
+ background-color: #f7f8fa;
height: 100%;
transition: margin-left 0.28s;
margin-left: $base-sidebar-width;
@@ -390,7 +391,7 @@
.menu-title {
overflow: hidden !important;
font-weight: 400 !important;
- font-size: 16px !important;
+ font-size: 14px !important;
}
// @media (min-width: 1440px) {
diff --git a/zhitan-vue/src/components/Breadcrumb/index.vue b/zhitan-vue/src/components/Breadcrumb/index.vue
index 6c873a0..4637888 100644
--- a/zhitan-vue/src/components/Breadcrumb/index.vue
+++ b/zhitan-vue/src/components/Breadcrumb/index.vue
@@ -19,20 +19,29 @@
let matched = route.matched.filter(item => item.meta && item.meta.title);
const first = matched[0]
- // 涓嶈嚜鍔ㄦ坊鍔犻椤靛埌闈㈠寘灞戜腑
- // if (!isDashboard(first)) {
- // matched = [{ path: '/index', meta: { title: '棣栭〉' } }].concat(matched)
- // }
+ // 娣诲姞璋冭瘯鏃ュ織
+ console.log('Current route path:', route.path);
+ console.log('Route matched:', route.matched);
+ console.log('Filtered matched routes:', matched);
+
+ // 濡傛灉鏄椤电湅鏉胯矾鐢憋紝纭繚瀹冭娣诲姞鍒伴潰鍖呭睉涓�
+ if (route.path === '/index' || route.path === '/index/index') {
+ matched = [{ path: '/index', meta: { title: '棣栭〉鐪嬫澘' } }].concat(matched)
+ console.log('Added index route to matched:', matched);
+ }
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+ console.log('Final breadcrumb items:', levelList.value);
}
+
function isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
- return name.trim() === 'Index'
+ return name.trim().toLowerCase() === 'index'
}
+
function handleLink(item) {
const { redirect, path } = item
if (redirect) {
diff --git a/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue b/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
index 7b468d2..8e38476 100644
--- a/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
@@ -84,65 +84,169 @@
if (e.target.closest('.el-sub-menu__title')) {
// 鎸夌収姝ｇ‘鐨勮矾寰勬瀯寤哄眰绾�
let currentNode = props.item;
- let pathSegments = [];
- // 棣栧厛娣诲姞褰撳墠鑺傜偣鐨勮矾寰�
- if (currentNode.path) {
- pathSegments.push(currentNode.path);
+ console.log('褰撳墠鐐瑰嚮鐨勮彍鍗曢」:', JSON.stringify(currentNode, null, 2));
+ console.log('basePath:', props.basePath);
+
+ // 鑾峰彇绗竴涓彲瑙佸瓙鑿滃崟锛屽鏋滄病鏈夊彲瑙佸瓙鑿滃崟锛屼笉杩涜璺宠浆
+ if (!currentNode.children || currentNode.children.length === 0) {
+ return;
}
- // 閫愬眰娣诲姞瀛愯矾寰�
- while (currentNode.children && currentNode.children.length > 0) {
- const firstChild = currentNode.children.find(child => !child.hidden);
- if (!firstChild) break;
-
- // 璺宠繃ParentView绫诲瀷鐨勪腑闂磋妭鐐�
- if (firstChild.component === 'ParentView' || firstChild.component.name === 'ParentView') {
- currentNode = firstChild;
- pathSegments.push(firstChild.path);
- continue;
- }
-
- // 鏅�氳妭鐐瑰鐞�
- currentNode = firstChild;
- // 濡傛灉璺緞涓嶆槸浠�/寮�澶达紝鍒欐坊鍔犲埌璺緞鐗囨涓�
- if (!firstChild.path.startsWith('/')) {
- pathSegments.push(firstChild.path);
- } else {
- // 濡傛灉鏄粷瀵硅矾寰勶紝鍒欐浛鎹箣鍓嶆墍鏈夎矾寰�
- pathSegments = [firstChild.path];
- }
-
- // 濡傛灉鍒拌揪鍙跺瓙鑺傜偣锛屽垯缁撴潫鏌ユ壘
- if (!firstChild.children || firstChild.children.length === 0) {
- break;
- }
+ const firstVisibleChild = currentNode.children.find(child => !child.hidden);
+ if (!firstVisibleChild) {
+ return;
}
- // 鏋勫缓鏈�缁堣矾寰�
- if (pathSegments.length > 0) {
- // 濡傛灉绗竴娈典笉鏄互/寮�澶达紝娣诲姞/
- if (!pathSegments[0].startsWith('/')) {
- pathSegments[0] = '/' + pathSegments[0];
- }
+ console.log('绗竴涓彲瑙佸瓙鑿滃崟:', JSON.stringify(firstVisibleChild, null, 2));
+
+ // 鏃ュ織绠＄悊绛変笁绾ц彍鍗曠壒娈婂鐞�
+ // 妫�鏌ユ槸鍚︽湁棰勫厛鍐欏叆鐨勫畬鏁磋矾寰勶紝濡傛灉鏈夊垯鐩存帴浣跨敤
+ if (firstVisibleChild.fullPath) {
+ console.log('浣跨敤棰勫厛璁剧疆鐨勫畬鏁磋矾寰�:', firstVisibleChild.fullPath);
+ router.push({ path: firstVisibleChild.fullPath });
+ return;
+ }
+
+ // 鍒ゆ柇鏄惁鏄郴缁�/鏃ュ織绠＄悊绫诲瀷鐨勪笁绾ц彍鍗曪紙渚嬪锛�/system/log/operlog锛�
+ // 杩欑鎯呭喌涓嬶紝鐩存帴璺宠浆鍒扮涓�涓瓙鑿滃崟鐨勫畬鏁磋矾寰�
+ if (firstVisibleChild.component === 'ParentView' ||
+ (typeof firstVisibleChild.component === 'object' &&
+ firstVisibleChild.component.name === 'ParentView')) {
+ console.log('妫�娴嬪埌ParentView缁勪欢锛屽鐞嗕笁绾ц彍鍗�');
- // 缁勫悎璺緞
- const targetPath = pathSegments.reduce((fullPath, segment, index) => {
- if (segment.startsWith('/')) {
- return segment;
- } else if (index === 0) {
- return segment;
- } else {
- return `${fullPath}/${segment}`;
+ // 鏄湁涓夌骇鑿滃崟鐨勬儏鍐�
+ if (firstVisibleChild.children && firstVisibleChild.children.length > 0) {
+ const grandChild = firstVisibleChild.children.find(child => !child.hidden);
+ if (grandChild) {
+ console.log('鎵惧埌绗笁绾ц彍鍗�:', JSON.stringify(grandChild, null, 2));
+
+ // 鍒ゆ柇鏄惁搴旇浣跨敤parentPath
+ if (firstVisibleChild.parentPath && grandChild.path.startsWith('/')) {
+ console.log('浣跨敤parentPath灞炴��:', firstVisibleChild.parentPath);
+ // 濡傛灉瀛愯彍鍗曟槸缁濆璺緞锛屼絾鏈塸arentPath锛屽垯搴旇浣跨敤parentPath浣滀负鍩虹
+ let fullPath = firstVisibleChild.parentPath;
+ if (!fullPath.startsWith('/')) {
+ fullPath = '/' + fullPath;
+ }
+
+ // 绗簩绾ц矾寰勫熀浜庢牴璺緞
+ if (firstVisibleChild.path.startsWith('/')) {
+ // 绗簩绾у凡缁忔槸缁濆璺緞锛屾埅鍙栨渶鍚庨儴鍒�
+ const pathParts = firstVisibleChild.path.split('/');
+ const lastPart = pathParts[pathParts.length - 1];
+ fullPath = fullPath + '/' + lastPart;
+ } else {
+ fullPath = buildFullPath(fullPath, firstVisibleChild.path);
+ }
+ console.log('浜岀骇璺緞:', fullPath);
+
+ // 绗笁绾ц矾寰勫熀浜庝簩绾ц矾寰�
+ if (grandChild.path.startsWith('/')) {
+ // 绗笁绾ф槸缁濆璺緞锛屾埅鍙栨渶鍚庨儴鍒�
+ const pathParts = grandChild.path.split('/');
+ const lastPart = pathParts[pathParts.length - 1];
+ fullPath = fullPath + '/' + lastPart;
+ } else {
+ fullPath = buildFullPath(fullPath, grandChild.path);
+ }
+ console.log('涓夌骇璺緞 (鏈�缁�):', fullPath);
+
+ // 瀵艰埅鍒扮涓夌骇鑿滃崟
+ if (grandChild.query) {
+ router.push({ path: fullPath, query: grandChild.query });
+ } else {
+ router.push({ path: fullPath });
+ }
+ return;
+ }
+
+ // 甯歌璺緞鏋勫缓
+ let fullPath;
+
+ // 绗竴绾ц矾寰勫繀椤绘槸瀹屾暣鐨勶紙渚嬪/system锛�
+ if (currentNode.path.startsWith('/')) {
+ fullPath = currentNode.path;
+ } else {
+ fullPath = '/' + currentNode.path;
+ }
+ console.log('涓�绾ц矾寰�:', fullPath);
+
+ // 绗簩绾ц矾寰勫繀椤诲熀浜庣涓�绾ц矾寰勶紙渚嬪/system/log锛�
+ fullPath = buildFullPath(fullPath, firstVisibleChild.path);
+ console.log('浜岀骇璺緞:', fullPath);
+
+ // 绗笁绾ц矾寰勫繀椤诲熀浜庝簩绾ц矾寰勶紙渚嬪/system/log/operlog锛�
+ fullPath = buildFullPath(fullPath, grandChild.path);
+ console.log('涓夌骇璺緞 (鏈�缁�):', fullPath);
+
+ // 瀵艰埅鍒扮涓夌骇鑿滃崟
+ if (grandChild.query) {
+ console.log('璺宠浆鍒�:', fullPath, '甯﹀弬鏁�:', grandChild.query);
+ router.push({ path: fullPath, query: grandChild.query });
+ } else {
+ console.log('璺宠浆鍒�:', fullPath);
+ router.push({ path: fullPath });
+ }
+ return;
}
- });
-
- // 瀵艰埅鍒扮洰鏍囪矾鐢憋紝濡傛灉鏈夋煡璇㈠弬鏁板垯娣诲姞
- if (currentNode.query) {
- router.push({ path: targetPath, query: currentNode.query });
- } else {
- router.push({ path: targetPath });
}
+ }
+
+ console.log('澶勭悊鏍囧噯浜岀骇鑿滃崟');
+
+ // 妫�鏌ユ槸鍚﹂渶瑕佷娇鐢╬arentPath
+ if (firstVisibleChild.parentPath && firstVisibleChild.path.startsWith('/')) {
+ console.log('浣跨敤parentPath灞炴��:', firstVisibleChild.parentPath);
+ // 濡傛灉瀛愯彍鍗曟槸缁濆璺緞锛屼絾鏈塸arentPath锛屽垯搴旇浣跨敤parentPath浣滀负鍩虹
+ let fullPath = firstVisibleChild.parentPath;
+ if (!fullPath.startsWith('/')) {
+ fullPath = '/' + fullPath;
+ }
+
+ // 鏋勫缓瀹屾暣璺緞
+ if (firstVisibleChild.path.startsWith('/')) {
+ // 鎴彇瀛愯矾寰勭殑鏈�鍚庨儴鍒�
+ const pathParts = firstVisibleChild.path.split('/');
+ const lastPart = pathParts[pathParts.length - 1];
+ fullPath = fullPath + '/' + lastPart;
+ } else {
+ fullPath = buildFullPath(fullPath, firstVisibleChild.path);
+ }
+ console.log('鏋勫缓鐨勬渶缁堣矾寰�:', fullPath);
+
+ // 瀵艰埅鍒扮洰鏍囪矾鐢�
+ if (firstVisibleChild.query) {
+ router.push({ path: fullPath, query: firstVisibleChild.query });
+ } else {
+ router.push({ path: fullPath });
+ }
+ return;
+ }
+
+ // 鏍囧噯鐨勪簩绾ц彍鍗曞鐞�
+ // 鏋勫缓姝ｇ‘鐨勮矾寰�
+ let fullPath;
+
+ // 澶勭悊绗竴绾ц矾寰勶紙渚嬪/system锛�- 蹇呴』鏄畬鏁寸殑璺緞
+ if (currentNode.path.startsWith('/')) {
+ fullPath = currentNode.path;
+ } else {
+ fullPath = '/' + currentNode.path;
+ }
+ console.log('涓�绾ц矾寰�:', fullPath);
+
+ // 澶勭悊绗簩绾ц矾寰勶紙渚嬪/system/user锛�- 蹇呴』鍩轰簬绗竴绾ц矾寰�
+ fullPath = buildFullPath(fullPath, firstVisibleChild.path);
+ console.log('浜岀骇璺緞 (鏈�缁�):', fullPath);
+
+ // 瀵艰埅鍒扮洰鏍囪矾鐢�
+ if (firstVisibleChild.query) {
+ console.log('璺宠浆鍒�:', fullPath, '甯﹀弬鏁�:', firstVisibleChild.query);
+ router.push({ path: fullPath, query: firstVisibleChild.query });
+ } else {
+ console.log('璺宠浆鍒�:', fullPath);
+ router.push({ path: fullPath });
}
}
}
@@ -202,6 +306,20 @@
return getNormalPath(props.basePath + '/' + routePath)
}
+// 姝ｇ‘鏋勫缓璺緞
+function buildFullPath(base, segment) {
+ // 濡傛灉segment鏄粷瀵硅矾寰勶紝鐩存帴杩斿洖
+ if (segment.startsWith('/')) {
+ return segment;
+ }
+
+ // 纭繚base鏈夋纭殑寮�澶存枩鏉�
+ const normalizedBase = base.startsWith('/') ? base : '/' + base;
+
+ // 鎷兼帴璺緞锛岄伩鍏嶅弻鏂滄潬
+ return normalizedBase.endsWith('/') ? normalizedBase + segment : normalizedBase + '/' + segment;
+}
+
function hasTitle(title){
if (title.length > 5) {
return title;
diff --git a/zhitan-vue/src/layout/components/TagsView/index.vue b/zhitan-vue/src/layout/components/TagsView/index.vue
index 7688967..87edcf4 100644
--- a/zhitan-vue/src/layout/components/TagsView/index.vue
+++ b/zhitan-vue/src/layout/components/TagsView/index.vue
@@ -1,5 +1,5 @@
<template>
- <div id="tags-view-container" class="tags-view-container">
+ <div id="tags-view-container" class="tags-view-container" :class="{'theme-dark': sideTheme === 'theme-dark', 'theme-light': sideTheme === 'theme-light'}">
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
<router-link
v-for="tag in visitedViews"
@@ -52,6 +52,7 @@
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
const theme = computed(() => useSettingsStore().theme)
+const sideTheme = computed(() => useSettingsStore().sideTheme)
watch(route, () => {
addTags()
@@ -238,10 +239,37 @@
margin-top: 10px;
margin-left: 14px;
box-sizing: border-box;
- // 娣诲姞姘村钩鍐呰竟璺濅笌app-main鐨勫唴杈硅窛涓�鑷�
- background: #0A3465;
-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+
+ &.theme-dark {
+ background: #0A3465;
+ .tags-view-item {
+ color: #fff;
+ border: 1px solid #0c4685;
+ background: rgba(10, 52, 101, .48);
+ border-radius: 5px;
+
+ &.active {
+ background-color: var(--el-color-primary) !important;
+ color: #fff !important;
+ }
+ }
+ }
+
+ &.theme-light {
+ background: #fff;
+ .tags-view-item {
+ color: #495060;
+ background: #fff;
+ border: 1px solid #d8dce5;
+
+ &.active {
+ background-color: var(--el-color-primary) !important;
+ color: #fff !important;
+ }
+ }
+ }
+
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
@@ -249,10 +277,8 @@
cursor: pointer;
height: 26px;
line-height: 26px;
- border: 1px solid #d8dce5;
- color: #495060;
- background: #fff;
- padding: 0 8px;
+ border-radius: 3px;
+ padding: 0 10px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
@@ -278,25 +304,25 @@
}
}
}
- .contextmenu {
+ }
+ .contextmenu {
+ margin: 0;
+ background: #fff;
+ z-index: 3000;
+ position: absolute;
+ list-style-type: none;
+ padding: 5px 0;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ color: #333;
+ box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+ li {
margin: 0;
- background: #fff;
- z-index: 3000;
- position: absolute;
- list-style-type: none;
- padding: 5px 0;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 400;
- color: #333;
- box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
- li {
- margin: 0;
- padding: 7px 16px;
- cursor: pointer;
- &:hover {
- background: #eee;
- }
+ padding: 7px 16px;
+ cursor: pointer;
+ &:hover {
+ background: #eee;
}
}
}
diff --git a/zhitan-vue/src/permission.js b/zhitan-vue/src/permission.js
index 7fc2c80..3427d73 100644
--- a/zhitan-vue/src/permission.js
+++ b/zhitan-vue/src/permission.js
@@ -35,9 +35,16 @@
// 璺宠繃ParentView绫诲瀷鐨勪腑闂磋妭鐐�
if (firstChild.component === 'ParentView' ||
- (typeof firstChild.component === 'object' && firstChild.component.name === 'ParentView')) {
+ (typeof firstChild.component === 'object' &&
+ firstChild.component.name === 'ParentView')) {
currentNode = firstChild;
- pathSegments.push(firstChild.path);
+ // 濡傛灉璺緞涓嶆槸浠�/寮�澶达紝鍒欐坊鍔犲埌璺緞鐗囨涓�
+ if (!firstChild.path.startsWith('/')) {
+ pathSegments.push(firstChild.path);
+ } else {
+ // 濡傛灉鏄粷瀵硅矾寰勶紝鍒欐浛鎹箣鍓嶆墍鏈夎矾寰�
+ pathSegments = [firstChild.path];
+ }
continue;
}
@@ -72,7 +79,10 @@
} else if (index === 0) {
return segment;
} else {
- return `${fullPath}/${segment}`;
+ // 纭繚璺緞涔嬮棿涓嶄細鍑虹幇閲嶅鐨勬枩鏉�
+ const base = fullPath.endsWith('/') ? fullPath.slice(0, -1) : fullPath;
+ const part = segment.startsWith('/') ? segment : '/' + segment;
+ return `${base}${part}`;
}
});
}
diff --git a/zhitan-vue/src/store/modules/permission.js b/zhitan-vue/src/store/modules/permission.js
index 4eb8185..5613f1c 100644
--- a/zhitan-vue/src/store/modules/permission.js
+++ b/zhitan-vue/src/store/modules/permission.js
@@ -120,7 +120,18 @@
// 璁剧疆鐖惰矾鐢卞紩鐢�
c.parent = el;
- c.path = el.path + '/' + c.path
+ // 纭繚璺緞鏍煎紡姝ｇ‘鎷兼帴
+ if (el.path) {
+ if (c.path.startsWith('/')) {
+ // 缁濆璺緞淇濇寔涓嶅彉
+ // 浣嗕篃璁剧疆鍘熷鐖惰矾寰勭敤浜庤彍鍗曞鑸�
+ c.parentPath = el.path;
+ } else {
+ // 鐩稿璺緞闇�瑕佹嫾鎺�
+ c.path = el.path.endsWith('/') ? el.path + c.path : el.path + '/' + c.path;
+ }
+ }
+
if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c))
return
@@ -134,7 +145,18 @@
// 璁剧疆鐖惰矾鐢卞紩鐢�
el.parent = lastRouter;
- el.path = lastRouter.path + '/' + el.path
+ // 纭繚璺緞鏍煎紡姝ｇ‘鎷兼帴
+ if (lastRouter.path) {
+ if (el.path.startsWith('/')) {
+ // 缁濆璺緞淇濇寔涓嶅彉
+ // 浣嗕篃璁剧疆鍘熷鐖惰矾寰勭敤浜庤彍鍗曞鑸�
+ el.parentPath = lastRouter.path;
+ } else {
+ // 鐩稿璺緞闇�瑕佹嫾鎺�
+ el.path = lastRouter.path.endsWith('/') ? lastRouter.path + el.path : lastRouter.path + '/' + el.path;
+ }
+ }
+
if (el.children && el.children.length) {
children = children.concat(filterChildren(el.children, el))
return
diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue
index 95f164a..cb114db 100644
--- a/zhitan-vue/src/views/index.vue
+++ b/zhitan-vue/src/views/index.vue
@@ -911,18 +911,20 @@
margin-top: 14px;
display: flex;
width: 100%;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
justify-content: space-between;
gap: 15px;
&:after {
content: "";
- flex: auto;
+ flex: 0 0 0;
}
-
+
.card-list-item {
- width: 320px;
- height: 127px;
+ width: 0;
+ flex: 1 1 320px;
+ max-width: 320px;
+ height: 135px;
background: rgba(242, 246, 250, 0.1);
box-sizing: border-box;
padding: 16px;
@@ -937,9 +939,9 @@
&:hover {
background: rgba(242, 246, 250, 0.15);
}
-
+
.item-left {
- margin-right: 16px;
+ margin-right: 20px;
.top-icon {
width: 73px;
@@ -965,9 +967,12 @@
font-size: 14px;
font-family: OPPOSans-Regular;
color: rgba(255, 255, 255, 0.65);
+ letter-spacing: 0.5px;
+ margin-bottom: 4px;
+
.unit {
color: rgba(255, 255, 255, 0.65);
- margin-left: 2px;
+ margin-left: 4px;
font-size: 12px;
font-weight: normal;
}
@@ -976,29 +981,31 @@
.right-value {
font-weight: 500;
font-size: 26px;
- margin-top: 4px;
+ margin-top: 6px;
font-family: OPPOSans-Medium;
color: #fff;
- line-height: 1;
+ line-height: 1.2;
+ letter-spacing: 0.5px;
}
}
.item-bottom {
display: flex;
justify-content: space-between;
- margin-top: 14px;
+ margin-top: 18px;
font-family: OPPOSans, OPPOSans;
font-weight: normal;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
- line-height: 1;
+ line-height: 1.2;
.bottom-left, .bottom-right {
display: flex;
align-items: center;
+ letter-spacing: 0.3px;
:deep(.el-icon) {
- margin-left: 4px;
+ margin-left: 6px;
font-size: 12px;
}
}
@@ -1080,7 +1087,7 @@
.themeLight {
.page {
padding: 20px;
- background: #f7f8fa;
+ background: #fff;
.card-title {
width: 132px;
@@ -1094,18 +1101,20 @@
margin-top: 14px;
display: flex;
width: 100%;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
justify-content: space-between;
gap: 15px;
&:after {
content: "";
- flex: auto;
+ flex: 0 0 0;
}
-
+
.card-list-item {
- width: 320px;
- height: 127px;
+ width: 0;
+ flex: 1 1 320px;
+ max-width: 320px;
+ height: 135px;
background: #fff;
box-sizing: border-box;
padding: 16px;
@@ -1117,7 +1126,7 @@
align-items: center;
.item-left {
- margin-right: 16px;
+ margin-right: 20px;
.top-icon {
width: 73px;
@@ -1143,9 +1152,12 @@
font-size: 14px;
font-family: OPPOSans-Regular;
color: rgba(0, 0, 0, 0.65);
+ letter-spacing: 0.5px;
+ margin-bottom: 4px;
+
.unit {
color: rgba(0, 0, 0, 0.65);
- margin-left: 2px;
+ margin-left: 4px;
font-size: 12px;
font-weight: normal;
}
@@ -1154,29 +1166,31 @@
.right-value {
font-weight: 500;
font-size: 26px;
- margin-top: 4px;
+ margin-top: 6px;
font-family: OPPOSans-Medium;
color: #333;
- line-height: 1;
+ line-height: 1.2;
+ letter-spacing: 0.5px;
}
}
.item-bottom {
display: flex;
justify-content: space-between;
- margin-top: 14px;
+ margin-top: 18px;
font-family: OPPOSans, OPPOSans;
font-weight: normal;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
- line-height: 1;
+ line-height: 1.2;
.bottom-left, .bottom-right {
display: flex;
align-items: center;
+ letter-spacing: 0.3px;
:deep(.el-icon) {
- margin-left: 4px;
+ margin-left: 6px;
font-size: 12px;
}
}
--
Gitblit v1.9.3