You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
428 lines
8.3 KiB
428 lines
8.3 KiB
<template> |
|
<view class="container"> |
|
<view class="containertop"> |
|
<view class="nav"> |
|
<view @click="goSelectCity()" class="citys" style="margin-right: 5px;"> |
|
<p>武汉光谷<u-icon name="arrow-down-fill" style="font-size: 8px;margin-left: 2px;"></u-icon> |
|
</p> |
|
</view> |
|
<view class="search" style="margin-left: 2px;"> |
|
<!-- <input type="text" placeholder="请输入美食, 地点" placeholder-style="font-size: 12px;font-family: PingFang SC;margin-top:2px;"> --> |
|
<view style="flex: 1;height: 30px;border: 1px solid #9F9F9F;border-right: none;"> |
|
<u-search :clearabled="true" :show-action="false" placeholder="请输入美食, 地点" |
|
:input-style="{'height':'28px'}" shape="square" bg-color="#FFFFFF" height="28px"></u-search> |
|
</view> |
|
<view class="button">搜索</view> |
|
</view> |
|
</view> |
|
|
|
<view class="banner" style="margin-top: 20px;"> |
|
<u-swiper :list="listbanner"></u-swiper> |
|
</view> |
|
|
|
<view class="listbox"> |
|
<view class="list"> |
|
<image src="../../static/img/home/meishi.png" class="imgs"> |
|
<p>美食小吃</p> |
|
<image> |
|
</view> |
|
<view class="list"> |
|
<image src="../../static/img/home/naicha.png" class="imgs"> |
|
<p>甜点饮品</p> |
|
<image> |
|
</view> |
|
<view class="list"> |
|
<image src="../../static/img/home/chaoshi.png" class="imgs"> |
|
<p>果蔬超市</p> |
|
<image> |
|
</view> |
|
<view class="list"> |
|
<image src="../../static/img/home/shaokao.png" class="imgs"> |
|
<p>夜宵烧烤</p> |
|
<image> |
|
</view> |
|
</view> |
|
<view class="bill"> |
|
<view> |
|
<image src="../../static/img/home/guanggao.png"></image> |
|
</view> |
|
<view> |
|
<image src="../../static/img/home/guanggao2.png"></image> |
|
</view> |
|
</view> |
|
<view class="nav2"> |
|
<view class="tabs"> |
|
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF4848" |
|
:bar-style="{'border-radius':'4px'}" inactive-color="#C1C1C1"> |
|
</u-tabs> |
|
</view> |
|
<view class="dropdown"> |
|
<u-dropdown active-color="#FF5454" inactive-color="#C1C1C1"> |
|
<u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1"> |
|
</u-dropdown-item> |
|
</u-dropdown> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
|
|
<view class="shoplist"> |
|
<view class="shop" @click="totasks()"> |
|
<view class="message" style="position: relative;"> |
|
<view class="pic" style="position: relative;z-index:1;margin-left: 10px;margin-top: 4px;"> |
|
<image src="../../static/img/home/coco.png"></image> |
|
</view> |
|
<view class="text" style="position: relative;z-index:1;margin-top: 6px;"> |
|
<view> |
|
<p style="float: left;">coco奶茶店</p> |
|
<u-tag text="虎泉" size="mini" mode="dark" type="error" |
|
style="float: right;margin-right: 40px;margin-top: 6px;" /> |
|
</view> |
|
<view> |
|
<view style="float: left;">剩余</view> |
|
<view style="float: left;color: #FF0000;margin-top: 2px;">{{number}}</view> |
|
份 |
|
</view> |
|
<view>222</view> |
|
</view> |
|
|
|
</view> |
|
<!-- <view class="logo m"><image src="../../static/img/home/meituan.png"></image></view> --> |
|
<!-- <view class="logo e"><image src="../../static/img/home/elme.png"></image></view> --> |
|
<view class="logo"> |
|
<view class="top"><image src="../../static/img/home/elme.png"></image></view> |
|
<view class="bottom"><image src="../../static/img/home/meituan.png"></image></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue' |
|
import taskHomeList from "@/components/mask/task-home-list1.vue" |
|
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'); |
|
var qqmapsdk; |
|
export default { |
|
components: { |
|
taskHomeList, |
|
RenDropdownFilter |
|
}, |
|
data() { |
|
return { |
|
number: 4, |
|
keyword: '', |
|
value1: 1, |
|
value2: 2, |
|
items: [{ |
|
text: "一年级", |
|
value: "1-0", |
|
children: [{ |
|
text: "1.1班", |
|
value: "1-1" |
|
}, |
|
{ |
|
text: "1.2班", |
|
value: "1-2" |
|
} |
|
] |
|
}, |
|
{ |
|
text: "二年级", |
|
value: "2-0" |
|
}, |
|
{ |
|
text: "三年级", |
|
value: "3-0" |
|
} |
|
], |
|
listbanner: [{ |
|
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东' |
|
}, |
|
{ |
|
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', |
|
title: '身无彩凤双飞翼，心有灵犀一点通' |
|
}, |
|
{ |
|
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', |
|
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|
} |
|
], |
|
list: [{ |
|
name: '综合' |
|
}, { |
|
name: '距离' |
|
}, { |
|
name: '佣金', |
|
}], |
|
current: 0, |
|
value1: 0, |
|
options1: [{ |
|
label: '双平台', |
|
value: 0, |
|
}, |
|
{ |
|
label: '美团', |
|
value: 1, |
|
}, |
|
{ |
|
label: '饿了么', |
|
value: 2, |
|
} |
|
], |
|
} |
|
}, |
|
methods: { |
|
change(index) { |
|
this.current = index; |
|
}, |
|
goSelectCity() { |
|
uni.navigateTo({ |
|
url: '/pages/index/citys' |
|
}) |
|
}, |
|
totasks() { |
|
uni.navigateTo({ |
|
url: '/pages/index/tasksdetails', |
|
|
|
}) |
|
} |
|
} |
|
|
|
} |
|
|
|
// this.$Request.getT('/banner/selectBannerList?classify=4&state=2').then(res => { |
|
// if (res.code === 0) { |
|
// this.elemeList = res.data[0]; |
|
// } |
|
// }); |
|
</script> |
|
|
|
<style lang="scss"> |
|
page { |
|
width: 100%; |
|
background-color: #F6F6F6; |
|
} |
|
|
|
.containertop { |
|
background-color: #FFFFFF; |
|
} |
|
|
|
.banner { |
|
margin: 0 16px; |
|
} |
|
|
|
.nav p { |
|
font-size: 14px; |
|
margin-top: 5px; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
} |
|
|
|
.nav { |
|
display: flex; |
|
margin: 0 16px; |
|
} |
|
|
|
.nav .citys { |
|
width: 69px; |
|
font-size: 14px; |
|
font-weight: 500; |
|
font-family: PingFang SC; |
|
} |
|
|
|
.nav .search { |
|
flex: 1; |
|
} |
|
|
|
.imgs { |
|
width: 48px; |
|
height: 48px; |
|
} |
|
|
|
.list p { |
|
font-size: 12px; |
|
color: #2E2E2E; |
|
} |
|
|
|
// .banner { |
|
// width: 344px; |
|
// height: 131px; |
|
// } |
|
|
|
.listbox { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
align-items: center; |
|
justify-content: space-around; |
|
flex-direction: row; |
|
margin-top: 18px; |
|
} |
|
|
|
.list { |
|
width: 48px; |
|
height: 71px; |
|
} |
|
|
|
.bill { |
|
display: flex; |
|
justify-content: space-between; |
|
width: 93%; |
|
margin: 0 auto; |
|
margin-top: 15px; |
|
} |
|
|
|
.bill image { |
|
width: 164px; |
|
height: 84px; |
|
float: left; |
|
} |
|
|
|
.nav2 { |
|
display: flex; |
|
font-size: 12px; |
|
font-family: PingFang SC; |
|
color: #C1C1C1; |
|
width: 100%; |
|
background-color: #FFFFFF; |
|
} |
|
|
|
|
|
|
|
.nav2 .tabs { |
|
flex: 1; |
|
} |
|
|
|
.nav2 .dropdown { |
|
width: 24%; |
|
background-color: #FFFFFF; |
|
margin-right: 26px; |
|
color: #C1C1C1; |
|
} |
|
|
|
|
|
|
|
.shoplist { |
|
background-color: #F6F6F6; |
|
width: 100%; |
|
margin-top: 12px; |
|
} |
|
|
|
.shop { |
|
height: 100px; |
|
margin: 0 16px; |
|
margin-bottom: 10px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: #FFFFFF; |
|
border-radius: 6px; |
|
box-shadow: 3px 3px 6px #d6d6d6; |
|
} |
|
|
|
.shop image { |
|
width: 76px; |
|
height: 76px; |
|
} |
|
|
|
.message { |
|
display: flex; |
|
flex: 1; |
|
border-radius: 0 6px 6px 0; |
|
} |
|
|
|
.message .pic { |
|
width: 77px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.message .text { |
|
flex: 1; |
|
display: flex; |
|
margin-left: 8px; |
|
flex-direction: column; |
|
} |
|
|
|
.message .text p { |
|
font-size: 18px; |
|
} |
|
|
|
.message .text view { |
|
flex: 1; |
|
|
|
} |
|
|
|
.u-dropdown__content__mask { |
|
background: #FFFFFF !important; |
|
} |
|
|
|
.search { |
|
height: 30px; |
|
background: #FFFFFF; |
|
opacity: 1; |
|
border-radius: 4px; |
|
display: flex; |
|
} |
|
|
|
.search .button { |
|
width: 42px; |
|
height: 30px; |
|
background: linear-gradient(90deg, #F65646 0%, #FF3B27 100%); |
|
border-radius: 4px; |
|
color: #FFFFFF; |
|
font-size: 12px; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
padding-left: 10px; |
|
padding-top: 6px; |
|
float: left; |
|
border: 1px solid #9F9F9F; |
|
border-left: none; |
|
} |
|
|
|
.logo { |
|
width: 30px; |
|
height: 100px; |
|
border-radius: 0 6px 6px 0; |
|
position: relative; |
|
} |
|
|
|
.logo image{ |
|
width: 24px; |
|
height: 24px; |
|
left: 2px; |
|
position: absolute; |
|
} |
|
|
|
.m{ |
|
background-color: #FED810; |
|
} |
|
|
|
.e{ |
|
background-color: #349CFC; |
|
} |
|
|
|
.logo .top{ |
|
height: 50px; |
|
background-color: #349CFC; |
|
border-radius: 0 6px 0 0; |
|
position: relative; |
|
} |
|
|
|
.logo .bottom{ |
|
height: 50px; |
|
background-color: #FED810; |
|
border-radius: 0 0 6px 0; |
|
position: relative; |
|
} |
|
|
|
.logo .bottom image{ |
|
bottom:0px; |
|
} |
|
|
|
|
|
</style>
|
|
|