paopaoShop/pages/category/business.vue

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