|
|
@@ -1,39 +1,315 @@
|
|
|
-<template>
|
|
|
- <view class="center">
|
|
|
- <view class="kong">
|
|
|
- <view class="search flex">
|
|
|
- <image src="../../static/index/index09.png" class="address"></image>
|
|
|
- <!-- <view class="shop-name clamp" @click.stop="canChange == 0?nav('/pages/shoping/list'):''">{{ storeInfo.name }}</view> -->
|
|
|
- <view class="shop-name clamp">椒江区</view>
|
|
|
- <image class="shop-jt" src="../../static/index/index07.png" mode=""></image>
|
|
|
- <view class="input-box flex" @click.stop="clickSearch">
|
|
|
- <view class=" input-content flex">
|
|
|
- <view class="iconfont iconsearch"></view>
|
|
|
- <view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <u-empty mode="data" text="敬请期待"></u-empty> -->
|
|
|
- </view>
|
|
|
- <u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { tabbar } from '@/utils/tabbar.js';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabbar: tabbar,
|
|
|
- current: 1
|
|
|
- };
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.kong {
|
|
|
- height: 100vh;
|
|
|
- width: 750rpx;
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <view class="center">
|
|
|
+ <view class="search-top">
|
|
|
+ <view class="search flex">
|
|
|
+ <view class="shop-name clamp">椒江区</view>
|
|
|
+ <image class="shop-jt" src="../../static/icon/dsjh.png" mode=""></image>
|
|
|
+ <view class="input-box flex">
|
|
|
+ <view class=" input-content flex">
|
|
|
+ <!-- <view class="iconfont iconsearch"></view> -->
|
|
|
+ <image src="../../static/icon/search-h.png" mode="" class="" style="width: 32rpx;height: 32rpx;">
|
|
|
+ </image>
|
|
|
+ <view class="input"><input type="text" value="输入关键字搜索" /></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="search-tit" @click.stop="clickSearch">
|
|
|
+ 搜索
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shop">
|
|
|
+ <view class="shop-title">
|
|
|
+ <view class="shop-item">
|
|
|
+ <view class="sitem-font">智能排序</view>
|
|
|
+ <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="shop-item">
|
|
|
+ <view class="sitem-font">位置距离</view>
|
|
|
+ <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="shop-item">
|
|
|
+ <view class="sitem-font">折扣优惠</view>
|
|
|
+ <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="shop-item">
|
|
|
+ <view class="sitem-font">筛选</view>
|
|
|
+ <image class="jt-down" src="../../static/index/index06.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="jg" style="height: 180rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="shop">
|
|
|
+ <view class="shop-main flex" v-for="(item, index) in 100" :key="index">
|
|
|
+ <image class="main-left" src="../../static/index/index13.png" mode=""></image>
|
|
|
+ <view class="main-right flex">
|
|
|
+ <view class="shopm-info">
|
|
|
+ <view class="shopm-title">
|
|
|
+ <view class="shopmt-font clamp">李家烤肉11111111111111111111111111111111111111111111</view>
|
|
|
+ <view class="shopmt-good">荐</view>
|
|
|
+ </view>
|
|
|
+ <view class="address">椒江区市府大道200号</view>
|
|
|
+ <view class="shopmt-tip">消费最高可得10%积分</view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="mright-top">
|
|
|
+ <image class="mrt-image" src="../../static/index/index10.png" mode=""></image>
|
|
|
+ <view class="mrt-font">距离0.3KM</view>
|
|
|
+ </view>
|
|
|
+ <view class="mright-bottom">
|
|
|
+ <image class="mrb-item" src="../../static/index/index14.png" mode=""></image>
|
|
|
+ <image class="mrb-item" src="../../static/index/index11.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <u-empty mode="data" text="敬请期待"></u-empty> -->
|
|
|
+ <u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ tabbar
|
|
|
+ } from '@/utils/tabbar.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabbar: tabbar,
|
|
|
+ current: 1
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .search-top {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 10rpx 32rpx 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .address {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-name {
|
|
|
+ height: 38rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -4rpx;
|
|
|
+ z-index: 100;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-jt {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ width: 16rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ width: 520rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ // background: rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 30rpx;
|
|
|
+
|
|
|
+ .input-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 11;
|
|
|
+ // border-radius: 99rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 5rpx 30rpx;
|
|
|
+ background: #F6F6F6;
|
|
|
+
|
|
|
+ .iconsearch {
|
|
|
+ font-size: 50rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ margin-left: 19rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ color: #666;
|
|
|
+ background: #F6F6F6;
|
|
|
+
|
|
|
+ input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-button {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ // font-size: $font-base;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop {
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 12rpx;
|
|
|
+
|
|
|
+ .shop-title {
|
|
|
+ padding: 30rpx 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #e3e6e7;
|
|
|
+
|
|
|
+ .shop-item {
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .sitem-font {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jt-down {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-main {
|
|
|
+ padding: 32rpx 18rpx 0 12rpx;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .main-left {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-right {
|
|
|
+ width: 500rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ padding: 13rpx 0 35rpx;
|
|
|
+ border-bottom: 1px solid #eaeced;
|
|
|
+
|
|
|
+ .shopm-info {
|
|
|
+ max-width: 60%;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .shopm-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .shopmt-font {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopmt-good {
|
|
|
+ margin-left: 6rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border: 1px solid #ff4c4c;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ff4c4c;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopmt-tip {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 52rpx;
|
|
|
+ padding: 8rpx;
|
|
|
+ background: #fcf3f0;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 0px;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ff440d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 5rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .mright-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .mrt-image {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mrt-font {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mright-bottom {
|
|
|
+ margin-top: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .mrb-item {
|
|
|
+ width: 46rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
