From edef6ae8f59823258ce610c9074d32e698958b51 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 28 七月 2022 15:30:44 +0800
Subject: [PATCH] 本地图片适配
---
src/views/product/components/productCard.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 48 insertions(+), 6 deletions(-)
diff --git a/src/views/product/components/productCard.vue b/src/views/product/components/productCard.vue
index 8df9f91..1f4df4f 100644
--- a/src/views/product/components/productCard.vue
+++ b/src/views/product/components/productCard.vue
@@ -9,15 +9,24 @@
<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>
<div class="des">{{ data.description }}</div>
<Price :priceNew="data.priceBase"></Price>
- <div class="button" @click="buyProduct">绔嬪嵆璐拱</div>
+ <div class="button" @click="buyProduct">绔嬪嵆瀹夎</div>
</div>
</template>
@@ -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