uni-zhihuikuangshan/components/t-o-news-tab-1/t-o-news-tab-1.vue

<template>
	<view>
		<view class="tab">
			<view class="item" @click="change_active(1)">
				<view class="text" :class="active == 1?'active':''">安全管理</view>
				<view class="line" v-if="active == 1"></view>
			</view>
			<view class="item" @click="change_active(2)">
				<view class="text" :class="active == 2?'active':''">巡检维护</view>
				<view class="line" v-if="active == 2"></view>
			</view>
			<view class="item" @click="change_active(3)">
				<view class="text" :class="active == 3?'active':''">党建经营</view>
				<view class="line" v-if="active == 3"></view>
			</view>
			<view class="item" @click="change_active(4)">
				<view class="text" :class="active == 4?'active':''">其他</view>
				<view class="line" v-if="active == 4"></view>
			</view>

		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="title">{{item.title}}</view>

				<uni-table border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="60">序号</uni-th>
						<uni-th align="center" v-for="(item_2,index_2) in item.name">{{item_2}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item_2,index_2) in item.data" :key="index_2">
						<uni-td align="center">
							<view class="icon">
								<image v-if="index_2 < 3" src="./icon/new.png" mode=""></image> <text
									style="margin-left: 10rpx;">{{index_2+1}}</text>
							</view>
						</uni-td>
						<uni-td align="center" v-for="(item_3,index_3) in item_2" :key="index_3">{{item_3}}</uni-td>
					</uni-tr>

				</uni-table>

				<view class="btn">
					<view class="icon">
						<image src="./icon/btn.png" mode=""></image>
					</view>
					<view class="btn_text" @click="go_all_list(item.title,item.table)">点击查看全部信息</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name: "t-o-news-tab-1",
		data() {
			return {
				active: 1,
				list:[]
			};
		},
		mounted() {
			this.get_list()
		},
		methods: {
			change_active(item) {
				this.active = item
			},
			get_list() {
				this.$api.five_fixed_fiveFixed({
					
				}).then((res)=>{
					console.log(res.data.content.data)
					
					this.list = res.data.content.data
				})
			},
			go_all_list(title,table) {
				uni.navigateTo({
					url: "../../origanization/news/tab_1/all_list/all_list?title="+title+"&table="+table
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-table-th.table--border {
		color: #000000;
		background-color: #D8D8D8;
	}

	.uni-table-td.table--border {
		color: #666666;
	}

	.tab {
		display: flex;
		justify-content: space-around;
		align-items: center;

		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		height: 90rpx;

		.item {
			position: relative;

			.text {
				font-size: 30rpx;
				color: #666666;
			}

			.active {
				font-weight: 700;
				color: #000000;
			}

			.line {
				position: absolute;
				bottom: -15rpx;
				left: 50%;

				transform: translateX(-30rpx);

				width: 60rpx;
				height: 4rpx;
				background-color: #009FE8;
			}
		}
	}

	.list {
		box-sizing: border-box;
		padding: 0 25rpx;

		.item {
			margin-bottom: 20rpx;
			width: 700rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			box-sizing: border-box;
			padding: 0 25rpx;
			padding-bottom: 20rpx;

			.title {
				text-align: center;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 40rpx;
				font-weight: 700;
			}

			.btn {
				margin: 20rpx auto;
				width: 400rpx;
				height: 50rpx;

				background-color: #69BBFA;
				border-radius: 50rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					image {
						width: 23rpx;
						height: 24rpx;

						display: block;
					}
				}

				.btn_text {
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.icon {
		position: relative;
		top: 0;
		right: 0;

		image {
			width: 33rpx;
			height: 18rpx;
		}
	}
</style>