.sld_cart_index { width: 100%; height: 100%; .cart_content { width: 1200px; margin: 23px auto; .cart_title { width: 1200px; height: 38px; background: #f3f3f3; padding: 0 75px 0 20px; border-radius: 2px; overflow: hidden; box-sizing: border-box; .cart_title_pre { &:nth-child(2) { margin: 0 161px 0 161px; } &:nth-child(3) { width: 243px; text-align: center; } &:nth-child(4) { margin: 0 40px 0 38px; } &:nth-child(5) { width: 286px; text-align: center; } img { width: 14px; height: 14px; margin-right: 20px; cursor: pointer; } span { font-size: 14px; //font-family: Microsoft YaHei; font-weight: bold; color: #333333; text { position: absolute; } } } } .cart_lists { margin-bottom: 20px; .cart_lists_pre { padding-top: 21px; .store_info { margin-bottom: 6px; padding-left: 21px; width: 1200px; box-sizing: border-box; .store_sel { width: 14px; height: 14px; margin-right: 20px; cursor: pointer; } .store_des { span { font-size: 14px; //font-family: Microsoft YaHei; font-weight: bold; color: #434343; } img { width: 6px; height: 10px; margin-left: 10px; } } .store_kefu { margin-left: 10px; cursor: pointer; } .store_coupons { position: relative; width: 70px; height: 24px; margin-left: 20px; cursor: pointer; .store_coupons_bg { width: 70px; height: 24px; } .store_coupons_close { width: 100%; margin-top: 10px; padding-right: 2px; img { position: relative; top: 4px; width: 12px; height: 11px; cursor: pointer; } } &:before, &:after { display: block; content: ''; position: absolute; right: 7px; width: 0; height: 0; border: 4px solid transparent; border-radius: 2px; } &:before { top: 11px; border-top: 4px solid #F04E46; } &:after { top: 9px; border-top: 4px solid #f7f7f7; } &.active { &:before { bottom: 10px; top: unset; transform: rotate(180deg); } &:after { bottom: 8px; top: unset; transform: rotate(180deg); } // .store_coupons_list { // display: block; // } } .store_coupons_list { // display: none; position: absolute; top: 38px; left: -29px; z-index: 99; width: 320px; // height: 230px; padding: 0 10px; background: #FFFFFF; border: 1px solid #EB0C00; cursor: default; &:before { content: ''; display: block; position: absolute; width: 0; height: 0; top: -13px; left: 53px; border: 6px solid transparent; border-bottom: 6px solid #EB0C00; } &:after { content: ''; display: block; position: absolute; width: 0; height: 0; top: -12px; left: 53px; border: 6px solid transparent; border-bottom: 6px solid #fff; } // &:hover { // display: block; // } } } .get_coupons_btn { margin-left: 20px; width: 100px; height: 20px; border: 1px solid $colorMain; span { font-size: 12px; //font-family: Microsoft YaHei; font-weight: 400; color: $colorMain; } img { width: 5px; height: 9px; margin-left: 10px; } } } .goods_con { width: 1200px; background: #ffffff; // border: 1px solid #dfdfdf; margin-bottom: 10px; border-radius: 10px; overflow: hidden; &:nth-last-of-type(1) { margin-bottom: 0; } .full_reduc_activity { width: 1200px; height: 40px; background-color: #f6f6f6; border-bottom: 1px solid #DEDEDE;; // background: #fff3f3; padding-left: 20px; .full_reduc_title { width: 46px; height: 24px; background: $colorMain; border-radius: 3px; font-size: 12px; //font-family: Microsoft YaHei; font-weight: bold; color: #ffffff; text-align: center; line-height: 24px; border-radius: 11px; } .full_reduc_des { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin: 0 16px; } .go_collect_bill { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #1a86ff; } } .goods_list { .goods_pre { position: relative; width: 100%; background-color: #f6f6f6; // border-bottom: 1px solid #E7E4E4; padding: 20px 0 20px 20px; &.active, &:hover { background-color: #FFF9F6; } &:after { content: ''; position: absolute; bottom: 0px; right: 0; z-index: 9; width: 1146px; height: 1px; background-color: #E7E4E4; } &:nth-last-child(1) { // border-bottom: none; &:after { display: none; } } .goods_pre_sel { width: 14px; height: 14px; cursor: pointer; img { width: 14px; height: 14px; } &.no_cursor { cursor: not-allowed; } } .goods_img { width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 19px 0 20px; cursor: pointer; &.no_stock_img { opacity: 0.6; } } .goods_des { height: 78px; .goods_name { width: 283px; line-height: 18px; color: #333333; font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text { cursor: pointer; } &.no_stock_name { color: #999999; } } .goods_spec { width: 283px; color: #999999; font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; // margin-top: 21px; text { cursor: pointer; } &.no_stock_spec { color: #bbbbbb; } } } .goods_price_prom { .goods_price { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; width: 243px; text-align: center; &.no_stock_price { color: #999999; } } .promotion { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: $colorMain; text-align: center; margin-top: 18px; i { color: $colorMain; font-size: 5px; margin-left: 4px; } } } .goods_num { .goods_edit_nem { width: 99px; background: #ffffff; border: 1px solid #dddddd; span { width: 30px; height: 30px; background: #fafafa; text-align: center; display: block; line-height: 30px; cursor: pointer; } input { width: 39px; height: 30px; border: none; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; text-align: center; line-height: 30px; } /*** 消除input元素 type="number" 时默认的 加减按钮*/ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/ input[type="number"] { -moz-appearance: textfield; } } .goods_stocks { color: #666666; font-size: 12px; //font-family: Microsoft YaHei; font-weight: 400; margin-top: 11px; &.goods_stocks_red { color: $colorMain; } &.goods_stocks_no { color: $colorMain; } } } .subtotal { width: 286px; color: $colorMain; font-size: 14px; //font-family: Microsoft YaHei; font-weight: bold; text-align: center; } .goods_btn { .goods_collect { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; cursor: pointer; margin-bottom: 12px; &:hover { color: $colorMain; } } .goods_del { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; cursor: pointer; &:hover { color: $colorMain; } } } } } } } // 失效商品 start .invalid_goods { .invalid_goods_title { font-size: 18px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin-top: 30px; margin-bottom: 14px; padding-left: 20px; span:nth-child(2) { font-size: 16px; font-weight: 400; color: #005EA7; cursor: pointer; margin-left: 45px; } } .invalid_goods_list { width: 1200px; background: #F0F0F0; border-radius: 10px; overflow: hidden; // border: 1px solid #dfdfdf; .invalid_goods_pre { border-bottom: 1px solid #dddddd; padding: 20px 0 20px 11px; &:nth-last-child(1) { border-bottom: none; } .invalid_tips { width: 34px; height: 24px; background: #dddddd; border-radius: 3px; font-size: 12px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; display: block; text-align: center; line-height: 24px; } .invalid_img { width: 100px; height: 100px; opacity: 0.6; margin: 0 19px 0 10px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .invalid_des { .invalid_name { width: 283px; font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #999999; line-height: 18px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .invalid_spec { width: 283px; margin-top: 21px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999999; } } .invalid_price { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #999999; width: 243px; text-align: center; } .invalid_num { .invalid_edit_num { width: 99px; background: #ffffff; border: 1px solid #eeeeee; span { width: 30px; height: 30px; background: #fafafa; text-align: center; line-height: 30px; display: block; cursor: pointer; } input { width: 39px; height: 30px; text-align: center; line-height: 30px; border: none; display: block; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } /*** 消除input元素 type="number" 时默认的 加减按钮*/ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/ input[type="number"] { -moz-appearance: textfield; } } .invalid_off { font-size: 12px; //font-family: Microsoft YaHei; font-weight: 400; color: #666666; margin-top: 11px; } } .invalid_subtotal { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #999999; width: 286px; text-align: center; } .invalid_btn { .invalid_collect, .invalid_del { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #666666; cursor: pointer; } .invalid_collect:hover, .invalid_del:hover { color: $colorMain; } .invalid_collect { margin-bottom: 18px; } } } } } // 失效商品 end } .options_btn { width: 1200px; height: 72px; background: #f6f6f6; padding-left: 20px; margin: 0 auto; .options_btn_left { .options_sel { img { width: 14px; height: 14px; cursor: pointer; } span { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin-left: 14px; } } .del_all, .del_all_invalid { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 74px; margin-left: 21px; } .del_all:hover, .del_all_invalid:hover { color: $colorMain; } } .options_right { .options_sel_num { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; span { color: $colorMain; font-size: 16px; font-weight: bold; margin-left: 4px; margin-right: 4px; } } .options_line { width: 55px; // height: 50px; // background: #dddddd; // margin: 0 41px 0 39px; } .options_sel_price { .options_all_count { span:nth-child(1) { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; } span:nth-child(2) { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin-top: 14px; } } .options_promotion { // margin-left: 30px; span:nth-child(1) { font-size: 18px; //font-family: Microsoft YaHei; font-weight: bold; color: $colorMain; } span:nth-child(2) { font-size: 16px; //font-family: Microsoft YaHei; font-weight: 400; color: $colorMain; margin-top: 14px; } } } .go_buy { width: 160px; height: 72px; background: #666666; font-size: 26px; //font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; line-height: 72px; text-align: center; margin-left: 31px; &.active { background: $colorMain; } } } } } .cart_content_no { margin: 161px auto; img { width: 163px; height: 114px; } p { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; line-height: 39px; text-align: center; } span { width: 115px; height: 30px; background: $colorMain2; border-radius: 3px; display: block; font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; line-height: 30px; text-align: center; cursor: pointer; } } .cursor_pointer { cursor: pointer; } // 优惠券弹框 start .coupon_model { .model_coupon_list { display: flex; flex-wrap: wrap; } .sld_coupon_item { margin-right: 10px !important; } .sld_coupon_item:nth-child(2n) { margin-right: 0 !important; } } // 优惠券弹框 end // 底部操作按钮悬浮框 start .bottom_options { position: fixed; bottom: 0px; width: 100%; background: #ffffff; box-shadow: 0 -1px 8px rgba(0, 1, 1, 0.08); z-index: 100; .bottom_options_con { width: 1200px; height: 72px; // background: #eeeeee; padding-left: 20px; margin: 0 auto; .options_btn_left { .options_sel { img { width: 14px; height: 14px; cursor: pointer; } span { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin-left: 14px; } } .del_all, .del_all_invalid { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 74px; margin-left: 21px; } .del_all:hover, .del_all_invalid:hover { color: $colorMain; } } .options_right { .options_sel_num { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; span { color: $colorMain; font-size: 16px; font-weight: bold; margin-left: 4px; margin-right: 4px; } } .options_line { width: 55px; // height: 50px; // background: #dddddd; // margin: 0 41px 0 39px; } .options_sel_price { .options_all_count { span:nth-child(1) { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; } span:nth-child(2) { font-size: 14px; //font-family: Microsoft YaHei; font-weight: 400; color: #333333; margin-top: 14px; } } .options_promotion { // margin-left: 30px; span:nth-child(1) { font-size: 18px; //font-family: Microsoft YaHei; font-weight: bold; color: $colorMain; } span:nth-child(2) { font-size: 16px; //font-family: Microsoft YaHei; font-weight: 400; color: $colorMain; margin-top: 14px; } } } .go_buy { width: 160px; height: 72px; background: #666666; font-size: 26px; //font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; line-height: 72px; text-align: center; margin-left: 31px; &.active { background: $colorMain; } } } } } // 底部操作按钮悬浮框 end // 公共样式 // 底部操作按钮 start // 底部操作按钮 end } .el-button--primary { color: #fff; background-color: $colorMain; border-color: $colorMain; } .el-button--primary:focus, .el-button--primary:hover { background: $colorMain; border-color: $colorMain; color: #fff; } .el-button:focus, .el-button:hover { background: $colorMain; border-color: $colorMain; color: #fff; }