/* pages/detail/index.wxss */ .container { display: flex; flex-direction: column; position: relative; width: 100vw; height: 100vh; overflow: hidden; } .container-bg { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(10px); } .swiper-item { height: 100%; background-size: cover; background: #eee; transition: all ease .4s; } .swiper-item image { width: 100%; height: 100%; } .bg1 { background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/1.jpg) no-repeat top center; } .bg2 { background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/2.jpg) no-repeat top center; } .bg3 { background: url(https://cirraybucket.oss-cn-shanghai.aliyuncs.com/nwres/3.jpg) no-repeat top center; } .swiper { position: relative; /* height: 381rpx; */ transition: all ease .4s; background-color: #ccc; } .swiper image{ transition: all ease .4s; } .submit { z-index: 3; position: fixed; left: 50%; transform: translateX(-50%); bottom: 60rpx; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 32rpx; color: #fff; } .submit .share { position: relative; display: flex; align-items: center; justify-content: center; width: 278rpx; height: 100rpx; border-radius: 50rpx; border: 2rpx solid rgba(109, 90, 210, 1); margin:0 44rpx; color: rgba(109, 90, 210, 1); background: #fff; } .submit button:not([size='mini']){ position: absolute; top:0; left:0; right:0; bottom:0; background: none; } .submit .add { position: relative; display: flex; align-items: center; justify-content: center; width: 278rpx; height: 100rpx; background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%); border-radius: 50rpx; color: #fff; margin:0 44rpx; } .section { position: relative; flex: 1; transition: all ease .4s; background: #fff; /* padding: 70rpx 50rpx 0; */ /* box-sizing: border-box; */ overflow: hidden; box-sizing: border-box; padding-top: 70rpx; } .title { /* padding-top: 70rpx; */ display: flex; align-items: center; justify-content: space-between; line-height: 56rpx; } .title-l { line-height: 56rpx; font-size: 40rpx; flex: 1; white-space:normal; word-break:break-all; } .title-r { font-size: 48rpx; margin-left: 10rpx; } .title-r text { font-size: 20rpx; white-space:nowrap; } .title-r .fee { font-size: 48rpx; } .label { display: flex; align-items: center; justify-content: space-between; height: 98rpx; border-bottom: 2rpx dashed #E5E5E5; } .label-icon { width: 40rpx; height: 40rpx; margin-right: 16rpx; } .label-icon image { width: 100%; height: 100%; } .label-text { flex: 1; font-size: 24rpx; color: #313131; } .time-text { font-size: 28rpx; } .time-text text { color: #838383; } .pd { padding: 0 50rpx; } .black-70 { height: 70rpx; clear: both; } .black-210 { height: 210rpx; clear: both; } .section-scroll { z-index: 2; border-top-left-radius: 80rpx; border-top-right-radius: 80rpx; margin-top: -80rpx; } .dots { position: absolute; right: 0; bottom: 12rpx; left: 0; text-align: center; } /*未选中时的小圆点样式 */ .dot { display: inline-block; width: 20rpx; height: 20rpx; margin: 0 10rpx; border-radius: 50%; background-color: rgba(255, 255, 255, .4); } /*选中以后的小圆点样式 */ .active { background-color: white; } .activity { line-height: 44rpx; font-size: 32rpx; color: #313131; } .activity-title { padding-top: 48rpx; } .activity .activity-content { line-height: 50rpx; font-size: 28rpx; } .sign-up { padding-top: 82rpx; } .sign-up-title { font-size: 32rpx; color: #313131; padding-bottom: 40rpx; line-height: 44rpx; } .sign-up-title text { font-size: 28rpx; color: #838383; } .sign-up-list { display: flex; align-items: center; flex-wrap: wrap; } .sign-up-item { width: 64rpx; height: 64rpx; border-radius: 50%; overflow: hidden; margin: 0 20rpx; background: blue; margin-bottom: 15rpx; } .sign-up-item image{ width: 100%; height: 100%; background-color: #eee; } .sign-up-item:first-child{ border:2rpx solid #8F67E8; } .traffic { padding-top: 32rpx; color: #313131; } .traffic-title { font-size: 32rpx; } .traffic-desc { font-size: 28rpx; padding-bottom: 25rpx; } .traffic-map { width: 650rpx; height: 250rpx; } .traffic-map map { width: 100%; height: 100%; } .line-active { margin: 0 auto; width: 100rpx; height: 8rpx; border-radius: 8rpx; background-color: #8F67E8; } .pd-top { position: absolute; width: 500rpx; top: 0; left: 50%; transform: translateX(-50%); padding-top: 20rpx; box-sizing: border-box; } .submit 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; } .go-share { 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: 100000; } .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; } .title-des{ color:#999; } .get-info-mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 100000; } .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: 0; } } .loading{ position: fixed; top:0; left:0; right:0; bottom:0; background-color: #fff; z-index: 2000000; }