/* pages/mine/mine.wxss */ page { background-color: white; } /* 顶部 */ .top-area { position: relative; width: 750rpx; height: 646rpx; /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 0.01%, rgba(162, 202, 170, 0.18) 40.63%, rgba(236, 241, 255, 0.71) 95.06%); */ display: flex; align-items: center; flex-direction: column; overflow: hidden; } /* 波浪背景 */ .wave { position: absolute; width: 100%; height: 100%; opacity: 0.4; /* filter: blur(4px) drop-shadow(0px 2px 4px rgba(206, 217, 242, 0.41)); */ } /* 头像&名字 */ .avator-area { width: 100%; flex: 0.5; display: flex; justify-content: center; align-items: center; flex-direction: column; } .avator-area>.avator { position: relative; width: 120rpx; height: 120rpx; border-radius: 40rpx; border: 9rpx solid #D4DBEA; overflow: hidden; } .avator>image { width: 100%; height: 100%; } .avator-area>.name { color: #383D4D; font-size: 40rpx; font-weight: 700; line-height: 40rpx; margin-top: 15px; letter-spacing: 2rpx; display: flex; justify-content: center; align-items: center; } .avator-area>.name-no { color: #566189; font-size: 34rpx; font-weight: 500; line-height: 60rpx; margin-top: 40rpx; letter-spacing: 2rpx; } .name-no>text { margin: 0 112rpx; display: block; } /* 手机&身份证 */ .msg-area { width: 100%; flex: 0.5; display: flex; justify-content: flex-start; flex-direction: column; } .msg-area>view { display: flex; justify-content: space-between; padding: 5rpx 70rpx; font-size: 28rpx; line-height: 50rpx; } .msg-area>button { min-width: 200rpx; height: 68rpx; border-radius: 40rpx; background: rgba(255, 255, 255, 0.3); /* border: 1rpx solid #a6b6da; */ line-height: 68rpx; color: #000000; font-size: 30rpx; margin: 50rpx 30rpx 0 30rpx; } .crosswise { flex-direction: row !important; justify-content: center !important; } /* 下部 */ .bottom-area { width: 750rpx; background-color: white; min-height: 500rpx; border-radius: 40rpx 40rpx 0 0; transform: translateY(-50rpx); } .bottom-area>.title { font-size: 34rpx; font-weight: 500; line-height: 48rpx; padding: 64rpx 0 0 28rpx; } /* 功能区 */ .component-area { position: relative; width: 100%; } .component-area>.component { width: 33%; height: 174rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 48rpx; float: left; } .component>image { width: 110rpx; height: 116rpx; } .component>text { color: #8695B6; font-size: 28rpx; } .type { padding: 0rpx 10rpx; background: #4689EE; border-radius: 4px; color: #BCDEFE; font-size: 12px; margin-left: 10rpx; }