优化:商品详情页面运费显示样式优化

This commit is contained in:
wuhui_zzw 2023-08-31 14:38:15 +08:00
parent 35114816fe
commit 39cd329a47
1 changed files with 30 additions and 21 deletions

View File

@ -107,8 +107,8 @@
.logistics-content{
width: 80px;
margin-left: 20px;
/* width: 80px;
margin-left: 20px;*/
cursor: pointer;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
@ -120,7 +120,7 @@
}
.other-amount-format{
margin-right: 100px;
/*margin-right: 100px;*/
}
</style>
<div class="container {{ request('iframe') ? 'pt-4' : '' }}" id="product-app" v-cloak>
@ -374,26 +374,35 @@
<li v-for="(item,index) in totals">
<template v-if="item.code == 'shipping'">
{{--当内容为运费时--}}
<span class="shipping-line">
<div>@{{ item.title }}</div>
<div class="country" v-if="Object.keys(item.country).length > 0">
{{ __('shop/products.ship_to') }}
<div class="wh-20 border d-flex justify-content-center rounded-2 align-items-center">
<img :src="item.country.icon" class="img-fluid rounded-2">
</div>
<div class="country-name" @click="$refs['select-countries'].showSelectCountries()">
@{{ item.country.name }}<i class="bi bi-chevron-down"></i>
@{{ logisticsChangeCountry(item.country.id) }}
<div style="width: 100%;display: inline-flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: flex-start;">
<div style="height: 20px !important;width: 100%;display: inline-flex;justify-content: space-between;">
<span class="shipping-line">
<div>@{{ item.title }}</div>
<div class="country" v-if="Object.keys(item.country).length > 0">
{{ __('shop/products.ship_to') }}
<div class="wh-20 border d-flex justify-content-center rounded-2 align-items-center">
<img :src="item.country.icon" class="img-fluid rounded-2">
</div>
<div class="country-name" @click="$refs['select-countries'].showSelectCountries()">
@{{ item.country.name }}<i class="bi bi-chevron-down"></i>
@{{ logisticsChangeCountry(item.country.id) }}
</div>
</div>
</span>
<span class="shipping-line" v-if="item.show_tips != 1" @click="$refs['select-logistics'].showSelectLogistics()">
<div>@{{ item.amount_format }}</div>
{{--<div class="logistics-content" v-if="Object.keys(item.logistics).length > 0">
@{{ item.logistics.name }}<i class="bi bi-chevron-down"></i>
</div>--}}
</span>
<span class="shipping-line" v-else>@{{ item.amount_tips }}</span>
</div>
<div style="height: 20px!important;margin-top: 10px;width: 100%;display: inline-flex;justify-content: flex-end;">
<div class="logistics-content" v-if="Object.keys(item.logistics).length > 0">
@{{ item.logistics.name }}<i class="bi bi-chevron-down"></i>
</div>
</div>
</span>
<span class="shipping-line" v-if="item.show_tips != 1" @click="$refs['select-logistics'].showSelectLogistics()">
<div>@{{ item.amount_format }}</div>
<div class="logistics-content" v-if="Object.keys(item.logistics).length > 0">
@{{ item.logistics.name }}<i class="bi bi-chevron-down"></i>
</div>
</span>
<span class="shipping-line" v-else>@{{ item.amount_tips }}</span>
</div>
</template>
<template v-else>
<span>@{{ item.title }}</span>