up

src/config/index.js

@@ -17,7 +17,7 @@ export default {
     statusWhiteList: [],    //http的status默认放行列表
     ossUrl: 'https://bladex-test-info.oss-cn-chengdu.aliyuncs.com', //oss地址
     smsPhone: '',  //测试接受短信验证码的手机号
-    dev_version: '202209151455',    //开发版本号
+    dev_version: '202209151818',    //开发版本号
     prod_host: 'http://47.110.251.215:8090',  //线上
     dev_host: 'http://192.168.4.6', //黄键楠
     //dev_host: 'http://192.168.3.13', //祝炜

src/layout/layout.scss

@@ -20,6 +20,7 @@
         position: relative;
         color: #838791;
         background: #f1f5f8;
+        transition: 0.2s;
         box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
         border-radius: 0 60px 0 0;
         z-index: 1;
@@ -57,6 +58,7 @@
             justify-content: center;
             padding: 24px 0;
             margin-top: 24px;
+            transition: 0.2s;
             &:before {
                 position: absolute;
                 content: '';

src/styles/app/main.scss

@@ -48,63 +48,11 @@ html, body, #app {
     }
 }
 
-
-.n-layout .n-layout-scroll-container {
-    background-color: #F5F5F5;
-}
-
-.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix,
-.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix {
-    z-index: 1;
-}
-
-.hc-drawer-target {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
+.hc-flex-column {
+    display: flex;
+    flex-direction: column;
 }
 
-.n-divider {
-    --n-color: #d9d9d9 !important;
-    --n-text-color: #b8b8b8 !important;
-    font-size: 18px;
-    .n-divider__title {
-        font-weight: inherit;
-    }
-    &:not(.n-divider--vertical) {
-        margin-top: 15px;
-        margin-bottom: 15px;
-    }
-}
-
-.n-card.hc-card-overflow-box {
-    height: 100%;
-    overflow: hidden;
-    .n-card__content {
-        position: relative;
-        overflow-y: auto;
-        height: 100%;
-        padding: 0;
-    }
-    .n-card__action {
-        background-color: white;
-        border-top: 1px solid var(--n-border-color);
-    }
-}
-.n-card.hc-card-overflow-p-box {
-    height: 100%;
-    overflow: hidden;
-    .n-card__content {
-        position: relative;
-        overflow-y: auto;
-        height: 100%;
-    }
-    .n-card__action {
-        background-color: white;
-        border-top: 1px solid var(--n-border-color);
-    }
-}
 
 .hc-sticky-box {
     position: sticky;
@@ -112,102 +60,6 @@ html, body, #app {
     top: 0;
 }
 
-.hc-input-search-icon {
-    color: #999999;
-    cursor: pointer;
-    transition: color 0.2s;
-    &:hover {
-        color: var(--hc-primary);
-    }
-}
-
-.n-image-preview-container {
-    --n-toolbar-icon-color: rgb(51, 54, 57) !important;
-    --n-toolbar-color: #ffffff !important;
-    --n-toolbar-border-radius: 3px !important;
-    --n-toolbar-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
-    .n-base-icon {
-        width: auto;
-    }
-}
-
-.hc-line-tab {
-    .n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav-scroll-content {
-        border-bottom: 1px solid #ffffff;
-    }
-    .n-tabs .n-tabs-tab-pad {
-        width: 0;
-    }
-    .n-tabs .n-tabs-tab {
-        position: relative;
-        height: 60px;
-        padding: 0 20px;
-    }
-    .n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,
-    .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
-        background: rgba(0, 129, 255, .1);
-    }
-    .n-tabs .n-tabs-bar {
-        height: 3px;
-    }
-    .tab-hover-dropdown-box {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        .tab-hover-dropdown {
-            position: relative;
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-
-.hc-line-menu {
-    position: sticky;
-    background: white;
-    padding: 10px 24px;
-    top: 0;
-    z-index: 222;
-    border-top: 1px solid #f3f3f3;
-    .n-menu .n-menu-item,
-    .n-menu .n-submenu .n-menu-item-content,
-    .n-menu.n-menu--horizontal .n-menu-item-content {
-        height: 60px;
-    }
-    .n-menu .n-menu-item-content .n-menu-item-content__icon {
-        font-size: 16px !important;
-        margin-right: 2px !important;
-    }
-    .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active,
-    .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected {
-        border-bottom: 3px solid #0081ff;
-        background: rgba(0, 129, 255, 0.1);
-    }
-}
-
-
-.hc-type-tabs {
-    position: relative;
-    .n-tabs {
-        width: initial;
-        display: inline-block;
-        .n-tabs-rail {
-            background-color: var(--n-bar-color);
-            .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active {
-                font-weight: inherit;
-                color: var(--n-bar-color);
-                background-color: white;
-            }
-        }
-        .n-tabs-tab {
-            color: white;
-            padding: 6px 20px;
-            --n-tab-text-color-hover: #c6ddf5 !important;
-        }
-    }
-}
 
 .pover-menu-list {
     position: relative;
@@ -242,16 +94,10 @@ html, body, #app {
 .el-radio-group .el-radio {
     margin-right: 10px;
 }
-.n-dialog.n-modal .n-dialog__content {
-    margin: 20px 0 24px 32px;
-}
 
 .bg-card-main {
     background-color: var(--hc-bg-color);
 }
-.n-badge {
-    color: inherit;
-}
 
 .hc-list-box {
     position: relative;

src/styles/ledger/query.scss

@@ -35,11 +35,13 @@
         flex-direction: column;
         position: relative;
         margin-left: 24px;
+        height: 100%;
         .hc-content-box {
             flex: 1;
             display: flex;
             position: relative;
             margin-bottom: 24px;
+            height: calc(100% - 105px);
             .hc-table-forem-box {
                 flex: 1;
                 padding: 24px;
@@ -56,6 +58,38 @@
                 background: #f1f5f8;
                 border-radius: 10px;
                 box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+                .hc-process-box {
+                    position: relative;
+                    flex: 1;
+                    overflow: hidden;
+                    .hc-scrollbar-box {
+                        display: contents;
+                    }
+                    .process-item-box {
+                        position: relative;
+                        color: #838791;
+                        font-size: 14px;
+                        padding: 8px 0;
+                        display: flex;
+                        align-items: flex-start;
+                        .process-item {
+                            position: relative;
+                            flex: 1;
+                        }
+                        .process-icon {
+                            font-size: 20px;
+                            cursor: pointer;
+                            margin-left: 16px;
+                            transition: color 0.2s;
+                            &:hover {
+                                color: var(--el-color-primary-light-3);
+                            }
+                        }
+                    }
+                    .process-item-box + .process-item-box {
+                        border-top: 0.5px solid #e9e9e9;
+                    }
+                }
             }
         }
         .hc-footer-box {

src/views/ledger/query.vue

@@ -31,16 +31,47 @@
                     </div>
 
                 </div>
-                <div class="hc-right-pian-box">
+                <div class="hc-right-pian-box hc-flex-column">
                     <DateCalendar :dateData="dateData" @choice-date="dateCalendarChoice"/>
                     <el-alert title="蓝色代表当天已填写过日志" type="warning" show-icon/>
-                    <el-button type="primary" hc-btn>
-                        <HcIcon name="add-circle"/>
-                        <span>关联工序</span>
-                    </el-button>
-
-                    123456
-
+                    <div class="my-4">
+                        <el-button type="primary" hc-btn>
+                            <HcIcon name="add-circle"/>
+                            <span>关联工序</span>
+                        </el-button>
+                    </div>
+                    <div class="hc-process-box">
+                        <el-scrollbar>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                            <div class="process-item-box">
+                                <div class="process-item">这是名称这是名称这是名称这是名称这是名称这是名称这是名称</div>
+                                <HcIcon name="close-circle" fill class="process-icon"/>
+                            </div>
+                        </el-scrollbar>
+                    </div>
                 </div>
             </div>
             <div class="hc-footer-box">