响应式

This commit is contained in:
songliang 2022-08-15 18:27:46 +08:00
parent c0acb4fb4d
commit 0094116ef9
5 changed files with 34 additions and 16 deletions

View File

@ -1286,14 +1286,22 @@ 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;
}
body.page-account-address .mobileWidth, body.page-checkout .mobileWidth {
width: 600px;
}
@media (max-width: 768px) {
body.page-account-address .dialog-margin, body.page-checkout .dialog-margin {
margin-top: 10px;
body.page-account-address .mobileWidth, body.page-checkout .mobileWidth {
width: 95%;
}
}
body.page-account-address .dialog-address, body.page-checkout .dialog-address {
display: block;
}
@media (max-width: 768px) {
body.page-account-address .dialog-address > div, body.page-checkout .dialog-address > div {
width: 100%;
}
}
@media (min-width: 768px) {
body.page-account-address .dialog-address, body.page-checkout .dialog-address {
display: flex;

View File

@ -249,4 +249,7 @@ body[class^="page-account-"] {
}
}
}
}

View File

@ -70,23 +70,30 @@ body.page-account-address, body.page-checkout {
}
}
// .dialog-width {
// margin: 0 auto;
// width: 90%;
// }
.dialog-margin {
@media (max-width:768px) {
margin-top: 10px;
.mobileWidth {
width: 600px;
@media (max-width: 768px) {
width: 95%;
}
}
}
.dialog-address {
display: block;
>div {
@media (max-width:768px) {
width: 100%;
// margin-bottom: 10px;
// &:nth-last-child(){
// margin-bottom: 0;
// }
}
}
@media (min-width:768px) {
display: flex;
}
}
}

View File

@ -16,7 +16,7 @@
<div class="row mt-5" v-if="products.length">
<div class="col-12 col-md-9">
<div class="cart-products-wrap">
<div class="cart-products-wrap table-responsive">
<table class="table">
<thead>
<tr>
@ -38,7 +38,7 @@
<td>
<div class="d-flex align-items-center p-image">
<input class="form-check-input" type="checkbox" v-model="product.selected">
{{-- <img :src="product.image" class="img-fluid"> --}}
<img :src="product.image" class="img-fluid">
</div>
</td>
<td>

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 custom-class="mobileWidth" title="编辑地址" :visible.sync="{{ $address_form_show }}" @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>
@ -23,7 +23,7 @@
</el-select>
</el-form-item>
</div>
<div class="col-4">
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="zone_id">
<el-select v-model="{{ $address_form_key }}.zone_id" filterable placeholder="选择省份">
<el-option v-for="item in source.zones" :key="item.id" :label="item.name"
@ -32,7 +32,7 @@
</el-select>
</el-form-item>
</div>
<div class="col-4">
<div class="col-4 mt-2 mt-sm-0">
<el-form-item prop="city">
<el-input v-model="{{ $address_form_key }}.city" placeholder="输入 city"></el-input>
</el-form-item>