$pageColor:#F9F9F9; $bgColor:#FFFFFF; @mixin flexlayout { display: flex; align-items: center; justify-content: center; } page { height: 100% !important; background: #F9F9F9 !important; } .code-purchase { width: 640rpx; height: 764rpx; background: $bgColor; border-radius: 20rpx; padding-top: 64rpx; box-sizing: border-box; .title { @include flexlayout(); margin-bottom: 24rpx; text { font-size: 34rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; } } .img { margin-top: 10rpx; margin-left: 48rpx; width: 544rpx; height: 468rpx; background: $bgColor; border-radius: 2rpx; @include flexlayout(); image { width: 392rpx; height: 390rpx; } } } .btn { margin-top: 40rpx; width: 100%; height: 115rpx !important; display: flex; align-items: center; .cancel { @include flexlayout(); width: 50%; height: 100%; border-top: #E5E5E5 solid 1rpx; border-right: #E5E5E5 solid 1rpx; text { font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #666666; } } .download { border-top: #E5E5E5 solid 1rpx; // border-left:#E5E5E5 solid 0.3rpx; @include flexlayout(); height: 100%; width: 50%; text { font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FF7119; } } } .purchase { position: fixed; bottom: 0; width: 100%; height: 148rpx; background: #FFFFFF; box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05); padding: 0 30rpx; display: flex; align-items: center; justify-content: center; .purchase-btn { width: 100%; height: 92rpx; background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%); border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #FFFFFF; font-size: 30rpx; } } .pop { padding: 32rpx 30rpx 80rpx; width: 100%; height: 914rpx; background: #FFFFFF; border-radius: 22rpx 22rpx 0px 0px; overflow-y: scroll; position: relative; .pop-price { display: flex; align-items: flex-start; justify-content: space-between; .pop-price-left { flex: 1; display: flex; align-items: center; justify-content: flex-start; .pop-price-left-money { font-weight: 800; color: #FF6200; font-size: 48rpx; margin-left: 20rpx; } } } .pop-flavor { width: 100%; margin-top: 64rpx; font-weight: bold; color: #333333; font-size: 32rpx; } } //口味切换 .tab_flavor { margin-top: 14rpx; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-family: PingFang-SC-Heavy, PingFang-SC; flex-wrap: wrap; } .tab_flavor .flavorTitle-item { width: 220rpx; height: 60rpx; background-color: #FFF; border: 2rpx solid #CCCCCC; border-radius: 30rpx; font-size: 30rpx; color: #999; display: flex; justify-content: center; align-items: center; margin-right: 15rpx; font-weight: normal; margin-top: 16rpx; &:nth-child(3n) { margin-right: 0; } } .flavorTitle-item-active{ border: none !important; } .active-flavor { width: 220rpx; height: 60rpx; border-radius: 30rpx; background-color: #FF6200; border: none; color: #fff; display: flex; justify-content: center; align-items: center; } .buy-btn { position: fixed; bottom: 0; width: 100%; padding: 0 30rpx 0 58rpx; height: 148rpx; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; .buy-btn-left { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FF6200; font-size: 22rpx; } .buy-btn-right { display: flex; align-items: center; justify-content: center; margin-left: 40rpx; flex: 1; height: 92rpx; background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%); border-radius: 12rpx; font-weight: bold; color: #FFFFFF; font-size: 30rpx; } } .goods-detail { height: 100%; background: #F9F9F9; } .produce { width: 100%; margin-top: 24rpx; padding: 40rpx 30rpx 36rpx; background: #FFFFFF; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02); border-radius: 16rpx; .produce-title { font-size: 32rpx; font-weight: bold; color: #333333; } .produce-text { width: 100%; margin-top: 26rpx; font-size: 30rpx; color: #333333; line-height: 48rpx; overflow: hidden; // img,image{ // max-width: 100%; // height: auto; // } } } .about { padding: 40rpx 30rpx 40rpx; width: 100%; // height: 350rpx; background: #FFFFFF; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02); border-radius: 16rpx; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; .about-title { font-size: 32rpx; font-weight: bold; color: #333333; } .about-name { margin: 30rpx 0 20rpx; font-size: 30rpx; color: #333333; } .about-address { font-size: 30rpx; color: #333333; } .about-phone { margin: 20rpx 0 48rpx; font-size: 30rpx; color: #333333; } .about-all { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: #FF6200; } } .home-swiper { height: 100vw; .swiper-box { height: 100vw; } } ::v-deep .uni-swiper__dots-box { bottom: 48rpx !important; } .price { padding: 32rpx 30rpx 0rpx; position: relative; top: -20rpx; // height: 406rpx; background: #FFFFFF; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.02); border-radius: 16rpx; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; .price-top { font-size: 48rpx; font-weight: 800; color: #FF6200; } .price-text { margin: 30rpx 0 26rpx; font-size: 32rpx; font-weight: bold; color: #333333; } .price-banner { padding: 0 24rpx; width: 100%; height: 80rpx; background-repeat: no-repeat; background-size: cover; background-position: center; font-size: 32rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; border-radius: 12rpx; } .price-specs { margin-top: 48rpx; width: 100%; height: 110rpx; display: flex; align-items: center; justify-content: space-between; border-top: 2rpx solid #F0F0F0; .price-specs-left { flex: none; font-size: 32rpx; font-weight: bold; color: #333333; } .price-specs-main { flex: 1; margin-left: 28rpx; font-size: 30rpx; color: #666666; } } } .header{ text{ color:#fff; } }