bawangcan-user/pages/index/index.vue

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