page { background: #f6f6f6; padding-bottom: 148rpx; } .background { height: 300rpx; width: 100%; display: flex; justify-content: center; align-items: center; image { width: 350rpx; height: 203rpx; transform: translateY(20rpx); } } .my { display: flex; justify-content: space-between; // background: #46a9a4; margin: 0rpx 30rpx; .my-title { display: flex; margin: 0rpx 20rpx; .my-image { width: 120rpx; height: 120rpx; // border-radius: 50%; } .my-name { margin: auto 20rpx; .name { font-size: 36rpx; font-weight: bold; } .id { font-size: 25rpx; } } } .my-home { margin: auto 20rpx; } } .box { display: flex; flex-wrap: wrap; background: #ffffff; margin: 30rpx; border-radius: 30rpx; padding: 30rpx 0 0 0; // button::after { // border: none; // } // button { // background-color: #fff; // padding-left: 0; // padding-right: 0; // line-height: inherit; // } .box-title { // width: 230rpx; flex: 1; text-align: center; margin-bottom: 30rpx; .box-icon { width: 45rpx; height: 45rpx; } .box-name { font-size: 24rpx; font-weight: 800; } } } .box2 { margin:0 30rpx; border-radius: 16rpx; button::after { border: none; } button { background-color: #fff; padding-left: 0; padding-right: 0; line-height: inherit; } .box-title { height: 120rpx; width: 690rpx; flex: 1; background-color: #fff; text-align: center; display: flex; // border: 1px solid ; justify-content: space-between; .box-icon { // border: 1rpx solid; margin: auto 0; margin-left: 10rpx; width: 60rpx; height: 60rpx; } .box-name { text-align: left; // border: 1px solid red; margin: auto 0; margin-left: 10rpx; height: 32rpx; width: 124rpx; transform: translateX(-220rpx); // border: 1rpx solid; line-height: 32rpx; font-size: 30rpx; font-weight: 800; } .van-icon { text-align: right; color: red; } } .a { border-bottom: 3rpx solid #f6f6f6; } }