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 in 2">
				<view class="title">五定表</view>
				<scroll-view scroll-x>
					<view class="inner">
						<view class="line">
							<view class="box">
								<view class="text text_1">序号</view>
							</view>
							<view class="box">
								<view class="text text_2">检查时间</view>
							</view>
							<view class="box">
								<view class="text text_3">检查地点</view>
							</view>
							<view class="box">
								<view class="text text_4">检查人</view>
							</view>
							<view class="box">
								<view class="text text_5">问题类型</view>
							</view>
							<view class="box">
								<view class="text text_6">问题或隐患描述</view>
							</view>
							<view class="box">
								<view class="text text_7">整改措施</view>
							</view>
							<view class="box">
								<view class="text text_8">完成日期</view>
							</view>
							<view class="box">
								<view class="text text_9">详情</view>
							</view>
						</view>
						<view class="line" v-for="item in 5">
							<view class="icon">
								<image src="./icon/new.png" mode=""></image>
							</view>
							<view class="box">
								<view class="text text_1">{{item}}</view>
							</view>
							<view class="box">
								<view class="text text_2">2021-12-25</view>
							</view>
							<view class="box">
								<view class="text text_3">红柳机房</view>
							</view>
							<view class="box">
								<view class="text text_4">李建中、牛之星、李雅婷</view>
							</view>
							<view class="box">
								<view class="text text_5">标准化</view>
							</view>
							<view class="box">
								<view class="text text_6">问题或隐患描述问题或隐患描述问题或隐患描述问题或隐患描述问题或隐患描述问题或隐患描述问题或隐患描述问题或隐患描述
								</view>
							</view>
							<view class="box">
								<view class="text text_7">整改措施整改措施整改措施整改措施整改措施整改措施</view>
							</view>
							<view class="box">
								<view class="text text_8">2021-12-31</view>
							</view>
							<view class="box">
								<view class="text text_9">查看</view>
							</view>
						</view>


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

<script>
	export default {
		name: "t-o-news-tab-1",
		data() {
			return {
				active: 1
			};
		},
		methods: {
			change_active(item) {
				this.active = item
			},
			go_all_list(){
				uni.navigateTo({
					url:"../../origanization/news/tab_1/all_list/all_list"
				})
			}
		}
	}
</script>

<style lang="scss">
	.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;
			}

			.inner {
				.line {
					display: flex;
					align-items: center;
					
					position: relative;
					
					.icon{
						position: absolute;
						top: -10rpx;
						right: 0;
						image{
							width: 33rpx;
							height: 18rpx;
						}
					}

					.box {
						display: flex;
						align-items: center;
						height: 90rpx;
						box-sizing: border-box;
						border: 1rpx solid #D9D9D9;

						.text {
							font-size: 26rpx;
							color: #333333;
							text-align: center;

							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.text_1 {
							width: 80rpx;
						}

						.text_2 {
							width: 220rpx;
						}

						.text_3 {
							width: 200rpx;
						}

						.text_4 {
							width: 400rpx;
						}

						.text_5 {
							width: 200rpx;
						}

						.text_6 {
							width: 500rpx;
						}

						.text_7 {
							width: 500rpx;
						}

						.text_8 {
							width: 200rpx;
						}

						.text_9 {
							width: 200rpx;
						}
					}


				}

				.line:nth-child(1) {
					.box {
						height: 80rpx;
						background-color: #D8D8D8;

						.text {
							font-size: 28rpx;
							color: #000000;
						}
					}
				}

			}

			.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;
				}
			}
		}
	}
</style>