From f7f0e44c4be8eb0e77fd310296c3b43bde21e4f9 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 14:17:01 +0800
Subject: [PATCH] 新增联动场景
---
src/views/product/components/productCard.vue | 47 ++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 44 insertions(+), 3 deletions(-)
diff --git a/src/views/product/components/productCard.vue b/src/views/product/components/productCard.vue
index 8df9f91..8d69278 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>
@@ -39,6 +48,18 @@
name: this.data.productName,
},
});
+ },
+ getColor(name) {
+ switch (name) {
+ case "绠楁硶":
+ return "red";
+ case "搴旂敤":
+ return "orange";
+ case "浜戞湇鍔�":
+ return "lightBlue";
+ case "杈圭紭璁＄畻璁惧":
+ return "blue";
+ }
},
},
};
@@ -91,6 +112,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