【发布时间】：2021-09-21 12:53:54
【问题描述】：
大家下午好，我正在为我的网站制作导航栏，如您所知，响应能力非常重要，因此我希望移动设备上的间距完美。
确切地说，我正在使用 FontAwesome 的堆叠图标技术制作带有商品计数的购物车，我部分使用了我在网上找到的一些代码，但我注意到购物车图标与中心，当我想使用等间距时，这对于移动屏幕上的导航栏来说很糟糕。
这是 HTML：
<li class="nav-item">
<span class="fa-stack fa-2x has-badge" :data-count="totalItems" @click="showCart" >
<i class="fa fa-circle fa-stack-1x fa-inverse"></i>
<i style="" class="fa fa-shopping-cart fa-stack-1x red-cart"></i>
</span>
</li>
这里是 SCSS：
$shopping-cart-red: #495057;
.fa-stack[data-count]:after{
position:absolute;
right:0.7em;
margin-left:auto;
top:0.3em;
content: attr(data-count);
font-size:40%;
padding:0.4em;
border-radius:999px;
line-height:.75em;
color: #FFFFFF;
color:$shopping-cart-red;
text-align:center;
min-width:2em;
font-weight:bold;
border:solid;
background: #FFFFFF;
}
.fa-circle {
color:#495057;
}
.red-cart {
color: #495057; background:#FFFFFF;
//margin-top:-1px;
}
JSFiddle 代码链接： https://jsfiddle.net/Lo17ha8w/
这是我网站上的完整预览，因为我不知道如何将它放在 JSFiddle 上： https://gyazo.com/d28c9710cec210d9416cbc607e02d385
完整代码：
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-white" v-if="shopInfo">
<div class="container-fluid">
<div class="col-lg-6">
<div class="navbar-collapse dual-nav collapse">
<ul class="navbar-nav telAndMail mt-2 mt-lg-0 w-100 p-jc-start">
<li class="nav-item p-pr-1">
<i class="pi pi-phone nav-link"><span class="p-component p-ml-2">{{shopInfo.tel_nr}}</span></i>
</li>
<li class="nav-item p-pl-1 p-pr-1">
<i class="pi pi-envelope nav-link p-pr-1"><span class="p-component p-ml-2">{{shopInfo.email}}</span></i>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 p-text-right navbar-collapse collapse dual-nav">
<ul class="navbar-nav mt-2 mt-lg-0 w-100 p-jc-end">
<li class="nav-item p-pr-1 p-pl-0">
<span class="p-component">Our showroom</span>
</li>
<li class="nav-item p-pl-1 p-pr-1">
<span class="p-component">Helpdesk</span>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-white p-mb-3">
<div class="container-fluid">
<div class="col-lg-2">
<button class="navbar-toggler" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-25 shop-image">
<ul class="navbar-nav">
<li class="nav-item active">
<router-link :to="{ name: 'home' }"><img v-if="shopInfo" class="navbar-brand mx-auto d-block w-75" :src="'/shop/' + shopInfo.image" :alt="shopInfo.name" /></router-link>
</li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="nav-link">
<ul class="navbar-nav mt-2 mt-lg-0 w-100 p-jc-center search-section">
<li class="nav-item p-pl-1 p-pr-1 w-25 search-dropdown">
<Dropdown v-model="selectedCategory" :options="categories" optionLabel="name" class="w-100" placeholder="Select a Category" />
</li>
<li class="nav-item p-pl-1 p-pr-1 w-50 search-autocomplete">
<AutoComplete v-model="selectedProduct" :suggestions="filteredProducts" @complete="searchProduct($event)" placeholder="Search for a Product">
<template #item="slotProps">
<img :alt="slotProps.item.product_image[0].name" :src="'/products/' + slotProps.item.product_image[0].image" width="50px" height="50px" />
<div>{{slotProps.item.name}}</div>
</template>
</AutoComplete>
</li>
<li class="nav-item p-pl-1 p-pr-1 w-10 search-button">
<Button label="Search" class="w-100" />
</li>
</ul>
</div>
</div>
<div class="col-lg-2 p-text-right shopping-cart">
<ul class="navbar-nav mt-2 mt-lg-0 w-100 p-jc-end">
<li class="nav-item">
<span class="fa-stack fa-2x has-badge" :data-count="totalItems" @click="showCart" >
<i class="fa fa-circle fa-stack-1x fa-inverse"></i>
<i style="" class="fa fa-shopping-cart fa-stack-1x red-cart"></i>
</span>
</li>
<li class="nav-link" v-if="isLoggedIn" @click="logout">
<Button v-if="isLoggedIn" icon="pi pi-sign-in" label="Log out" class="p-button-raised p-button-danger p-button-rounded"/>
</li>
</ul>
<!-- <div><li class="nav-link" v-if="isLoggedIn" @click="logout"><Button v-if="isLoggedIn" icon="pi pi-sign-in" label="Log out" class="p-button-raised p-button-danger p-button-rounded"/></li></div>
<Button :disabled="totalItems == '0'" icon="pi pi-shopping-cart" id="body" class="p-button-raised p-button-rounded p-button-secondary ml-auto" :label="String(totalItems)" @click="showCart" /> -->
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 550px">
<DataTable :value="cart">
<template #header>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="badge badge-primary badge-pill">{{totalItems}}</span>
{{formatCurrency(totalPrice)}}
</li>
</template>
<Column field="name">
<template #body="slotProps">
{{slotProps.data.name}}
</template>
</Column>
<Column>
<template #body="slotProps">
<img :src="'/products/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price">
<template #body="slotProps">
{{formatCurrency(slotProps.data.subtotal)}}
</template>
</Column>
<Column field="quantity" class="cartArrows">
<template #body="slotProps">
<div class="p-grid mt-0 p-0">
<div class="p-col-9 mt-0 mb-0">
<InputNumber v-model="slotProps.data.quantity" inputClass="amountItem" decrementButtonClass="decreaseAmount" incrementButtonClass="increaseAmount" showButtons @input="changeQuantityItem(slotProps.data)" />
</div>
<div class="p-col-3 mt-0 mb-0">
<Button v-model="slotProps.data.id" class="p-button-rounded p-button-danger deleteFromCartBtn p-col-6" icon="pi pi-times" @click="removeFromCart(slotProps.data)" />
</div>
</div>
</template>
</Column>
</DataTable>
<router-link :to="{ name: 'cart' }" v-if="user_type == 0 || user_type == 1"><Button class="p-button-raised float-right m-2" @click="showCart()">Checkout</Button></router-link>
</OverlayPanel>
</div>
</div>
</nav>
<main class="py-0">
<Toast position="top-right">{{error}}</Toast>
<router-view @loggedIn="change"></router-view>
</main>
</div>
</template>
作用域样式：
<style lang="scss" scoped>
::v-deep .p-autocomplete, ::v-deep .p-autocomplete > input {
width:100%;
}
.navbar:nth-child(2) {
box-shadow: rgb(30 50 93 / 25%) 0px 0px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
}
::v-deep .p-overlaypanel::after, .p-overlaypanel:before {
background:none !important;
border:none !important;
}
::v-deep .p-datatable-thead {
display:none;
}
::v-deep .p-overlaypanel-close {
z-index:1;
}
@media (max-width: 768px) {
::v-deep .p-autocomplete, ::v-deep .p-autocomplete > input {
width: auto;
}
.search-autocomplete {
width:100%!important;
}
.search-dropdown, .shop-image, .search-button {
display:none;
width:0px!important;
position: absolute!important;
left: -999em!important;
}
.search-section {
flex-direction: row;
}
.navbar > .container-fluid {
flex-wrap: nowrap;
display:flex;
align-items:center;
}
.navbar > .container-fluid > .col-lg-2{
padding: 0;
}
.navbar > .container-fluid > .col-lg-8, .navbar > .container-fluid > .col-lg-8 > .nav-link {
padding:0;
}
.nav-item > .fa-stack[data-count]:after {
right: 0.2em;
}
.nav-item > .fa-stack {
width:2.1em;
}
}
</style>
当然，汉堡图标的宽度和购物车的宽度是完全不同的。解决这个问题的最佳方法是什么？
【问题讨论】：
-
购物车居中。由于居中时使用了推车的整个宽度，因此它看起来有点偏离，还包括把手。但是没有考虑堆叠的圆圈。
-
感谢您指出这一点！
标签： html css sass frontend font-awesome