购物车适配手机UI调整

src/views/shop/car-fund-products.vue

@@ -122,32 +122,44 @@
 								</div>
 								<!-- 支付方式/账户余额 -->
 								<div class="box address_box">
-									{{ $t('shop.selectPayment') }}：
-									<el-radio-group v-model="payType" @change='chosePayType'>
-										<div v-for="(item, index) in payList" :key='index' class="address">
-											<el-radio :label="item.label" border>
-												{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">（{{ cashCurrency }}: {{ userBalance[payType] }}）</span>
-											</el-radio>
-										</div>
-									</el-radio-group>
+									<el-row :gutter="20">
+										<el-col :xs="24" :sm="24" :lg="6">
+											<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectPayment') }}：</span>
+										</el-col>
+										<el-col :xs="24" :sm="24" :lg="18">
+											<el-radio-group v-model="payType" @change='chosePayType'>
+												<div v-for="(item, index) in payList" :key='index' class="address">
+													<el-radio :label="item.label" border>
+														{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">（{{ cashCurrency }}: {{ userBalance[payType] }}）</span>
+													</el-radio>
+												</div>
+											</el-radio-group>
+										</el-col>
+									</el-row>
 								</div>
 								<!-- 收货地址 -->
 								<div class="box address_box">
-									{{ $t('shop.selectAddress') }}：
-									<el-radio-group v-model="addressId" @change='choseAddress'>
-										<div class="address">
-											<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
-										</div>
-										<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
-											<el-radio :label="item.ID" border>
-												<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
-												<el-divider direction="vertical"></el-divider>
-												<span>{{item.MOBILE}}</span>
-												<el-divider direction="vertical"></el-divider>
-												<span>{{item.CONSIGNEE}}</span>
-											</el-radio>
-										</div>
-									</el-radio-group>
+									<el-row :gutter="20">
+										<el-col :xs="24" :sm="24" :lg="4">
+											<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectAddress') }}：</span>
+										</el-col>
+										<el-col :xs="24" :sm="24" :lg="20">
+											<el-radio-group v-model="addressId" @change='choseAddress'>
+												<div class="address">
+													<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+												</div>
+												<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+													<el-radio :label="item.ID" border style="word-break: break-all; white-space: normal;">
+														<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+														<el-divider direction="vertical"></el-divider>
+														<span>{{item.MOBILE}}</span>
+														<el-divider direction="vertical"></el-divider>
+														<span>{{item.CONSIGNEE}}</span>
+													</el-radio>
+												</div>
+											</el-radio-group>
+										</el-col>
+									</el-row>
 								</div>
 							</el-col>
 						</el-row>

src/views/shop/standard-products.vue

@@ -128,32 +128,44 @@
 							</div>
 							<!-- 支付方式/账户余额 -->
 							<div class="box address_box">
-								{{ $t('shop.selectPayment') }}：
-								<el-radio-group v-model="payType" @change='chosePayType'>
-									<div v-for="(item, index) in payList" :key='index' class="address">
-										<el-radio :label="item.label" border>
-											{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（{{ cashCurrency }}: {{ $t('currency.sign') }} {{ userBalance.cash }}）</span>
-										</el-radio>
-									</div>
-								</el-radio-group>
+								<el-row :gutter="20">
+									<el-col :xs="24" :sm="24" :lg="6">
+										<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectPayment') }}：</span>
+									</el-col>
+									<el-col :xs="24" :sm="24" :lg="18">
+										<el-radio-group v-model="payType" @change='chosePayType'>
+											<div v-for="(item, index) in payList" :key='index' class="address">
+												<el-radio :label="item.label" border>
+													{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（{{ cashCurrency }}: {{ $t('currency.sign') }} {{ userBalance.cash }}）</span>
+												</el-radio>
+											</div>
+										</el-radio-group>
+									</el-col>
+								</el-row>
 							</div>
 							<!-- 收货地址 -->
 							<div class="box address_box">
-								{{ $t('shop.selectAddress') }}：
-								<el-radio-group v-model="addressId" @change='choseAddress'>
-									<div class="address">
-										<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
-									</div>
-									<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
-										<el-radio :label="item.ID" border>
-											<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
-											<el-divider direction="vertical"></el-divider>
-											<span>{{item.MOBILE}}</span>
-											<el-divider direction="vertical"></el-divider>
-											<span>{{item.CONSIGNEE}}</span>
-										</el-radio>
-									</div>
-								</el-radio-group>
+								<el-row :gutter="20">
+									<el-col :xs="24" :sm="24" :lg="4">
+										<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectAddress') }}：</span>
+									</el-col>
+									<el-col :xs="24" :sm="24" :lg="20">
+										<el-radio-group v-model="addressId" @change='choseAddress'>
+											<div class="address">
+												<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+											</div>
+											<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+												<el-radio :label="item.ID" border style="word-break: break-all; white-space: normal;">
+													<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+													<el-divider direction="vertical"></el-divider>
+													<span>{{item.MOBILE}}</span>
+													<el-divider direction="vertical"></el-divider>
+													<span>{{item.CONSIGNEE}}</span>
+												</el-radio>
+											</div>
+										</el-radio-group>
+									</el-col>
+								</el-row>
 							</div>
 						</el-col>
 					</el-row>

src/views/shop/villa-fund-products.vue

@@ -122,32 +122,44 @@
 								</div>
 								<!-- 支付方式/账户余额 -->
 								<div class="box address_box">
-									{{ $t('shop.selectPayment') }}：
-									<el-radio-group v-model="payType" @change='chosePayType'>
-										<div v-for="(item, index) in payList" :key='index' class="address">
-											<el-radio :label="item.label" border>
-												{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">（{{ cashCurrency }}: {{ userBalance[payType] }}）</span>
-											</el-radio>
-										</div>
-									</el-radio-group>
+									<el-row :gutter="20">
+										<el-col :xs="24" :sm="24" :lg="6">
+											<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectPayment') }}：</span>
+										</el-col>
+										<el-col :xs="24" :sm="24" :lg="18">
+											<el-radio-group v-model="payType" @change='chosePayType'>
+												<div v-for="(item, index) in payList" :key='index' class="address">
+													<el-radio :label="item.label" border>
+														{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">（{{ cashCurrency }}: {{ userBalance[payType] }}）</span>
+													</el-radio>
+												</div>
+											</el-radio-group>
+										</el-col>
+									</el-row>
 								</div>
 								<!-- 收货地址 -->
 								<div class="box address_box">
-									{{ $t('shop.selectAddress') }}：
-									<el-radio-group v-model="addressId" @change='choseAddress'>
-										<div class="address">
-											<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
-										</div>
-										<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
-											<el-radio :label="item.ID" border>
-												<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
-												<el-divider direction="vertical"></el-divider>
-												<span>{{item.MOBILE}}</span>
-												<el-divider direction="vertical"></el-divider>
-												<span>{{item.CONSIGNEE}}</span>
-											</el-radio>
-										</div>
-									</el-radio-group>
+									<el-row :gutter="20">
+										<el-col :xs="24" :sm="24" :lg="4">
+											<span style="line-height: 25px; display: inline-block; padding: 5px 0 15px 0;">{{ $t('shop.selectAddress') }}：</span>
+										</el-col>
+										<el-col :xs="24" :sm="24" :lg="20">
+											<el-radio-group v-model="addressId" @change='choseAddress'>
+												<div class="address">
+													<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+												</div>
+												<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+													<el-radio :label="item.ID" border style="word-break: break-all; white-space: normal;">
+														<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+														<el-divider direction="vertical"></el-divider>
+														<span>{{item.MOBILE}}</span>
+														<el-divider direction="vertical"></el-divider>
+														<span>{{item.CONSIGNEE}}</span>
+													</el-radio>
+												</div>
+											</el-radio-group>
+										</el-col>
+									</el-row>
 								</div>
 							</el-col>
 						</el-row>