page { background-color: #F0F2F6; } .container { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .title-img { width: 750rpx; /* height: 372rpx; */ height: 196rpx; /* background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%); */ background-color: #8F67E8; border-radius: 0px 0px 0px 70rpx; } .list { position: absolute; /* top: 176rpx; */ /* top: 112rpx; */ top:0; left: 50rpx; right: 50rpx; bottom: 0; } .black-38 { height: 38rpx; clear: both; overflow: hidden; font-size: 0; } .black-128 { height: 100rpx; clear: both; overflow: hidden; font-size: 0; } .list .item { position: relative; width: 100%; background: rgba(255, 255, 255, 1); border-radius: 24rpx; overflow: hidden; } .list .item .mask{ position: absolute; top:0; left:0; right:0; bottom:0; background-color: rgba(255, 255, 255, .4); border-radius: 24rpx; z-index: 2; } .item .me-active{ position: absolute; top: -4rpx; right: 20rpx; } .item .me-active image{ width: 50rpx; height: 50rpx; position: relative; z-index: 10; } .item .item-img { position: relative; width: 610rpx; height: 310rpx; background-color: #fff; } .item .item-img image{ width: 100%; height: 100%; border-radius: 0 0 24rpx 0; } .item-content { padding: 28rpx 40rpx 24rpx; } .content-title { position: absolute; bottom:0; left:0; right:0; height: 88rpx; line-height: 88rpx; font-size: 40rpx; font-weight: 400; color: #fff; background:rgba(30,30,30,0.35); border-radius: 0 0 24rpx 0; box-sizing: border-box; padding-left: 40rpx; } .content-addr { display: flex; align-items: center; padding-bottom: 26rpx; } .addr-icon { width: 28rpx; height: 28rpx; margin: 0 18rpx 0 6rpx; } .addr-icon image { width: 100%; height: 100%; } .content-addr view { display: flex; align-items: center; } .addr { display: block; width: 380rpx; font-size: 24rpx; color: #313131; } .addr-m { font-size: 20rpx; color: #838383; } .content-time { display: flex; align-items: center; } .content-time view { display: flex; align-items: center; } .time-icon { width: 24rpx; height: 24rpx; margin: 0 18rpx 0 6rpx; } .time-icon image{ width: 100%; height: 100%; } .time { font-size: 28rpx; color: #313131; margin-right: 10rpx; } .number { color: #A5A5A7; font-size: 28rpx; } .line { margin: 0 40rpx; height: 0; border-bottom: 2rpx dashed #E5E5E5; } .item-fn { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 40rpx 38rpx; } .fn-t { padding: 9rpx 0; font-size: 48rpx; color: #313131; } .fn-d { font-size: 20rpx; margin-left: 12rpx; color: #313131; } .fn-r { position: relative; display: flex; align-items: center; justify-content: center; width: 300rpx; height: 100rpx; background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%); border-radius: 50rpx; font-size: 32rpx; color: #fff; } .fn-r button:not([size='mini']){ width: 100%; height: 100%; background-color: none; margin:0; padding:0; position: absolute; top:0; left:0; right:0; bottom:0; background: none; } .black-112 { height: 112rpx; overflow: hidden; clear: both; } .add { position: absolute; right: 16rpx; bottom: 196rpx; width: 80rpx; height: 80rpx; background: rgba(140, 102, 230, 0.75); border-radius: 50%; color: #fff; font-size: 52rpx; text-align: center; z-index: 10000; } .go-detail{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* 获取个人信息 */ .get-info { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 111111; } .get-info .in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500rpx; border-radius: 16rpx; background: #fff; font-size: 26rpx; } .get-info .get-info-head { font-size: 32rpx; color: #666; text-align: center; padding: 15rpx 0; } .get-info .get-info-content { text-align: center; padding: 20rpx 0 30rpx; } .get-info .get-info-footer { position: relative; border-top: 1px solid #eee; padding: 30rpx 0; text-align: center; color: rgba(143, 103, 232, 1); font-size: 30rpx; } .get-info .get-info-footer button:not([size='mini']) { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: auto; background: none; } @import "index.skeleton.wxss"; .get-info-mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 3; } .get-info-mask .in{ position: absolute; bottom:0; left:0; right:0; height: 600rpx; background-color: #fff; border-top-left-radius: 50rpx; border-top-right-radius: 50rpx; } .get-info-mask .avatar{ width: 130rpx; height: 130rpx; border-radius: 50%; background-color: #ccc; margin: 80rpx auto 0; overflow: hidden; } .get-info-mask .avatar image{ display: block; width: 100%; height: 100%; } .get-info-mask .name{ text-align: center; padding: 20rpx 0 10rpx; font-size: 38rpx; font-weight: bold; color:#333; } .get-info-mask .des{ text-align: center; font-size: 28rpx; color:#666; } .get-info-mask .btn{ width:700rpx; height: 100rpx; background-color: blue; margin: 100rpx auto 0; border-radius: 10rpx; } .get-info-mask button:not([size='mini']) { display: flex; align-items: center; justify-content: center; font-weight: normal; width: 100%; height: 100%; margin:0; padding:0; color: #fff; background-color: rgba(143, 103, 232, 1); } .get-info-mask .scroll-in{ bottom:0; animation: myScroll .4s forwards; } @keyframes myScroll { 0% { bottom: -600rpx; } 100% { bottom: 48px; } }