master

分支 (2)

管理

管理

master

page

arknights-h5
/
friend.html

<style>
	.friend{
		color: white;
		background: rgb(95, 194, 3);
	}
	ul,li{
		list-style: none;
	}
    .friend {
			background: url(.1/Screenshot_20210512-151252.png) no-repeat center center fixed;
			background-size: 100% 100% ;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

	.topui-left{
		transform: translateY(20%);
		width: 50%;
		height: 10%;
	}

	.topui-left .button{
		transform: translateY(10%);
	}

	.topui-left .button .black{
		position: absolute;
		transform: translateX(10%);
	}

	.topui-left .button .home{
		position: absolute;

		transform: translateX(77%);

	}

	.topui-left .button .tips{
		position: absolute;

	transform: translateX(850%);
	}

	.topui-right{
		left: 50%;
		width: 50%;
		height: 10%;
		transform: translateY(-65%);
		font-size: 180%;
		position: absolute;
	}

	.topui-right .aboutme{

	}

	.topui-right .aboutme .text{
		transform: translateX(27%);
		width: 45%;
		height: auto;
		position: absolute;
	}

	.topui-right .aboutme .name{
		transform: translate(50%,10%);
		top: 100%;
		position: relative;
	}

	.topui-right .aboutme .level{
		transform: translate(70%,-130%);
		width: 50%;
		height: 50%;
	}

	.topui-right .aboutme .level .img{
		width: 21%;
		height: auto;
	}

	.topui-right .aboutme .level .text{
		width: 10%;
		height: auto;
		transform: translate(55%,-200%);
	}

	.centerui-left{
		transform:translateX(-1.5%);
	}

	.centerui-left img{
		margin-top:0.5%;
		width: 16%;
		height: 11%;
	}

	.maincard{
		background-size: 100% 74%;
		position: absolute;
		transform: translateX(26%);
		top: 2%;
		width: 75%;
		height: 154%;
	}

	.maincard .bgimg img{
		transform: translate(-2%,14%);
		z-index: -1;
		width: 100%;
		height: 50%;
	}
</style>
<body>
    <div class="friend">
		<div class="topui-left">
			<div class="button">
				<div class="black">
					<img src="./img/btn_back.png">
				</div>
				<div class="home">
					<img src="./img/btn_topmenu_home.png">
				</div>
				<div class="tips">
					<img src="./img/sprite_guidebook_icon.png">
				</div>
			</div>
		</div>
		<div class="topui-right">
			<div class="aboutme">
				<div class="text">我的信息&nbsp;&nbsp;|</div>
				<div class="name">御坂10843号</div>
				<div class="level">
					<img class="img" src="./img/personal-data/ui_level.png">
					<p class="text">64</p>
				</div>
			</div>
		</div>
		<div class="centerui-left">
			<div class="list">
				<ul>
					<li><img src="./img/personal-data/ui_personaldata.png"></li>
					<li><img src="./img/personal-data/ui_friendlist.png"></li>
					<li><img src="./img/personal-data/ui_addfriend.png"></li>
					<li><img src="./img/personal-data/ui_zhiyuan.png"></li>
				</ul>
			</div>
		</div>
		<div class="centerui-right">
			<div class="maincard">
				<div class="ruzhi">
					<div class="bgimg">
						<img src="/img/personal-data/ui.png">
					</div>
					<div class="text">
						<p style="color: black;">入职日</p>
					</div>
					<div class="date">
						<p style="color: black;">2019-5-25</p>
					</div>

				</div>
			</div>
		</div>
    </div>
</body>