74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<view class="shop">
|
|
<view class="bg">
|
|
<view class="grid list">
|
|
<view class="bg-white item br16" v-for="(item, index) in 10">
|
|
<view class="u-relative">
|
|
<u-image :src="cloudPath + 'img/banner.png'" width="336" height="336" border-radius="16rpx 16rpx 0 0"></u-image>
|
|
<view class="tag u-absolute top-0 left-0 text-fff sm">
|
|
1号柜
|
|
</view>
|
|
</view>
|
|
<view class="u-p-t-16 u-p-l-16 u-p-r-16 u-m-b-20">
|
|
<view class="u-line-2">
|
|
<view class="title">孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐</view>
|
|
</view>
|
|
<view class="row-between u-m-t-20">
|
|
<view>
|
|
<price-format color="#FF0000" :price="121.99" :subscriptSize="20" :firstSize="36" :secondSize="36"></price-format>
|
|
</view>
|
|
<view>
|
|
<u-icon name="plus-circle-fill" color="#FE6004" size="54"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shop {
|
|
.bg {
|
|
height: 633rpx;
|
|
background: url(#{$cloudPath}img/banner.png) no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.list {
|
|
padding-top: 406rpx;
|
|
padding-bottom: 60rpx;
|
|
margin: 0 32rpx;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 336rpx;
|
|
|
|
.tag {
|
|
width: 120rpx;
|
|
height: 54rpx;
|
|
border-radius: 16rpx 0 16rpx 0;
|
|
background: linear-gradient( 139deg, #FFBF5F 0%, #FF9A62 100%);
|
|
padding: 6rpx 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |