/**index.less**/ .firstConainer { height: 100vh; } .firstPageContainer { position: relative; background: url('https://oss.dayaedu.com/ktyq/1733123043908.png') no-repeat center; background-size: cover; .weui-navigation-bar { color: #FFF; } .fistSwiperSection { // height: 1142rpx; height: 85vh; // height: 750rpx; padding-top: 48rpx; swiper-item { display: flex; align-items: center; justify-content: center; // height: 85vh !important; } } .swiper-item { transition: all 0.4s ease; /* 调整过渡动画的时长和缓动函数,影响淡入淡出和缩放的速度 */ transform-origin: center center; /* 明确缩放的中心点位置 */ max-width: 90%; /* 适当增大最大宽度,让缩放效果更明显 */ max-height: 90%; /* 适当增大最大高度,让缩放效果更明显 */ // width: 592rpx; // height: 1142rpx; // height: 100%; width: 100%; height: 85vh; &.current { transition: all 0.35s ease; max-width: 100%; max-height: 100%; } &.tablet-item { image { height: 100% !important; width: initial; } } image { display: block; margin: 0 auto; // height: 100% !important; width: 100%; // background: #FFFFFF; // border-radius: 32rpx; } } .pageDot { display: flex; align-items: center; justify-content: center; padding-top: 32rpx; display: none; .dot-item { width: 12rpx; height: 12rpx; background: #FFFFFF; border-radius: 6rpx; opacity: 0.5; margin: 0 8rpx; transition: all 0.15s ease; &.current { width: 36rpx; height: 12rpx; background: #FFFFFF; border-radius: 6rpx; opacity: 1; } } } .upArrow { position: absolute; bottom: 40rpx; left: 50%; width: 75.2rpx; height: 86.4rpx; z-index: 1; transform: translateX(-50%); animation: breathe 2s infinite cubic-bezier(0, 0.21, 0, 0.88); } @keyframes breathe { 0% { opacity: 1; transform: translateX(-50%) translateY(0rpx); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-40rpx); } } } .pageContainer { height: 100vh; width: 100%; } page { height: 100vh; display: flex; flex-direction: column; background: #F5F6F7; } .scrollarea { flex: 1; overflow-y: hidden; height: 100%; } .container { position: relative; .topShadow { position: absolute; top: 0; z-index: 1; width: 100%; height: 200rpx; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); } .slider-count { position: absolute; top: 674rpx; right: 32rpx; background: rgba(0, 0, 0, 0.4); border-radius: 26rpx; border: 2rpx solid rgba(255, 255, 255, 0.3); font-weight: 600; font-size: 28rpx; color: #FFFFFF; line-height: 40rpx; text-align: center; padding: 2rpx 26rpx; z-index: 1; } swiper { height: 750rpx; } .swiper-item { width: 100%; height: 100%; image { width: 100%; height: 100%; } } .demo-text-1 { background-color: red; } .demo-text-2 { background-color: black; } .demo-text-3 { background-color: gray; } } .shop-section { background: #FFFFFF; border-radius: 20rpx; margin: 16rpx 16rpx 0; padding: 24rpx 24rpx 40rpx; .showPrice { display: flex; justify-content: space-between; align-items: center; } .left { flex: 1 auto; display: flex; align-items: flex-end; } .currentPrice { font-weight: bold; color: #FE2451; font-family: DINAlternate, DINAlternate; display: flex; align-items: flex-end; .stuff { padding-right: 2rpx; font-size: 36rpx; } .priceZ { font-size: 60rpx; line-height: 1; } .priceF { font-size: 36rpx; } .after { padding-left: 4rpx; font-size: 28rpx; line-height: 48rpx; vertical-align: bottom; } } .originPrice { padding-left: 16rpx; font-size: 32rpx; color: #AAAAAA; line-height: 44rpx; text-decoration: line-through; padding-bottom: 12rpx; } .right { padding-top: 14rpx; font-weight: 400; font-size: 28rpx; color: #777777; line-height: 40rpx; } } .shopName { font-weight: 600; font-size: 32rpx; color: #131415; line-height: 44rpx; padding: 24rpx 0 14rpx; } .shopInfo { font-size: 24rpx; color: #999999; line-height: 38rpx; padding-bottom: 40rpx; } .shop-btn { button { line-height: 88rpx; background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%); border-radius: 44rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; padding: 0 !important; margin: 0 !important; width: 100%; pointer-events: all; } } .goodsInfo { display: flex; .goodsList { display: flex; align-items: center; flex-wrap: wrap; } .goodsItem { line-height: 68rpx; background: #F4F4F5; border-radius: 12rpx; padding: 0 32rpx; margin-right: 24rpx; font-size: 28rpx; color: #131415; position: relative; margin-top: 24rpx; &.selected { background: #FEEDF0; // font-weight: 600; color: #FE2451; } &.nosale { background: #F4F4F5; color: #B1B1B1; } text { padding-left: 8rpx; } image { position: absolute; top: -14rpx; right: -14rpx; width: 56rpx; height: 28rpx; display: block; z-index: 1; } } } // .goodsSection { // margin-bottom: 156rpx; // padding-bottom: 154rpx; // } .well { height: 74rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx); } .goodsIntro { background: #FFFFFF; border-radius: 20rpx; overflow: hidden; margin: 16rpx 16rpx 8rpx; .title { font-weight: 600; font-size: 32rpx; color: #131415; line-height: 44rpx; padding: 28rpx 24rpx; } .images { image { display: block; width: 100%; } .img1 { height: 1128rpx; } .img2 { height: 1810rpx } .img3 { height: 1336rpx; } .img4 { height: 1750rpx; } } } .bottom-section { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #FFFFFF; box-shadow: inset 0rpx 2rpx 0rpx 0rpx #F0F0F0; padding: 24rpx 32rpx 24rpx 32rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx); /* 新版 iOS */ display: flex; align-items: center; box-sizing: border-box; justify-content: space-around; .orders { display: flex; align-items: center; margin-right: 40rpx; // padding: 8rpx 0 16rpx; &.active { text { color: #131415; } } image { width: 44rpx; height: 44rpx; } text { padding-left: 16rpx; font-weight: 500; font-size: 28rpx; color: #AAAAAA; line-height: 44rpx; text-align: center; } } .btnSection { flex: 1 auto; button { width: 100%; line-height: 88rpx; background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%); border-radius: 44rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; padding-top: 0; padding-bottom: 0; &[disabled][type=primary] { opacity: 0.7; } } } } // .van-overlay, .van-transition { // // pointer-events: all !important; // } // 'demo-text-1', 'demo-text-2', 'demo-text-3' .popup-section { max-height: 86vh; display: flex; flex-direction: column; .popup-container { width: 100%; background: #FFFFFF; border-radius: 32rpx 32rpx 0rpx 0rpx; box-sizing: border-box; flex: 1 auto; overflow-y: auto; overscroll-behavior: none; .popup-scroll { // overflow-x: hidden; // overflow-y: scroll; border-radius: 32rpx 32rpx 0rpx 0rpx; flex: 1 auto; // } .top-vip-img { width: 100%; } .goodsInfo { padding: 0 40rpx 48rpx; } } .addBuyer { margin: 40rpx 40rpx; background: #F6F6F6; border-radius: 20rpx; display: flex; align-items: center; justify-content: space-between; padding: 28rpx 24rpx; .icon-man { width: 28rpx; height: 36rpx; margin-right: 16rpx; flex-shrink: 1; } .addBuyer-left { display: flex; flex: 1; margin-right: 20rpx; .info { flex: 1; } } .users { font-weight: 600; font-size: 28rpx; color: #131415; line-height: 40rpx; text { padding-right: 24rpx; } } .address { padding-top: 12rpx; font-size: 24rpx; color: rgba(19, 20, 21, 0.4); line-height: 34rpx; word-break: break-all; } .arrow-right { width: 32rpx; height: 32rpx; flex-shrink: 1; } } .iconClose { position: absolute; right: 0; top: 0; z-index: 1; padding: 24rpx; width: 44rpx; height: 44rpx; } .product-section { display: flex; padding-bottom: 60rpx; .product-img { width: 160rpx; height: 160rpx; flex-shrink: 0; margin-right: 32rpx; border-radius: 6px; overflow: hidden; image { width: 100%; height: 100%; } } .product-left { display: flex; align-items: flex-start; .currentPrice { font-weight: bold; color: #FE2451; font-family: DINAlternate, DINAlternate; .stuff { padding-right: 2rpx; font-size: 36rpx; } .priceZ { font-size: 60rpx; } .priceF { font-size: 36rpx; } } .originPrice { padding-left: 16rpx; font-size: 32rpx; color: #AAAAAA; line-height: 44rpx; text-decoration: line-through; padding-top: 32rpx; } } } .goodsInfo { flex-direction: column; align-items: flex-start; padding-bottom: 90rpx; .desc { font-size: 28rpx; color: #131415; line-height: 40rpx; text { padding-left: 8rpx; font-size: 28rpx; color: #AAAAAA; line-height: 40rpx; } } } button { width: 100%; line-height: 88rpx; background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%); border-radius: 44rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; padding-top: 0; padding-bottom: 0; } } .popupBottom { // position: fixed; // bottom: 0; // left: 0; // right: 0; background: #ffffff; border-top: 2rpx solid #F0F0F0; padding: 0 32rpx 58rpx; } .current-item { font-size: 24rpx; color: #999999; line-height: 40rpx; padding: 12rpx 12rpx 20rpx; .current-select-text { padding-top: 10rpx; font-size: 26rpx; line-height: 36rpx; } text { color: #ff0047; // font-weight: bold; } font-family: DINAlternate, DINAlternate; .current-top { display: flex; align-items: flex-end; line-height: 42rpx; } .line { color: #D2D2D2; padding: 0 12rpx; } .prices { display: flex; align-items: flex-end; padding-left: 8rpx; font-weight: bold; padding-bottom: 2rpx; // vertical-align: baseline; // text { // display: inline-block; // } } .stuff { padding-right: 2rpx; font-size: 36rpx; line-height: 1.3; } .priceZ { font-size: 56rpx; line-height: 60rpx; } .priceF { font-size: 36rpx; line-height: 1.3; } } /* components/buyerInformation/index.wxss */ .icon-close-pop { position: absolute; z-index: 2; top: 28rpx; left: 20rpx; padding: 20rpx; width: 36rpx; height: 36rpx; } .container-pop { background: linear-gradient(180deg, #FFDEE7 0%, #FFFFFF 12%, #FFFFFF 100%); border-radius: 32rpx 32rpx 0rpx 0rpx; height: 86vh; display: flex; flex-direction: column; } .pop-address-title { position: relative; z-index: 1; text-align: center; padding-top: 40rpx; padding-bottom: 20rpx; font-weight: 600; font-size: 36rpx; color: #131415; line-height: 50rpx; } .section { margin: 24rpx 0; // background: linear-gradient(180deg, #E3F9FF 0%, #FFFFFF 9%, #FFFFFF 100%); border-radius: 18rpx; // overflow-x: hidden; // overflow-y: auto; flex: 1 auto; .section-content { // background: linear-gradient(180deg, #E3F9FF 0%, #FFFFFF 9%, #FFFFFF 100%); border-radius: 12rpx; overflow: hidden; } .section-title { width: 236rpx; height: 46rpx; margin: 20rpx 0 18rpx 28rpx; } .van-cell { padding: 40rpx !important; font-size: 30rpx !important; line-height: 42rpx; background-color: transparent !important; --cell-line-height: 48rpx!important; .van-field__label { color: #666666 !important; line-height: 48rpx; } .van-field__body { color: #000 !important; font-size: 30rpx !important; } .van-icon-arrow { color: #BBBBBB !important; // font-weight: 600; } } // .gender-section { // display: flex; // .gender-item { // margin-left: 24rpx; // background: rgba(28, 172, 241, 0.11); // border-radius: 12rpx; // font-weight: 500; // font-size: 28rpx; // color: #1CACF1; // width: 104rpx; // line-height: 48rpx; // text-align: center; // &.active { // background: #1CACF1; // color: #FFFFFF; // } // } // } } .pop-btn-group { padding: 24rpx 32rpx 58rpx; .submit-btn { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 88rpx; background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%); border-radius: 88rpx; font-weight: 500; font-size: 32rpx; color: #fff; } } .van-picker__toolbar, .toolbar-top { margin: 0 20px !important; padding: 0 7px !important; border-bottom: 1px solid #F2F2F2; height: auto !important; line-height: normal !important; } .van-picker__cancel, .van-picker__confirm, .toolbar-cancel, .toolbar-confirm { font-size: 16px !important; padding: 14px 0 !important; color: #777777 !important; } .van-picker__confirm, .toolbar-confirm { color: #FE2451 !important; } .toolbar-top { display: flex; align-items: center; justify-content: space-between; } .select-school { .van-cell { padding: 16px 20px; font-size: 16px; --cell-line-height: 21px!important; .van-icon-arrow { color: #BBBBBB; // font-weight: 600; } } } .searchList { .icon-search { width: 16px; height: 16px; margin: auto 5px auto auto; } .van-search { margin: 0 13px 0 !important; padding: 0 !important; height: 32px !important; background: #F6F6F6 !important; border-radius: 18px !important; border: 1px solid #FFFFFF !important; --cell-line-height: 24px!important; } .van-search__content { border-top-left-radius: 35rpx !important; border-bottom-left-radius: 35rpx !important; } .van-cell { font-size: 13px !important; } .searchBtn { width: 56px; line-height: 27px !important; padding: 0 !important; text-align: center; background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%); font-weight: 500; font-size: 14px; color: #FFFFFF; line-height: 20px; border-radius: 20px; margin-right: 3px; } } .van-action-sheet__description { font-size: 16px !important; color: #777777 !important; line-height: 22px !important; padding: 28px 0 !important; margin: 0 13px !important; } .van-action-sheet__cancel { font-size: 16px!important; line-height: 22px!important; } .one-gender, .two-gender { font-weight: 600; padding: 12px 0 !important; font-size: 16px !important; margin: 0 20px 8px !important; width: calc(100% - 40px) !important; color: #000000 !important; line-height: 22px !important; } .one-gender { margin-top: 24rpx !important; } .two-gender { margin-bottom: 24rpx !important; } .van-action-sheet__gap { height: 2rpx !important; margin: 0 40rpx !important; } .cancel-gender { font-weight: 400 !important; color: #AAAAAA !important; } .van-picker-column__item--selected { font-weight: 600; font-size: 16px; color: #000 !important; } .empty-box { // padding-top: 64rpx; // padding-bottom: 70rpx; height: 264px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; text-align: center; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; position: relative; .empty_loading { align-items: center; background-color: var(--picker-loading-mask-color, hsla(0, 0%, 100%, .9)); bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 4; } image { // width: 364rpx; height: 95px !important; } .empty-text { font-size: 14px; color: #777777; line-height: 20px; text-align: center; padding-top: 18px; } }