资方管理页面样式调整

front-vue/src/App.vue

@@ -119,7 +119,12 @@ export default {
         padding-top: 25px;
     }
 }
-
+.zap-title {
+    padding: 0 25px 25px;
+    font-size: 16px;
+    color: #333333;
+    background-color: #ffffff;
+}
 .zap-title__prefix {
     display: inline-block;
     margin-right: 10px;
@@ -160,4 +165,77 @@ export default {
 .zap-right-toolbar{
     margin-top: 4px;
 }
+.zap-upload-invoice .el-dialog__header {
+    padding: 0;
+}
+
+.zap-upload-invoice .el-dialog__body {
+    padding: 0;
+}
+
+.zap-upload-invoice__title {
+    height: 50px;
+    padding: 0 20px;
+    padding-right: 0;
+    background-color: #f4f5f7;
+
+    .title {
+        font-size: 16px;
+        color: #333333;
+    }
+
+    .el-icon-close {
+        padding: 19px 20px;
+        font-size: 12px;
+        color: #666666;
+        cursor: pointer;
+    }
+}
+
+.zap-upload-invoice__top {
+    padding: 30px 58px;
+    background-color: #ffffff;
+}
+
+.zap-upload-invoice__top-text {
+    // margin-left: 20px;
+    font-size: 12px;
+    color: #999999;
+}
+
+.zap-upload-invoice__form .el-upload-dragger {
+    width: 484px;
+    height: 250px;
+    border: dashed 1px #e0e0e0;
+    background-color: #f4f5f6;
+}
+
+.zap-upload-invoice .el-upload-dragger .el-icon-upload {
+    margin-top: 0px;
+    margin-bottom: 20px;
+}
+
+.zap-upload-invoice__text {
+    margin-bottom: 11px;
+    font-size: 14px;
+    color: #333333;
+
+    span {
+        color: #21b24b;
+    }
+}
+
+.zap-upload-invoice__tip {
+    line-height: 18px;
+    font-size: 12px;
+    color: #999999;
+}
+.zap-upload-invoce__inner{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
 </style>

front-vue/src/views/service/bill/addBill.vue

@@ -143,7 +143,6 @@
                     <i class="el-icon-close" @click="bindClickCloseUploadInvoice"></i>
                 </el-row>
                 <el-row class="zap-upload-invoice__top">
-                    <!-- <el-button type="success">上传附件</el-button> -->
                     <span class="zap-upload-invoice__top-text">支持格式：.jpg，.jpeg，.png，单个文件不能超过3MB</span>
                 </el-row>
                 <el-row type="flex" align="middle" justify="center">
@@ -1117,12 +1116,6 @@ export default {
     background: rgb(223, 223, 223);
 }
 </style><style lang="scss" scoped>
-.zap-title {
-    padding: 0 25px 25px;
-    font-size: 16px;
-    color: #333333;
-    background-color: #ffffff;
-}
 
 ::v-deep .el-radio-button__inner {
     display: flex;
@@ -1240,78 +1233,4 @@ export default {
     padding: 30px;
     text-align: center;
 }
-
-.zap-upload-invoice ::v-deep .el-dialog__header {
-    padding: 0;
-}
-
-.zap-upload-invoice ::v-deep .el-dialog__body {
-    padding: 0;
-}
-
-.zap-upload-invoice__title {
-    height: 50px;
-    padding: 0 20px;
-    padding-right: 0;
-    background-color: #f4f5f7;
-
-    .title {
-        font-size: 16px;
-        color: #333333;
-    }
-
-    .el-icon-close {
-        padding: 19px 20px;
-        font-size: 12px;
-        color: #666666;
-        cursor: pointer;
-    }
-}
-
-.zap-upload-invoice__top {
-    padding: 30px 58px;
-    background-color: #ffffff;
-}
-
-.zap-upload-invoice__top-text {
-    // margin-left: 20px;
-    font-size: 12px;
-    color: #999999;
-}
-
-.zap-upload-invoice__form ::v-deep .el-upload-dragger {
-    width: 484px;
-    height: 250px;
-    border: dashed 1px #e0e0e0;
-    background-color: #f4f5f6;
-}
-
-.zap-upload-invoice ::v-deep .el-upload-dragger .el-icon-upload {
-    margin-top: 0px;
-    margin-bottom: 20px;
-}
-
-.zap-upload-invoice__text {
-    margin-bottom: 11px;
-    font-size: 14px;
-    color: #333333;
-
-    span {
-        color: #21b24b;
-    }
-}
-
-.zap-upload-invoice__tip {
-    line-height: 18px;
-    font-size: 12px;
-    color: #999999;
-}
-.zap-upload-invoce__inner{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
 </style>

front-vue/src/views/service/bill/billAdd.vue

@@ -158,21 +158,34 @@
             </el-table>
 
             <!-- 上传附件 -->
-            <el-dialog title="上传发票" :visible.sync="uploadOpen" width="500px" append-to-body>
-                <el-upload class="upload-demo" drag ref="upload" :file-list="fileList" :auto-upload="true" :http-request="httpRequest" :before-remove="beforeRemove" :on-remove="invoiceRemove" :before-upload="beforeAvatarUpload" accept=".jpg,.jpeg,.png" action="" multiple>
-                    <i class="el-icon-upload"></i>
-                    <div class="el-upload__text">
-                        将文件拖到此处，或<em>点击选择文件</em>
-                    </div>
-                    <div class="el-upload__tip">
-                        按住Ctrl可同时多选，单个文件不能超过2mb
-                    </div>
-                    <div class="el-upload__tip">
-                        严禁上传包含色情、暴力、反动等相关违法信息的文件。
-                    </div>
-                </el-upload>
-                <!-- <el-button type="primary" @click="submitUpload()">点击上传</el-button> -->
-                <el-button type="primary" @click="toCheck()">完成去验真</el-button>
+            <el-dialog ref="uploadInvoice" class="zap-upload-invoice" :visible.sync="uploadOpen" width="600px" :show-close="false" append-to-body>
+                <el-row slot="title" class="zap-upload-invoice__title" type="flex" align="middle" justify="space-between">
+                    <span class="title">上传发票</span>
+                    <i class="el-icon-close" @click="bindClickCloseUploadInvoice"></i>
+                </el-row>
+                <el-row class="zap-upload-invoice__top">
+                    <span class="zap-upload-invoice__top-text">支持格式：.jpg，.jpeg，.png，单个文件不能超过3MB</span>
+                </el-row>
+                <el-row type="flex" align="middle" justify="center">
+                    <el-upload class="zap-upload-invoice__form" drag ref="upload" :file-list="fileList" :auto-upload="true" :http-request="httpRequest" :before-remove="beforeRemove" :on-remove="invoiceRemove" :before-upload="beforeAvatarUpload" accept=".jpg,.jpeg,.png" action="" multiple>
+                        <div class="zap-upload-invoce__inner">
+                            <i class="el-icon-upload" style="font-size: 64px;"></i>
+                            <div class="zap-upload-invoice__text">
+                                将文件拖到此处，或<span>点击上传</span>
+                            </div>
+                            <div class="zap-upload-invoice__tip">
+                                按住Ctrl可同时多选，单个文件不能超过2mb
+                            </div>
+                            <div class="zap-upload-invoice__tip">
+                                严禁上传包含色情、暴力、反动等相关违法信息的文件。
+                            </div>
+                        </div>
+                    </el-upload>
+                </el-row>
+                <el-row style="height: 109px;" type="flex" align="middle" justify="center">
+                    <el-button type="primary" plain="" @click="bindClickCloseUploadInvoice">取消</el-button>
+                    <el-button type="primary" @click="toCheck()">完成去验真</el-button>
+                </el-row>
             </el-dialog>
 
             <!-- 发票验真 -->
@@ -268,14 +281,6 @@
                     支持格式：JPG/PNG </br>
                     单个文件不能超过2MB
                 </div>
-                <!-- 设置缩略图模板 -->
-                <div slot="file" slot-scope="{file}" class="zap-contract-add__thumbnail">
-                    <img class="zap-contract-add__fileimg" src="../../../assets/images/file_img.png" alt="">
-                    <span class="zap-contractadd__filename">{{file.name}}</span>
-                    <span class="zap-contract-add__delete" @click="handleRemove(file)">
-                        <i class="el-icon-error"></i>
-                    </span>
-                </div>
             </el-upload>
         </div>
     </el-row>
@@ -294,14 +299,6 @@
                     支持格式：JPG/PNG </br>
                     单个文件不能超过2MB
                 </div>
-                <!-- 设置缩略图模板 -->
-                <div slot="file" slot-scope="{file}" class="zap-contract-add__thumbnail">
-                    <img class="zap-contract-add__fileimg" src="../../../assets/images/file_img.png" alt="">
-                    <span class="zap-contractadd__filename">{{file.name}}</span>
-                    <span class="zap-contract-add__delete" @click="handleRemove(file)">
-                        <i class="el-icon-error"></i>
-                    </span>
-                </div>
             </el-upload>
         </div>
     </el-row>
@@ -320,14 +317,6 @@
                     支持格式：JPG/PNG </br>
                     单个文件不能超过2MB
                 </div>
-                <!-- 设置缩略图模板 -->
-                <div slot="file" slot-scope="{file}" class="zap-contract-add__thumbnail">
-                    <img class="zap-contract-add__fileimg" src="../../../assets/images/file_img.png" alt="">
-                    <span class="zap-contractadd__filename">{{file.name}}</span>
-                    <span class="zap-contract-add__delete" @click="handleRemove(file)">
-                        <i class="el-icon-error"></i>
-                    </span>
-                </div>
             </el-upload>
         </div>
     </el-row>
@@ -1122,6 +1111,12 @@ export default {
             }
             return chineseStr;
         },
+        /**
+         * 点击关闭上传发票弹窗
+         */
+        bindClickCloseUploadInvoice() {
+            this.uploadOpen = false
+        }
     },
 };
 </script>