|
|
|
|
@ -1,12 +1,53 @@
|
|
|
|
|
<template>
|
|
|
|
|
<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList"></u-swiper>
|
|
|
|
|
<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height"
|
|
|
|
|
:list="swiperList"></u-swiper>
|
|
|
|
|
<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">热门推荐</u-divider>
|
|
|
|
|
<view class="wrap">
|
|
|
|
|
<u-waterfall v-model="flowList" ref="uWaterfall1">
|
|
|
|
|
<template v-slot:left="{leftList}">
|
|
|
|
|
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
{{item.title}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="price-item">
|
|
|
|
|
<view class="demo-price">
|
|
|
|
|
{{item.price}}元
|
|
|
|
|
</view>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
/份
|
|
|
|
|
</view>
|
|
|
|
|
<image class="carimg" :src="carimg"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:right="{rightList}">
|
|
|
|
|
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
{{item.title}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="price-item">
|
|
|
|
|
<view class="demo-price">
|
|
|
|
|
{{item.price}}元
|
|
|
|
|
</view>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
/份
|
|
|
|
|
</view>
|
|
|
|
|
<image class="carimg" :src="carimg"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
</u-waterfall>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import {
|
|
|
|
|
ref
|
|
|
|
|
} from 'vue';
|
|
|
|
|
//购物车图片
|
|
|
|
|
const carimg = ref('/static/goodscar.png')
|
|
|
|
|
//轮播图高度
|
|
|
|
|
const height = ref('400')
|
|
|
|
|
//是否显示面板指示点
|
|
|
|
|
@ -25,6 +66,38 @@
|
|
|
|
|
}, {
|
|
|
|
|
image: '/static/swiper_3.png'
|
|
|
|
|
}])
|
|
|
|
|
//瀑布流数据
|
|
|
|
|
const flowList = ref([{
|
|
|
|
|
price: 75,
|
|
|
|
|
title: '小炒肉盖饭',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 385,
|
|
|
|
|
title: '手拉面',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 784,
|
|
|
|
|
title: '小笼包',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 7891,
|
|
|
|
|
title: '馄饨',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 2341,
|
|
|
|
|
title: '香菇肉片盖饭',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 2342,
|
|
|
|
|
title: '番茄鸡蛋盖饭',
|
|
|
|
|
image: '/static/swiper_1.png'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
@ -53,4 +126,86 @@
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #8f8f94;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap {
|
|
|
|
|
padding: 0px 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-warter {
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.u-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 32rpx;
|
|
|
|
|
right: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-title {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
color: $u-main-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-tag {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-tag-owner {
|
|
|
|
|
background-color: $u-type-error;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 4rpx 14rpx;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-tag-text {
|
|
|
|
|
border: 1px solid $u-type-primary;
|
|
|
|
|
color: $u-type-primary;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
padding: 4rpx 14rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-price {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #FF7670;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-shop {
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
color: $u-tips-color;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.price-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carimg {
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
margin-top: 5rpx;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
