项目整体细节，新增主页煤仓剩余量图表。

付延余

2022-08-03 910f2ef56d0d49a4ce24b2f33860dce4d739b1b4

 pages/edit-my-application/edit-my-application.vue

@@ -4,7 +4,7 @@
    <!-- page-mete的page-style属性相当于HTML的body属性 -->
    <!-- <page-meta :page-style="spanStyle"></page-meta> -->
    <!-- 表单 -->
 

    <combination-title class="newApplicationTitle" title="新增"></combination-title>
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <!-- <u-notify :message="accountMsg" :show="trueMsg" :type="accountMsgType"></u-notify> -->
@@ -27,7 +27,7 @@
        </u-form-item>
        <u-form-item @click="timeShow = true" labelWidth="20%" label="日期" borderBottom
                     ref="timeDataRef">
          <u--input v-model="timeDataStr" border="none" placeholder="请选择范围日期"></u--input>
          <u--input v-model="timeDataStr" disabled disabledColor="#ffffff" border="none" placeholder="请选择范围日期"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item labelWidth="20%" label="编号"  borderBottom>
@@ -35,13 +35,13 @@
        </u-form-item>
      </u--form>
    </view>
 

    <!-- 申请日历、范围时间 -->
    <u-calendar :show="timeShow" :mode="mode" @confirm="confirmTime" @close="timeClose" rowHeight="110"
                :maxDate="maxDate"></u-calendar>
    <!-- 申请付款方式弹出菜单 -->
    <!-- <u-action-sheet :show="showPayType" :actions="actions" title="请选择付款方式" @close="showPayType = false" @select="sexSelect"></u-action-sheet> -->
 

    <!-- 选择客户弹框 -->
    <!--  @touchmove.stop.prevent="moveHandleCustomer":防止图层穿透 -->
    <!-- <view class="selectCustomerPopup">
@@ -107,7 +107,7 @@
        @select="selectCustomerSelect"
      ></u-action-sheet>
    </view> -->
 

    <!-- 级别菜单项 -->
    <!-- <view class="selectLevelSheet">
      <u-action-sheet :show="selectLevelShow" :actions="levelList" title="请选择级别" @close="selectLevelShow = false" @select="selectLevelSelect"></u-action-sheet>
@@ -116,7 +116,7 @@
</scroll-view>
</u-popup>
</view> -->
 

    <!-- 选择合同 -->
    <!-- @touchmove.stop.prevent="moveHandleContract" -->
    <!-- <view class="selectCustomerPopup">
@@ -202,7 +202,7 @@
          </uni-tr>
        </uni-table>
      </view>
 

      <view class="TableUtilBtn">
        <uni-table border emptyText="暂无更多数据">
          <uni-tr><uni-th align="center">操作</uni-th></uni-tr>
@@ -243,8 +243,8 @@
</u-popup>
</view>
-->
 
 


    <!-- 添加合同子项 -->
    <view class="addContractContainer">
      <u-popup :show="addContractShow" @close="addContractClose" @open="addContractOpen" mode="bottom" round="22">
@@ -375,7 +375,7 @@
                              <uni-td align="center">{{ item.val }}</uni-td>
                              <uni-td align="center">{{ item.price }}</uni-td>
                            </uni-tr>
 

                          </uni-table>
                        </u-checkbox-group>
                      </view>
@@ -383,7 +383,7 @@
                  </view>
                </template>
                <u-form-item @click="addContractTransportShow = true" label="运输" labelWidth="20%" ref="item1">
                  <u--input v-model="addContractTransport"></u--input>
                  <u--input v-model="addContractTransport" disabled disabledColor="#ffffff"></u--input>
                </u-form-item>
              </view>
              <view class="formDownCard">
@@ -400,18 +400,18 @@
                            v-model="addContractFormdata.quant"></u--input>
                </u-form-item>
              </view>
 

              <!-- <u-form-item label="发站" labelWidth="18%" borderBottom ref="item1"><u--input v-model="addContractFormdata.fromStation" border="none"></u--input></u-form-item>
              <u-form-item label="到站" labelWidth="18%" borderBottom ref="item1"><u--input v-model="addContractFormdata.toStation" border="none"></u--input></u-form-item>
              <u-form-item label="运费" labelWidth="18%" borderBottom ref="item1"><u--input v-model="addContractFormdata.cost1" border="none"></u--input></u-form-item>
              <u-form-item label="抑尘费" labelWidth="18%" borderBottom ref="item1"><u--input v-model="addContractFormdata.cost2" border="none"></u--input></u-form-item> -->
            </u--form>
 

            <view class="addContractConfirm">
              <u-button text="添加" type="primary" @click="addContractSanConfirm"></u-button>
            </view>
          </view>
 

          <!-- 选择煤厂 -->
          <view class="coalFiledSelectPopup">
            <u-popup :show="coalFiledSelectShow" @close="coalFiledSelectClose" @open="coalFiledSelectOpen" mode="bottom"
@@ -444,7 +444,7 @@
                      </uni-tr>
                    </uni-table>
                  </view>
 

                  <view class="TableUtilBtn">
                    <uni-table border emptyText="暂无更多数据">
                      <uni-tr>
@@ -465,7 +465,7 @@
              </scroll-view>
            </u-popup>
          </view>
 

          <!-- 选择收货人 -->
          <view class="selectCustomerPopup">
            <u-popup :show="addContractConsigneeShow" @close="addContractConsigneeClose"
@@ -482,10 +482,10 @@
                                @click="searchCustomerForm.compName = ''"></u-icon>
                      </u-form-item>
                      <u-form-item labelWidth="20%" label="客户名称" borderBottom ref="timeDataRef">
                        <u--input v-model="selectCustomerData.customerName" border="none"
                        <u--input v-model="selectCustomerData.customerFullName" border="none"
                                  placeholder="输入客户名称"></u--input>
                        <u-icon slot="right" name="close-circle-fill" v-show="selectCustomerData.customerName != ''"
                                @click="selectCustomerData.customerName = ''"></u-icon>
                        <u-icon slot="right" name="close-circle-fill" v-show="selectCustomerData.customerFullName != ''"
                                @click="selectCustomerData.customerFullName = ''"></u-icon>
                      </u-form-item>
                      <u-form-item labelWidth="20%" label="客户级别" borderBottom>
                        <u--input @focus="selectLevelShow = true" border="none" v-model="searchCustomerForm.levelText"
@@ -547,7 +547,7 @@
              </scroll-view>
            </u-popup>
          </view>
 

          <!-- 品种选择器 -->
          <view class="addContractCoalPicker">
            <u-picker
@@ -560,7 +560,7 @@
                keyName="label"
            ></u-picker>
          </view>
 

          <!-- 运输选择器 -->
          <view class="addContractCoalPicker">
            <u-picker
@@ -576,9 +576,9 @@
        </scroll-view>
      </u-popup>
    </view>
 

    <!-- 申请表格 -->
 

    <view class="newApplicationTable">
      <!-- <uni-table border stripe emptyText="暂无更多数据">
        <uni-tr v-for="(item, index) in 12" :key="index">
@@ -601,11 +601,11 @@
      <view class="balanceNo" v-if="accountDetails.balanceTotal < 0">
        <text style="color:red;">客户账户当前处于欠款状态</text>
      </view>
 

      <view class="messageCustomerBalance" v-if="accountDetails.balanceTotal >= 0">
        <text style="color: #FFA500;;">客户账户现汇余额:{{
            accountDetails.balanceTotal
          }},承兑余额：{{ accountDetails.balance2 == null ? 0 : customerChengdui }}
            accountDetails.balance == null ? 0 : accountDetails.balance
          }},承兑余额：{{ accountDetails.balance2 == null ? 0 : accountDetails.balance2 }}
        </text>
      </view>
      <u-swipe-action>
@@ -630,7 +630,7 @@
                  <text>{{ item.compName }}</text>
                </view>
              </view>
 

              <view class="cardList_item">
                <view class="">
                  品种：
@@ -658,28 +658,28 @@
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
 

      <view class="addCard" @click="addContractClick">
        <view class="addCard-icon">
          <u-icon name="plus" size="100"></u-icon>
        </view>
      </view>
    </view>
 

    <view class="new-application-button">
      <u-button text="取消" :plain="true" type="primary" @click="backPage"></u-button>
      <u-button text="确定" type="primary" @click="newApplicationFormDataClick"></u-button>
    </view>
 

    <!-- 菜单栏 -->
    <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
  </view>
</template>
 

<script>
import combinationTitle from '@/components/common/combined-title/combined-title.vue';
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
 

// 最大显示的日期
const d = new Date();
const year = d.getFullYear();
@@ -761,7 +761,7 @@
      // 选择客户
      selectCustomerData: {
        compIds: '',
        customerName: '',
        customerFullName: '',
        level: '',
        current: 1,
        size: 10
@@ -817,7 +817,7 @@
        //     trigger: ['blur', 'change']
        //   }
        // ],
 

      },
      addContractFormdata: {
        // id:null,
@@ -844,7 +844,7 @@
        // toStation: '',
        // trainType: 1,
        // type: ''
 

      },
      contractDetails: [], // 选择的合同详情
      // 选择煤厂
@@ -858,7 +858,7 @@
      addContractCoalShow: false,
      addContractCoalData: [[]],
      // 运输类型
 

      // 优惠
      favouredpolicyListAll: [], //优惠政策列表所有的
      favouredpolicyList: [], // 优惠政策列表
@@ -916,7 +916,6 @@
  },
  onLoad(options) {
    this.editApplicationTableId = JSON.parse(options.index);
 
  },
  onShow() {
    if (this.menuShow == true) {
@@ -979,33 +978,36 @@
        }
      });
      this.favouredpolicyList = list;
 

      return true;
    },
    async currentRowComputed() {
 

      //变价格用的
      this.changePriceMode(this.addContractFormdata.priceMode);
 

      //变订单量
      if (this.addContractFormdata.id != null) {
            console.log('进入计算之前',this.addContractFormdata);
        if (this.addContractFormdata.price > 0 && (this.addContractFormdata.amount > 0 || this.addContractFormdata.quant > 0)) {
               // console.log('进入类型前计算');
          let price = this.addContractFormdata.price;
          if (this.addContractFormdata.trainType == 1) {
            let q = this.addContractFormdata.amount / price;
            this.addContractFormdata.quant = q.toFixed(2);
                  console.log('输入金额',this.addContractFormdata.quant);
            this.addContractFormdata.cost1 = null; //运费
            this.addContractFormdata.cost2 = null; //抑尘费
          } else if (this.addContractFormdata.trainType == 2) {
            //如果路运价格增加抑尘费和运费
            let cost1Price = await this.getFreight(this.addContractFormdata.fromStation, this.addContractFormdata.toStation, this.addContractFormdata.customerAddressId); //路运运费
            price += cost1Price;
            price += this.dust;
            this.addContractFormdata.cost1 = (this.addContractFormdata.quant * cost1Price).toFixed(2); //运费
            this.addContractFormdata.cost2 = (this.addContractFormdata.quant * this.dust).toFixed(2); //抑尘费
 
            let amount = Number(price * this.addContractFormdata.quant) + Number(this.addContractFormdata.cost1) + Number(this.addContractFormdata.cost2);
            this.addContractFormdata.amount = amount.toFixed(2);
                     //如果路运价格增加抑尘费和运费
                     let cost1Price = await this.getFreight(this.addContractFormdata.fromStation, this.addContractFormdata.toStation, this.addContractFormdata.customerAddressId); //路运运费
                     price += cost1Price;
                     price += this.dust;
                     this.addContractFormdata.cost1 = (this.addContractFormdata.quant * cost1Price).toFixed(2); //运费
                     this.addContractFormdata.cost2 = (this.addContractFormdata.quant * this.dust).toFixed(2); //抑尘费

                     let amount = Number(price * this.addContractFormdata.quant) + Number(this.addContractFormdata.cost1) + Number(this.addContractFormdata.cost2);
                     this.addContractFormdata.amount = amount.toFixed(2);
          }
        }
      } else {
@@ -1097,10 +1099,10 @@
        this.newFormData = res.data;
        this.timeDataStr = this.newFormData.startDate;
      })
 

      // 获取合同详情，煤种
      await this.getContractDetails();
 

      // 初始化当前申请客户账户情况
      if(this.newFormData.customerId){
        await this.$reqGet('getAccount', {customerId: this.newFormData.customerId}).then(res => {
@@ -1119,8 +1121,8 @@
          this.selectOKfavouredpolicyValue.push(Number(item));
        });
      }
 
 


      // 获取价格
      // this.getNewPriceData = this.addContractFormdata;
      this.getNewPriceData.compName = this.newFormData.contractOrders[this.applicationOrderIndex].compName;
@@ -1137,7 +1139,7 @@
      this.getNewPriceData.coalName = this.newFormData.contractOrders[this.applicationOrderIndex].coalName;
      // 获取合同煤种价格
      this.getNewPrice();
 

      // 初始化第一次优惠价格计算
      // this.$nextTick(()=>{
      if (this.selectOKfavouredpolicyValue.length == 0) {
@@ -1151,7 +1153,7 @@
        })
      }
      // })
 

      // 订单运输类型
      switch (this.addContractFormdata.trainType) {
        case 1:
@@ -1161,12 +1163,12 @@
          this.addContractTransport = '路运';
          break;
      }
 
 


      this.$nextTick(() => {
        this.addContractShow = true;
      })
 

    },
    getContractDetails() {
      uni.showLoading({
@@ -1202,7 +1204,7 @@
          }
        })
      }
 

    },
    // 选择客户
    selectCustomer() {
@@ -1270,7 +1272,7 @@
    // 清空选择客户表单
    selectCustomerResetFields() {
      this.$refs.selectformRef.resetFields(); // 不起效果
      this.selectCustomerData.customerName = '';
      this.selectCustomerData.customerFullName = '';
      this.searchCustomerForm.compName = '';
      this.searchCustomerForm.levelText = '';
      this.selectCustomer();
@@ -1280,7 +1282,7 @@
      this.newFormData.customerId = v.id;
      this.$reqGet('getAccount', {customerId: v.id}).then(res => {
        this.accountDetails = res.data;
 

        this.searchContractForm.customerName = res.data.customerName;
      });
      this.$nextTick(() => {
@@ -1313,7 +1315,7 @@
        this.timeDataStr = v[0] + ' 至 ' + v[v.length - 1];
      });
    },
 

    // 选择合同
    // selectContract() {
    //     if (this.newFormData.customerName != '') {
@@ -1377,7 +1379,7 @@
    // selectContractTypeClose(v) {
    //     // 初始化合同类型选择器
    //     this.selectContractTypeData[0] = [];
 

    //     this.selectContractTypeShow = false;
    //     if (v) {
    //         this.searchContractForm.type = v.value[0];
@@ -1412,7 +1414,7 @@
    //     this.newFormData.contractNum = e.num;
    //     this.newFormData.contractId = e.id;
    //     this.selectContractShow = false;
 

    //     // 价格参数赋值
    //     this.getNewPriceData.type = e.type;
    //     // 选定合同详情
@@ -1480,7 +1482,7 @@
                  trainType: 1,
                  type: ''
                };
 

                // this.getNewPriceData.type = this.newFormData.type;
                // this.getNewPriceData.customerAddressName = this.addContractFormdata.customerFullName;
                // this.getNewPriceData.customerAddressId = this.addContractFormdata.id;
@@ -1489,7 +1491,7 @@
                // this.getNewPriceData.coalName =this.addContractFormdata.coalName;
                // 获取合同煤种价格
                // this.getNewPrice();
 

                // 运输类型初始化
                switch (this.addContractFormdata.trainType) {
                  case 1:
@@ -1499,10 +1501,10 @@
                    this.addContractTransport = '路运';
                    break;
                }
 

                // 获取合同详情，煤种
                this.getContractDetails();
 

                this.multipleSelection = [];
              }
            }
@@ -1534,9 +1536,9 @@
      this.addContractFormdata.compId = e.compId;
      this.addContractFormdata.filedId = e.id;
      this.addContractFormdata.fromStation = e.toStation;
 

      this.selectCoalFiledData = e;
 

      this.coalFiledSelectShow = false;
    },
    // 收货人
@@ -1565,15 +1567,15 @@
      this.$nextTick(() => {
        this.addContractConsigneeShow = false;
      });
 

      // 赋值给取价格请求参数
      this.getNewPriceData.customerAddressName = v.customerFullName;
      this.getNewPriceData.customerAddressId = v.id;
      this.getNewPriceData.toStation = v.toStation;
 

      this.addContractFormdata.toStation = v.toStation;
      this.addContractFormdata.customerAddressId = v.id;
 

      // 添加煤种选项
      this.contractDetails.forEach(item => {
        let a = [{label: '', id: ''}];
@@ -1584,23 +1586,23 @@
        }
        this.addContractCoalData.push(a);
      });
 

    },
    // 品种选择器
    addContractCoalConfirm(e) {
      // console.log('品种选择器', e);
 

      this.addContractCoalShow = false; // 关闭选择器
      this.addContractFormdata.coalId = e.value[0].id;
      this.addContractFormdata.coalName = e.value[0].label;
      // 煤种价格请求(煤厂=>价格参数)
      this.getNewPriceData.coalId = e.value[0].id;
      this.getNewPriceData.coalName = e.value[0].label;
 

      // this.selectCoalFiledData.compId = e.compId;
      // this.selectCoalFiledData.compName = e.compName;
      // this.selectCoalFiledData.toStation = e.fromStation;
 

      this.getNewPrice();
    },
    getNewPrice() {
@@ -1616,7 +1618,7 @@
            this.currentCoal.steelMillPrice = data.steelMillPrice; // 钢厂价格
            this.currentCoal.modifyId = data.modifyId; //修改id
            this.currentCoal.modifyInfoId = data.id;
 

            this.addContractFormdata.price = data.steelMillPrice;
            this.addContractFormdata.modifyId = data.modifyId;
            // this.addContractFormdata.id = data.id;
@@ -1638,7 +1640,7 @@
      if (e) {
        this.addContractFormdata.priceMode = e;
      }
 

      this.addContractFormdata.price = this.afterPrice.quotePrice;
      switch (this.addContractFormdata.priceMode) {
        case '0':
@@ -1886,7 +1888,7 @@
  }
};
</script>
 

<style lang="scss" scoped>
@include tableMainStyle();
::v-deep.new-application-form-data {
@@ -1896,13 +1898,13 @@
  .newApplicationTitle {
    margin-bottom: 0;
  }
 

  // 表单
  .formDataContaniner {
    .u-form {
      width: 91%;
      margin: 0 auto 0;
 

      .u-form-item {
        .u-form-item__body {
          .u-form-item__body__left {
@@ -1911,7 +1913,7 @@
              }
            }
          }
 

          .u-form-item__body__right {
            .u-form-item__body__right__content {
              .u-form-item__body__right__content__slot {
@@ -1922,20 +1924,20 @@
      }
    }
  }
 

  // 选择客户弹框
  .selectCustomerPopup {
    .u-popup {
      .u-transition {
        height: 95%;
 

        .u-popup__content {
          overflow: scroll !important;
 

          .selectCustomerTitle {
            margin-bottom: 0;
          }
 

          .selectCustomerContainer {
            padding: 0 4%;
            // .loadmoreClass{
@@ -1948,35 +1950,35 @@
            // }
            .searchContainer {
            }
 

            .searchCustomerBtn {
              margin-top: vww(10);
              display: flex;
 

              .u-button {
                width: 30%;
              }
            }
 

            // 数据列表
            .searchResultList {
              margin-top: vww(16);
            }
 

            // 合同表格
            .tableContract {
              margin-top: vww(30);
              display: flex;
              justify-content: center;
 

              .uni-table-scroll {
                min-width: 0 !important;
 

                .uni-table {
                  .uni-table-tr {
                    padding: 0;
                    font-size: vww(13);
 

                    .uni-table-th {
                      width: vww(100);
                      height: vww(32);
@@ -1986,7 +1988,7 @@
                      font-weight: 400;
                      background: #f5f5f5;
                    }
 

                    .uni-table-td {
                      line-height: vww(20);
                      padding: vww(5) vww(10);
@@ -1995,19 +1997,19 @@
                  }
                }
              }
 

              .tableBody {
                width: 80%;
              }
 

              .TableUtilBtn {
                width: 20%;
                overflow: hidden;
 

                .uni-table {
                  min-width: 0 !important;
                }
 

                .TableUtilBtnContainer {
                  .u-button {
                    width: vww(20);
@@ -2015,7 +2017,7 @@
                }
              }
            }
 

            // 合同类型选择器
            .selectContractTypePicker {
              .u-popup {
@@ -2024,7 +2026,7 @@
                }
              }
            }
 

            .selectCustomerCompSheet {
              .u-popup {
                .u-transition {
@@ -2032,7 +2034,7 @@
                }
              }
            }
 

            .selectLevelSheet {
              .u-popup {
                .u-transition {
@@ -2040,7 +2042,7 @@
                }
              }
            }
 

            // 时间选择器
            .selectContractStartTime {
              .u-popup {
@@ -2049,7 +2051,7 @@
                }
              }
            }
 

            .selectContractEndTime {
              .u-popup {
                .u-transition {
@@ -2062,30 +2064,30 @@
      }
    }
  }
 

  // 煤厂
  .addContractContainer {
    .u-popup {
      .u-transition {
        height: 95%;
 

        .u-popup__content {
          overflow: scroll !important;
 

          .addContractFormTitle {
            margin-bottom: 0;
          }
 

          // 搜索
          .coalFiledSelectSearch {
          }
 

          // 选择煤种
          .coalFiledSelectPopup {
            .u-popup {
              .u-transition {
                height: 80%;
 

                .u-popup__content {
                  overflow: scroll !important;
                  // 表格
@@ -2094,15 +2096,15 @@
                    display: flex;
                    justify-content: center;
                    margin: 0 auto;
 

                    .uni-table-scroll {
                      min-width: 0 !important;
 

                      .uni-table {
                        .uni-table-tr {
                          padding: 0;
                          font-size: vww(13);
 

                          .uni-table-th {
                            width: vww(100);
                            height: vww(32);
@@ -2112,7 +2114,7 @@
                            font-weight: 400;
                            background: #f5f5f5;
                          }
 

                          .uni-table-td {
                            line-height: vww(20);
                            padding: vww(5) vww(10);
@@ -2121,19 +2123,19 @@
                        }
                      }
                    }
 

                    .tableBody {
                      width: 80%;
                    }
 

                    .TableUtilBtn {
                      width: 20%;
                      overflow: hidden;
 

                      .uni-table {
                        min-width: 0 !important;
                      }
 

                      .TableUtilBtnContainer {
                        .u-button {
                          width: vww(20);
@@ -2149,21 +2151,21 @@
      }
    }
  }
 

  // 添加合同
  .addContractContainer {
    .u-popup {
      .u-transition {
        height: 95%;
 

        .u-popup__content {
          // background-color: rgb(247, 247, 247);
          overflow: scroll !important;
 

          .addContractForm {
            width: 92%;
            margin: 0 auto;
 

            // 表单
            // .u-form{
            //     .u-form-item{
@@ -2173,7 +2175,7 @@
            //                     .u-input{
            //                         border:1px solid #dddddd;
            //                         .u-input__content{
 

            //                         }
            //                     }
            //                 }
@@ -2181,7 +2183,7 @@
            //         }
            //     }
            // }
 

            .formUpCard {
              margin-top: vww(10);
              padding: vww(10);
@@ -2196,19 +2198,19 @@
                box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5;
                // margin-top:vww(10);
                background-color: #ffffff;
 

                .currentPriceContainer {
                  .currentPriceBox {
                    width: 92%;
                    margin: 0 auto;
                  }
                }
 

                .selectPriceContainer {
                  .selectPricebox {
                    width: 92%;
                    margin: 0 auto;
 

                    .selectPriceboxItem {
                      display: flex;
                      justify-content: space-between;
@@ -2217,7 +2219,7 @@
                }
              }
            }
 

            .formDownCard {
              border-radius: vww(4);
              padding: vww(10);
@@ -2225,12 +2227,12 @@
              margin-top: vww(10);
              background-color: #ffffff;
            }
 

            .addContractConfirm {
              margin-top: vww(30);
            }
          }
 

          // 品种选择器
          .addContractCoalPicker {
            .u-popup {
@@ -2243,19 +2245,19 @@
      }
    }
  }
 

  // 表格
  .newApplicationTable {
    margin: vww(40) auto;
    width: 100%;
    padding: vww(0) vww(10) vww(60) vww(10);
    box-sizing: border-box;
 

    .u-swipe-action {
      .u-swipe-action-item {
        box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5;
        margin-top: vww(10);
 

        .u-swipe-action-item__right {
          .u-swipe-action-item__right__button {
            .u-swipe-action-item__right__button__wrapper {
@@ -2265,28 +2267,28 @@
        }
      }
    }
 

    .cardList {
      height: vww(130);
      border-radius: vww(4);
      padding: vww(10);
      position: relative;
 

      .cardListIcon {
        position: absolute;
        right: vww(20);
        top: vww(20);
      }
 

      .cardList-container {
        .cardList_item {
          margin-top: vww(12);
          font-size: 14px;
          display: flex;
 

          view {
            width: 50%;
 

            &:nth-child(2) {
              margin-left: vww(20);
            }
@@ -2294,7 +2296,7 @@
        }
      }
    }
 

    .addCard {
      width: 100%;
      height: vww(130);
@@ -2306,15 +2308,15 @@
      box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5;
    }
  }
 

  // button
  .new-application-button {
    display: flex;
 

    .u-button {
      width: vww(120);
      height: vww(40);
    }
  }
}
</style>
</style>