chenkainan
2 months ago
6 changed files with 743 additions and 18 deletions
@ -0,0 +1,715 @@ |
|||||
|
<template> |
||||
|
<div class="order-page"> |
||||
|
<!-- 页面标题 --> |
||||
|
<div class="page-header"> |
||||
|
<h2>填写收货人信息</h2> |
||||
|
<el-button type="text" class="address-book-btn"> |
||||
|
新增/修改地址 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 收货人信息 --> |
||||
|
<div class="info-section"> |
||||
|
<h3>收货人信息</h3> |
||||
|
<div class="address-item"> |
||||
|
<span class="label">收货人地址：</span> |
||||
|
<div class="address-content"> |
||||
|
<div |
||||
|
class="saved-address" |
||||
|
v-for="(addr, index) in addresses" |
||||
|
:key="index" |
||||
|
@click="selectAddress(index)" |
||||
|
:class="{ selected: selectedAddressIndex === index }" |
||||
|
> |
||||
|
<span class="name-tag">{{ addr.name }} {{ addr.province }}</span> |
||||
|
<span class="detail">{{ addr.address }} {{ addr.phone }}</span> |
||||
|
<el-button type="text" class="set-default-btn">设为默认</el-button> |
||||
|
<el-button type="text" class="edit-btn">编辑</el-button> |
||||
|
<el-button type="text" class="delete-btn">删除</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="trade-type-item"> |
||||
|
<span class="label">交易方式：</span> |
||||
|
<el-radio-group v-model="selectedTradeType"> |
||||
|
<el-radio :label="1">先款后货</el-radio> |
||||
|
<el-radio :label="2">货到付款</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
|
||||
|
<h3>发票信息</h3> |
||||
|
<div class="invoice-type-item"> |
||||
|
<span class="label">发票类型：</span> |
||||
|
<el-radio-group v-model="selectedInvoiceType"> |
||||
|
<el-radio :label="1">增值税普通发票</el-radio> |
||||
|
<el-radio :label="2">普通电子发票</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
|
||||
|
<div class="invoice-title-item"> |
||||
|
<span class="label">发票抬头：</span> |
||||
|
<el-select |
||||
|
v-model="selectedInvoiceTitle" |
||||
|
placeholder="请选择发票抬头" |
||||
|
class="invoice-title-select" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(title, index) in invoiceTitles" |
||||
|
:key="index" |
||||
|
:label="title.name" |
||||
|
:value="title.id" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<el-button type="text" class="add-title-btn">+ 添加</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<h3>收票地址</h3> |
||||
|
<div class="invoice-address-item"> |
||||
|
<span class="label">收票地址：</span> |
||||
|
<div class="address-content"> |
||||
|
<div |
||||
|
class="saved-address" |
||||
|
v-for="(addr, index) in invoiceAddresses" |
||||
|
:key="index" |
||||
|
@click="selectInvoiceAddress(index)" |
||||
|
:class="{ selected: selectedInvoiceAddressIndex === index }" |
||||
|
> |
||||
|
<span class="name-tag">{{ addr.name }} {{ addr.province }}</span> |
||||
|
<span class="detail">{{ addr.address }} {{ addr.phone }}</span> |
||||
|
<el-button type="text" class="set-default-btn">设为默认</el-button> |
||||
|
<el-button type="text" class="edit-btn">编辑</el-button> |
||||
|
<el-button type="text" class="delete-btn">删除</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 签署合同 --> |
||||
|
<div class="contract-section"> |
||||
|
<h3>签署合同</h3> |
||||
|
<p>如需签署合同，提交订单后，请至采购中心>合同中心签署</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 商品清单 --> |
||||
|
<div class="goods-section"> |
||||
|
<h3>商品清单</h3> |
||||
|
|
||||
|
<!-- 订单分组 --> |
||||
|
<div |
||||
|
class="order-group" |
||||
|
v-for="(group, groupIndex) in orderGroups" |
||||
|
:key="groupIndex" |
||||
|
> |
||||
|
<div class="supplier-info"> |
||||
|
<span>供货名称：{{ group.supplier }}</span> |
||||
|
</div> |
||||
|
<table class="goods-table"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>商品</th> |
||||
|
<th>规格</th> |
||||
|
<th>单价(元)</th> |
||||
|
<th>数量</th> |
||||
|
<th>运费</th> |
||||
|
<th>收货方式</th> |
||||
|
<th>小计(元)</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(item, itemIndex) in group.items" :key="itemIndex"> |
||||
|
<td> |
||||
|
<img :src="item.image" alt="商品图片" class="goods-img" /> |
||||
|
<span class="goods-name">{{ item.name }}</span> |
||||
|
</td> |
||||
|
<td>{{ item.spec }}</td> |
||||
|
<td>{{ item.price }}</td> |
||||
|
<td>{{ item.quantity }}</td> |
||||
|
<td>{{ item.freight }}</td> |
||||
|
<td>{{ item.deliveryType }}</td> |
||||
|
<td class="subtotal">{{ item.subtotal }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="order-remark"> |
||||
|
<span class="remark-label">订单备注：</span> |
||||
|
<div class="rich-text-editor"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
v-model="group.remark" |
||||
|
rows="4" |
||||
|
placeholder="请输入订单备注信息" |
||||
|
class="remark-editor" |
||||
|
></el-input> |
||||
|
<div class="editor-toolbar" v-if="false"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-bold" |
||||
|
size="mini" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-italic" |
||||
|
size="mini" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-underline" |
||||
|
size="mini" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-link" |
||||
|
size="mini" |
||||
|
></el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-picture" |
||||
|
size="mini" |
||||
|
></el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 总计信息 --> |
||||
|
<div class="total-info"> |
||||
|
<p> |
||||
|
共 {{ totalGoodsCount }} 件商品，总商品金额 ¥{{ totalGoodsAmount }} |
||||
|
</p> |
||||
|
<p>总运费 ¥{{ totalFreight }}</p> |
||||
|
<p class="pay-amount">实付总金额 ¥{{ totalPayAmount }}</p> |
||||
|
<p class="address-info"> |
||||
|
配送地：{{ selectedAddress.address }}<br /> |
||||
|
交货地：{{ selectedAddress.address }} {{ selectedAddress.phone }} |
||||
|
</p> |
||||
|
<el-button type="primary" class="submit-btn" @click="submitOrder"> |
||||
|
提交订单 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "OrderPage", |
||||
|
data() { |
||||
|
return { |
||||
|
// 收货地址相关 |
||||
|
addresses: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: "郑小工", |
||||
|
province: "江苏省", |
||||
|
address: "苏州市吴中区文化创意大厦16层", |
||||
|
phone: "13000000000", |
||||
|
isDefault: true, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: "郑小工", |
||||
|
province: "江苏省", |
||||
|
address: "苏州市吴中区文化创意大厦16层", |
||||
|
phone: "13000000001", |
||||
|
isDefault: false, |
||||
|
}, |
||||
|
], |
||||
|
selectedAddressIndex: 0, |
||||
|
|
||||
|
// 交易方式 |
||||
|
selectedTradeType: 1, // 1:先款后货 2:货到付款 |
||||
|
|
||||
|
// 发票信息 |
||||
|
selectedInvoiceType: 1, // 1:增值税普通发票 2:普通电子发票 |
||||
|
|
||||
|
// 发票抬头 |
||||
|
invoiceTitles: [ |
||||
|
{ id: 1, name: "苏州特色农产品发展有限公司" }, |
||||
|
{ id: 2, name: "个人" }, |
||||
|
{ id: 3, name: "苏州科技有限公司" }, |
||||
|
], |
||||
|
selectedInvoiceTitle: null, |
||||
|
|
||||
|
// 收票地址 |
||||
|
invoiceAddresses: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: "郑小工", |
||||
|
province: "江苏省", |
||||
|
address: "苏州市吴中区文化创意大厦16层", |
||||
|
phone: "13000000000", |
||||
|
isDefault: true, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: "郑小工", |
||||
|
province: "江苏省", |
||||
|
address: "苏州市吴中区文化创意大厦16层", |
||||
|
phone: "13000000001", |
||||
|
isDefault: false, |
||||
|
}, |
||||
|
], |
||||
|
selectedInvoiceAddressIndex: 0, |
||||
|
|
||||
|
// 订单分组 |
||||
|
orderGroups: [ |
||||
|
{ |
||||
|
supplier: "新疆特色农产品开发有限公司", |
||||
|
items: [ |
||||
|
{ |
||||
|
image: "https://picsum.photos/50/50?random=1", |
||||
|
name: "产品标题产品标题产品标题", |
||||
|
spec: "规格名称一样", |
||||
|
price: "¥449", |
||||
|
quantity: 1, |
||||
|
freight: "¥0.00", |
||||
|
deliveryType: "邮寄", |
||||
|
subtotal: "¥449.00", |
||||
|
}, |
||||
|
{ |
||||
|
image: "https://picsum.photos/50/50?random=2", |
||||
|
name: "产品标题产品标题", |
||||
|
spec: "规格名称一样", |
||||
|
price: "¥199", |
||||
|
quantity: 1, |
||||
|
freight: "¥0.00", |
||||
|
deliveryType: "快递", |
||||
|
subtotal: "¥199.00", |
||||
|
}, |
||||
|
], |
||||
|
remark: "", |
||||
|
}, |
||||
|
{ |
||||
|
supplier: "新疆特色农产品开发有限公司", |
||||
|
items: [ |
||||
|
{ |
||||
|
image: "https://picsum.photos/50/50?random=3", |
||||
|
name: "产品标题产品标题产品标题", |
||||
|
spec: "规格名称一样", |
||||
|
price: "¥339", |
||||
|
quantity: 1, |
||||
|
freight: "¥0.00", |
||||
|
deliveryType: "邮寄", |
||||
|
subtotal: "¥339.00", |
||||
|
}, |
||||
|
], |
||||
|
remark: "", |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
// 总计信息 |
||||
|
totalGoodsCount: 3, |
||||
|
totalGoodsAmount: 973, |
||||
|
totalFreight: 0, |
||||
|
totalPayAmount: 973, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 获取选中的收货地址 |
||||
|
selectedAddress() { |
||||
|
return this.addresses[this.selectedAddressIndex] || {}; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
// 选择收货地址 |
||||
|
selectAddress(index) { |
||||
|
this.selectedAddressIndex = index; |
||||
|
}, |
||||
|
|
||||
|
// 选择收票地址 |
||||
|
selectInvoiceAddress(index) { |
||||
|
this.selectedInvoiceAddressIndex = index; |
||||
|
}, |
||||
|
|
||||
|
// 提交订单 |
||||
|
submitOrder() { |
||||
|
// 表单验证 |
||||
|
if (this.selectedAddressIndex === null) { |
||||
|
this.$message.warning("请选择收货地址"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.selectedInvoiceTitle) { |
||||
|
this.$message.warning("请选择发票抬头"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.selectedInvoiceAddressIndex === null) { |
||||
|
this.$message.warning("请选择收票地址"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.$message.success("订单提交成功！"); |
||||
|
// 实际项目中可跳转至订单详情页 |
||||
|
// this.$router.push('/order/detail'); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.order-page { |
||||
|
max-width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
padding: 20px; |
||||
|
background-color: #fff; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.page-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 18px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.address-book-btn { |
||||
|
color: #409eff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-section { |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
h3 { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
padding-bottom: 5px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.address-item, |
||||
|
.trade-type-item, |
||||
|
.invoice-type-item, |
||||
|
.invoice-title-item, |
||||
|
.invoice-address-item { |
||||
|
margin-bottom: 15px; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.label { |
||||
|
width: 120px; |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
padding-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.address-content { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.saved-address { |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 8px; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 4px; |
||||
|
width: 100%; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
|
||||
|
&.selected { |
||||
|
border-color: #6a8a27; |
||||
|
background-color: rgba(106, 138, 39, 0.05); |
||||
|
} |
||||
|
|
||||
|
.name-tag { |
||||
|
background-color: #f8f8f8; |
||||
|
color: #333; |
||||
|
padding: 2px 6px; |
||||
|
border-radius: 3px; |
||||
|
margin-right: 10px; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
flex: 1; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
min-width: 200px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.set-default-btn, |
||||
|
.edit-btn, |
||||
|
.delete-btn { |
||||
|
margin-left: 10px; |
||||
|
color: #409eff; |
||||
|
font-size: 13px; |
||||
|
padding: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-radio { |
||||
|
margin-right: 15px; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
|
||||
|
.invoice-title-select { |
||||
|
width: 300px; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
|
||||
|
.add-title-btn { |
||||
|
margin-left: 10px; |
||||
|
color: #409eff; |
||||
|
padding: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contract-section { |
||||
|
margin-bottom: 20px; |
||||
|
padding: 15px; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
h3 { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-section { |
||||
|
h3 { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
padding-bottom: 5px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.order-group { |
||||
|
margin-bottom: 20px; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.supplier-info { |
||||
|
background-color: #f5f7fa; |
||||
|
padding: 10px 15px; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
border-bottom: 1px solid #e6e6e6; |
||||
|
} |
||||
|
|
||||
|
.goods-table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
|
||||
|
th { |
||||
|
background-color: #f5f7fa; |
||||
|
text-align: left; |
||||
|
padding: 10px 15px; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
padding: 10px 15px; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
vertical-align: middle; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.goods-img { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
margin-right: 10px; |
||||
|
vertical-align: middle; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
vertical-align: middle; |
||||
|
max-width: 200px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.subtotal { |
||||
|
color: #ff4d4f; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.order-remark { |
||||
|
padding: 15px; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
border-top: 1px solid #e6e6e6; |
||||
|
background-color: #f9f9f9; |
||||
|
|
||||
|
.remark-label { |
||||
|
display: block; |
||||
|
margin-bottom: 10px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.rich-text-editor { |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.remark-editor { |
||||
|
border: none; |
||||
|
border-bottom: 1px solid #e6e6e6; |
||||
|
border-radius: 0; |
||||
|
min-height: 100px; |
||||
|
} |
||||
|
|
||||
|
.editor-toolbar { |
||||
|
padding: 5px 10px; |
||||
|
background-color: #f5f5f5; |
||||
|
border-top: 1px solid #e6e6e6; |
||||
|
|
||||
|
.el-button { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.total-info { |
||||
|
text-align: right; |
||||
|
padding: 20px; |
||||
|
background-color: #f5f7fa; |
||||
|
border-radius: 4px; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
p { |
||||
|
margin: 8px 0; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.pay-amount { |
||||
|
font-weight: bold; |
||||
|
color: #ff4d4f; |
||||
|
font-size: 16px; |
||||
|
margin: 15px 0; |
||||
|
} |
||||
|
|
||||
|
.address-info { |
||||
|
font-size: 13px; |
||||
|
color: #999; |
||||
|
margin-top: 15px; |
||||
|
line-height: 1.6; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
margin-top: 20px; |
||||
|
width: 150px; |
||||
|
height: 40px; |
||||
|
background-color: #ff4d4f; |
||||
|
border: none; |
||||
|
font-size: 16px; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #e03e40; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 响应式适配 |
||||
|
@media (max-width: 768px) { |
||||
|
.order-page { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.info-section { |
||||
|
.address-item, |
||||
|
.trade-type-item, |
||||
|
.invoice-type-item, |
||||
|
.invoice-title-item, |
||||
|
.invoice-address-item { |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.label { |
||||
|
width: 100%; |
||||
|
margin-bottom: 5px; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
|
||||
|
.saved-address { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.name-tag, |
||||
|
.detail { |
||||
|
margin-bottom: 8px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.set-default-btn, |
||||
|
.edit-btn, |
||||
|
.delete-btn { |
||||
|
margin-left: 0; |
||||
|
margin-right: 10px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.invoice-title-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-section { |
||||
|
.goods-table { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.order-group { |
||||
|
.goods-table th, |
||||
|
.goods-table td { |
||||
|
padding: 8px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
max-width: 100px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.total-info { |
||||
|
padding: 15px; |
||||
|
|
||||
|
.submit-btn { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue