::v-deep button::after{ border: none!important; } .page{ padding-bottom: 208rpx; } .topImg{ width: 100%; height: 850rpx; border-radius: 0 0rpx 0 40rpx; margin-bottom: 56rpx; position: relative; .indicatorBox1{ position: absolute; z-index: 3; display: flex; justify-content: center; align-items: center; margin-top: 32rpx; margin-bottom: 34rpx; left: 50%; bottom: 20rpx; .indicator1 { @include flex(row); justify-content: center; position: absolute; top: 10rpx; &__dot1 { width: 24rpx; height: 8rpx; border-radius: 4rpx; margin: 0 8rpx; transition: background-color 0.3s; background: #D4D4D4; // border-radius: 10rpx; &--active1 { background-color:#E77817; width: 60rpx; } } } .indicator-num1 { padding: 2px 0; background-color: blue; border-radius: 100px; width: 35px; @include flex; justify-content: center; &__text1 { color: red; font-size: 12px; } } } } .cen{ position: relative; padding-left: 40rpx; font-size: 36rpx; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #333333; padding-right: 34rpx; padding-bottom: 48rpx; .love{ width: 128rpx; height: 128rpx; position: absolute; right:48rpx; top: -115rpx; } .water{ width: 714rpx; height: 50rpx; position: absolute; top: -24rpx; left: 0; } .halfC{ width: 52rpx; height: 56rpx; position: absolute; top: -18rpx; left:16rpx; } .txtBox{ width: 100%; display: flex; justify-content: space-between; align-items: flex-end; .left{ } .right{ font-size: 24rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #666666; padding-right: 30rpx; } } } .parmasBox{ border-top: 2rpx solid #EAEAEA; // border-bottom: 2rpx solid #EAEAEA; // margin-top: 48rpx; width: 100%; padding: 64rpx 0; .con{ padding: 0 32rpx; background: #FFFFFF; margin-top: 0rpx; padding-bottom: 0rpx; .title{ font-size: 32rpx; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #333333; display: flex; justify-content: center; align-items: center; } .title1{ font-size: 32rpx; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #333333; display: flex; // justify-content: space-between; align-items: center; .txt{ width: 90%; display: flex; justify-content: center; align-items: center; } .add{ width: 22rpx; } } .des{ margin-top: 64rpx; .title3{ font-size: 30rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #333333; // margin-bottom: 24rpx; } .img{ margin-top: 24rpx; width: 100%; height: 800rpx; } } .list{ display: flex; flex-wrap: wrap; margin-top: 44rpx; .item{ width: 32%; height: 64rpx; border-radius: 4rpx; font-size: 30rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #333333; display: flex; justify-content: center; align-items: center; margin-right: 10rpx; // margin-bottom: 20rpx; } .act{ color: #FFFEFE; background: #333333; } .item:nth-of-type(3n){ margin-right: 0; } } } } .bot{ height: 160rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); position: fixed; width: 100%; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 40rpx; .left{ display: flex; align-items: center; .price{ font-size: 42rpx; font-family: DINAlternate-Bold, DINAlternate; font-weight: bold; color: #333333; } image{ width: 23rpx; height: 12rpx; margin-left: 16rpx; } } .right{ width: 282rpx; height: 96rpx; background: #333333; border-radius: 4rpx; border: 2rpx solid #333333; display: flex; justify-content: center; align-items: center; font-size: 32rpx; font-family: PingFang-SC-Medium, PingFang-SC; font-weight: 500; color: #FFFFFF; margin-right: 96rpx; } }