Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

2fce67fb · 黄奎 · f22f0812 · 853a810c · 2fce67fb
Commit 2fce67fb authored Mar 11, 2019 by 黄奎
Hide whitespace changes
Inline Side-by-side

Showing with 987 additions and 987 deletions

BulkAirTicketOrders.vue src/components/SalesModule/BulkAirTicketOrders.vue +987 -987

No files found.
--- a/src/components/SalesModule/BulkAirTicketOrders.vue
+++ b/src/components/SalesModule/BulkAirTicketOrders.vue
 <<<<<<< HEAD
 <template>
  <div class="flexOne" style="min-width: 1200px;">
    <div class="groupTourOrderSearch">
      <ul>
        <li>
            <span>
                <em>机票编码</em><el-input v-model='msg.AirTicketId' class='w150'></el-input>
            </span>
        </li>
        <li>
            <span>
                <em>订单号</em><el-input v-model='msg.AirOrderId' class='w150'></el-input>
            </span>
        </li>
        <li>
            <span>
                <em>状态</em>
                <el-select v-model="msg.Status" placeholder="请选择">
                <el-option
                v-for="item in status"
                :key="item.num"
                :label="item.title"
                :value="item.num">
                </el-option>
            </el-select>
            </span>
        </li>
        <li>
            <span><em>日期</em>
                <el-date-picker v-model='msg.StartTime' @change="dataDui()" class='w150' value-format="yyyy-MM-dd"
                            type="date"></el-date-picker>
                                            -
                <el-date-picker v-model='msg.EndTime' @change="dataDui()" class='w150'
                            value-format="yyyy-MM-dd" type="date"></el-date-picker>
            </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="getList();resetPageIndex()"/>
        </li>
      </ul>
    </div>
    <!-- 表格 -->
    <div style="width: 100%; height: auto;min-height:500px;overflow-x: auto;" class="ownScrollbarStyle">
      <table class="groupTourOrderSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
        <tr class="title_tr">
          <th>单号</th>
          <th>机票编码</th>
          <th width="70">客户信息</th>
          <th>客人数量</th>
          <th>单价</th>
          <th>成交单价</th>
          <th>应收总额</th>
          <th>实收</th>
          <th>退款</th>
          <th>平台税金</th>
          <!-- <th width="80">平台在途</th> -->
          <!-- <th width="80">待收金额</th> -->
          <th>状态</th>
          <th width="150">操作</th>
        </tr>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">暂无数据</td>
        </tr>
        <tbody v-for="(item,index) in dataList" :key="index">
        <tr>
          <td>{{item.Id}} </td>
          <td>{{item.Id}} </td><!-- 机票编码 -->
          <td><p class="fz12 over_ellipsis" style="width: 120px;">{{item.ContactName}}</p>
            <!-- <p class="fz12">123456</p> -->
          </td>
          <td>{{item.GuestNum}}/{{item.SeatNum}}/{{item.FreightSpace}}</td>
          <td class="fz12">{{item.TC_Price}}</td>
          <td class="fz12">{{item.Unit_Price}}</td>
          <td style="color:#E95252">{{item.PreferPrice}}</td>
          <td style="color:#E95252">{{item.Income}}</td>
          <td>{{item.Refund}}</td>
          <td>{{item.PlatformTax}}</td>
          <td>
              <p v-if="item.RefundStatus!=1">
                  <span v-if="item.RefundStatus==2">退款中</span>
                  <span v-if="item.RefundStatus==3">已退款</span>
              </p>
              <p v-else>
                  <span v-if="item.Status==1">正常</span>
                <span v-if="item.Status==2">取消</span>
                    <span v-if="item.Status==3">待付款</span>
              </p>
          </td>
          <td>
              <p v-if="item.RefundStatus==2 && item.Status==1 && item.RefundFinanceList.length==0">
                <el-tooltip class="item" effect="dark" content="退款" placement="top-end">
                    <el-button @click="RefundPay(item)" type="danger" icon="el-icon-star-off" circle></el-button>
                </el-tooltip>
              </p>
          </td>
        </tr>
        <tr style="height:20px">
          <td colspan="15" class="RL_Order" style="height:20px">
            <span class="RL-remarkTitle">名单:</span>
            <span class="RL-redType RL-remarkCon" v-if="item.GuestList.length>0">
              <el-popover
            placement="right"
            width="1000"
            trigger="click">
            <el-table :data="item.GuestList">
                <el-table-column property="Id" label="排号"></el-table-column>
                <el-table-column property="Name" label="姓名"></el-table-column>
                <el-table-column property="Sex" label="性别">
                     <template slot-scope="scope">
                         <span v-if="scope.row.Sex=='1'">男</span>
                         <span v-if="scope.row.Sex=='2'">女</span>
                    </template>
                </el-table-column>
                <el-table-column property="Birthday" label="生日"></el-table-column>
                <el-table-column property="PassportNo" label="护照号码"></el-table-column>
                <el-table-column property="NationalityName" label="国籍"></el-table-column>
                <el-table-column width="120" property="MobilePhone" label="手机号码"></el-table-column>
                <el-table-column property="AgeType" label="年龄类型">
                    <template slot-scope="scope">
                         <span v-if="scope.row.AgeType=='1'">成人</span>
                         <span v-if="scope.row.AgeType=='2'">孩子</span>
                         <span v-if="scope.row.AgeType=='3'">婴儿</span>
                         <span v-if="scope.row.AgeType=='4'">老人</span>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="reference">
              <span style="cursor:pointer" v-for="(childItem) in item.GuestList" :key="childItem.Name">{{childItem.Name}}&nbsp;&nbsp;</span>
            </span>
          </el-popover>
            </span>
            <span class="RL-redType RL-remarkCon" v-else>
                <span>暂无名单</span>
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="5" class="groupTourOrder_remarks" style="height: 40px;">
            <div>
              <div>
                <span>备注:</span>
                <p>{{item.Remarks}}</p>
              </div>
            </div>
          </td>
          <td colspan="7" class="groupTourOrder_tickets" style="height: 40px;">
            <div>
              <div>收款单据：</div>
              <div>
                <span style="cursor: default;">
                  <span class="tickets_green" v-for="(fina,fin) in item.FinanceList" :key="fin">
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-if="fina.ColorState===1" class="groupTourOrder_tickets_blue">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===2" class="groupTourOrder_tickets_green">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===3" class="groupTourOrder_tickets_red">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===4" class="groupTourOrder_tickets_black">{{fina.FrID}}</span>
                  </span>
                  <span v-if="item.FinanceList.length==0">
                    暂无数据
                  </span>
                  </span>
              </div>
            </div>
            <div>
              <div>付款单据：</div>
              <div>
                <span style="cursor: default;">
                  <span class="tickets_green" v-for="(fina,fin) in item.RefundFinanceList" :key="fin">
                      <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-if="fina.ColorState===1" class="groupTourOrder_tickets_blue">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===2" class="groupTourOrder_tickets_green">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===3" class="groupTourOrder_tickets_red">{{fina.FrID}}</span>
                        <span  @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)" v-else-if="fina.ColorState===4" class="groupTourOrder_tickets_black">{{fina.FrID}}</span>
                    <!-- <span @click="goUrl('财务单据','FinancialDocumentsDetail',fina.FrID)">{{fina.FrID}}</span> -->
                  </span>
                  <span v-if="item.RefundFinanceList.length==0">
                    暂无数据
                  </span>
                </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
       layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total"></el-pagination>
  </div>
 </template>
 <script>
 import payURL from "../commonPage/payURL.vue";
 import moment from "moment";
 export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        AirTicketId: 0,
        AirOrderId: 0,
        Status: 0,
        StartTime: moment().format("YYYY-MM-DD"),
        EndTime: ""
      },
      status: [
        { title: "全部", num: 0 },
        { title: "待付款", num: 3 },
        { title: "正常", num: 1 },
        { title: "取消", num: 2 }
      ],
      dataList: [],
      loading: false,
      total: 0,
      currentPage: 1,
      showID: -1
    };
  },
  components: {},
  created() {},
  methods: {
    //   退款操作
    RefundPay(item) {
      let orderObj = {
        OrderID: item.Id, //订单号
        OrderSource: 12, //12
        Obj: {},
        SourceID: item.AirTicketId, //机票id
        TCIDList: []
      };
      this.$router.push({
        name: "ChoiceAddFinancialDocuments",
        query: {
          Type: 2,
          companyID: item.RB_Branch_Id, //公司id
          path: "",
          blank: "y",
          orderObj: JSON.stringify(orderObj)
        }
      });
    },
    goUrl: function(name, path, id) {
      this.$router.push({
        name: path,
        query: { id: id, blank: "y", tab: name }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    getList() {
      this.loading = true;
      this.apipost(
        "ticket_get_GetAirTicketForMyList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            // console.log(res);
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    // 结束日期不能大于开始日期
    dataDui() {
      if (this.msg.StartTime > this.msg.EndTime && this.msg.EndTime !== "") {
        this.$message.error("结束日期不能大于开始日期");
        this.msg.CEndDate = "";
      }
    }
  },
  mounted() {
    this.getList();
  }
 };
 </script>
 <style scoped>
 @import "../../assets/css/newTravelManager.css";
 .tickets_green {
  color: #008000;
  text-decoration: underline;
  margin-right: 6px;
 }
 .title_tr th {
  /* width: 9%; */
 }
 .color_red_order {
  color: #e95252 !important;
 }
 .groupTourOrderSearch {
  width: 100%;
  min-height: auto;
  padding: 0 0 20px 0;
 }
 .groupTourOrderSearch li {
  float: left;
  font-size: 12px;
  color: #666;
  margin: 20px 0 0px 0;
 }
 .groupTourOrderSearch li > span {
  display: inline-block;
 }
 .groupTourOrderSearch li span > em {
  display: inline-block;
  min-width: 60px;
  text-align: right;
  font-style: normal;
  margin: 0 12px 0 0;
 }
 .groupTourOrderSearch li:last-child {
  position: fixed;
  z-index: 10;
  top: 36px;
  right: 20px;
 }
 .groupTourOrderSearch ul {
  overflow: hidden;
 }
 .groupTourOrderSearchTable {
  width: 100%;
  min-width: 1500px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  /* border-collapse: collapse; */
 }
 .groupTourOrderSearchTable tr th {
  background: #e6e6e6;
  height: 30px;
  font-size: 12px;
  text-align: left;
  text-indent: 15px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
 }
 .groupTourOrderSearchTable tr {
  background: #fff;
  text-align: left;
 }
 .groupTourOrderSearchTable tr td {
  padding: 8px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
 }
 .groupTourOrderSearchTable tr td p {
  line-height: 20px;
 }
 .groupTourOrderSearchTable .dowloadSpan:hover {
  text-decoration: underline;
  cursor: pointer;
 }
 .groupTourOrderSearchTable span.personNo {
  text-decoration: underline;
  cursor: pointer;
 }
 .groupTourOrderSearchTable span.personNo:hover {
  font-weight: bold;
  color: #e95252;
 }
 .personNolayer p {
  height: 28px;
  line-height: 28px;
  padding-left: 15px;
 }
 .personNolayer p > span {
  font-size: 12px;
  color: #333;
  margin-right: 15px;
 }
 .personNolayer table {
  padding: 10px 0 0 20px;
  width: 100%;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
 }
 .personNolayer table th {
  background-color: #ededed;
  height: 34px;
  text-indent: 15px;
 }
 .personNolayer table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
 }
 .personNolayer table ._color_666 {
  color: #666666;
 }
 .personNolayer table tr._color_666 th {
  padding: 9px 15px;
 }
 .groupSuperSearchLayer {
 }
 .groupSuperSearchLayer > p {
  padding: 20px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
 }
 .groupSuperSearchLayerTable {
  font-size: 12px;
  color: #666;
 }
 .groupSuperSearchLayerTable tr {
  height: 50px;
 }
 .groupSuperSearchLayerTable td {
  padding-right: 15px;
 }
 .groupTourOrderIcon button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
 }
 .groupTourOrderIcon .el-button--primary {
  padding: 5px;
  margin: 0;
  font-size: 14px !important;
 }
 .groupTourOrderIcon .el-button + .el-button {
  margin-left: 0 !important;
 }
 .productQuerybottomLayer {
  overflow: auto;
  position: fixed;
  min-height: 300px;
  z-index: 50;
  bottom: 0;
  left: 0;
  border-top: 3px solid #38425d;
  background-color: #ffffff;
  padding: 10px 10px 0;
  width: 100%;
 }
 .productQuerybottomLayer .el-form-item__label {
  font-size: 12px !important;
 }
 .productQuerybottomLayer > p {
  border-left: 3px solid #e95252;
  text-indent: 15px;
  height: 16px;
  font-family: "PingFangSc-Fine";
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 14px;
  color: #000;
 }
 .productQuerybottomLayer .el-input-number {
  width: auto !important;
 }
 .groupTourOrder_count_green {
  color: #1bc594;
 }
 .groupTourOrder_count_blue {
  color: #4d7afd;
 }
 .groupTourOrder_count_yellow {
  color: #ff9c00;
 }
 .groupTourOrder_count_gray {
  color: #999999;
 }
 .groupTourOrder_count {
  margin: 0 0 20px 0;
  width: 100%;
  height: auto;
 }
 .groupTourOrder_count_col {
  height: 80px;
 }
 .groupTourOrder_count_item {
  font-weight: 400;
  padding: 10px;
  height: 100%;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  color: #333333;
 }
 .groupTourOrder_count_item > div > i {
  font-size: 12px;
  vertical-align: bottom;
 }
 .groupTourOrder_count_item > div > span:nth-child(2) {
  font-size: 14px;
  vertical-align: bottom;
 }
 .groupTourOrder_count_item > div > span:nth-child(3) {
  font-weight: bold;
  font-size: 16px;
  vertical-align: bottom;
 }
 .groupTourOrder_count_item > p {
  font-size: 12px;
  line-height: 18px;
 }
 .groupTourOrder_count_item > p > span {
  margin: 0 5px 0 0;
  white-space: nowrap;
 }
 .groupTourOrder_more {
  margin: 0 -12px;
 }
 .groupTourOrder_more > div {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #333333;
  background-color: #ffffff;
  cursor: pointer;
 }
 .groupTourOrder_more > div:hover {
  color: #297bef;
  background-color: #dcebff;
 }
 .groupTourOrder_remarks {
  font-size: 0px;
 }
 .groupTourOrder_remarks > div {
 }
 .groupTourOrder_remarks > div > div:nth-child(1) {
  float: left;
  display: flex;
  align-items: flex-start;
 }
 .groupTourOrder_remarks > div > div:nth-child(1) > span {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
  white-space: nowrap;
 }
 .groupTourOrder_remarks > div > div:nth-child(1) > p {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
 }
 .groupTourOrder_remarks > div > div:nth-child(2) {
  float: right;
  text-align: right;
  font-size: 12px;
  color: #e95252;
 }
 .groupTourOrder_remarks > div > div:nth-child(2) > i {
  font-size: 10px;
  cursor: pointer;
 }
 .groupTourOrder_remarks > div::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
 }
 .groupTourOrder_remarks_btn {
  padding: 0px;
  width: 12px;
  height: 12px;
  border: none;
  background-color: transparent;
 }
 .groupTourOrder_remarks_btn > i {
  color: #e95252;
  font-size: 12px;
 }
 .groupTourOrder_remarks_popover > div {
  display: inline-block;
  font-size: 14px;
  color: #000000;
 }
 .groupTourOrder_remarks_popover > div::before {
  content: "";
  display: inline-block;
  margin: 0 5px 0 0;
  width: 2px;
  height: 12px;
  background-color: #e95252;
 }
 .groupTourOrder_remarks_popover > span {
  display: block;
  margin: 0 0 0 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
 }
 .groupTourOrder_remarks_popover > p {
  margin: 5px 0 0 0;
  padding: 3px;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  color: #000000;
 }
 .groupTourOrder_remarks_popover > p:nth-child(even) {
  background-color: #e6e6e6;
 }
 .groupTourOrder_remarks_popover > p > span:nth-child(1) {
  float: left;
 }
 .groupTourOrder_remarks_popover > p > span:nth-child(2) {
  margin: 0 10px 0 0;
  float: right;
 }
 .groupTourOrder_remarks_popover > p::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
 }
 .groupTourOrder_tickets > div {
  display: table;
 }
 .groupTourOrder_tickets > div > div {
  display: table-cell;
  cursor: pointer;
 }
 .groupTourOrder_tickets > div > div:nth-child(1) {
  width: 80px;
 }
 .groupTourOrder_tickets > div > div > span {
  display: inline-block;
  margin: 0 10px 0 0;
 }
 .groupTourOrder_tickets_red {
  color: #ff0000;
  text-decoration: underline;
 }
 .groupTourOrder_tickets_blue {
  color: #0000ff;
  text-decoration: underline;
 }
 .groupTourOrder_tickets_green {
  color: #008000;
  text-decoration: underline;
 }
 .groupTourOrder_tickets_black {
  color: #000000;
  text-decoration: underline;
 }
 .groupTourOrderByTuan_ico {
  margin: 0 10px 0 0;
 }
 .groupTourOrderByTuan_ico > i {
  display: inline-block;
  margin: 0 2px 0 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  vertical-align: middle;
 }
 .groupTourOrderByTuan_ico > span {
  vertical-align: middle;
 }
 /* 出团通知书打印选择 */
 .travelControlTripLayer {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
 }
 .travelControlTripLayerCont {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  background: #fff;
  top: 50%;
  margin-top: -180px;
  width: 600px;
 }
 .travelControlTripLayerCont > div {
  padding: 0 30px;
 }
 .travelControlTripLayerCont > div label {
  cursor: pointer;
  vertical-align: middle;
 }
 .travelControlTripLayerCont > div label input {
  vertical-align: middle;
 }
 .travelControlTripBtn {
  color: #fff;
  width: 90px;
  height: 30px;
  background: #e95252;
  border: 1px solid #e95252;
  cursor: pointer;
  border-radius: 15px;
  margin-left: 10px;
 }
 .travelControlTripLayer input[type="checkbox"] + label::before {
  content: "\A0";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 4px;
  background-color: white;
  text-indent: 0.15em;
  line-height: 15px;
  color: white;
  border: 1px solid #e95252;
 }
 .travelControlTripLayer input[type="checkbox"]:checked + label::before {
  content: "\2713";
  background-color: #e95252;
 }
 .travelControlTripLayer input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
 }
 .travelControlTripLayer input[type="checkbox"]:focus + label::before {
  box-shadow: none;
 }
 .travelControlTripLayer input[type="checkbox"]:disabled + label::before {
  background-color: gray;
  box-shadow: none;
  color: #555;
 }
 .groupTourOrder_transfer {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 50px;
  padding: 10px 10px;
  width: 100%;
  min-width: 1366px;
  min-height: 200px;
  border-top: 3px solid #38425d;
  background-color: #ffffff;
  overflow-y: auto;
 }
 .groupTourOrder_transfer > .transfer_header {
  position: relative;
  width: 100%;
  height: 30px;
 }
 .groupTourOrder_transfer > .transfer_header > div:nth-child(1) {
  display: inline-block;
  padding: 0 10px;
  width: 200px;
  height: 30px;
  line-height: 30px;
  border-left: 3px solid #e95252;
  text-indent: 10px;
  font-size: 16px;
  color: #000000;
 }
 .groupTourOrder_transfer > .transfer_header > div:nth-child(2) {
  position: absolute;
  top: 0px;
  right: 80px;
  height: 30px;
 }
 .groupTourOrder_transfer
  > .transfer_header
  > div:nth-child(2)
  > div:nth-child(1) {
  display: inline-block;
  padding: 0 15px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  color: #e95252;
  border: 1px solid #e95252;
  background: #fff;
  border-radius: 15px;
  cursor: pointer;
  vertical-align: top;
 }
 .groupTourOrder_transfer
  > .transfer_header
  > div:nth-child(2)
  > div:nth-child(2) {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 0 15px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #e95252;
  background: #e95252;
  border-radius: 15px;
  cursor: pointer;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_info {
  padding: 20px 0;
  width: 100%;
  font-size: 0px;
  border-bottom: 1px dashed #999999;
 }
 .groupTourOrder_transfer > .transfer_info > div {
  display: inline-block;
  padding: 0 10px;
  width: 25%;
  height: 30px;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_info > div > em {
  display: inline-block;
  padding: 0 10px;
  width: 35%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  font-size: 16px;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_info > div > span {
  display: inline-block;
  padding: 0 10px;
  width: 65%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 16px;
  border-radius: 3px;
  background-color: #e5e5e5;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_input {
  padding: 20px 0;
  width: 100%;
  font-size: 0px;
 }
 .groupTourOrder_transfer > .transfer_input > div {
  display: inline-block;
  padding: 0 10px;
  width: 25%;
  height: 30px;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_input > div > em {
  display: inline-block;
  padding: 0 10px;
  width: 35%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  font-size: 16px;
  vertical-align: top;
 }
 .groupTourOrder_transfer > .transfer_input > div > .el-input {
  display: inline-block;
  width: 65%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
 }
 </style>
 =======
 <template>