|
|
@@ -106,11 +106,48 @@
|
|
|
<div class="item-icon">
|
|
|
<Icon :icon="item.icon || 'mdi:file-document-outline'" />
|
|
|
</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="text-[10px] font-bold text-slate-300 uppercase tracking-widest group-hover:text-blue-200"
|
|
|
+ >{{ item.type }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="item-body">
|
|
|
- <p class="item-name">{{ item.flowName }}</p>
|
|
|
+ <h3 class="item-name font-bold text-slate-900">
|
|
|
+ {{ item.flowName }}
|
|
|
+ </h3>
|
|
|
<p class="item-desc">{{ item.remark || "暂无描述" }}</p>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="item-time flex items-center gap-2">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="1em"
|
|
|
+ height="1em"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ >
|
|
|
+ <g
|
|
|
+ fill="none"
|
|
|
+ stroke="#f97316"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ stroke-width="1.5"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M15.362 5.214A8.252 8.252 0 0 1 12 21A8.25 8.25 0 0 1 6.038 7.047A8.3 8.3 0 0 0 9 9.601a8.98 8.98 0 0 1 3.361-6.867a8.2 8.2 0 0 0 3 2.48"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M12 18a3.75 3.75 0 0 0 .495-7.468a6 6 0 0 0-1.925 3.547a6 6 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18"
|
|
|
+ ></path>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <span class="text-[12px] text-[#babdd1]">85人使用</span>
|
|
|
+ </div>
|
|
|
+ <Icon icon="mdi-light:chevron-right" class="item-arrow w-6 h-6" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -669,7 +706,8 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
.items-grid {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
+ grid-template-columns: repeat(auto-fill, 240px);
|
|
|
+ justify-content: flex-start;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
@@ -791,6 +829,10 @@ onBeforeUnmount(() => {
|
|
|
.panel-meta {
|
|
|
text-align: left;
|
|
|
}
|
|
|
+
|
|
|
+ .items-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.total {
|
|
|
@@ -959,4 +1001,15 @@ onBeforeUnmount(() => {
|
|
|
font-size: 12px;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
+
|
|
|
+.item-arrow {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ color: #cbd5e1; /* 默认颜色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 2. 当卡片悬浮时，改变箭头的样式 */
|
|
|
+.item-card:hover .item-arrow {
|
|
|
+ color: #02409b; /* 变蓝 (使用你主题中的蓝色) */
|
|
|
+ transform: translateX(4px); /* 向右平移 4px */
|
|
|
+}
|
|
|
</style>
|
