<template>
<!-- 最外层 -->
<view class="wrap">
<view class="lop-body" v-for="(item, index) in itemList" :key="index">
<!-- 这个是商品照片的view -->
<view class="shop-img align-item">
<image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1203587137,3358948703&fm=27&gp=0.jpg"></image>
<view class="count center"><text class="center" style="margin-left: 11upx;">距离结束: 28:23</text></view>
</view>
<view class="shop-details">
<!-- 这个是商品的名称 -->
<view class="shop-name">
<text>{{ item.name }}</text>
</view>
<!-- 商品的服务和保障 -->
<view class="service-assurance">
<text v-if="item.isemail" class="email email-back">鉴定中</text>
<text v-if="item.isback" class="back email-back">已鉴定</text>
</view>
<!-- 介绍底部的价格和状态 -->
<view class="grace-space-between price-state">
<!-- 价格 -->
<view class="left-content"></view>
<!-- 状态 -->
<view class="right-content"><text class="undone">拍品详情</text></view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
itemList: [
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: false,
isback: true
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: false
},
{
name: '清光绪白底轧道五彩海八怪纹葵口水仙盆',
isemail: true,
isback: true
}
]
};
}
};
</script>
<style>
.wrap {
width: 750upx;
background-color: #ffffff;
margin-top: 10upx;
}
.wrap .lop-body {
display: flex;
flex-direction: row;
align-items: center;
width: 750upx;
height: 230upx;
}
.wrap .lop-body .shop-details {
display: flex;
flex-direction: column;
align-items: center;
}
.service-assurance {
height: 50upx;
width: 420upx;
display: flex;
align-items: center;
flex-direction: row;
}
.wrap .lop-body .shop-details .shop-name {
color: #333333;
font-size: 30upx;
font-weight: bold;
width: 420upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
/* 居中 */
.align-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wrap .lop-body .shop-img {
width: 300upx;
height: 230upx;
position: relative;
}
.center {
display: flex;
line-height: 40upx;
}
.wrap .lop-body .shop-img .count {
background-color: #b71e2f;
color: #ffffff;
font-size: 18upx;
width: 240upx;
height: 40upx;
border-bottom-left-radius: 10upx;
border-bottom-right-radius: 10upx;
position: absolute;
top: 171upx;
left: 34upx;
}
.wrap .lop-body .shop-img image {
width: 240upx;
height: 190upx;
border-radius: 10upx;
margin-left: 6upx;
}
.service-assurance image {
width: 30upx;
height: 34upx;
}
/* 包邮 */
.service-assurance .email {
color: #a92020;
}
/* 包退 */
.service-assurance .back {
color: #999999;
}
/* 包邮 包退的样式 */
.email-back {
font-size: 18upx;
font-weight: 500;
margin: 0 6upx;
}
/* 底部价格和状态 */
.price-state {
width: 420upx;
height: 30upx;
}
.price-state .left-content {
color: #ff4400;
font-size: 20upx;
font-weight: 500;
}
.price-state .left-content .price-number {
font-size: 30upx;
}
.price-state .right-content {
font-size: 20upx;
font-weight: 500;
}
.right-content .undone {
color: #b09158;
}
</style>