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

<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>