|
@@ -14,9 +14,10 @@
|
|
|
<!-- 热门商品示意 -->
|
|
<!-- 热门商品示意 -->
|
|
|
<div class="goods-preview">
|
|
<div class="goods-preview">
|
|
|
<div class="goods-item" v-for="item in goods" :key="item.id">
|
|
<div class="goods-item" v-for="item in goods" :key="item.id">
|
|
|
- <div class="goods-emoji">{{ item.emoji }}</div>
|
|
|
|
|
|
|
+ <img v-if="item.img" :src="item.img" class="goods-img" />
|
|
|
|
|
+ <span v-else class="goods-emoji">{{ item.emoji }}</span>
|
|
|
<div class="goods-name">{{ item.name }}</div>
|
|
<div class="goods-name">{{ item.name }}</div>
|
|
|
- <div class="goods-points">{{ item.points }} 积分</div>
|
|
|
|
|
|
|
+ <!-- <div class="goods-points">{{ item.points }} 积分</div> -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -46,9 +47,9 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
goods: [
|
|
goods: [
|
|
|
- { id: 1, emoji: '☕', name: '精品咖啡', points: 50 },
|
|
|
|
|
- { id: 2, emoji: '🎧', name: '无线耳机', points: 800 },
|
|
|
|
|
- { id: 3, emoji: '🧴', name: '护肤套装', points: 300 },
|
|
|
|
|
|
|
+ { id: 1, img: require('@/assets/image/logo-simple.png'), name: '纪念品', points: 50 },
|
|
|
|
|
+ { id: 2, emoji: '🎧', name: '生活用品', points: 800 },
|
|
|
|
|
+ { id: 3, emoji: '🧴', name: '数码产品', points: 300 },
|
|
|
],
|
|
],
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -86,7 +87,18 @@ export default {
|
|
|
transition: all 0.25s;
|
|
transition: all 0.25s;
|
|
|
}
|
|
}
|
|
|
.goods-item:hover { background: #fff4ec; transform: translateY(-2px); }
|
|
.goods-item:hover { background: #fff4ec; transform: translateY(-2px); }
|
|
|
-.goods-emoji { font-size: 26px; margin-bottom: 6px; }
|
|
|
|
|
|
|
+.goods-emoji {
|
|
|
|
|
+ font-size: 26px;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-img {
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+}
|
|
|
.goods-name { font-size: 12px; color: #4e5969; font-weight: 500; margin-bottom: 4px; }
|
|
.goods-name { font-size: 12px; color: #4e5969; font-weight: 500; margin-bottom: 4px; }
|
|
|
.goods-points { font-size: 12px; color: #f76b1c; font-weight: 700; }
|
|
.goods-points { font-size: 12px; color: #f76b1c; font-weight: 700; }
|
|
|
</style>
|
|
</style>
|