page { background: #145A83; } .page { /*width: 100vw;*/ width: 750rpx; height: 100vh; overflow: hidden; background: url('https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/static/home/bg.png') no-repeat; background-size: 100% 100%; background-attachment: fixed; position: relative; } .main { /*width: 100vw;*/ width: 750rpx; height: 460rpx; margin: auto; /* text-align: center; */ position: relative; top: 50%; transform: translateY(-50%); /* 向上移动自身高度的一半 */ } .portrait-main { width: 750rpx; height: 460rpx; margin: auto; /* text-align: center; */ position: relative; top: 50%; transform: translateY(-50%); /* 向上移动自身高度的一半 */ } .information-sn { font-size: 11rpx; color: #145A83; position: absolute; bottom: 13rpx; left: 11rpx; } .logout-btn { background-color: #80C269; border-radius: 50%; font-size: 14rpx; color: #fff; position: absolute; bottom: 3.5rpx; right: 107rpx; text-align: center; padding: 14rpx 9rpx; } .sure-btn { background-color: #13B5B1; border-radius: 50%; font-size: 14rpx; color: #fff; position: absolute; bottom: 15rpx; right: 37rpx; text-align: center; padding: 20rpx 15rpx; } .flex1 { display: flex; justify-content: space-between; } .flex2 { display: flex; justify-content: right; } .magnify { transition: transform 0.1s ease; /* 平滑过渡效果 */ transform: scale(1); /* 默认大小 */ } .magnify:active { transform: scale(1.1); /* 点击时放大1.1倍 */ } .magnify-btn:active { transform: scale(1.3); background-color: #379391 !important; } .flex { display: flex; justify-content: center; align-items: center; } .flex-column { display: flex; flex-direction: column; align-items: center; } .flex-column-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .flex-column-center-start { display: flex; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; } .flex-column-start-start{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .flex-column-end { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .flex-column-around { display: flex; flex-direction: column; justify-content: space-around; } .flex-align-center { display: flex; align-items: center; } .flex-around { display: flex; justify-content: space-around; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-end { display: flex; justify-content: flex-end; align-items: center; }