talk_appAmin/pages/work/index.vue

<template>
	<!-- tabs标签 -->
	<view class="tabsinfo flex alignCenter justifyCenter">
		<up-tabs :list="list4" lineWidth="24" lineHeight="4" @click="tabsClick" lineColor="#6aa2ff" :activeStyle="{
      color: '#000000',
      fontSize: '30rpx',
      transform: 'scale(1.05)'
  }" :inactiveStyle="{
      color: '#999999',
      fontSize: '28rpx',
      transform: 'scale(1.05)'
  }" itemStyle="  width: 185rpx; padding-bottom:18rpx;">
		</up-tabs>
	</view>


	<!-- 审核的信息 -->
	<view class="shenghe_item" @click="gotoworkinfo">
		<view class="user_header">
			<view class="">
				<view class="user_img">
					<image src="../../static/images/icon/tu4-1.jpg" mode=""></image>
				</view>
				<view class="user_msg">
					<h4>爱吃饭的小张</h4>
					<p>11分钟前·南开大学</p>
				</view>
			</view>

			<view class="text_style">
				<p>待审核</p>
			</view>
		</view>
		<!-- 审核的文章标题 -->
		<view class="shenghe_title">
			<h4>怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？</h4>
		</view>
		<!-- 审核的文章内 -->
		<view class="shenghe_text">
			<p>八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并八年前，学弟在工地上杀了一个工友。</p>
		</view>
		<!-- 文章图片 -->
		<view class="imgs_box">
			<image src="../../static/images/icon/tu4-2.jpg" mode="" v-for="(item,index) in [1,2,3,4,5]"></image>
		</view>
		<!-- 文章标签 -->
		<view class="text_span">
			<view class="" v-for="(item,index) in 7">
				#学术讨
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const list4 = ref([{
			name: '全部审核',
			state: 9
		},
		{
			name: '待审核',
			state: 1
		},
		{
			name: '已通过',
			state: 2
		},
		{
			name: '未通过',
			state: 0
		}
	]);
	const tabsClick = (e) => {
		console.log(e);

	}
	function gotoworkinfo(){
		uni.navigateTo({
			url:'/pages/work/workinfo'
		})
	}
</script>

<style lang="scss" scoped>
	.tabsinfo {
		background-color: #fff;
		height: 80rpx;
		margin-bottom: 24rpx;
	}

	.shenghe_item {
		width: 750rpx;
		
		background: #ffffff;
		padding: 48rpx 32rpx 48rpx 32rpx;
	}

	.user_header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 84rpx;
		
		.user_img {
			width: 84rpx;
			height: 84rpx;
			margin-right: 19rpx;
			image {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
		}
		.user_msg {
			h4 {
				font-weight: 600;
				width: 186rpx;
				height: 31rpx;
				font-size: 30rpx;
				text-align: left;
				color: #000000 100%;
				margin-bottom: 18rpx;
			}
			p {
				height: 30rpx;
				font-size: 30rpx;
				color: #999999;
			}
		}
		.text_style {

			
			right: 0;
			font-weight: 400;
			width: 84rpx;
			height: 28rpx;
			font-size: 28rpx;
			text-align: left;
			color: #6AA2FF ;
		}
	}
	.user_header>view{
		display: flex;
		
	}
	.shenghe_title{
		h4{
			font-weight: 600;
			width: 100%;
			height: 80rpx;
			font-size: 30rpx;
			text-align: left;
			color: #000000 ;
			margin-top: 31rpx;
		}
	}
	.shenghe_text{
		width: 100%;
		word-break: break-all;
		    overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
			margin-top: 26rpx;
	}
	.imgs_box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		padding-top: 34rpx;
		
		image{
			width: 222rpx;
			height: 222rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 6rpx;
			margin-right: 6rpx;
		}
	}
	.text_span{
		margin-top: 28rpx;
		view{
			padding: 8rpx;
			background-color: #F7F8FA;
			display: inline-block;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-size: 24rpx;
			color: #3477FC;
			font-weight: 600;
			margin-bottom: 20rpx;
			margin-right: 24rpx;
		}
	}
</style>