xinjiangMiniProgram/pages/subPage/ballots/ballotsList/ballotsList.vue

<template>
	<view class="content padding">
		<view class="banner">
			<image src="@/static/images/homebanner.png" mode=""></image>
		</view>
		
		<view class="tabs">
			<up-tabs :list="tabArr" @click="tabClick" lineColor="#DE3A26"> </up-tabs>
		</view>
		
		<view class="tags">
			<view class="tag"  v-for="(item,index) in tagArr" :key="index" :class="{active: currentTag==item.id}" @click="tagClick(item)">{{ item.name }}</view>
		</view>
		
		<view class="ul">
			<view class="li">
				<view class="flex-b">
					<view class="name towRowText">说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示</view>
					<view class="btn" @click="goVote(item)">我要投票</view>
				</view>
				<view class="text">
					<text>发起人：张三</text>
					<text>截止时间：2024-04-01  19:30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script  setup>
	
	import { reactive, ref } from 'vue';  
	  
	const tabArr = reactive([  
	    { name: '投票列表', id: 1 },  
	    { name: '我的投票', id: 2 },
	]);  
	const tagArr = reactive([
	    { name: '全部', id: 1 },  
	    { name: '进行中', id: 2 },
	    { name: '已结束', id: 3 },
	]);
	// tab切换
	function tabClick(item) {  
	    console.log('item', item);  
	}
	// 类型筛选
	let currentTag = ref(1)
	function tagClick(item) {
		currentTag.value = item.id
	}
	
	function goVote(item) {
		console.log(item)
		uni.navigateTo({
			url: '/pages/subPage/ballots/vote/vote'
		})
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.content {
	  .banner {
	    width: 100%;
		height: 174rpx;
	  }
	
	  .tabs {
	    padding: 30rpx 0 10rpx 0;
		border-bottom: 1px solid #EFEFEF;
	  }
	
	  .tags {
		  width: 100%;
		  height: 110rpx;
		  display: flex;
		  align-items: center;
		  border-bottom: 1px solid #EFEFEF;
	    .tag {
			height: 50rpx;
			background: #EFEFEF;
			border-radius: 25rpx;
			border: 1px solid #F4F4F4;
			line-height: 50rpx;
			padding: 0 14rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			&.active {
				color: $themC;
				background: rgba(222,58,38,0.1);
				border-radius: 25rpx;
				border: 1px solid #DE3A26;
			}
	    }
	  }
	
	  .ul {
		  width: 100%;
	    .li {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 1px solid #EFEFEF;
			&:last-child {
				border: none;
			}
	      .flex-b {
	        .name {
				font-size: 32rpx;
				color: #333333;
				flex: 1;
				width: 0;
				padding-right: 30rpx;
	        }
	
	        .btn {
				width: 132rpx;
				height: 44rpx;
				background: #DE3A26;
				border-radius: 22rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 44rpx;
				&.boder {
					border: 1px solid #DE3A26;
					color: $themC;
				}
				&.hui {
					opacity: 0.4;
				}
	        }
	      }
	
	      .text {
			  padding-top: 14rpx;
	        text {
				font-size: 24rpx;
				color: #9C9C9C;
				margin-right: 40rpx;
	        }
	      }
	    }
	  }
	}
</style>