<div class="quantity-info"> <div class="sku-quantity"> <span>{{ label }}</span> <div class="btn-box"> <div class="btn"> <button :disabled="!canDec()" @click="decQuantity()" class="btn-minus"></button> </div> <p class="btn-input"> <input ref="input" pattern="[0-9]*" :value="quantity" type="tel" @input="$emit('input', $event.target.value)" @change="$emit('change', $event.target.value)" /> </p> <div class="btn"> <button :disabled="!canInc()" @click="incQuantity()" class="btn-plus"></button> </div> </div> </div> </div> .quantity-info { padding: 48px 0 52px; & .sku-quantity { display: flex; align-items: center; & span { font-size: 30px; color: #232323; flex: 1; } & .btn-box { height: 58px; border: 1px solid #e2e2e2; overflow: hidden; display: flex; align-items: center; justify-content: center; & .btn { width: 58px; height: 100%; font-size: 30px; background: #fff; & button { width: 100%; height: 100%; border: none; outline: none; background: #fff; position: relative; display: block; &:disabled { &.btn-minus:before, &.btn-plus:before, &.btn-plus:after { content: ''; border-color: #e2e2e2; } } &.btn-minus:before, &.btn-plus:after { position: absolute; top: 26px; left: 18px; border-bottom: 1px solid #232323; width: 22px; height: 1px; content: ' '; } &.btn-plus:before { position: absolute; top: 27px; left: 20px; border-bottom: 1px solid #232323; width: 22px; height: 1px; content: ' '; } &.btn-plus:before { transform: rotate(90deg); } } } & .btn-input { /*cursor: pointer; box-sizing: content-box; border-width: 0 1px; border-style: solid; border-color: #e2e2e2;*/ border-left: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; /*overflow: hidden;*/ text-align: center; & input { -webkit-appearance: none; height: 58px; /*width: 100%;*/ width: 68px; outline: none; border: none; text-align: center; font-size: 32px; color: #232323; } } } } }
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复