2021-07-24

山东大学 软件学院 暑期项目实训

7-24日

研究生管理系统 张瑞阳

1.设计style ，优化出国申请界面

<style>
    #container{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .apply-card{
        padding: 20rpx;
        border-radius: 20rpx;
        width: 90%;
        box-shadow: 0 0 40rpx -10rpx grey;
		margin-bottom: 10rpx;
    }
	#buttons{
		/* width: 20rpx; */
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		
		height: 50rpx;
	}
	.button-item{		
		float: right;
		box-shadow: 0 0 24rpx -10rpx grey;
		border-radius: 30rpx;
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: white;
		font-size: 20rpx;
		margin-top: 7rpx;
		
		
	}
	#info{
		width: 65%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content:flex-end;
		padding-top: 5rpx;
		padding-right: 40rpx;
		padding-bottom: 10rpx;
		
	}
	.delete{
		background-color: #2979ff;
		text-align: center;
		margin-right: 10rpx;
	}
	.update{
		background-color: #2979ff;
		margin-right: 10rpx;
	}
	.commit{
		background-color: #2979ff;
	}
	#tabs{
		width: 80%;
	}
	#apply-button{
	    margin-top:30rpx;
		margin-bottom:30rpx;
	    width: 380rpx;
	    height:70rpx;
	    border-radius: 35rpx;
	    background-color: black;
	    line-height: 70rpx;
	    color: white;
	    background-color: #2979ff;
	}
	.out-card{
		position: relative;
		display: flex;
		flex-direction: row;
	    border-radius: 20rpx;
	    width: 90%;
	    box-shadow: 0 0 40rpx -10rpx grey;
	    margin: 10rpx auto;
	}
	.country{
		font-size: 50rpx;
		color: #358cfb;
	}
	.company{
		font-size: 30rpx;
		color: #ff5500;
	}
	.type{
		font-size: 20rpx;
		color:grey;
	}
	.date{
		font-size: 25rpx;
		color: #ffa15d;
	}
	.state{
		font-size: 30rpx;
		color: #ff0000;
	}
	.out-item{
		text-align: right;
		padding-top:10rpx ;
	}
</style>

2.用选项卡将能修改的和不能修改的分开展示，使界面更清晰

3.设计卡片样式

4.优化配色和总体布局

标签：24,flex,07,color,20rpx,width,2021,margin,10rpx
来源： https://blog.csdn.net/weixin_44828259/article/details/119065322