konggang-city-miniprogram/pages/metrics/projectPage/index.vue

<template>
	
	<view class="content-box">
		
		<view class="policy-item-box">
		  <view v-for="(item, idx) in projectList" :key="idx"  :class="{ active: active === idx }"  class="policy-item-name" @click="changeProjectTabs(idx)">
		    {{ item }}
		  </view>
		</view>
		
		<view class="project-box">
			<view class="project-content display-around-column" v-for="(item, idx) in projectData" :key="idx" 
			:class="{ borderBottom: idx == projectData.length - 1 }" @click="enterProjectDeatil()">
				<view class="display-between items-center pos-class">
					<view style="font-size: 30rpx;">{{item.title}}</view>
					<image src="/static/important_icon.png" mode="aspectFit" style="width:80rpx;height: 80rpx;"></image>
				</view>
				<view class="display-flex-start pos-class">
					<view class="left-title">业主名称</view>
					<view>{{item.name}}</view>
				</view>
				<view class="display-flex-start pos-class" style="margin-bottom: 20rpx;">
					<view class="left-title">总投资</view>
					<view>{{item.maxMony}}</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
	    return {
	      swiperList: [],
	      projectList: ["在库", "技改", "在谈"],
	      active: 0,
	      projectData: new Array(5).fill({
	        title:"普汇中金生命科学国际合作中心",
	        name: "普汇中金国际控股有限公司",
	        maxMony: "160000（万元）",
	      }),
	    };
	  },
	  onLoad(option) {
		  this.active = Number(option.idx)
	  },
	  methods: {
	    enterProjectDeatil(id) {
	      uni.navigateTo({
			url:"/pages/metrics/projectPage/detail?id=" + id
	      });
	    },
	    changeProjectTabs(idx) {
	      let that = this;
	      that.active = idx;
	      switch (idx) {
	        case 0:
	        //  that.getPolicyList("2");
	          break;
	        case 1:
	        //  that.getPolicyList("3");
	          break;
	        case 2:
	        //  that.getPolicyList("4");
	          break;
	        case 3:
	        //  that.getPolicyList("5");
	          break;
	      }
	    },
	  },
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.policy-item-box {
	  display: flex;
	  justify-content: space-between;
	  margin: 0 20rpx;
	  margin-top: 20rpx;
	  .policy-item-name {
		    padding-bottom: 10rpx;
		    font-size: 30rpx;
		    width: 25%;
		    text-align: center;
	  }
	  .active {
	    font-weight: 600;
	    border-bottom: 7rpx solid #02a7f0;
	  }
	}
	.project-content {
		border-top: 1px solid #f2f2f2;
	}
	.pos-class {
		padding-left: 10rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}
	.left-title {
		width: 20%;
		color: #7F7F7F;
		font-size: 26rpx;
	}
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}
</style>