响应式

This commit is contained in:
songliang 2022-08-15 14:58:30 +08:00
parent 8a391f7f53
commit 3ecea9db53
7 changed files with 67 additions and 11 deletions

View File

@ -1285,6 +1285,19 @@ body.page-account-address .addresses-wrap .item .address-bottom, body.page-check
body.page-account-address .addresses-wrap .item .address-bottom a, body.page-checkout .addresses-wrap .item .address-bottom a {
color: #2d68a8;
}
@media (max-width: 768px) {
body.page-account-address .dialog-margin, body.page-checkout .dialog-margin {
margin-top: 10px;
}
}
body.page-account-address .dialog-address, body.page-checkout .dialog-address {
display: block;
}
@media (min-width: 768px) {
body.page-account-address .dialog-address, body.page-checkout .dialog-address {
display: flex;
}
}
body.page-list .brand-item {
display: flex;
@ -1312,6 +1325,7 @@ body.page-list .curser > li > a {
display: block;
color: #242424;
transition: all 0.5s;
margin: 0 auto;
}
body.page-list .curser > li > a:hover {
text-decoration: none;

View File

@ -70,4 +70,23 @@ body.page-account-address, body.page-checkout {
}
}
// .dialog-width {
// margin: 0 auto;
// width: 90%;
// }
.dialog-margin {
@media (max-width:768px) {
margin-top: 10px;
}
}
.dialog-address {
display: block;
@media (min-width:768px) {
display: flex;
}
}
}

View File

@ -17,6 +17,7 @@ body.page-list {
li {
list-style: none;
a{
color: #242424;
text-decoration: none;
@ -30,6 +31,8 @@ body.page-list {
display: block;
color: #242424;
transition: all .5s;
margin: 0 auto;
&:hover {
text-decoration: none;
background-color: #eee;

View File

@ -83,6 +83,9 @@
default: false,
},
dialogWidth:'600px',
dialogcol:'col-4',
addresses: @json($addresses ?? []),
source: {
@ -101,6 +104,12 @@
// 实例被挂载后调用
mounted () {
this.setDialogWidth();
window.onresize = () => {
return (() => {
this.setDialogWidth()
})()
}
},
beforeMount () {
@ -108,6 +117,17 @@
},
methods: {
setDialogWidth() {
var val = document.body.clientWidth
if (val < 768) {
this.dialogWidth = '360px'
this.dialogcol = 'col-12'
} else {
this.dialogWidth = '600px'
this.dialogcol = 'col-4'
}
},
editAddress(index) {
if (typeof index == 'number') {
this.editIndex = index;

View File

@ -8,10 +8,10 @@
<p class="fw-bold fs-3 d-flex justify-content-center mt-5 mb-4">品牌列表</p>
</div>
<ul class="d-flex justify-content-between mt-3 align-items-baseline mb-3 curser">
<ul class="d-flex justify-content-start mt-3 align-items-baseline mb-3 curser flex-wrap">
@foreach ($brands as $brand)
<li class="fs-6 border flex-fill align-content-center text-center">
<a href="brands#{{ $brand['0']['first'] }}" class="py-2">{{ $brand['0']['first'] }}</a>
<li class="fs-6 border align-content-center text-center">
<a href="brands#{{ $brand['0']['first'] }}" class="py-2 px-3">{{ $brand['0']['first'] }}</a>
</li>
@endforeach
</ul>

View File

@ -7,7 +7,7 @@
<div class="row">
@foreach ($footer_content['services']['items'] as $item)
<div class="col-lg-3 col-md-6 col-12">
<div class="service-item">
<div class="service-item my-1">
<div class="icon"><img src="{{ image_resize($item['image'], 80, 80) }}" class="img-fluid"></div>
<div class="text">
<p class="title">{{ $item['title'][locale()] ?? '' }}</p>

View File

@ -4,7 +4,7 @@
$address_form_rules = $address_form_rules ?? 'addressRules';
@endphp
<el-dialog title="编辑地址" :visible.sync="{{ $address_form_show }}" width="600px" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
<el-dialog class="dialog-width" title="编辑地址" :visible.sync="{{ $address_form_show }}" :width="dialogWidth" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
<el-form ref="addressForm" :rules="{{ $address_form_rules }}" :model="{{ $address_form_key }}" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="{{ $address_form_key }}.name"></el-input>
@ -13,8 +13,8 @@
<el-input maxlength="11" v-model="{{ $address_form_key }}.phone"></el-input>
</el-form-item>
<el-form-item label="地址" required>
<div class="row">
<div class="col-4">
<div class="row dialog-address">
<div :class="dialogcol">
<el-form-item>
<el-select v-model="{{ $address_form_key }}.country_id" filterable placeholder="选择国家" @change="countryChange">
<el-option v-for="item in source.countries" :key="item.id" :label="item.name"
@ -23,18 +23,18 @@
</el-select>
</el-form-item>
</div>
<div class="col-4">
<div :class="dialogcol">
<el-form-item prop="zone_id">
<el-select v-model="{{ $address_form_key }}.zone_id" filterable placeholder="选择省份">
<el-select v-model="{{ $address_form_key }}.zone_id" filterable placeholder="选择省份" class="dialog-margin">
<el-option v-for="item in source.zones" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="col-4">
<div :class="dialogcol">
<el-form-item prop="city">
<el-input v-model="{{ $address_form_key }}.city" placeholder="输入 city"></el-input>
<el-input v-model="{{ $address_form_key }}.city" placeholder="输入 city" class="dialog-margin"></el-input>
</el-form-item>
</div>
</div>