|
|
@@ -0,0 +1,339 @@
|
|
|
+<template>
|
|
|
+ <view class="takeout-index iPhone-bottom flex-common-css box-border-box">
|
|
|
+ <view class="bg-index"></view>
|
|
|
+
|
|
|
+ <view class="">
|
|
|
+ <Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
|
|
|
+ <template>
|
|
|
+ <view slot="custom" class="">
|
|
|
+ <view class="align-items-center mb-28 s-input-f">
|
|
|
+ <uni-icons type="left" size="20"></uni-icons>
|
|
|
+ <view v-if="!isScroll" class="fs-40 ml-10 fw-600">外卖</view>
|
|
|
+ <view v-else class="s-input s-input-c" :class="isScroll?'w-454':'w-100100'">
|
|
|
+ <view class="input-icon s-left">
|
|
|
+ <uni-icons type="search" size="22" color="#999"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <input v-model="search" type="text" placeholder="请输入商家或者商品名称">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </Nav>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower" @scroll="scrollFun">
|
|
|
+ <view class="">
|
|
|
+ <view class="s-input box-border-box plr-24">
|
|
|
+ <view class="input-icon">
|
|
|
+ <uni-icons type="search" size="22" color="#999"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <input v-model="search" type="text" placeholder="请输入商家或者商品名称">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-border-box plr-24">
|
|
|
+ <view class="shop-box mb-32 box-border-box p-16">
|
|
|
+ <image class="shop-box-bg" src="@/static/img/takeout/bg.png" mode="scaleToFill"></image>
|
|
|
+
|
|
|
+ <swiper class="swiper-tj" :circular='false'
|
|
|
+ indicator-active-color='#FF7F00' indicator-color='#FDC583'
|
|
|
+ :indicator-dots="false"
|
|
|
+ :autoplay="true" :interval="3000" :duration="300">
|
|
|
+ <swiper-item v-for="(item,i) in 4" :key="i">
|
|
|
+ <view class="swiper-item display-flex">
|
|
|
+ <image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
+ <view class="right-box flex-1">
|
|
|
+ <view class="align-items-center mb-8">
|
|
|
+ <view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
|
|
|
+ <image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center mb-12">
|
|
|
+ <image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
|
|
|
+ <view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
|
|
|
+ <view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
|
|
|
+ <view class="fc-6 fs-24 mr-12">855人购买</view>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center flex-wrap-wrap">
|
|
|
+ <view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
|
|
|
+ <view class="quan-list-1 fs-24 fc-f">券</view>
|
|
|
+ <view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-border-box plr-24 nav-type-box-f" :class="isScroll?'nav-bg':''">
|
|
|
+ <view class="nav-type-box" >
|
|
|
+ <view class="nav-type-list">
|
|
|
+ <image src="@/static/img/takeout/all.png" mode=""></image>
|
|
|
+ <view class="fs-24 fw-400 text-align-center">全部</view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-type-list" v-for="(item,i) in navList" :key="i">
|
|
|
+ <image :src="item.img" mode=""></image>
|
|
|
+ <view class="fs-24 fw-400">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="box-border-box plr-24 mt-24">
|
|
|
+ <view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in 10">
|
|
|
+ <image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
+ <view class="flex-1">
|
|
|
+ <view class="align-items-center mb-8">
|
|
|
+ <view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
|
|
|
+ <image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center mb-8">
|
|
|
+ <image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
|
|
|
+ <view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
|
|
|
+ <view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
|
|
|
+ <view class="fc-6 fs-24 mr-12">855人购买</view>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center flex-wrap-wrap">
|
|
|
+ <view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
|
|
|
+ <view class="quan-list-1 fs-24 fc-f">券</view>
|
|
|
+ <view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-items-list display-flex">
|
|
|
+ <view class="goods-items-list-box" v-for="(info,i) in 10">
|
|
|
+ <image class="mb-12" src="@/static/img/my/bg.png" mode=""></image>
|
|
|
+ <view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">AAAAAAAAAAAAAA</view>
|
|
|
+ <view class="">
|
|
|
+ <span class="fs-24 fc-FB3D03">￥</span>
|
|
|
+ <span class="fs-32 fc-FB3D03 fw-b">3.99</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ search:'',
|
|
|
+ isScroll:false,
|
|
|
+ navList:[{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
|
|
|
+ {name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ scrollFun(e){
|
|
|
+ if(e.target.scrollTop>50){
|
|
|
+ this.isScroll = true;
|
|
|
+ }else{
|
|
|
+ this.isScroll = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scrolltolower(){
|
|
|
+ console.log('触底');
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .takeout-index{
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .s-input-f{
|
|
|
+ position: relative;
|
|
|
+ .s-input-c{
|
|
|
+ position: absolute;
|
|
|
+ top: -16rpx;
|
|
|
+ left: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-index{
|
|
|
+ width: 100%;
|
|
|
+ height: 272rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-image: linear-gradient(#E0F6FB,#F5F4F9);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w-100100{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .w-454{
|
|
|
+ width: 454rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-input{
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .s-left{
|
|
|
+ left: 24rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-icon{
|
|
|
+ position: absolute;
|
|
|
+ left: 44rpx;
|
|
|
+ top: 16rpx;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ font-size: 32rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx 0 78rpx;
|
|
|
+ border: 1rpx solid #41ABF5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shop-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 242rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .shop-box-bg{
|
|
|
+ width: 100%;
|
|
|
+ height: 242rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .swiper-tj{
|
|
|
+ width: 100%;
|
|
|
+ height: 172rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .swiper-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16rpx;
|
|
|
+ .left-img{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 14rpx
|
|
|
+ }
|
|
|
+ .right-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-bg{
|
|
|
+ background-image: linear-gradient(#F0F4FA,#FFFFFF);
|
|
|
+ padding: 24rpx !important;
|
|
|
+ }
|
|
|
+ .nav-type-box-f{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ .nav-type-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ display: flex;
|
|
|
+ overflow: scroll;
|
|
|
+ .nav-type-list{
|
|
|
+ height: 120rpx;
|
|
|
+ width: 96rpx !important;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 44rpx;
|
|
|
+ image{
|
|
|
+ display: block;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 0 8rpx 12rpx 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .goos-list-box{
|
|
|
+ width: 100%;
|
|
|
+ min-height: 428rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .goods-items-list{
|
|
|
+ width: 530rpx;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .goods-items-list-box{
|
|
|
+ width: 140rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ image{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 12rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-img{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ .img-x{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ .right-box-title{
|
|
|
+ width: 438rpx;
|
|
|
+ }
|
|
|
+ .right-box-title-img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ .quan-list{
|
|
|
+ .quan-list-1{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ background: #FB3D03;
|
|
|
+ border-radius: 5rpx 0rpx 0rpx 5rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .quan-list-2{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 2rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ border-radius: 0 5rpx 5rpx 0;
|
|
|
+ border: 1rpx solid #FB3D03;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
