Просмотр исходного кода

开立融信页面样式调整

zhanglb 4 лет назад
Родитель
Сommit
7ccaea1f8d

+ 23 - 2
front-vue/src/App.vue

@@ -120,12 +120,15 @@ export default {
 }
 
 .zap-title {
-    padding: 25px;
+    padding: 20px;
     font-size: 16px;
+    font-weight: 500;
     color: #333333;
     background-color: #ffffff;
 }
-
+.el-form-item__label-wrap .el-form-item__label{
+    font-weight: normal;
+}
 .zap-title__prefix {
     display: inline-block;
     margin-right: 10px;
@@ -290,4 +293,22 @@ export default {
     background: #00B53A;
     border-radius: 4px;
 }
+.zap-form-tip{
+    display: flex;
+    align-items: flex-start;
+    line-height: 20px;
+    font-size: 14px;
+    color: #999999;
+    img{
+        width:16px;
+        height: 16px;
+        margin-top: 2px;
+        margin-right: 8px;
+    }
+}
+.zap-warmtips{
+    line-height: 40px;
+    font-size: 14px;
+    color: #999999;
+}
 </style>

BIN
front-vue/src/assets/images/icon_grey_tip.png


BIN
front-vue/src/assets/images/icon_tip.png


+ 1 - 1
front-vue/src/assets/styles/element-variables.scss

@@ -5,7 +5,7 @@
 
 /* theme color */
 $--color-primary: #4280f2;
-$--color-success: #13ce66;
+$--color-success: #00B53A;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
 // $--color-info: #1E1E1E;

+ 1 - 1
front-vue/src/components/Upload/index.vue

@@ -401,7 +401,7 @@ export default {
         top: -6px;
         width: 40px;
         height: 24px;
-        background: #13ce66;
+        background: #00B53A;
         text-align: center;
         transform: rotate(45deg);
         box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);

+ 26 - 18
front-vue/src/views/service/credit/addCredit.vue

@@ -5,12 +5,12 @@
             <div class="zap-title">开立融信</div>
             <el-row class="zap-form zap-form--clear">
                 <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-                    <el-form-item size="large" label="开立方" prop="openName">
+                    <el-form-item size="medium" label="开立方" prop="openName">
                         <el-input v-model="form.openName" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-                    <el-form-item size="large" label="授信额度" prop="zfiCoreQuotaId">
+                    <el-form-item size="medium" label="授信额度" prop="zfiCoreQuotaId">
                         <el-select v-model="form.zfiCoreQuotaId" filterable clearable remote @change="change">
                             <el-option v-for="item in creditLineList" :key="item.value" :label="item.label+'/'+item.remaining" :value="item.value">
                             </el-option>
@@ -28,7 +28,7 @@
                     </el-row>
                 </el-col>
                 <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-                    <el-form-item size="large" label="接收方" prop="zfiSupplierId">
+                    <el-form-item size="medium" label="接收方" prop="zfiSupplierId">
                         <el-select v-model="form.zfiSupplierId" filterable clearable remote>
                             <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
@@ -36,16 +36,20 @@
                     </el-form-item>
                 </el-col>
                 <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-                    <el-form-item size="large" label="签发有效期" prop="zfiEffectiveDate">
-                        <el-date-picker clearable v-model="form.zfiEffectiveDate" type="date" value-format="yyyy-MM-dd" placeholder="选择签发有效期" :picker-options="pickerOptions">
-                        </el-date-picker>
-                        <el-tooltip class="item" effect="light" content="签发有效期:即指定签发截止日期,对方企业在签发截止日内未处理该笔融信,本次融信操作将自动失效" placement="top">
-                            <i class="el-icon-question" style="font-size: 23px;"/>
-                        </el-tooltip>
+                    <el-form-item size="medium" label="签发有效期" prop="zfiEffectiveDate">
+                        <el-row type="flex" align="middle">
+                            <el-date-picker clearable v-model="form.zfiEffectiveDate" type="date" value-format="yyyy-MM-dd" placeholder="选择签发有效期" :picker-options="pickerOptions">
+                            </el-date-picker>
+                            <el-tooltip class="item" effect="light" content="签发有效期:即指定签发截止日期,对方企业在签发截止日内未处理该笔融信,本次融信操作将自动失效" placement="top">
+                                <el-row  type="flex" align="middle">
+                                    <img style="width: 20px;height: 20px;margin-left: 8px;" src="../../../assets/images/icon_tip.png" alt="">
+                                </el-row>
+                            </el-tooltip>
+                        </el-row>
                     </el-form-item>
                 </el-col>
                 <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-                        <el-form-item label="承诺还款日" prop="zfiExpireDate">
+                        <el-form-item label="承诺还款日" prop="zfiExpireDate" size="medium">
                             <el-date-picker clearable size="small" v-model="form.zfiExpireDate" type="date" value-format="yyyy-MM-dd" placeholder="选择承诺还款日" :picker-options="pickerOptions">
                             </el-date-picker>
                         </el-form-item>
@@ -65,19 +69,23 @@
             </el-row>
             <div class="zap-title zap-margin-top">资产信息</div>
             <el-row class="zap-form">
+                <div class="zap-form-tip">
+                    <img src="../../../assets/images/icon_grey_tip.png" alt="">
+                    请知悉,资产信息仅能接受指定的销售方与购买方的往来账款(含账款基本信息、贸易合同与贸易发票等);如须使用系统尚未维护的往来账款,请点击新增应付账款
+                </div>
                 <el-row type="flex" align="middle" justify="space-between" style="padding-top: 8px;padding-bottom:20px;">
                     <el-col>
                         <el-button type="success" @click="openTicket">选择</el-button>
-                        <el-button type="primary" @click="addPay">新增应付账款</el-button>
+                        <el-button type="primary" @click="addPay"><i class="el-icon-plus"></i>新增应付账款</el-button>
                         <el-button @click="deleteTicekt">清空全部</el-button>
                     </el-col>
                     <el-col>
                         <el-row type="flex" align="middle" justify="end">
                             <el-form-item label="合计金额:" class="zap-margin-clear">
-                                <span>{{checkTotalAmt}}</span>
+                                <span style="color: #FF2F2F;">{{checkTotalAmt}}</span>
                             </el-form-item>
                             <el-form-item label="金额大写:" class="zap-margin-clear">
-                                <span>{{checkTotalBigAmt}}</span>
+                                <span style="color: #FF2F2F;">{{checkTotalBigAmt}}</span>
                             </el-form-item>
                         </el-row>
                     </el-col>
@@ -97,12 +105,10 @@
                         </template>
                     </el-table-column>
                 </el-table>
-                <p>请知悉,资产信息仅能接受指定的销售方与购买方的往来账款(含账款基本信息、贸易合同与贸易发票等);如须使用系统尚未维护的往来账款,请点击新增应付账款
-                </p>
             </el-row>
         </el-form>
     </el-row>
-    <div class="contain">
+    <div class="zap-warmtips">
         <p>友情提醒:
         </p>
         <p>
@@ -118,8 +124,8 @@
     </div>
 
     <el-row type="flex" justify="center" align="middle" style="height: 96px;">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button type="primary" plain @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">提 交</el-button>
+        <el-button plain @click="cancel">取 消</el-button>
     </el-row>
     <!-- 应付账款信息 -->
     <el-dialog :title="payTitle" :visible.sync="open" width="1120px" append-to-body destroy-on-close>
@@ -1203,6 +1209,8 @@ table th.star div::before {
 .zap-available-credit {
     height: 40px;
     margin-bottom: 22px;
+    font-size: 14px;
+    color: #FF2F2F;
 }
 
 .zap-title {