konggang-city-miniprogram/pages/park/index.vue

<template>
	<view class="content">
		
		<view class="display-flex-start map-header-box">
			<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入园区名称搜索" @iconClick="onClick" class="map-search-box"></uni-easyinput>
			<navigator url="/pages/park/map_search"><button type="default" class="map-search-btn">地图查找</button></navigator>
		</view>
		
		<view class="park-select-box">
			<view class="park-select" @click="showFilterBox()">
				<view class="park-select-font">园区类型</view>
				<view class="corner"></view>
			</view>
			
			<view class="park-filter-box" v-show="filterBoxFlag">
				<view class="filter-content display-wrap" style="justify-content: space-around;">
					<view class="content-font" :class="item.isSelected ? 'filter-selected' : ''" v-for="(item,index) in filterList" :key="index" @click="filterPark(index)">{{item.name}}</view>
				</view>
				<view class="display-around" style="margin-top: 50rpx;">
					<button class="filter-left-btn" @click="restartBtn()">重置</button>
					<button class="filter-left-btn bgcolor-02A7F0" @click="submitBtn()">确定</button>
				</view>
			</view>
			
		</view>
		
		<view class="" style="position:relative;width: 90%;margin-top: 20rpx;">
			<view class="park-box" v-for="(item , index) in parkList" :key="index" @click="goParkDetailFn(index)">
				 <image :src="item.url" mode="aspectFill" style="width:100%;height:400rpx;border-radius:32rpx 32rpx 0 0;"></image>
				 <view class="park-content-box">
					 <view class="park-title">{{item.title}}</view>
					 <view class="park-address display-flex-start">
						 <view class="display-flex-start" style="margin-right: 10rpx;"><image src="/static/park/park-time.png" mode="aspectFill" class="park-title-img"></image>{{item.time}}建成</view>
						 <view class="display-flex-start"><image src="/static/park/park-name.png" mode="aspectFill" class="park-title-img"></image>{{item.title}}</view>
					 </view>
					 <view class="park-footer-box display-between">
						  <view class="display-between-column width-30">
							  <view class="display-flex-start"><image src="/static/park/park-num.png" mode="aspectFill" class="park-footer-img"></image>{{item.num}}</view>
							  <view class="park-footer-font">企业数量</view>
						  </view>
						  <view class="display-between-column width-30">
							  <view class="display-flex-start">
								  <image src="/static/park/park-area.png" mode="aspectFill" class="park-footer-img"></image>
								  {{item.area1}}<text style="font-size: 12rpx;">万㎡</text></view>
							  <view class="park-footer-font">占地面积</view>
						  </view>
						  <view class="display-between-column width-30">
							  <view class="display-flex-start">
								  <image src="/static/park/park-area2.png" mode="aspectFill" class="park-footer-img"></image>
								  {{item.area2}}<text style="font-size: 12rpx;">万㎡</text></view>
							  <view class="park-footer-font">建设面积</view>
						  </view>
					 </view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message:'找园区',
				filterBoxFlag:false,
				parkList:[
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
						
					},
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
					},
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
					},
				],
				filterList:[
					{
						name:'工业厂房',
						isSelected:false,
					},
					{
						name:'写字楼',
						isSelected:false,
					},
					{
						name:'商务综合体',
						isSelected:false,
					},
				],
				filterIndex:0
			}
		},
		onLoad() {

		},
		methods: {
			filterPark(index){
				this.filterList[index].isSelected = !this.filterList[index].isSelected;
			},
			restartBtn(){
				this.filterList.forEach((item)=>{item.isSelected = false});
			},
			submitBtn(){
				console.log(this.filterList);
				this.filterBoxFlag = false;
			},
			showFilterBox(){
				this.filterBoxFlag = !this.filterBoxFlag;
			},
			goParkDetailFn(index){
				uni.navigateTo({
					url:'/pages/park/park_deatil?id='+index
				})
			} 
       }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.map-header-box {
		background-color: #02A7F0;
		padding: 20rpx 0rpx 30rpx 0rpx;
		width: 100%;
	}
	.map-search-box {
		background-color: #fff;
		margin-left: 30rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		width: 70%;
	}
	.map-search-btn {
		height: 66rpx;
		font-size: 26rpx;
		color: #fff!important;
		background-color: #F59A23!important;
		border-radius: 10rpx;
	}
	.park-box {
		border-radius: 32rpx;
		position: relative;
		height: 500rpx;
	}
	.park-content-box {
		width: calc(100% - 58rpx);
		background-color: #FFFFFF;
		border-radius: 56rpx 0px 32rpx 32rpx;
		position: absolute;
	    top: 250rpx;
		font-size: 24rpx;
		padding: 30rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
	}
	.park-title {
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.park-address {
		font-weight: 600;
		font-size: 19rpx;
		letter-spacing: 0.02em;
		color: #CFCFCF;
		margin-top: 10rpx;
	}
	.park-title-img {
		width: 16rpx;
		height: 16rpx;
		margin-right: 4rpx;
	}
	.park-footer-box {
		margin-top: 30rpx;
	}
	.park-footer-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
	.park-footer-font {
		color: #CFCFCF;
		font-size: 19rpx;
		margin-top: 10rpx;
	}
	.width-30 {
		width: 30%;
	}
	
	.park-select-box {
		width: 98%;
		height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	.park-select {
		padding: 10rpx;
		background-color: #d7d7d7;
		width: 20%;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 10rpx;
		display: flex;
	    align-items: center;
	    justify-content: space-around;
	    margin-left: 20rpx;
	    margin-top: 15rpx;
		font-size: 26rpx;
	}
	
	.park-select-font {
	   color: #7F7F7F
	}
	.corner {
		width: 0;
		height: 0;
		border: 10rpx solid #7f7f7f;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		margin-top: 12rpx;
	}
	.park-filter-box {
		width: 95%;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		position: absolute;
		top: 100rpx;
		z-index: 99;
	}
	.filter-content {
		 color: #7F7F7F;
		 font-size: 20rpx;
	}
	.content-font {
		padding: 10rpx;
	}
	.filter-left-btn {
		font-size: 22rpx;
		width: 20%;
		line-height: 27px;
		height: 50rpx;
		background-color: #C8C7C7;
		color: #fff;
		border: none;
		font-weight: 600;
	}
	.bgcolor-02A7F0{
		background-color: #02A7F0;
	}
	.filter-selected {
		background-color: #3ADBDB;
		color: #fff;
		border-radius: 10rpx;
	}
</style>