Browse Source

查看进度页面样式调整

zhanglb 3 năm trước cách đây
mục cha
commit
7fc5f90060

+ 163 - 146
front-vue/src/assets/styles/huyi.scss

@@ -1,195 +1,194 @@
- /**
+/**
  * 通用css样式布局处理
  * Copyright (c) 2019 huyi
  */
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
-	padding-top: 5px;
+  padding-top: 5px;
 }
 .pr5 {
-	padding-right: 5px;
+  padding-right: 5px;
 }
 .pb5 {
-	padding-bottom: 5px;
+  padding-bottom: 5px;
 }
-.pt20{
-	padding-top: 20px !important;
+.pt20 {
+  padding-top: 20px !important;
 }
-.pb20{
-	padding-bottom: 20px !important;
+.pb20 {
+  padding-bottom: 20px !important;
 }
 .mt5 {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 .mr5 {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 .mb5 {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 .mb8 {
-	margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .ml5 {
-	margin-left: 5px;
+  margin-left: 5px;
 }
 .mt10 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .mr10 {
-	margin-right: 10px;
+  margin-right: 10px;
 }
 .mb10 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .ml0 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 .mt20 {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 .mr20 {
-	margin-right: 20px;
+  margin-right: 20px;
 }
 .mb20 {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 .m20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
-.el-dialog:not(.is-fullscreen){
-	margin-top: 6vh !important;
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+.el-table--medium th,
+.el-table--medium td {
+  padding: 6px 0 !important;
 }
-	.el-table--medium th, .el-table--medium td{
-		padding: 6px 0!important;
-	  }
 .el-table {
-	font-size: 12px;
-	.el-table--medium th, .el-table--medium td{
-		padding: 8px,0!important;
-	  }
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
-		th {
-			word-break: break-word;
-			background-color: #f8f8f9;
-			color: #515a6e;
-			height: 28px;
-			font-size: 12px;
-		}
-	}
-	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
-			margin-left: 1px;
-		}
-	}
+  font-size: 12px;
+  .el-table--medium th,
+  .el-table--medium td {
+    padding: 8px, 0 !important;
+  }
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 28px;
+      font-size: 12px;
+    }
+  }
+  .el-table__body-wrapper {
+    .el-button [class*='el-icon-'] + span {
+      margin-left: 1px;
+    }
+  }
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:12px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+  font-size: 12px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px;
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 25px;
-	margin-bottom: 10px;
-	margin-top: 15px;
-	padding: 10px 20px !important;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #ffffff none;
+  border-radius: 4px;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
 .el-table .fixed-width .el-button--mini {
-	color: #409EFF;
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
-	
+  color: #409eff;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 .el-tree-node__content > .el-checkbox {
-	margin-right: 8px;
-	font-size: 13px;
+  margin-right: 8px;
+  font-size: 13px;
 }
 
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #EBEBEB;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 14px;
-	color: #999999;
+  border-bottom: 1px solid #ebebeb;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 14px;
+  color: #999999;
 }
 
 .pull-right {
-	float: right !important;
-
+  float: right !important;
 }
 .pulll-right {
-	float: right !important;
-	border:none;
-    overflow: hidden;
-text-overflow:ellipsis;
-white-space: nowrap;
-max-width: 50%;
- 
-
+  float: right !important;
+  border: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 50%;
 }
 //卡片样式>
 .fiche {
-	border-radius: 8px;
-	margin-bottom:10px;
-	background-color: #FAFAFA;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  background-color: #fafafa;
 }
 .el-card__header {
-	padding: 14px 15px 7px;
-	min-height: 40px;
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 0px 20px;
+  padding: 15px 20px 0px 20px;
 }
-.el-form-item__label{
-	font-size: 13px!important;
+.el-form-item__label {
+  font-size: 13px !important;
 }
 .el-button--small {
-	padding: 7px 8px;
-	border-radius: 20px
+  padding: 7px 8px;
+  border-radius: 20px;
 }
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
@@ -197,103 +196,121 @@ max-width: 50%;
 .el-button--cyan:active {
   background: #4280f2;
   border-color: #4280f2;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .el-button--cyan:focus,
 .el-button--cyan:hover {
   background: #6899f5;
   border-color: #6899f5;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .el-button--cyan {
   background-color: #4280f2;
   border-color: #4280f2;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* text color */
 .text-navy {
-	color: #1ab394;
+  color: #1ab394;
 }
 
 .text-primary {
-	color: inherit;
+  color: inherit;
 }
 
 .text-success {
-	color: #1c84c6;
+  color: #1c84c6;
 }
 
 .text-info {
-	color: #23c6c8;
+  color: #23c6c8;
 }
 
 .text-warning {
-	color: #f8ac59;
+  color: #f8ac59;
 }
 .text-warnings {
-	color: #23C6C8;
+  color: #23c6c8;
 }
 
 .text-danger {
-	color: #ed5565;
+  color: #ed5565;
 }
 
 .text-muted {
-	color: #888888;
+  color: #888888;
 }
 
 /* image */
 .img-circle {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .img-lg {
-	width: 120px;
-	height: 120px;
+  width: 120px;
+  height: 120px;
 }
 
 .avatar-upload-preview {
-	position: absolute;
-	top: 50%;
-	transform: translate(50%, -50%);
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	box-shadow: 0 0 4px #ccc;
-	overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
 /* 拖拽列样式 */
-.sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+.sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }
-.el-tree-node__label{
-	font-size: 13px;
+.el-tree-node__label {
+  font-size: 13px;
 }
-.el-tree__empty-text{
-font-size: 13px;
-}	
-.el-input.is-disabled .el-input__inner{
-	background-color: #fff!important;
-	color: #000;
+.el-tree__empty-text {
+  font-size: 13px;
 }
-.el-tooltip__popper.is-light{
+.el-input.is-disabled .el-input__inner {
+  background-color: #fff !important;
+  color: #000;
+}
+.el-tooltip__popper.is-light {
   font-size: 16px !important;
-    border: 1px solid #000000 !important;
+  border: 1px solid #000000 !important;
 }
 
-.zap-line{
-	width: 100%;
-	height: 0;
-	border-bottom: 1px solid #F4F5F6;
-}
+.zap-line {
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid #f4f5f6;
+}
+.el-dialog__header {
+  padding: 13px 20px;
+  background-color: #4280f2;
+}
+.el-dialog__title {
+  font-size: 16px;
+  color: #ffffff;
+}
+.el-dialog__headerbtn .el-dialog__close {
+  font-size: 20px;
+  color: #ffffff;
+}
+.el-dialog__footer {
+  text-align: center;
+}
+.el-dialog__body {
+  padding: 0;
+}

+ 1 - 1
front-vue/src/views/service/credit/credit.vue

@@ -803,7 +803,7 @@
                         
                     </el-tab-pane>
                     <!-- 查看流程 -->
-                    <el-dialog title="查看流程" :visible.sync="openFlowDetail" width="1120px" append-to-body>
+                    <el-dialog title="查看流程" :visible.sync="openFlowDetail" width="837px" append-to-body>
                         <flow-detail :financeId="financeId" :financeType="financeType" :financeActive="financeActive" v-if="openFlowDetail"></flow-detail>
                         <span slot="footer" class="dialog-footer">
                             <el-button type="primary" @click="closeFliwDetail">关闭</el-button>

+ 100 - 93
front-vue/src/views/service/credit/flowDetail.vue

@@ -1,114 +1,121 @@
 <template>
-  <div class="app-container">
-    <el-container>
-      <el-header>
+<el-container>
+    <el-header style="margin-top: 32px;padding: 0;">
         <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '0'">
-          <el-step title="融信申请"></el-step>
-          <el-step title="平台审核"></el-step>
-          <el-step title="融信确认"></el-step>
-          <el-step title="签收生效"></el-step>
+            <el-step title="融信申请"></el-step>
+            <el-step title="平台审核"></el-step>
+            <el-step title="融信确认"></el-step>
+            <el-step title="签收生效"></el-step>
         </el-steps>
         <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '1'">
-          <el-step title="融信开立"></el-step>
-          <el-step title="补全资料"></el-step>
-          <el-step title="平台审核"></el-step>
-          <el-step title="签收生效"></el-step>
+            <el-step title="融信开立"></el-step>
+            <el-step title="补全资料"></el-step>
+            <el-step title="平台审核"></el-step>
+            <el-step title="签收生效"></el-step>
         </el-steps>
         <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '2'">
-          <!-- <el-step title="融信开立"></el-step>
+            <!-- <el-step title="融信开立"></el-step>
           <el-step title="平台审核"></el-step>
           <el-step title="确权生效"></el-step> -->
-          <el-step title="平台审核"></el-step>
-          <el-step title="合同签署"></el-step>
-          <el-step title="确权生效"></el-step>
+            <el-step title="平台审核"></el-step>
+            <el-step title="合同签署"></el-step>
+            <el-step title="确权生效"></el-step>
         </el-steps>
-      </el-header>
-      <el-main style="border: 1px solid;margin:10%;min-height:300px">
+    </el-header>
+    <el-main class="zap-flow-detail_main">
         <el-steps direction="vertical" :active="financeLogList.length" :space="200">
-          <el-step v-for="(item, index) in financeLogList" :key="index" :title="item.zflContent" :description="parseTime(new Date(item.createTime),'{y}-{m}-{d}')"></el-step>
+            <el-step v-for="(item, index) in financeLogList" :key="index" :title="item.zflContent" :description="parseTime(new Date(item.createTime),'{y}-{m}-{d}')"></el-step>
         </el-steps>
-      </el-main>
-    </el-container>
-  </div>
+    </el-main>
+</el-container>
 </template>
 
 <script>
-import { financeLogList } from "@/api/service/credit/financeLog";
+import {
+    financeLogList
+} from "@/api/service/credit/financeLog";
 
 export default {
-  name: "billAdd",
-  components: {},
-  props: {
-    // 正常的业务数据,对应echarts饼图配置中series[0].data
-    financeId: {
-      type: String,
-      required: true,
-      default: () => "",
+    name: "billAdd",
+    components: {},
+    props: {
+        // 正常的业务数据,对应echarts饼图配置中series[0].data
+        financeId: {
+            type: String,
+            required: true,
+            default: () => "",
+        },
+        // 表示需要特殊定制的配置
+        // 一般UI会规定一个统一的设计规范(比如颜色,字体,图例格式,位置等)
+        // 但不排除某个图标会和设计规范不同,需要特殊定制样式,所以开放这个配置,增强灵活性
+        financeType: {
+            type: String,
+            required: true,
+            default: () => "",
+        },
+        financeActive: {
+            type: Number,
+            required: true,
+            default: () => 0,
+        },
     },
-    // 表示需要特殊定制的配置
-    // 一般UI会规定一个统一的设计规范(比如颜色,字体,图例格式,位置等)
-    // 但不排除某个图标会和设计规范不同,需要特殊定制样式,所以开放这个配置,增强灵活性
-    financeType: {
-      type: String,
-      required: true,
-      default: () => "",
+    data() {
+        return {
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 是否显示弹出层
+            open: false,
+            uploadOpen: false,
+            // 查询参数
+            queryParams: {},
+            // 表单参数
+            form: {
+                zbiAmount: 0.0,
+            },
+            //操作记录
+            financeLogList: [
+                // {
+                //   zflContent:"12343567890876564343557876543",
+                //   createTime:new Date()
+                // },
+                // {
+                //   zflContent:"assdjhfdjshk;dlfgkls;aklfdkslda;",
+                //   createTime:new Date()
+                // },
+                // {
+                //   zflContent:"213j3g45k6kl6j76k57hk45j7lk6j75",
+                //   createTime:new Date()
+                // }
+            ],
+            active: 0
+        };
     },
-    financeActive: {
-      type: Number,
-      required: true,
-      default: () => 0,
+    created() {
+        const financeId = this.financeId
+        this.getList(financeId)
     },
-  },
-  data() {
-    return {
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 是否显示弹出层
-      open: false,
-      uploadOpen: false,
-      // 查询参数
-      queryParams: {},
-      // 表单参数
-      form: {
-        zbiAmount: 0.0,
-      },
-      //操作记录
-      financeLogList:[
-        // {
-        //   zflContent:"12343567890876564343557876543",
-        //   createTime:new Date()
-        // },
-        // {
-        //   zflContent:"assdjhfdjshk;dlfgkls;aklfdkslda;",
-        //   createTime:new Date()
-        // },
-        // {
-        //   zflContent:"213j3g45k6kl6j76k57hk45j7lk6j75",
-        //   createTime:new Date()
-        // }
-      ],
-      active: 0
-    };
-  },
-  created() {
-    const financeId = this.financeId
-    this.getList(financeId)
-  },
-  activated() {},
-  methods: {
-    getList(financeId){
-      financeLogList(financeId).then((response) => {
-        this.financeLogList = response.data;
-        if(response.data && response.data.length > 0){
-          const length = response.data.length - 1
-          this.active = new Number(response.data[length].zflNode) + 1
+    activated() {},
+    methods: {
+        getList(financeId) {
+            financeLogList(financeId).then((response) => {
+                this.financeLogList = response.data;
+                if (response.data && response.data.length > 0) {
+                    const length = response.data.length - 1
+                    this.active = new Number(response.data[length].zflNode) + 1
+                }
+            });
         }
-      });
-    }
-  },
+    },
 };
-</script>
+</script>
+
+<style lang="scss">
+.zap-flow-detail_main {
+    padding-top: 44px;
+    padding-left: 47px;
+}
+</style>