|
|
@@ -1,20 +1,125 @@
|
|
|
<template>
|
|
|
<view class="index-box">
|
|
|
- <Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
|
|
|
- <template>
|
|
|
- <view slot="custom" class="align-items-center">
|
|
|
- <uni-icons type="location-filled" size="20"></uni-icons>
|
|
|
- <view class="fs-32 fw-600 ml-10">重庆邮电大学...</view>
|
|
|
- <image class="nav-icon ml-10" src="@/static/img/index/index-right.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </Nav>
|
|
|
-
|
|
|
<image class="bg-img" src="@/static/img/index/index-bg.png" mode="aspectFit"></image>
|
|
|
|
|
|
+ <view class="">
|
|
|
+ <Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
|
|
|
+ <template>
|
|
|
+ <view slot="custom" class="align-items-center">
|
|
|
+ <uni-icons type="location-filled" size="20"></uni-icons>
|
|
|
+ <view class="fs-32 fw-600 ml-10">重庆邮电大学...</view>
|
|
|
+ <image class="nav-icon ml-10" src="@/static/img/index/index-right.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </Nav>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="index-box-1 box-border-box plr-24">
|
|
|
- 11111111111111
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <view class="index-search box-border-box" :style="[{'top': BarH + 'px','background':bgckgroundSearch}]">
|
|
|
+ <view class="index-search-box box-border-box align-items-center">
|
|
|
+ <uni-icons type="search" size="20" color="#000"></uni-icons>
|
|
|
+ <view class="fs-28 fc-9 ml-10">搜索店铺名称或者商品名称</view>
|
|
|
+ <view class="fs-28 fc-f index-search-box-buttom">搜索</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="index-box-1 ">
|
|
|
+ <!-- 轮播 -->
|
|
|
+ <view class="box-border-box plr-24">
|
|
|
+ <swiper class="swiper mb-32 " circular indicator-dots indicator-active-color="#4FB3EF" :autoplay="true" :interval="3000" :duration="500">
|
|
|
+ <swiper-item v-for="(item,i) in 3" :key="i">
|
|
|
+ <view class="swiper-item">A</view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 导航 -->
|
|
|
+ <view class="box-border-box plr-24">
|
|
|
+ <view class="nav-list flex-wrap-wrap box-border-box mb-22">
|
|
|
+ <view class="nav-list-item" v-for="(item,i) in navList" :key="i">
|
|
|
+ <image :src="item.img" mode="aspectFit"></image>
|
|
|
+ <view class="fs-26 fc-3 text-align-center">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 通知 -->
|
|
|
+ <view class="box-border-box plr-24">
|
|
|
+ <view class="msg-box align-items-center box-border-box mb-32">
|
|
|
+ <image class="image-1" src="@/static/img/index/index-tz.png" mode="scaleToFill"></image>
|
|
|
+ <view class="box-1 fs-20 fc-41ABF5">公告</view>
|
|
|
+ <swiper class="tz-swiper" :vertical="true" circular :autoplay="true" :interval="3000" :duration="500">
|
|
|
+ <swiper-item v-for="(item,i) in 3" :key="i">
|
|
|
+ <view class="tz-swiper-item">AAAAAAAAAAAAAAAAAAAAA</view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <image class="image-2" src="@/static/img/toRight.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 限时秒杀 -->
|
|
|
+ <view class="box-border-box plr-24">
|
|
|
+ <view class="xsms-box mb-32">
|
|
|
+ <image class="image-title" src="@/static/img/index/index-xsms.png" mode="scaleToFill"></image>
|
|
|
+ <view class="xsms-box-list-f box-border-box plr-12">
|
|
|
+ <view class="xsms-box-list display-flex ">
|
|
|
+ <view class="xsms-box-list-item box-border-box p-8" v-for="(item,i) in 10" :key="i">
|
|
|
+ <image class="xsms-box-list-item-img-1 mb-4" src="../../static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
+ <view class="text-overflow-ellipsis-one fs-26 mb-4">AAAAAAAAAAAAAAAAAAAAAA</view>
|
|
|
+ <view class="mb-4">
|
|
|
+ <span class="fs-20 fw-b fc-FB3D03">￥</span><span class="fs-32 fw-b fc-FB3D03">29.99</span>
|
|
|
+ </view>
|
|
|
+ <view class="fs-20 fc-9 text-line-through">￥3300</view>
|
|
|
+ <image class="xsms-box-list-item-img-2" src="@/static/img/index/index-q.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 类型选择 -->
|
|
|
+ <view class="type-list-box display-flex" :style="[{'top': (BarH + 38) + 'px','background':bgckgroundType}]">
|
|
|
+ <view class="type-item-box view-nowrap" :class="type==item.id?'s-type':'n-type'" v-for="(item,i) in typeList" :key="i">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="box-border-box plr-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>
|
|
|
</view>
|
|
|
|
|
|
@@ -24,16 +129,62 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ BarH:0,
|
|
|
bgckgroundBox:'transparent',
|
|
|
+ bgckgroundSearch:'',
|
|
|
+ bgckgroundType:'',
|
|
|
+ navList:[
|
|
|
+ {name:"外卖",img:require('@/static/img/index/index-wm.png'),},
|
|
|
+ {name:"代取",img:require('@/static/img/index/index-dq.png'),},
|
|
|
+ {name:"校友圈",img:require('@/static/img/index/index-xyq.png'),},
|
|
|
+ {name:"团购",img:require('@/static/img/index/index-tg.png'),},
|
|
|
+ {name:"票务",img:require('@/static/img/index/index-pw.png'),},
|
|
|
+ {name:"干洗",img:require('@/static/img/index/index-gx.png'),},
|
|
|
+ {name:"租凭",img:require('@/static/img/index/index-zp.png'),},
|
|
|
+ {name:"二手市场",img:require('@/static/img/index/index-esss.png'),},
|
|
|
+ {name:"回收",img:require('@/static/img/index/index-hs.png'),},
|
|
|
+ {name:"实习岗位",img:require('@/static/img/index/index-sxgw.png'),},
|
|
|
+ ],
|
|
|
+ typeList:[
|
|
|
+ {name:"全部",id:-1},
|
|
|
+ {name:"奶茶甜点",id:0},
|
|
|
+ {name:"快餐便当",id:1},
|
|
|
+ {name:"火锅麻辣烫",id:2},
|
|
|
+ {name:"龙虾汉堡",id:3},
|
|
|
+ {name:"棋牌娱乐",id:4},
|
|
|
+ ],
|
|
|
+ type:-1,
|
|
|
}
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
if(e.scrollTop>1){
|
|
|
this.bgckgroundBox = '#fff';
|
|
|
+ this.bgckgroundSearch = '#fff';
|
|
|
+ if(e.scrollTop>500){
|
|
|
+ this.bgckgroundType = '#fff';
|
|
|
+ }else{
|
|
|
+ this.bgckgroundType = '';
|
|
|
+ }
|
|
|
}else{
|
|
|
this.bgckgroundBox = 'transparent';
|
|
|
+ this.bgckgroundSearch = '';
|
|
|
+ this.bgckgroundType = '';
|
|
|
}
|
|
|
},
|
|
|
+ onReachBottom() {
|
|
|
+ console.log('触底刷新');
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (e) =>{
|
|
|
+ let statusBarH = e.statusBarHeight + 10
|
|
|
+ let custom = 0;
|
|
|
+ custom = wx.getMenuButtonBoundingClientRect()
|
|
|
+ let customBarH = custom.height;
|
|
|
+ this.BarH = statusBarH + customBarH;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
@@ -59,7 +210,224 @@
|
|
|
}
|
|
|
.index-box-1{
|
|
|
width: 100%;
|
|
|
- height: 3000rpx;
|
|
|
+ // height: 3000rpx;
|
|
|
+ .swiper{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .swiper-item{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: skyblue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-list{
|
|
|
+ padding: 0 22rpx;
|
|
|
+ .nav-list-item{
|
|
|
+ margin-right: 52rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ image{
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-list-item:nth-child(7){
|
|
|
+ margin-right: 42rpx !important;
|
|
|
+ }
|
|
|
+ .nav-list-item:nth-child(8){
|
|
|
+ margin-right: 46rpx !important;
|
|
|
+ }
|
|
|
+ .nav-list-item:nth-child(9){
|
|
|
+ margin-right: 44rpx !important;
|
|
|
+ }
|
|
|
+ .nav-list-item:nth-child(5),.nav-list-item:nth-child(10){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 66rpx;
|
|
|
+ background: #F7F8FC;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 0 14rpx ;
|
|
|
+ .image-1{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .image-2{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ .box-1{
|
|
|
+ width: 50rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ border: 2rpx solid #41ABF5;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .tz-swiper{
|
|
|
+ width: 444rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ .tz-swiper-item{
|
|
|
+ width: 444rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .xsms-box{
|
|
|
+ .image-title{
|
|
|
+ width: 100%;
|
|
|
+ height: 92rpx;
|
|
|
+ }
|
|
|
+ .xsms-box-list-f{
|
|
|
+ width: 100%;
|
|
|
+ height: 310rpx;
|
|
|
+ background: linear-gradient( 180deg, #ABDEFE 4%, #C9EAFF 30%, #C9EAFF 100%);
|
|
|
+ border-radius: 0rpx 0rpx 20rpx 20rpx;
|
|
|
+ }
|
|
|
+ .xsms-box-list{
|
|
|
+ overflow-y: scroll;
|
|
|
+ .xsms-box-list-item:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .xsms-box-list-item{
|
|
|
+ width: 180rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ position: relative;
|
|
|
+ .xsms-box-list-item-img-1{
|
|
|
+ width: 164rpx;
|
|
|
+ height: 175rpx;
|
|
|
+ border-radius: 9rpx;
|
|
|
+ }
|
|
|
+ .xsms-box-list-item-img-2{
|
|
|
+ position: absolute;
|
|
|
+ width: 62rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ right: 0;
|
|
|
+ bottom: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .type-list-box{
|
|
|
+ position: sticky;
|
|
|
+ left: 0;
|
|
|
+ padding: 0 24rpx 24rpx 24rpx;
|
|
|
+ overflow-x: scroll;
|
|
|
+
|
|
|
+ .type-item-box{
|
|
|
+ margin-right: 16rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ // min-width: 300rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .type-item-box:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .s-type{
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ background: linear-gradient( 280deg, #44B1F7 0%, #96D6F4 100%);
|
|
|
+ }
|
|
|
+ .n-type{
|
|
|
+ color: #666;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .index-search{
|
|
|
+ position: sticky;
|
|
|
+ left: 0;
|
|
|
+ z-index: 100;
|
|
|
+ padding: 0 24rpx 20rpx 24rpx;
|
|
|
+ .index-search-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ padding: 0 6rpx 0 24rpx;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ border: 2rpx solid #4FB3EF;
|
|
|
+ .index-search-box-buttom{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
+ border-radius: 200rpx;
|
|
|
+ margin-left: auto;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
