recruitment-wechat-uniapp-241012/pages_order/mine/contract.vue

<template>
	<!-- 电子合同 -->
	<view>
		<navbar title="电子合同"
		leftClick 
		@leftClick="$utils.navigateBack"/>
		
		<view class="">
			<uv-tabs :list="tabs"
			lineColor="#3796F8"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="clickTabs"></uv-tabs>
			
		</view>
		<view class="content">
			<view class="projectContent"
			v-for="(item, index) in 10"
			:key="index">
				<img src="../static/contract/contract.png" alt="" />
				<view class="itemList">
					<view class="projectName">
						xxxx电子合同
					</view>
					<view class="buyer">
						甲方：湖南瀚海科技有限公司
					</view>
					<view class="seller">
						乙方：四川特能博世科技有限公司
					</view>
				</view>
				<view class="run">
					<uv-icon 
					name="arrow-right" 
					color="#2979ff" 
					size="50rpx"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{
						name: '全部合同'
					},
					{
						name: '待我签署'
					},
					{
						name: '他人签署'
					},
					{
						name: '签约完成'
					},
				],
				type : 0,
			}
		},
		methods: {
			clickTabs({index}) {
				this.type = index
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		.projectContent {
			background-color: #fff;
			display: flex;
			margin: 30rpx;
			img {
				width: 160rpx;
				height: 140rpx;
				margin: 20rpx;
			}
			.itemList {
				margin: 28rpx 10rpx;
				.projectName {
					font-size: 32rpx;
				}
				.buyer {
					font-size: 24rpx;
				}
				.seller {
					font-size: 24rpx;
				}
			}
			.run{
				margin: auto;
				margin-right: 30rpx;
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				border: 1px solid $uni-color;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>