123
This commit is contained in:
zpc
parent
d534aa8269
commit
f691d86c72
203
components/detail-list-item/detail-list-item.vue
Normal file
203
components/detail-list-item/detail-list-item.vue
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<view class="res-item" @click="handleItemClick">
|
||||
<view class="pic center">
|
||||
<image :src="item.imgurl" lazy-load mode="aspectFill"></image>
|
||||
<view class="tag center"
|
||||
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
|
||||
{{ item.shang_info ? item.shang_info.title : "" }}
|
||||
</view>
|
||||
<view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||||
<!-- 预售标签 -->
|
||||
<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
|
||||
<!-- 售罄遮罩 -->
|
||||
<view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
|
||||
<text>售罄</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<view class="item-title hang1">
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="item-probability hang1">
|
||||
<text>{{ item.pro }}</text>
|
||||
</view>
|
||||
<view class="item-price hang1">
|
||||
<text>售价：<text style="font-size: 21rpx;">￥</text>{{ item.sc_money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DetailListItem',
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 商品数据项
|
||||
* @property {string} id - 商品ID
|
||||
* @property {string} imgurl - 商品图片地址
|
||||
* @property {string} title - 商品标题
|
||||
* @property {string} pro - 商品概率
|
||||
* @property {string|number} price - 商品价格
|
||||
* @property {number} surplus_stock - 剩余库存
|
||||
* @property {number} stock - 总库存
|
||||
* @property {Object} shang_info - 商品标签信息
|
||||
* @property {string} shang_info.title - 标签标题
|
||||
* @property {string} shang_info.color - 标签背景色
|
||||
*/
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 处理点击事件
|
||||
* 将点击事件与数据项一起传递给父组件
|
||||
*/
|
||||
handleItemClick() {
|
||||
this.$emit('click', this.item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.res-item {
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s ease;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
background: #d8d8d8;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
min-width: 90rpx;
|
||||
height: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 18rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-probability {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #f39205;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// 售罄遮罩
|
||||
.sold-out-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 10;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.yu-tag {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #ff873a;
|
||||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
components/detail-list-item/usage-example.vue
Normal file
130
components/detail-list-item/usage-example.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="title">商品列表示例</view>
|
||||
|
||||
<!-- 网格布局的列表 -->
|
||||
<view class="grid-list">
|
||||
<detail-list-item
|
||||
v-for="(item, index) in productList"
|
||||
:key="item.id || index"
|
||||
:item="item"
|
||||
@click="onItemClick"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 点击信息展示 -->
|
||||
<view class="click-info" v-if="selectedItem">
|
||||
<view class="info-title">您点击了：</view>
|
||||
<view class="info-content">{{ selectedItem.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DetailListItem from './detail-list-item.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DetailListItem
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedItem: null,
|
||||
productList: [
|
||||
{
|
||||
id: '1',
|
||||
imgurl: '/static/img/product1.jpg',
|
||||
title: '限定款手办',
|
||||
pro: '中奖概率 10%',
|
||||
price: '299.00',
|
||||
surplus_stock: 10,
|
||||
stock: 100,
|
||||
shang_info: {
|
||||
title: 'SSR',
|
||||
color: '#FF5722'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
imgurl: '/static/img/product2.jpg',
|
||||
title: '精美钥匙扣',
|
||||
pro: '中奖概率 30%',
|
||||
price: '39.00',
|
||||
surplus_stock: 50,
|
||||
stock: 200,
|
||||
shang_info: {
|
||||
title: 'SR',
|
||||
color: '#9C27B0'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
imgurl: '/static/img/product3.jpg',
|
||||
title: '主题明信片',
|
||||
pro: '中奖概率 60%',
|
||||
price: '12.00',
|
||||
surplus_stock: 0,
|
||||
stock: 300,
|
||||
shang_info: {
|
||||
title: 'R',
|
||||
color: '#2196F3'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 处理商品点击事件
|
||||
onItemClick(item) {
|
||||
console.log('点击了商品:', item);
|
||||
this.selectedItem = item;
|
||||
|
||||
// 在实际应用中，这里可以弹出详情框或导航到详情页
|
||||
uni.showToast({
|
||||
title: `已选择: ${item.title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20rpx;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.click-info {
|
||||
margin-top: 40rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.info-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,32 +32,12 @@
|
|||
</view>
|
||||
<!-- 赏品列表内容 -->
|
||||
<view class="res-list" v-else>
|
||||
<view class="res-item" v-for="(item, i) in children" :key="item.id || i"
|
||||
@click.stop="handleItemClick(item)">
|
||||
<view class="pic center">
|
||||
<image :src="item.imgurl" lazy-load mode="aspectFill"></image>
|
||||
<view class="tag center"
|
||||
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
|
||||
{{ item.shang_info ? item.shang_info.title : "" }}
|
||||
</view>
|
||||
<view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||||
<!-- 售罄遮罩 -->
|
||||
<view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
|
||||
<text>售罄</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<view class="item-title hang1">
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="item-probability hang1">
|
||||
<text>{{ item.pro }}</text>
|
||||
</view>
|
||||
<view class="item-price hang1">
|
||||
<text>售价：{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<detail-list-item
|
||||
v-for="(item, i) in children"
|
||||
:key="item.id || i"
|
||||
:item="item"
|
||||
@click="handleItemClick"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
|
@ -90,10 +70,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import DetailListItem from '@/components/detail-list-item/detail-list-item.vue';
|
||||
|
||||
export default {
|
||||
name: 'DetailPreviewPopup',
|
||||
|
||||
components: {
|
||||
DetailListItem
|
||||
},
|
||||
|
||||
props: {
|
||||
// 商品标题
|
||||
title: {
|
||||
|
|
@ -405,89 +390,6 @@ export default {
|
|||
grid-template-columns: repeat(3, 33%);
|
||||
gap: 20rpx 8rpx;
|
||||
justify-content: center;
|
||||
|
||||
.res-item {
|
||||
width: 180rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
background: #d8d8d8;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
min-width: 90rpx;
|
||||
height: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 18rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-probability {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #f39205;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
padding: 0 2%;
|
||||
margin: 1rpx 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -683,7 +585,6 @@ export default {
|
|||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="center relative" style="z-index: 10;" :style="{top:$sys().statusBarHeight+'px'}">
|
||||
<text class=""
|
||||
style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "") }}</text>
|
||||
<view class="center relative" style="z-index: 10;" :style="{ top: $sys().statusBarHeight + 'px' }">
|
||||
<text class="" style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "")
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="header relative" v-if="pageData && pageData.goods"
|
||||
:style="{background:'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%',}">
|
||||
:style="{ background: 'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%', }">
|
||||
|
||||
<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
|
||||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||||
|
|
@ -25,10 +25,8 @@
|
|||
|
||||
<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
|
||||
|
||||
<view class="header-suoxiang center" v-if="
|
||||
pageData.goods.lock_is == 1 &&
|
||||
pageData.lock_info.goods_lock_surplus_time > 0
|
||||
">
|
||||
<view class="header-suoxiang center"
|
||||
v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
|
||||
<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
|
||||
<view class="hidden ml10">{{
|
||||
pageData.lock_info.goods_lock_user_nickname
|
||||
|
|
@ -38,7 +36,7 @@
|
|||
</view>
|
||||
|
||||
<view class="header-title center"
|
||||
:style="{background:'url(' +$img1('common/chouTitle.png') +') no-repeat 0 0 / 100% 100%',}">
|
||||
:style="{ background: 'url(' + $img1('common/chouTitle.png') + ') no-repeat 0 0 / 100% 100%', }">
|
||||
<text>
|
||||
<template></template>
|
||||
</text>
|
||||
|
|
@ -74,11 +72,12 @@
|
|||
<text :style="{ width: '80%' }"></text>
|
||||
</view>
|
||||
<view class="align-center" v-if="pageData.goods">
|
||||
<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{pageData.goods.stock}}箱
|
||||
<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{ pageData.goods.stock }}箱
|
||||
</view>
|
||||
<view style="margin-left: 58rpx;">赏品余量</view>
|
||||
<view class="align-center">
|
||||
<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{ pageData.goods.goodslist_stock}}
|
||||
<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{
|
||||
pageData.goods.goodslist_stock }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -90,29 +89,8 @@
|
|||
</view>
|
||||
<!-- 赏品列表 -->
|
||||
<view class="list">
|
||||
<view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
|
||||
<view class="pic center relative">
|
||||
<image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
|
||||
<view class="type-tag center" :style="{
|
||||
background: item.shang_info ? item.shang_info.color : '#FFFFFF',
|
||||
}">
|
||||
{{ item.shang_info ? item.shang_info.title : "" }}
|
||||
</view>
|
||||
<view class="num center bgfff">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||||
<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
|
||||
<view v-if="item.surplus_stock <= 0" class="shadow center">
|
||||
<image :src="$img1('common/sold_out.png')"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title hang1">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="desc">{{ item.pro }}</view>
|
||||
<view class="price">
|
||||
<text>售价:￥ <text style="font-size: 24rpx">{{ item.sc_money }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item"
|
||||
@click="previewDetail" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -195,11 +173,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
|
||||
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
|
||||
import DetailListItem from '@/components/detail-list-item/detail-list-item.vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
OrderConfirmPopup
|
||||
OrderConfirmPopup,
|
||||
DetailListItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -323,7 +303,7 @@
|
|||
|
||||
methods: {
|
||||
previewDetail(item) {
|
||||
console.log(item,this.pageData);
|
||||
console.log(item);
|
||||
// 使用全局方法调用预览弹窗
|
||||
this.$preview({
|
||||
productType: this.optData.type_text,
|
||||
|
|
@ -715,11 +695,11 @@
|
|||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navLeft {
|
||||
.navLeft {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
|
|
@ -731,9 +711,9 @@
|
|||
font-size: 50rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
padding: 0 0 300rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
|
|
@ -948,110 +928,8 @@
|
|||
.list {
|
||||
padding: 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 210rpx);
|
||||
gap: 30rpx 30rpx;
|
||||
|
||||
.list-item {
|
||||
width: 210rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.pic {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #3b3941;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
.pic-img {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
// border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 12rpx;
|
||||
border-radius: 18rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
min-width: 78rpx;
|
||||
height: 38rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
padding: 0 10rpx;
|
||||
transform: translateX(-50%);
|
||||
bottom: 8rpx;
|
||||
border-radius: 18rpx;
|
||||
min-width: 66rpx;
|
||||
height: 38rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.yu-tag {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #ff873a;
|
||||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
|
||||
#fff 0 -1px 0;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 24rpx;
|
||||
|
||||
>image {
|
||||
width: 84.93rpx;
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 28rpx 10rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 24rpx 10rpx 0;
|
||||
font-size: 18rpx;
|
||||
font-weight: 300;
|
||||
color: #f39205;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 24rpx 10rpx 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
grid-template-columns: repeat(3, 31.5%);
|
||||
gap: 30rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1505,5 +1383,5 @@
|
|||
height: 1624rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user