/* .wux-popup { width: 100% !important; max-width: 100% !important; } */ page { background-color: #F7F8FA !important; } .homeBack { width: 750rpx; height: 574rpx; position: absolute; top: 0; left: 0; } .home-poster .wux-landscape__inner { padding: 0 !important; } .home-poster .popup-index--wux-popup { width: 650rpx !important; max-width: 650rpx !important; } .location { height: 126rpx; padding: 0 30rpx; margin: 18rpx 30rpx 0; border-radius: 24rpx; /* opacity: 0.45; */ /* background: #FFFFFF; */ background: rgba(255, 255, 255, .45); /* background-image: linear-gradient(128deg, #1AACAC 0%, #13DAD8 100%); */ } /* #popup1 .wux-popup__content { border-radius: 40rpx; } */ /* .location .img { position: relative; } */ .location image { width: 72rpx; height: 72rpx; margin-right: 20rpx; border-radius: 50%; } /* .location .img2 { width: 96rpx; height: 28rpx; position: absolute; left: 0; top: 68rpx; } .location .img text { position: absolute; left: 26rpx; top: 66rpx; font-size: 20rpx; color: #fff; } */ /* .location .text { overflow: hidden; } */ /* .location text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } */ .location .text-box .active { width: 44rpx; height: 30rpx; color: #FF8686; font-size: 16rpx; border-radius: 8rpx; border: 2rpx solid #FF8686; margin-left: 10rpx; } .swiper-box { position: relative; height: 300rpx; /* margin-top: 20rpx; */ /* padding: 0 30rpx; */ } .swiper-box swiper { width: 100%; height: 100%; border-radius: 24rpx; overflow: hidden; transform: translateY(0); } .swiper-box image { width: 100%; height: 100%; border-radius: 24rpx; /* box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01), 0px 2px 4px 0px rgba(0, 0, 0, 0.15); */ } /*用来包裹所有的小圆点 */ .swiper-box .swiper-dots { position: absolute; width: 210rpx; height: 20rpx; display: flex; flex-direction: row; justify-content: center; left: 50%; transform: translateX(-50%); bottom: 16rpx; } /*未选中时的小圆点样式 */ .swiper-dots .swiper-dot { width: 12rpx; height: 12rpx; background: #FA7D22; opacity: 0.2; margin-right: 8rpx; border-radius: 12rpx; } /*选中以后的小圆点样式 */ .swiper-dots .swiper-dot-active { width: 24rpx; height: 12rpx; background: #FA7D22; border-radius: 6rpx; opacity: unset; } .content .title { margin-top: 12rpx; } .content .title, .content .title-text { height: 80rpx; /* padding: 0 30rpx; */ font-size: 36rpx; font-family: PingFangSC-Semibold, PingFang SC; color: #333; /* font-family: PingFangSC-Medium; */ /* font-size: 18px; */ /* color: #fff; */ } .content .title-text { margin-left: 10rpx; font-weight: 600; } .content .title image { width: 32rpx; height: 32rpx; } .content .list { padding: 0 30rpx; overflow: hidden; margin-top: -20rpx; } .content .item { margin: 20rpx 0; width: 100%; background: #fff; border-radius: 24rpx; box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55); /* box-shadow: 0px 4rpx 8rpx 0px rgba(221, 190, 190, 0.01), 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.15); */ } .content .item-top { width: 100%; height: 282rpx; /* background: blue; */ } .content .item-text { padding: 22rpx 28rpx; } .content .item-text image { width: 54rpx; height: 38rpx; /* 46+8 */ } .content .item-text .box { position: relative; margin-right: 12rpx; } .content .item-text .box view { position: absolute; left: 0; top: 0; width: 46rpx; height: 38rpx; color: #fff; } .content .item-btn { /* height: 78rpx; */ /* width: 100%; */ /* background: rgba(19,218,216,0.09); */ position: relative; padding: 0 30rpx 30rpx; } .content .item-btn .btn { width: 190rpx; height: 68rpx; color: #fff; background: #FA7D22; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01); border-radius: 39rpx; font-family: PingFangSC-Semibold, PingFang SC; } /* .content .case-list { white-space: nowrap; margin-bottom: 48rpx; } */ .content .case-list .case-item { margin-left: 30rpx; margin-bottom: 48rpx; width: 248rpx; /* height: 100px; */ /* display: inline-block; */ border-radius: 16rpx; box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55); } .content .case-item image { width: 248rpx; height: 248rpx; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .content .case-item .text-box { padding: 20rpx; } /* .content .item-btn image { height: 84rpx; width: 303rpx; position: absolute; right: 0; top: -4rpx; } */ /* .content .item-btn image text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; font-family: PingFangSC-Semibold; padding-left: 22rpx; } */ /* .content { min-height: 934rpx; } */ .home-coupon .img-box { position: relative; } .home-coupon .coupon-popup-img { height: 958rpx; width: 100%; position: relative; } .coupon-popup-img1 { height: 958rpx; width: 100%; } .home-poster .coupon-popup-img { height: 824rpx; width: 100%; } .home-coupon .img-box text { position: absolute; bottom: 156rpx; left: 172rpx; color: #C3004C; font-size: 24rpx; } .coupon-popup { background-color: #fff; width: 558rpx; height: 446rpx; border-radius: 40rpx; padding: 0 66rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .coupon-popup .item { height: 135rpx; padding: 34rpx 0 40rpx; } .coupon-popup .item-left { width: 145rpx; height: 100%; font-family: PingFangSC-Semibold; color: #FFFFFF; font-size: 32rpx; border-top-left-radius: 16rpx; border-bottom-left-radius: 16rpx; background-image: radial-gradient(circle at 0px 50%, #fff 15rpx, #FF7676 15rpx); } .coupon-popup .item-right { justify-content: center; align-items: flex-start; padding-left: 16rpx; border-top-right-radius: 16rpx; border-bottom-right-radius: 16rpx; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13); } .coupon-popup .item-right text { font-size: 20rpx; color: #000; } .coupon-popup .btn { width: 416rpx; height: 92rpx; background: #85DBD8; border-radius: 52px; color: #FFFFFF; font-size: 36rpx; } .btm-toast { position: fixed; bottom: 8rpx; width: 100%; /* overflow: hidden; */ } .btm-toast .margin-box { margin: 0 20rpx; border-radius: 24rpx; height: 192rpx; padding: 0 44rpx; background-color: rgba(51, 51, 51, 0.89); position: relative; } .btm-toast .left-image { width: 112rpx; height: 112rpx; border: 2rpx solid #FFFFFF; box-sizing: border-box; border-radius: 50%; } .btm-toast .right { margin-left: 18rpx; line-height: 38rpx; } .btm-toast .right text { font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; } .btm-toast .close { width: 48rpx; height: 48rpx; border-radius: 50%; position: absolute; right: -12rpx; top: -14rpx; } .btm-toast .btn { width: 136rpx; height: 50rpx; background: #FA7D22; border-radius: 29rpx; font-size: 28rpx; font-family: PingFangTC-Medium, PingFangTC; color: #fff; position: absolute; right: 48rpx; bottom: 28rpx; } .plan-scroll-x::-webkit-scrollbar { display: none; /* Chrome Safari */ } .content { padding: 0 30rpx; } .content .image-bgc { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .navbar-box { width: 100%; /* height: 100%; */ position: fixed; top: 0; left: 0; } .navbar-box-container { box-sizing: border-box; position: absolute; display: flex; align-items: center; z-index: 999; } .navbar-box-container .navbar-location { width: 48rpx; height: 48rpx; margin-left: 20rpx; margin-top: 10rpx; } .navbar-box-container .navbar-tips { color: #fff; margin-top: 10rpx; } .navbar-distance { margin-left: 72rpx; font-size: 20rpx; color: #fff; position: absolute; z-index: 99; } .navbar-hint { position: absolute; margin-top: 10rpx; z-index: 99; } .navbar-hint image { position: absolute; height: 78rpx; width: 356rpx; margin-left: 38rpx; color: #333; } .navbar-hint-tip { position: absolute; top: 36rpx; left: 0; font-size: 20rpx; margin-left: 68rpx; height: 60rpx; width: 356rpx; } .navbar-arrow { width: 48rpx; height: 48rpx; margin-top: 10rpx; } .navbar-bg-white { background: #F7F8FA; } /* 顶部banner样式 */ .content { padding: 0; } /* 顶部banner */ .top-banner { width: 750rpx; height: 700rpx; } .top-banner .top-swiper { width: 100%; height: 100%; } .active-swiper { margin-top: 110rpx !important; } .top-banner .top-swiper swiper-item image { width: 100%; height: 640rpx; } /* 消息提示框 */ .message-box { width: 690rpx; height: 50rpx; margin-left: 30rpx; display: flex; align-items: center; } .message-box .trumpet { width: 30rpx; height: 30rpx; } .message-box .message-tip { height: 50rpx; line-height: 50rpx; width:400rpx; font-size: 20rpx; margin-left: 16rpx; } message-contents{ width: 240rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } .message-tip swiper-item{ width: 100%; height: 100%; display: flex; flex-shrink: 0; } .message-box .goMessage { color: #FA7D22; font-size: 20rpx; margin-left: 60rpx; width: 100rpx; flex-shrink: 0; } .message-box .message-icon { width: 48rpx; height: 48rpx; margin-left: 194rpx; position: relative; } .message-box .message-icon image{ width: 48rpx; height: 48rpx; } .message-total { width: 27rpx; height: 27rpx; background-color: #FF4414; border-radius: 50%; position: absolute; top: 0; right: 0; color: #FFFFFF; font-size: 24rpx; line-height: 27rpx; text-align: center; } /* 肤龄 */ .skin-box { width: 690rpx; margin-left: 30rpx; height: 120rpx; background-color: #FFFFFF; margin-top: 30rpx; border-radius: 20rpx; display: flex; align-items: center; overflow: hidden; } .skin-box-left { width: 400rpx; display: flex; align-items: center; } .skin-box-right { width: 290rpx; height: 100%; line-height: 120rpx; text-align: right; } .skin-box .skin-title { color: #333; margin-left: 40rpx; font-weight: 600; font-size: 32rpx; } .skin-box .skin-date { color: #333; margin-left: 38rpx; font-size: 20rpx; } .skin-box .skin-age { font-size: 20rpx; margin-right: 40rpx; } .skin-box .skin-age text { color: #FA7D22; font-size: 56rpx; } /* 项目分类 */ .project-classify { width: 690rpx; height: auto; margin-left: 30rpx; background-color: #FFFFFF; margin-top: 20rpx; border-radius: 20rpx; display: flex; flex-wrap: wrap; padding-top: 40rpx; box-sizing: border-box; padding-bottom: 40rpx; } .project-classify .project-classify-item { flex-shrink: 0; width: 80rpx; text-align: center; margin-left: 100rpx; } .project-classify .project-classify-item:first-child { margin-left: 40rpx; } .project-classify .project-classify-item:nth-child(n+5) { margin-top: 40rpx; } .project-classify .project-classify-item:nth-child(5) { margin-left: 40rpx; } .project-classify .project-classify-item image { width: 56rpx; height: 56rpx; } .project-classify .project-classify-item view { font-size: 20rpx; color: #333; } /* 推荐项目 */ .recommend-project { margin-left: 30rpx; font-weight: 600; font-size: 32rpx; margin-top: 40rpx; color: #333333; } /* 推荐项目轮播图 */ .projectImage { width: 100%; height: 380rpx; margin-top: 34rpx; } .projectImage-item { height: 380rpx; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .projectImage-item image { width: 100%; height: 100%; } .projectImage-item .project-box { width: 650rpx; height: 380rpx; border-radius: 20rpx; overflow: hidden; } .projectImage-item .project-box-top { width: 100%; height: 204rpx; } .projectImage-item .project-box-top image { height: 100%; width: 100%; } .projectImage-item .project-box-bottom { background-color: #FFFFFF; width: 650rpx; height: 120rpx; padding: 0 20rpx; padding-top: 20rpx; box-sizing: border-box; } .projectImage-item .project-box-bottom .project-title { color: #222222; font-size: 28rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .project-box-bottom .project-box-bottom-A { height: 56rpx; margin-top: 20rpx; display: flex; align-items: center; /* justify-content: space-between; */ } .project-box-bottom-A .project-sum { font-size: 20rpx; color: #999999; } .project-box-bottom-A .project-price { color: #FA4622; font-size: 24rpx; margin-left: auto; } .project-box-bottom-A .project-price text { color: #FA4622; font-size: 40rpx; } .projectImage-item .boxSmall { width: 650rpx; height: 324rpx; margin: 0 auto; overflow: hidden; border-radius: 20rpx; } .projectImage-item .boxBig { width: 650rpx; height: 380rpx; border-radius: 20rpx; overflow: hidden; } .projectImage-item .imageBig { width: 650rpx; height: 240rpx; } .projectImage-item .bottomBig { width: 650rpx; height: 140rpx; } /* 美丽秘籍 */ .article { width: 750rpx; background: linear-gradient(180deg, #FFFFFF 0%, #f7f8fa 100%); height: auto; margin-top: 40rpx; border-radius: 10px 10px 0px 0px; overflow: hidden; padding-bottom: 40rpx; } .article-tab { height: 100rpx; width: 100%; white-space: nowrap; display: flex; } .articleFixed { position: fixed; top: var(--top--); left: 0; background-color: #fff; } .article-tab .tab-item { margin-top: 40rpx; box-sizing: border-box; display: inline-block; position: relative; margin-left: 60rpx; font-size: 28rpx; color: #333333; } .article-tab .tab-item:first-child { margin-left: 30rpx; } .tab-item-active { font-weight: 700; position: relative; } .tab-item-active::before { content: ''; position: absolute; bottom: 4rpx; left: 0px; width: 104%; height: 12rpx; background-color: #fa7d22; border-radius: 10rpx; } /* 美丽秘籍瀑布流布局 */ .main { display: flex; align-items: flex-start; } .column { /* width: 50%; */ } .column_item { margin-left: 30rpx; margin-top: 20rpx; } .column_pic { display: block; width: 330rpx; height: 330rpx; border-radius: 10px 10px 0 0; } .hide { display: none; } .main-content { height: 172rpx; width: 330rpx; background-color: #FFFFFF; border-radius: 0 0 10px 10px; padding: 20rpx; box-sizing: border-box; } .main-title { color: #222222; font-size: 28rpx; height: 80rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main-bottom { margin-top: 20rpx; display: flex; justify-content: space-between; font-size: 24rpx; color: #666; } .plan { height: 240rpx; margin-top: 20rpx; } .plan .plan-item { height: 100%; padding: 2rpx; border-radius: 24rpx; overflow: hidden; background: #FFFFFF; } .plan .plan-item .top-text { height: 76rpx; padding: 0 20rpx; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; } .plan .plan-item .top-text text { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; } .plan .plan-item .top-text .plan-process { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FA7D22; } .prites { width: 160rpx; height: 160rpx; } .plan .plan-item .plan-item-guide-img { width: 100%; display: block; } .plan .plan-item .bottom-box { /* width: 100%; */ border-radius: 24rpx; background-color: #fff; } .plan .bottom-box .sum { font-size: 80rpx; font-family: DINCondensed-Bold, DINCondensed; font-weight: bold; color: #FA7D22; } .plan .bottom-box .text { font-size: 24rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #666666; } .plan-scroll-x { padding: 0 12rpx; } .plan-scroll-x image { width: 140rpx; height: 140rpx; margin-right: 20rpx; background-color: #FA7D22; flex-shrink: 0; border-radius: 20rpx; } .project-item { margin-bottom: 20rpx; } .project-item image { height: 300rpx; width: 100%; border-radius: 24rpx; } .article text { font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; } .article-item { background: #FFFFFF; border-radius: 24rpx; /* padding-left: 40rpx; */ } .article .left { height: 300rpx; width: 300rpx; margin-right: 20rpx; } .article .left image { width: 166rpx; height: 166rpx; margin-bottom: 14rpx; /* background-color: yellow; */ } .article .right-item image { width: 80rpx; height: 80rpx; } .article .right .article-item { padding-left: 40rpx; } .invite { margin-top: 32rpx; } .invite .invite-title { margin-left: 10rpx; font-size: 36rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; line-height: 50rpx; } .invite .invite-banner { margin-top: 20rpx; display: block; width: 100%; height: 300rpx; } /* 打卡活动 免费领取菲洛嘉产品 几号 *体验项目累计6天/月 */ .carding { width: 690rpx; height: 300rpx; background: #FFFFFF; border-radius: 24rpx; } .carding .top { display: flex; align-items: center; width: 100%; height: 80rpx; } .carding .top .title { margin-left: 20rpx; font-size: 28rpx; font-weight: 400; line-height: 80rpx; color: #333333; flex: 1; } .carding .top .img { margin-right: 20rpx; width: 56rpx; height: 56rpx; } .carding_content { margin-top: 16rpx; width: 590rpx; margin-left: 50rpx; display: flex; align-items: center; position: relative; } .carding_item { z-index: 11; margin-right: 31rpx; width: 72rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } .carding__img { width: 72rpx; height: 72rpx; } .carding_number { margin-top: 5rpx; font-size: 24rpx; font-weight: 400; color: #333333; } .viewData { margin-top: 20rpx; width: 100%; height: 50rpx; text-align: center; line-height: 50rpx; font-size: 24rpx; font-weight: 400; color: #999999; } .line_show { margin-left: 10rpx; z-index: 8; position: absolute; width: 534rpx; height: 4rpx; background: #F9DB55; top: 36rpx; } /* 几号 */ /* ================================================= */ .use-popup { width: 640rpx; height: 598rpx; background: #FFFFFF; border-radius: 40rpx; padding: 60rpx 48rpx; box-sizing: border-box; position: relative; /* justify-content: center; */ /* justify-content: space-evenly; */ } .use-popup .close-img { width: 56rpx; height: 56rpx; /* background: red; */ position: absolute; top: 16rpx; right: 16rpx; } .use-popup .title { /* margin-top: 60rpx; */ font-size: 36rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #000000; } .use-popup .text-cotent { /* background-color: red; */ overflow-y: scroll; text-align: left; /* height: 100%; */ } .title_guild { margin-bottom: 30rpx; width: 520rpx; text-align: center; font-size: 36rpx; font-weight: 500; color: #000000; } .inText { margin-top: 20rpx; width: 540rpx; font-size: 28rpx; font-weight: 400; color: #000000; line-height: 40rpx; } .skin-popup .wux-landscape__inner { padding: 0 !important; } .skin-popup .popup-index--wux-popup { width: 650rpx !important; max-width: 650rpx !important; } /* =============新用户需求============ */ .onTag { margin-top: 20px; width: 100%; display: flex; align-items: center; justify-content: center; } .onTag-index { width: 12rpx; height: 12rpx; background: #FFFFFF; margin-right: 12rpx; border-radius: 12rpx; } .onTag-index-select { border-radius: 12rpx; width: 12rpx; height: 12rpx; background: #999999; margin-right: 12rpx; } /* */ /* */ /* 新用户专享 修丽可项目 立即领取 */ .newAcountText { width: 100%; text-align: center; position: absolute; bottom: 324rpx; font-size: 44rpx; color: #FFFCF7; } .couponCard { width: 100%; text-align: center; position: absolute; bottom: 178rpx; font-weight: 500; font-size: 44rpx; } .colorShowLike { color: #CC5D00; } .colorShowLikeGet { color: #A84C01; } .colorVFace { color: #AF6E0A; } .colorVFaceGet { color: #925900; } .getNow { width: 100%; text-align: center; position: absolute; font-size: 46rpx; font-weight: 500; bottom: 32rpx; } .scape-block { background: #FFFFFF; position: relative; } .scape-block .close { position: absolute; right: 16rpx; top: 16rpx; width: 56rpx; height: 56rpx; } .scape-block .close image { width: 100%; height: 100%; } .van-center-enter-to { padding: 80rpx 48rpx 0 48rpx; width: 640rpx; height: 556rpx; } .loading { /* margin-top: 80rpx; */ position: relative; left: 50%; transform: translateX(-50%); width: 240rpx; height: 240rpx; } .loading image { width: 100%; height: 100%; } .matching-tips { margin-top: 50rpx; font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 40rpx; text-align: center; } /* 悬浮图标 */ .suspend { width: 140rpx; height: 140rpx; position: fixed; left: 20rpx; bottom: 50rpx; z-index: 1; } .suspend image { width: 100%; height: 100%; } /* 十月一活动弹窗 */ .activePop { width: 490rpx; height: 546rpx; } .activePop image { width: 100%; height: 100%; } .activePopBox { margin-left: 20rpx; margin-top: 40rpx; }