From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/product/components/productCard.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 47 insertions(+), 5 deletions(-)
diff --git a/src/views/product/components/productCard.vue b/src/views/product/components/productCard.vue
index 8df9f91..6645526 100644
--- a/src/views/product/components/productCard.vue
+++ b/src/views/product/components/productCard.vue
@@ -9,9 +9,18 @@
<div class="right">
<div class="name">{{ data.productName }}</div>
<div class="tagList">
- <span class="tag" v-for="(name, index) in labels" :key="index">{{
- name
- }}</span>
+ <span
+ class="tag"
+ v-for="(name, index) in labels"
+ :key="index"
+ :class="{
+ red: name === '杞欢',
+ orange: name === '搴旂敤',
+ lightBlue: name === 'SDK',
+ blue: name === '浜у搧瀵嗛挜',
+ }"
+ >{{ name }}</span
+ >
</div>
</div>
</div>
@@ -36,9 +45,21 @@
this.$router.push({
path: "/productDetail",
query: {
- name: this.data.productName,
+ id: this.data.id,
},
});
+ },
+ getColor(name) {
+ switch (name) {
+ case "绠楁硶":
+ return "red";
+ case "搴旂敤":
+ return "orange";
+ case "浜戞湇鍔�":
+ return "lightBlue";
+ case "杈圭紭璁＄畻璁惧":
+ return "blue";
+ }
},
},
};
@@ -71,12 +92,13 @@
display: flex;
img {
- margin: 0 10px;
+ margin-left: 10px;
width: 60px;
height: 60px;
}
.right {
+ margin-left: 10px;
.name {
margin-bottom: 10px;
font-size: 16px;
@@ -91,6 +113,26 @@
padding: 2px 5px;
border: 1px solid #ff5033;
color: #ff5033;
+
+ &.red {
+ color: #ff4f32;
+ border-color: #ff4f32;
+ }
+
+ &.orange {
+ color: #ff9500;
+ border-color: #ff9500;
+ }
+
+ &.lightBlue {
+ color: #00bee7;
+ border-color: #00bee7;
+ }
+
+ &.blue {
+ color: #0064ff;
+ border-color: #0064ff;
+ }
}
}
}
--
Gitblit v1.8.0