139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<script setup>
|
||
import { ref} from "vue"
|
||
// type：category-分类 ； list：内容列表
|
||
const props = defineProps(['type','info',"noPrice"]);
|
||
</script>
|
||
<template>
|
||
<view class="goodsInfoBox">
|
||
<!-- 展示方式1 上下结构-->
|
||
<view class="showtype1 " v-if="type==1">
|
||
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
||
<image style="width: 100%;border-radius: 5px;" :style="{ height: info && info.goods_image?'340rpx':'340rpx'}" :src="info?.goods_image" mode="aspectFill"></image>
|
||
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
||
<view class="g-desc">
|
||
{{info?.desc}}
|
||
</view>
|
||
<view class="g-buy-box">
|
||
<view class="g-price-box">
|
||
<view class="g-price">￥{{info?.sell_price}}</view>
|
||
<view class="g-price-o" v-if="info?.market_price">
|
||
￥{{info?.market_price}}
|
||
</view>
|
||
</view>
|
||
<slot name="btn"></slot>
|
||
</view>
|
||
</view>
|
||
<!-- 展示方式2 左右结构-->
|
||
<view class="showtype2 " v-else>
|
||
<view class="gcb-list-card-img-box">
|
||
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
||
<!-- <image :src="info?.goods_image" style="width: 100%;" :style="{ height: info && info.goods_image?'':'100rpx'}" mode="widthFix"></image> -->
|
||
<image :src="info?.goods_image" style="width: 100%;" mode="widthFix"></image>
|
||
</view>
|
||
<view class="gcb-list-card-info-box">
|
||
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
||
<view class="g-desc">
|
||
{{info?.desc}}
|
||
</view>
|
||
<view class="g-buy-box">
|
||
<view class="g-price-box" v-if="!noPrice">
|
||
<view class="g-price">￥{{info?.sell_price}}</view>
|
||
<view class="g-price-o" v-if="info?.market_price">
|
||
￥{{info?.market_price}}
|
||
</view>
|
||
</view>
|
||
<slot name="btn"></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<style lang="scss">
|
||
.gcb-list-card-info-box{
|
||
width: 70%;
|
||
}
|
||
.showtype2{
|
||
display: flex;
|
||
.gcb-list-card-img-box{
|
||
// width: 30%;
|
||
// padding: 20rpx;
|
||
max-height: 200rpx;
|
||
max-width: 200rpx;
|
||
width: 30%;
|
||
border: 1px solid #ececec;
|
||
overflow: hidden;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
max-height: 200rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
}
|
||
}
|
||
.g-buy-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.g-cart{
|
||
image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.g-price-box{
|
||
color: #FD5B4E;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
.g-price{
|
||
font-size: 36rpx;
|
||
margin-right: 10rpx;
|
||
font-weight: 600;
|
||
}
|
||
.g-price-o{
|
||
color: gray;
|
||
font-size: 28rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
|
||
.g-desc{
|
||
color: gray;
|
||
font-size: 28rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
.g-show-name{
|
||
margin-top: 20rpx;
|
||
font-weight: bolder;
|
||
}
|
||
.gcb-title{
|
||
background: linear-gradient(0deg, #82c8ea, #abdef4);
|
||
color: white;
|
||
padding: 16rpx 0;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
.gcb-list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
.gcb-list-card{
|
||
// padding: 20rpx;
|
||
width: 48%;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
.goods-card-box{
|
||
background: white;
|
||
border: 2rpx solid #82c8ea;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
.category-box{
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |