1
This commit is contained in:
@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<view class="flex-row-start info-cell good-info" :class="{'good-info-multi' : data.length > 1}">
|
||||
<template v-if="data.length === 1">
|
||||
<image class="good-icon" :src="data[0].product_pic" mode="aspectFill" @click="$emit('clickGoodImg', data[0])" />
|
||||
<view class="good-content" @click="$emit('clickGoodInfo', data[0])">
|
||||
<view class="goods-row-first">
|
||||
<view class="goods-name">{{ data[0].goods_name || "" }}</view>
|
||||
<text class="goods-price">¥{{ data[0].goods_price || data[0].product_actual_price }}</text>
|
||||
</view>
|
||||
<view class="goods-row-second">
|
||||
<view class="goods-spec">
|
||||
{{ data[0].shuxing_name || "" }}{{ data[0].shuxing_name && data[0].price_name ? ";" : "" }}{{ data[0].price_name || "" }}
|
||||
<view class="good-wrapper">
|
||||
<image class="good-icon" :src="data[0].product_pic" mode="aspectFill" @click="$emit('clickGoodImg', data[0])" />
|
||||
<view class="price-section">
|
||||
<view class="price-left">
|
||||
<text class="hand-price-tag">到手价</text>
|
||||
<text class="current-price">¥{{ data[0].goods_price || data[0].product_actual_price }}</text>
|
||||
<text class="origin-price" v-if="data[0].product_original_price">原价¥{{ data[0].product_original_price }}</text>
|
||||
</view>
|
||||
<text class="goods-count">共{{ data[0].number || 1 }}件</text>
|
||||
<text class="goods-count">已售{{ data[0].number || 1 }}件</text>
|
||||
</view>
|
||||
<view class="goods-name" @click="$emit('clickGoodInfo', data[0])">
|
||||
{{ data[0].goods_name || "" }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -81,71 +82,67 @@
|
||||
|
||||
&.good-info {
|
||||
padding-top: 20rpx;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.good-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.good-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
.good-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
.goods-row-first {
|
||||
.good-icon {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.price-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.price-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
align-items: baseline;
|
||||
|
||||
.goods-name {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
line-height: 40rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 20rpx;
|
||||
.hand-price-tag {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #FF19A0, #FF6B35);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
font-weight: 500;
|
||||
.current-price {
|
||||
font-size: 40rpx;
|
||||
color: #FF19A0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.origin-price {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-row-second {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-spec {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.goods-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
line-height: 44rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.good-info-more {
|
||||
@ -177,4 +174,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user