alhj/pages/other/homepage.vue

<template>
	<view class="content">
		<view class="headbgbox">
			<view class="statues_bar"></view>
			<view class="msgtitle"><text>主页</text></view>
			<view class="topmsgbox">
				<view class="topmsgzuo"> 
					<view class="myheadbox">
						<image src="../../static/img/foricon.png" mode="aspectFill"></image>
					</view>
					<view class="flex3 userbox">
						<text class="call">上午好，</text>
						<text class="callname">王亚楠</text>
					</view>
				</view>
				<view class="topmsgyou">
					<u-icon name="arrow-right" bold="true"></u-icon>
				</view>
			</view>
			<view class="searchbox">
					<u-icon name="search" bold="true" size="25" color="rgb(246,185,78)"></u-icon>
					<input type="text" v-model="keywords" placeholder="请输入关键字搜索" placeholder-style="color:#BBBCBE"/>
			</view>
		</view>
		<view class="cardlist">
			<view class="card">
				<view class="passreview">
					<image src="../../static/img/reviewed.png" mode="aspectFill"></image>
				</view>
				<view class="timebox"><text>2022.06.25  08:10</text></view>
				<view class="innerbox">
					<view class="listicon">
						<image src="/static/img/listticon.png" mode="aspectFill"></image>
					</view>
					<text class="cardtitle">财享金融互联网公司</text>
				</view>
				<view class="contractmsg flex5">
					<text>合同编号：HTABC2022020450775A72</text>
					<text style="padding-top: 10rpx;">汇票状态：已上传</text>
				</view>
			</view>
		</view>
		<view class="upcontract">
			上传合同
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords:''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6 !important;
	}
	.headbgbox{
		
		background: url("https://t39.9026.com/web/uploads/thumbs/mall10000/20220629/35560a89a9d9da3e6843204476f7a8f8.png") no-repeat;
		background-size: 100%;
		.msgtitle{
			text-align: center;
			padding-top: 50rpx;
		}
		.topmsgbox{
			padding: 25rpx 32rpx;
			padding-bottom: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.call{
				font-size: 28rpx;
				color: #68625B;
			}
			.callname{
				color: #1F242A;
				font-size: 36rpx;
				font-weight: 600;
			}
			.topmsgzuo{
				display: flex;
				align-items: center;
				.userbox{
					padding-left: 15rpx;
				}
				.myheadbox{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 6rpx solid #fff;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.searchbox{
		padding-left: 85rpx;
		box-sizing: border-box;
		background-color: #ECECEC;
		border-radius: 38rpx;
		width: 688rpx;
		height: 75rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -10rpx;
	}
	.cardlist{
		display: flex;
		justify-content: center;
		// align-items: center;
		flex-direction: column;
		margin-top: 20rpx;
		// height: 255rpx;
	}
	.card{
		margin: 0 auto;
		overflow: hidden;
		margin-top: 20rpx;
		width: 690rpx;
		height: 315rpx;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
		box-shadow: 0px 8rpx 20rpx 1rpx rgba(31, 36, 42, 0.08);
		.passreview{
			position: absolute;
			right: 30rpx;
			top:30rpx;
			width: 141rpx;
			height: 123.5rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.innerbox{
			padding: 49rpx 0rpx;
			padding-bottom: 30rpx;
			margin:0 30rpx;
			display: flex;
			align-items: center;
			
			border-bottom: 1rpx solid #E8E8E8;
			.listicon{
				width: 32rpx;
				height: 36rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.cardtitle{
			font-size: 32rpx;
			font-weight: 600;
			padding-left: 10rpx;
		}
		.timebox{
			background-color: #FFF8E5;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #D8AB5A;
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
		.contractmsg{
			padding: 30rpx;
			box-sizing: border-box;
			color: #68625B;
			font-size: 26rpx;
		}
	}
	.upcontract{
		position: fixed;
		left:0;
		right: 0;
		margin: 0 auto;
		bottom: 60rpx;
		width: 314rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #412900;
		text-align: center;
		border-radius: 43rpx;
		font-size: 30rpx;
		background: linear-gradient(to right,#FFE1AD,#D8AB5A);
	}
</style>