style update

src/assets/styles/mixin.less

@@ -1174,8 +1174,11 @@
                 background: @m-grey22;
                 color: @m-white0;
                 padding: 5px 15px;
-                &:hover {
-                    color: @m-blue0;
+                .popItem {
+                    cursor: pointer;
+                    &:hover {
+                        color: @m-blue0;
+                    }
                 }
             }
         }
@@ -2192,9 +2195,11 @@ input:-internal-autofill-selected {
             display: inline-flex;
         }
         .ant-steps-item-tail {
-
+            left: 9.5px !important;
+            padding: 30px 0 0 0 !important;
         }
         .ant-steps-item-icon {
+            margin-top: 5px;
             width: 20px;
             height: 20px;
             background: @m-grey11;
@@ -2230,12 +2235,14 @@ input:-internal-autofill-selected {
                 padding-left: 14px;
                 font-size: 16px;
                 color: @m-white0;
+                line-height: 28px;
             }
             .day {
                 width: 70px;
                 text-align: right;
                 color: @m-blue0;
                 margin-right: 17px;
+                line-height: 28px;
             }
             .arrowRight {
                 display: none;
@@ -2258,6 +2265,7 @@ input:-internal-autofill-selected {
     }
     .ant-steps-item-process {
         .line {
+            border: 1px solid @m-blue0;
             .arrowRight {
                 display: block;
             }
@@ -2265,8 +2273,45 @@ input:-internal-autofill-selected {
         .tip {
             color: @m-blue0;
         }
+        .ant-steps-item-icon {
+            width: 22px !important;
+            height: 22px !important;
+            background: url(../images/stepPro.png) center center no-repeat !important;
+            background-size: cover !important;
+            border: 0;
+            .ant-steps-icon {
+                display: none;
+            }
+        }
     }
     .ant-steps-item-wait {
-
+        .line {
+            .num {
+                background: @m-grey28;
+            }
+            .desc {
+                color: @m-grey29;
+            }
+        }
+        .tip {
+            color: @m-grey30;
+        }
+        .ant-steps-item-icon {
+            border: 0;
+            width: 22px !important;
+            height: 22px !important;
+            background: url(../images/stepWait.png) center center no-repeat !important;
+            background-size: cover !important;
+            .ant-steps-icon {
+                display: none;
+            }
+        }
     }
+}
+.commonSteps > .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
+    background-color: @m-blue24;
+}
+
+.commonSteps > .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after {
+    background-color: @m-grey30;
 }

src/assets/styles/theme.css

@@ -1,14 +1,77 @@
 /* 默认主题 */
 :root {
     --m-grey0: #364048 ;
+    --m-grey1: #7a8a94;
+    --m-grey2: #88a0ae;
+    --m-grey5: #363F45;
+    --m-grey6: #272F36;
+    --m-grey7: #171A1B;
+    --m-grey8: #272E32;
+    --m-grey9: #252D34;
+    --m-grey10: #394753;
+    --m-grey11: #0F1A25;
+    --m-grey12: #343D46;
+    --m-grey12-hover: rgba(52, 61, 70, .8);
+    --m-grey13: #38444F;
+    --m-grey13-hover: rgba(56, 68, 79, .8);
+    --m-grey14: #2B3F52;
+    --m-grey15: #455773;
+    --m-grey15-hover: rgba(69, 87, 115, .8);
+    --m-grey16: #405066;
+    --m-grey16-hover: rgba(64, 80, 102, .8);
+    --m-grey18: #1D2327;
+    --m-grey19: #162534;
+    --m-grey20: #1B2A38;
 }
 
 /* 黑色主题 */
 :root[theme="dark"] {
     --m-grey0: #364048 ;
+    --m-grey1: #7a8a94;
+    --m-grey2: #88a0ae;
+    --m-grey5: #363F45;
+    --m-grey6: #272F36;
+    --m-grey7: #171A1B;
+    --m-grey8: #272E32;
+    --m-grey9: #252D34;
+    --m-grey10: #394753;
+    --m-grey11: #0F1A25;
+    --m-grey12: #343D46;
+    --m-grey12-hover: rgba(52, 61, 70, .8);
+    --m-grey13: #38444F;
+    --m-grey13-hover: rgba(56, 68, 79, .8);
+    --m-grey14: #2B3F52;
+    --m-grey15: #455773;
+    --m-grey15-hover: rgba(69, 87, 115, .8);
+    --m-grey16: #405066;
+    --m-grey16-hover: rgba(64, 80, 102, .8);
+    --m-grey18: #1D2327;
+    --m-grey19: #162534;
+    --m-grey20: #1B2A38;
 }
 
 /* 白色主题 */
 :root[theme="light"] {
---m-grey0: #5179E2;
+    --m-grey0: #5179E2;
+    --m-grey1: #FEFFFF;
+    --m-grey2: #7A8A94;
+    --m-grey5: #B2C4DD;
+    --m-grey6: #ffffff;
+    --m-grey7: #F5FAFC;
+    --m-grey8: #D2DAEF;
+    --m-grey9: #FFFFFF;
+    --m-grey10: #99B5FF;
+    --m-grey11: #ffffff;
+    --m-grey12: #727C98;
+    --m-grey12-hover: rgba(114, 124, 152, .8);
+    --m-grey13: #727C98;
+    --m-grey13-hover: rgba(114, 124, 152, .8);
+    --m-grey14: #ECF2F5;
+    --m-grey15: #727C98;
+    --m-grey15-hover: rgba(114, 124, 152, .8);
+    --m-grey16: #727C98;
+    --m-grey16-hover: rgba(114, 124, 152, .8);
+    --m-grey18: #FFFFFF; /* #ECF2F5 */
+    --m-grey19: #F6F8FA;
+    --m-grey20: #DAE5EC;
 }

src/assets/styles/variables.less

@@ -3,30 +3,30 @@
 @import 'theme.less';
 
 @m-grey0: var(--m-grey0);
-@m-grey1: #7a8a94;
-@m-grey2: #88a0ae;
-@m-grey3: #ccc;
-@m-grey4: #333333;
-@m-grey5: #363F45;
-@m-grey6: #272F36;
-@m-grey7: #171A1B;
-@m-grey8: #272E32;
-@m-grey9: #252D34;
-@m-grey10: #394753;
-@m-grey11: #0F1A25;
-@m-grey12: #343D46;
-@m-grey12-hover: rgba(@m-grey12, .8);
-@m-grey13: #38444F;
-@m-grey13-hover: rgba(@m-grey13, .8);
-@m-grey14: #2B3F52;
-@m-grey15: #455773;
-@m-grey15-hover: rgba(@m-grey15, .8);
-@m-grey16: #405066;
-@m-grey16-hover: rgba(@m-grey16, .8);
-@m-grey17: #556772;
-@m-grey18: #1D2327;
-@m-grey19: #162534;
-@m-grey20: #1B2A38;
+@m-grey1: var(--m-grey1);
+@m-grey2:  var(--m-grey2);
+@m-grey3: #ccc;          // 登录界面颜色不变
+@m-grey4: #333333;       // 登录界面颜色不变
+@m-grey5: var(--m-grey5);
+@m-grey6: var(--m-grey6);
+@m-grey7: var(--m-grey7);  // 滚动条颜色 -- 底色
+@m-grey8: var(--m-grey8);  // 滚动条颜色 -- 滑条颜色
+@m-grey9: var(--m-grey9);       
+@m-grey10: var(--m-grey10);
+@m-grey11: var(--m-grey11);
+@m-grey12: var(--m-grey12);
+@m-grey12-hover: var(--m-grey12-hover);
+@m-grey13: var(--m-grey13);
+@m-grey13-hover: var(--m-grey13-hover);
+@m-grey14: var(--m-grey14);
+@m-grey15: var(--m-grey15);
+@m-grey15-hover: var(--m-grey15-hover);
+@m-grey16: var(--m-grey16);
+@m-grey16-hover: var(--m-grey16-hover);
+@m-grey17: #556772;    // orderTable颜色没用到
+@m-grey18: var(--m-grey18);
+@m-grey19: var(--m-grey19);
+@m-grey20: var(--m-grey20);
 @m-grey21: #15202B;
 @m-grey22: #424E59;
 @m-grey22-hover: rgba(@m-grey22, .8);
@@ -35,6 +35,9 @@
 @m-grey25: #3b444a;
 @m-grey26: #343e48;
 @m-grey27: #34444E;
+@m-grey28: #36506B;
+@m-grey29: #4D647A;
+@m-grey30: #223548;
 
 
 @m-black: rgba(0, 0, 0, 0);

src/layout/components/header.vue

@@ -43,6 +43,7 @@
                  placement="bottomRight">
         <template #content>
           <div v-for="item in setMenu"
+               class="popItem"
                @click="chooseSetMenu(item.path)"
                :key="item.path">{{ item.name }}</div>
         </template>

src/views/market/warehouseTrade/index.vue

@@ -1,17 +1,13 @@
 <template>
-  <!-- 仓单贸易 -->
-  <section class="forward-section warehouse-trade">
-    <div class="conditionIcon icon iconfont icon-saixuantiaojiantubiao"></div>
-    <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
-    <firstMenu :list="list"
-               :value="'value'"
-               @selectMenu="selectMenu" />
+    <!-- 仓单贸易 -->
+    <section class="forward-section warehouse-trade">
+        <div class="conditionIcon icon iconfont icon-saixuantiaojiantubiao"></div>
+        <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
+        <firstMenu :list="list" :value="'value'" @selectMenu="selectMenu" />
 
-    <quoteTable :columns="columns"
-                :dataSource="data"
-                :contextMenuList="contextMenuList" />
-    <thirdMenu></thirdMenu>
-  </section>
+        <quoteTable :columns="columns" :dataSource="data" :contextMenuList="contextMenuList" />
+        <thirdMenu></thirdMenu>
+    </section>
 </template>
 
 <script lang="ts">
@@ -21,7 +17,6 @@ import firstMenu from '@/common/components/firstMenu/index.vue';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import quoteTable from '@/common/components/quoteTable/index.vue';
 import { MenuItem } from '@/common/components/contextMenu/interface';
-import orderTable from '@/common/components/orderTable/index.vue';
 
 const columns = [
     { title: '序号', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
@@ -93,7 +88,6 @@ export default defineComponent({
     components: {
         firstMenu,
         quoteTable,
-        orderTable,
         thirdMenu,
     },
     setup() {

src/views/order/performance_information/components/components/detail/index.vue

@@ -1,75 +1,73 @@
 <template>
-  <!-- 履约明细-->
-  <Drawer :title="'履约明细'"
-          :placement="'bottom'"
-          :visible="visible"
-          @cancel="cancel">
-    <!-- <div class="listed">
+    <!-- 履约明细-->
+    <Drawer :title="'履约明细'" :placement="'bottom'" :visible="visible" @cancel="cancel">
+        <!-- <div class="listed">
       <div class="condition">
         <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
         <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
         <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
       </div>
         </div>-->
-    <div class="performanceSteps">
-      <a-steps v-model:current="current"
-               class="commonSteps"
-               direction="vertical">
-        <a-step status="finish">
-          <template #title>
-            <div class="block">
-              <div class="line">
-                <div class="num">1</div>
-                <div class="desc">买方30%货款</div>
-                <div class="day">T+30</div>
-                <CaretRightOutlined class="arrowRight" />
-              </div>
-              <div class="tip">已完成</div>
+        <div class="performanceSteps">
+            <a-steps v-model:current="current" class="commonSteps" direction="vertical">
+                <a-step status="finish">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">1</div>
+                                <div class="desc">买方30%货款</div>
+                                <div class="day">T+30</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">已完成</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="finish">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">2</div>
+                                <div class="desc">卖方发货</div>
+                                <div class="day">T+3</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">已完成</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="process">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">3</div>
+                                <div class="desc">买方70%货款</div>
+                                <div class="day">T+10</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">2日后扣款</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="wait">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">4</div>
+                                <div class="desc">卖方开票</div>
+                                <div class="day">T+1</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">未开始</div>
+                        </div>
+                    </template>
+                </a-step>
+            </a-steps>
+            <div class="btns">
+                <a-button class="closeBtn" @click="cancel">关闭</a-button>
             </div>
-          </template>
-        </a-step>
-        <a-step status="finish">
-          <template #title>
-            <div class="block">
-              <div class="line">
-                <div class="num">2</div>
-                <div class="desc">卖方发货</div>
-                <div class="day">T+3</div>
-                <CaretRightOutlined class="arrowRight" />
-              </div>
-              <div class="tip">已完成</div>
-            </div>
-          </template>
-        </a-step>
-        <a-step status="process">
-          <template #title>
-            <div class="block">
-              <div class="line">
-                <div class="num">3</div>
-                <div class="desc">买方70%货款</div>
-                <div class="day">T+10</div>
-                <CaretRightOutlined class="arrowRight" />
-              </div>
-              <div class="tip">2日后扣款</div>
-            </div>
-          </template>
-        </a-step>
-        <a-step status="wait">
-          <template #title>
-            <div class="block">
-              <div class="line">
-                <div class="num">4</div>
-                <div class="desc">卖方开票</div>
-                <div class="day">T+1</div>
-                <CaretRightOutlined class="arrowRight" />
-              </div>
-              <div class="tip">未开始</div>
-            </div>
-          </template>
-        </a-step>
-      </a-steps>
-    </div>
-  </Drawer>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -123,5 +121,22 @@ export default defineComponent({
 <style lang="less" scoped>
 .performanceSteps {
     padding: 25px 40px;
+    .btns {
+        width: 100%;
+        text-align: center;
+        .ant-btn.closeBtn {
+            width: 120px;
+            height: 30px;
+            background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+            .rounded-corners(3px);
+            color: @m-white0;
+            border: 0;
+            font-size: 16px;
+            &:hover {
+                background: linear-gradient(0deg, @m-blue2-hover 0%, @m-blue0-hover 100%);
+                color: @m-white0-hover;
+            }
+        }
+    }
 }
 </style>;