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

<template>
	
	<view class="content-box">
		
		<view class="policy-item-box">
		  <view
		    v-for="(item, idx) in policyList"
		    :key="idx"
		    :class="{ active: active === idx }"
		    class="policy-item-name"
		    @click="changePolicyTabs(idx)"
		  >
		    {{ item }}
		  </view>
		</view>
		
	</view>
	
	
	
	
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
	    return {
	      swiperList: [],
	      policyList: ["在库", "技改", "在谈"],
	      active: 0,
	      policyData: new Array(5).fill({
	        title:"普汇中金生命科学国际合作中心",
	        name: "普汇中金国际控股有限公司",
	        maxMony: "160000（万元）",
	      }),
	    };
	  },
	  onLoad() {
	  },
	  methods: {
	    enterPolicyDeatil(id) {
	      uni.navigateTo({
	        url: "/pages/policy/policy_deatil?id=" + id,
	      });
	    },
	    changePolicyTabs(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;
	  }
	}
</style>