朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 dc9989ece09001688d539f18f258792105d53f85 1 个父辈 0b407914

订舱业务

内嵌 并排对比
正在显示 4 个修改的文件 包含 290 行增加 和 312 行删除
... ... @@ -16,6 +16,10 @@ export default {
</script>
<style lang="scss">
.el-table th.gutter{
display: table-cell!important;
}
body {
margin: 0px;
padding: 0px;
... ...
... ... @@ -244,7 +244,6 @@
<script>
export default {
name: "airlift"
}
</script>
... ...
<template>
<div class="bg">
<el-container>
<!-- 顶栏区域-->
<el-header style="height: 120px">
<el-row class="header">
<el-col :span="9">
<span style="font-size: 50px">KT际通</span>
<span>在线订舱平台</span>
</el-col>
<el-col :span="13" style="margin-left: 30px;margin-top: 30px;width: 300px ">
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
style="text-color:#303133;active-text-color:#FFF">
<el-menu-item index="1">首 页</el-menu-item>
<el-menu-item index="2">行业方案</el-menu-item>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-header>
<!-- 主要区域-->
<el-main>
<!-- 空运查询内容-->
... ...
<template>
<div class="bg order">
<span class="air">空运服务-订舱确认</span>
<div class="px">
<!-- 下单信息-->
<h4 class="title">下单信息</h4>
<div class="r-table">
<table class="tb">
<tbody>
<tr>
<th width="10%">航空公司</th>
<td width="10%">{{defaultQuery.flightno}}</td>
<th width="10%">起运机场</th>
<td width="10%">北京</td>
<th width="10%">目的机场</th>
<td width="10%">法兰克福</td>
<th width="10%">下单重量(KG)</th>
<td width="10%"><el-input v-model="weight" placeholder="" size="mini"></el-input></td>
<th width="10%">运价单价</th>
<td width="10%">CNY 23.50/KG</td>
</tr>
<tr>
<th>报关方式</th>
<td colspan="4">
<el-radio v-model="customsType" label="1">自理报关</el-radio>
<el-radio v-model="customsType" label="2">委托报关</el-radio>
</td>
<!-- surchargePrice-->
<th rowspan="4">附加费</th>
<td colspan="3">操作费： CNY 0.00/票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<th rowspan="3">门到门服务</th>
<td colspan="4"><el-checkbox v-model="homeDelivery">上门提货</el-checkbox></td>
<td colspan="3">制单费： CNY 50.00/票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><el-checkbox v-model="sendToHome">清关派送</el-checkbox></td>
<td colspan="3">订舱预录费： CNY 30.00 /票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<td colspan="4">地面操作费： CNY 0/KG</td>
</tr>
<tr>
<th>预估费用</th>
<td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>
<td colspan="3">附加费：CNY 230.00</td>
<td colspan="3"> 共计：CNY 23730.00</td>
</tr>
</tbody>
</table>
</div>
<!-- 货物信息-->
<h4 class="title">货物信息</h4>
<div class="r-table">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>
<td width="15%">
<el-radio v-model="radio1" label="1">是</el-radio>
<el-radio v-model="radio1" label="2">否</el-radio></td>
<th width="35%">*是否购买保险</th>
<td width="15%">
<el-radio v-model="radio4" label="1">是</el-radio>
<el-radio v-model="radio4" label="2">否</el-radio></td>
</tr>
<tr>
<th width="35%">*是否超长托盘</th>
<td width="15%">
<el-radio v-model="radio1" label="1">是</el-radio>
<el-radio v-model="radio1" label="2">否</el-radio></td>
<th width="35%">*是否名牌</th>
<td width="15%">
<el-radio v-model="radio4" label="1">是</el-radio>
<el-radio v-model="radio4" label="2">否</el-radio></td>
</tr>
</tbody>
</table>
<table class="tb" style="margin-top: 10px;width: 100%">
<tbody>
<tr>
<th width="20%">中文品名</th>
<th width="20%">英文品名</th>
<th width="10%">*数量(件)</th>
<th width="10%">*实重（KG）</th>
<th width="10%">*总体积（CBM）</th>
<th width="20%">最大尺寸(长x宽x高)</th>
<th width="10%">操作</th>
</tr>
<tr>
<td><el-input v-model="nameCn" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="name" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="billCount" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="weight" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-button icon="el-icon-plus" size="mini" circle></el-button>
<el-button icon="el-icon-minus" size="mini" circle></el-button></td>
</tr>
</tbody>
</table>
</div>
<!-- 收发件通知人信息-->
<div class="r-table" style="margin-top: 35px">
<el-collapse v-model="activeNames" @change="handleChange" class="col">
<el-collapse-item title="发件人信息" name="1">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址 </th>
<td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
<el-collapse-item title="收件人信息" name="2" class="father">
<div class="relative">
<el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>
<el-checkbox v-model="checked1" style="margin-left: 20px">加入地址库</el-checkbox>
</div>
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35"><el-input v-model="name" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">特殊信息</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
<el-collapse-item title="通知人信息" name="3" class="father">
<div class="relative"><el-checkbox v-model="checked">同收件人</el-checkbox></div>
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">特殊信息</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
</el-collapse>
</div>
<div style="text-align: center;margin-top: 30px">
<el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>
</div>
<div style="margin-top: 50px;height: 80px"> </div>
</div>
<!-- 收件地址库弹框-->
<div>
<el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="姓名" width="150"></el-table-column>
<el-table-column property="name" label="电话" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
<div style="margin-top: 10px;text-align: right">
<el-button>取消</el-button>
<el-button type="primary">请选择收件人</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<!--<template>-->
<!-- <div class="bg order">-->
<!-- <span class="air">空运服务-订舱确认</span>-->
<!-- <div class="px">-->
<!--&lt;!&ndash; 下单信息&ndash;&gt;-->
<!-- <h4 class="title">下单信息</h4>-->
<!-- <div class="r-table">-->
<!-- <table class="tb">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="10%">航空公司</th>-->
<!-- <td width="10%">1</td>-->
<!-- <th width="10%">起运机场</th>-->
<!-- <td width="10%">1</td>-->
<!-- <th width="10%">目的机场</th>-->
<!-- <td width="10%">1</td>-->
<!-- <th width="10%">下单重量(KG)</th>-->
<!-- <td width="10%"><el-input v-model="weight" placeholder="" size="mini"></el-input></td>-->
<!-- <th width="10%">运价单价</th>-->
<!-- <td width="10%">1</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>报关方式</th>-->
<!-- <td colspan="4">-->
<!-- <el-radio v-model="customsType" label="1">自理报关</el-radio>-->
<!-- <el-radio v-model="customsCharges" label="2">委托报关</el-radio>-->
<!-- </td>-->
<!-- <th rowspan="4">附加费</th>-->
<!-- <td colspan="3">操作费： CNY 0.00/票</td>-->
<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->
<!-- </el-input-number></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th rowspan="3">门到门服务</th>-->
<!-- <td colspan="4"><el-checkbox v-model="homeDelivery">上门提货</el-checkbox></td>-->
<!-- <td colspan="3">制单费： CNY 50.00/票</td>-->
<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->
<!-- </el-input-number></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td colspan="4" rowspan="2"><el-checkbox v-model="sendToHome">清关派送</el-checkbox></td>-->
<!-- <td colspan="3">订舱预录费： CNY 30.00 /票</td>-->
<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->
<!-- </el-input-number></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td colspan="4">地面操作费： CNY 0/KG</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>预估费用</th>-->
<!-- <td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>-->
<!-- <td colspan="3">附加费：CNY 230.00</td>-->
<!-- <td colspan="3">总费用：</td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!--&lt;!&ndash; 货物信息&ndash;&gt;-->
<!-- <h4 class="title">货物信息</h4>-->
<!-- <div class="r-table">-->
<!-- <table class="tb" width="100%">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>-->
<!-- <td width="15%">-->
<!-- <el-radio v-model="radio1" label="1">是</el-radio>-->
<!-- <el-radio v-model="radio1" label="2">否</el-radio></td>-->
<!-- <th width="35%">*是否购买保险</th>-->
<!-- <td width="15%">-->
<!-- <el-radio v-model="radio4" label="1">是</el-radio>-->
<!-- <el-radio v-model="radio4" label="2">否</el-radio></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th width="35%">*是否超长托盘</th>-->
<!-- <td width="15%">-->
<!-- <el-radio v-model="radio1" label="1">是</el-radio>-->
<!-- <el-radio v-model="radio1" label="2">否</el-radio></td>-->
<!-- <th width="35%">*是否名牌</th>-->
<!-- <td width="15%">-->
<!-- <el-radio v-model="radio4" label="1">是</el-radio>-->
<!-- <el-radio v-model="radio4" label="2">否</el-radio></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- <table class="tb" style="margin-top: 10px;width: 100%">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="20%">中文品名</th>-->
<!-- <th width="20%">英文品名</th>-->
<!-- <th width="10%">*数量(件)</th>-->
<!-- <th width="10%">*实重（KG）</th>-->
<!-- <th width="10%">*总体积（CBM）</th>-->
<!-- <th width="20%">最大尺寸(长x宽x高)</th>-->
<!-- <th width="10%">操作</th>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td><el-input v-model="nameCn" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-input v-model="name" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-input v-model="billCount" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-input v-model="weight" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>-->
<!-- <td><el-button icon="el-icon-plus" size="mini" circle></el-button>-->
<!-- <el-button icon="el-icon-minus" size="mini" circle></el-button></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!--&lt;!&ndash; 收发件通知人信息&ndash;&gt;-->
<!-- <div class="r-table" style="margin-top: 35px">-->
<!-- <el-collapse v-model="activeNames" @change="handleChange" class="col">-->
<!-- <el-collapse-item title="发件人信息" name="1">-->
<!-- <table class="tb" width="100%">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="15%">姓名</th>-->
<!-- <td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>-->
<!-- <th width="15%">联系电话</th>-->
<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">公司</th>-->
<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">详细地址 </th>-->
<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item title="收件人信息" name="2" class="father">-->
<!-- <div class="relative">-->
<!-- <el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>-->
<!-- <el-checkbox v-model="checked1" style="margin-left: 20px">加入地址库</el-checkbox>-->
<!-- </div>-->
<!-- <table class="tb" width="100%">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="15%">姓名</th>-->
<!-- <td width="35"><el-input v-model="name" placeholder="" ></el-input></td>-->
<!-- <th width="15%">联系电话</th>-->
<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">公司</th>-->
<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">详细地址</th>-->
<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">特殊信息</th>-->
<!-- <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item title="通知人信息" name="3" class="father">-->
<!-- <div class="relative"><el-checkbox v-model="checked">同收件人</el-checkbox></div>-->
<!-- <table class="tb" width="100%">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th width="15%">姓名</th>-->
<!-- <td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>-->
<!-- <th width="15%">联系电话</th>-->
<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">公司</th>-->
<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">详细地址</th>-->
<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th colspan="1">特殊信息</th>-->
<!-- <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </el-collapse-item>-->
<!-- </el-collapse>-->
<!-- </div>-->
<!-- <div style="text-align: center;margin-top: 30px">-->
<!-- <el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>-->
<!-- </div>-->
<!-- <div style="margin-top: 50px;height: 80px"> </div>-->
<!-- </div>-->
<!--&lt;!&ndash; 收件地址库弹框&ndash;&gt;-->
<!-- <div>-->
<!-- <el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">-->
<!-- <el-table :data="gridData">-->
<!-- <el-table-column property="name" label="姓名" width="150"></el-table-column>-->
<!-- <el-table-column property="tel" label="电话" width="200"></el-table-column>-->
<!-- <el-table-column property="address" label="地址"></el-table-column>-->
<!-- </el-table>-->
<!-- <div style="margin-top: 10px;text-align: right">-->
<!-- <el-button>取消</el-button>-->
<!-- <el-button type="primary">请选择收件人</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<script>
export default {
data() {
return{
num: 1,
radio: '',
radio1: '',
radio2: '',
radio3: '',
radio4: '',
dialogTableVisible:false,
<!--<script>-->
<!-- export default {-->
<!-- data() {-->
<!-- return{-->
<!-- gridData:[],-->
<!-- num: 1,-->
<!-- dialogTableVisible:false,-->
}
}
}
</script>
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<style scoped>
.bg{
background-color: #F2F2F2;
}
.air{
font-size: 20px;
color: #308aee;
margin-top: 20px;
display: block;
}
.r-table{
text-align: center;
}
<!--<style scoped>-->
<!-- .bg{-->
<!-- background-color: #F2F2F2;-->
<!-- }-->
<!-- .air{-->
<!-- font-size: 20px;-->
<!-- color: #308aee;-->
<!-- margin-top: 20px;-->
<!-- display: block;-->
<!-- }-->
<!-- .r-table{-->
<!-- text-align: center;-->
<!-- }-->
/*line-height: 100px;*/
.tb{
font-size: 14px;
box-sizing: border-box;
display: table;
border-spacing: 0;
border-collapse: collapse;
}
.px{
background-color: #FFFFFF;
width: 100%;
height: 500px;
}
.title{
color: #127ef2;
font-size: 16px;
font-weight: bold;
margin: 20px 30px;
text-align: left;
}
.r-table .tb > tbody > tr > th {
background-color: #d8ecff;
padding: 10px 5px;
text-align: center;
border: 1px solid #ddd;
}
.r-table .tb > tbody > tr > td {
padding: 8px;
border: 1px solid #ddd;
display: table-cell;
}
.col .tb > tbody > tr > th {
border: 0px;
}
.col .tb > tbody > tr > td {
border: 0px;
}
.father{
position: relative;
}
.relative{
position: absolute;
top:11px;
right: 100px;
}
</style>
<style>
.order .el-collapse-item__header{
color: #127ef2;
font-size: 16px;
font-weight: bold;
margin: 20px 30px;
text-align: left;
}
</style>
\ No newline at end of file
<!-- /*line-height: 100px;*/-->
<!-- .tb{-->
<!-- font-size: 14px;-->
<!-- box-sizing: border-box;-->
<!-- display: table;-->
<!-- border-spacing: 0;-->
<!-- border-collapse: collapse;-->
<!-- }-->
<!-- .px{-->
<!-- background-color: #FFFFFF;-->
<!-- width: 100%;-->
<!-- height: 500px;-->
<!-- }-->
<!-- .title{-->
<!-- color: #127ef2;-->
<!-- font-size: 16px;-->
<!-- font-weight: bold;-->
<!-- margin: 20px 30px;-->
<!-- text-align: left;-->
<!-- }-->
<!-- .r-table .tb > tbody > tr > th {-->
<!-- background-color: #d8ecff;-->
<!-- padding: 10px 5px;-->
<!-- text-align: center;-->
<!-- border: 1px solid #ddd;-->
<!-- }-->
<!-- .r-table .tb > tbody > tr > td {-->
<!-- padding: 8px;-->
<!-- border: 1px solid #ddd;-->
<!-- display: table-cell;-->
<!-- }-->
<!-- .col .tb > tbody > tr > th {-->
<!-- border: 0px;-->
<!-- }-->
<!-- .col .tb > tbody > tr > td {-->
<!-- border: 0px;-->
<!-- }-->
<!-- .father{-->
<!-- position: relative;-->
<!-- }-->
<!-- .relative{-->
<!-- position: absolute;-->
<!-- top:11px;-->
<!-- right: 100px;-->
<!-- }-->
<!--</style>-->
<!--<style>-->
<!-- .order .el-collapse-item__header{-->
<!-- color: #127ef2;-->
<!-- font-size: 16px;-->
<!-- font-weight: bold;-->
<!-- margin: 20px 30px;-->
<!-- text-align: left;-->
<!-- }-->
<!--</style>-->
... ...