.shop_cart_main{ .popup_con{ display: flex; flex-direction: column; height: 80vh; } .header{ width: 100%; display: flex; justify-content: space-between; padding: 30px; font-size: $font_size; box-sizing: border-box; color: $color_font_two; .miconfont{ font-size: 30px; margin-right: 10px; } } .search{ display: flex; justify-content: space-between; padding: 0 30px; .search_item{ width: 200px; height: 55px; text-align: center; line-height: 55px; color: $color_font_two; font-size: $font_size_medium; background-color: #f0f0f0; border-radius: 50px; } .search_item_select{ border: 2px solid $color_main; background-color: #ecf5ff; color: $color_main; } } .con{ padding:30px; box-sizing: border-box; flex:1; height: 0; .scroll{ height: 100%; } .product_list{ padding-bottom: 120px; .product_item{ display: flex; justify-content: space-between; &:nth-child(n+2) { margin-top: 37px; } .checkbox{ display: flex; align-items: center; } .img{ width: 126px; height: 126px; margin-left: 20px; image{ width: 100%; height: 100%; border-radius: 10px; } } .des{ flex:1; display: flex; flex-direction: column; justify-content: space-between; margin-left: 20px; padding-right: 10px; box-sizing: border-box; .title{ font-size: $font_size; color: $color_font_one; @include common_ellipsis; } .subtitle{ color: $color_font_two; font-size: $font_size_medium; } .tag{ font-size: $font_size_min; color: #fff; background-color: $color_main; border-radius: 10px; width: 65px; height: 33px; text-align: center; line-height: 33px; } } } .no_product_item_select{ opacity: 0.3; } .count{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; .price{ font-size: $font_size; font-weight: 700; color: $color_font_one; text{ font-size: $font_size_min; } } .long{ color: $color_main; font-size: $font_size_medium; } } } .empty{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; .title{ color: $color_font_two; font-size: $font_size_min; } .btn{ width: 222px; height: 68px; background-color: $color_main; font-size: $font_size; text-align: center; line-height: 68px; margin-top: 42px; color: #fff; border-radius: 50px; } } } .buy_btn{ width: 100%; position: fixed; bottom: 20px; display: flex; justify-content: center; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); .buy_con{ width: 702px; height: 95px; background-color: $color_font_one; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; box-sizing: border-box; box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.5); .icon{ width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; .miconfont{ font-size: 39px; color: #fff; } } .price_con{ flex:1; .price_real{ font-size: $font_size; color: #fff; text{ font-size: $font_size_min; } } .price_forecast{ font-size: $font_size_min; color: $color_font_two; margin-top: 10px; } } .goPay{ width: 200px; height: 95px; background-color: $color_main; border-radius: 0px 50px 50px 0px; text-align: center; line-height: 95px; font-size: 32px; color:#fff; } } } }