theme alter

src/assets/styles/mixin.less

@@ -876,6 +876,12 @@
 .ml10 {
     margin-left: 10px;
 }
+.ml15 {
+    margin-left: 15px;
+}
+.ml20 {
+    margin-left: 20px;
+}
 .ml35 {
     margin-left: 35px;
 }
@@ -1787,6 +1793,8 @@ input:-internal-autofill-selected {
         div {
             align-self: center;
             align-items: center;
+            height: 40px;
+            line-height: 40px;
         }
         .backIcon {
             width: 52px;
@@ -1921,6 +1929,9 @@ input:-internal-autofill-selected {
         }
     }
 }
+.bdf1 {
+    border-left: 1PX solid @m-grey31;
+}
 // 买卖大厅表格
 .buyHallTable,.sellHallTable {
     .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
@@ -2314,4 +2325,10 @@ input:-internal-autofill-selected {
 
 .commonSteps > .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after {
     background-color: @m-grey30;
+}
+
+// 左侧菜单
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+    background: @m-black28;
+    box-shadow: none;
 }

src/assets/styles/theme.css

@@ -1,5 +1,5 @@
 /* 默认主题 */
-:root {
+ :root {
     --m-grey0: #364048 ;
     --m-grey1: #7a8a94;
     --m-grey2: #88a0ae;
@@ -22,10 +22,193 @@
     --m-grey18: #1D2327;
     --m-grey19: #162534;
     --m-grey20: #1B2A38;
+    --m-grey21: #15202B;
+    --m-grey22: #424E59;
+    --m-grey22-hover: rgba(66, 78, 89, .8);
+    --m-grey23: #48545F;
+    --m-grey26: #343e48;
+
+    --m-grey31: #212629;
+    --m-green1: #e8ffef;
+
+    --m-black0: #242a2e;
+    --m-black1: #181e22;
+    --m-black2: #0E0E0F;
+    --m-black3: #4D5A64;
+    --m-black4: #14181B;
+    --m-black5: #121415;
+    --m-black6: #1B2F41;
+    --m-black7: #15293A;
+    --m-black8: #212629;
+    --m-black9: #161A1C;
+    --m-black10: #121618;
+    --m-black11: #0B1620;
+    --m-black12: #13202D;
+    --m-black13: #08131F;
+    --m-black14: #1F262B;
+    --m-black15: #0f161c;
+    --m-black16: #181d1f;
+    --m-black17: #2E3539;
+    --m-black18: rgba(18, 22, 24, 0.36);
+    --m-black19: rgb(26 187 207 / 20%);
+    --m-black20: #4b5861;
+    --m-black21: #182635;
+    --m-black22: #1d2f3f;
+    --m-black23: #173025;
+    --m-black24: #2c3e50;
+    --m-black25: #282e34;
+    --m-black26: #192125;
+    --m-black27: #0E1A25;
+    --m-black28: #000c17;
+    --m-black29: #2B3F52;
+    --m-black30: #15202B;
+
+    --m-blue0: #3a87f7;
+    --m-blue0-hover: rgba(58, 135, 247, .8);
+    --m-blue2: #3270d2;
+    --m-blue2-hover: rgba(58, 135, 247, .8);
+    --m-blue3: #172B56;
+    --m-blue4: #112C43;
+    --m-blue5: #084258;
+    --m-blue6: #26487C;
+    --m-blue6-hover: rgba(38, 72, 124,.8);
+    --m-blue7: #29538C;
+    --m-blue7-hover: rgba(41, 83, 140, .8);
+    --m-blue8: #3163BA;
+    --m-blue8-hover: rgba(49, 99, 186, .8);
+    --m-blue9: #4179DB;
+    --m-blue9-hover: rgba(65, 121, 219, .8);
+    --m-blue10: #0C95FF;
+    --m-blue11: #1271BA;
+    --m-blue12: #1556B5;
+    --m-blue13: #193778;
+    --m-blue14: #1D2F3F;
+    --m-blue15: #0D8AEB;
+    --m-blue16: #334c5c;
+    --m-blue17: #1F3245;
+    --m-blue18:#1b3356;
+    --m-blue19: #102442;
+    --m-blue20: #122d55;
+    --m-blue21: #102e45;
+
+    --body-bg: #e9eef3;
+    --m-white0: #ffffff;
+    --m-white0-hover: rgba(255, 255, 255, .8);
+    --m-white1: #E5E5E5;
+    --m-white5: #fffefe;
+
+    --m-green0: #1FF195;
+    --m-green1: #10251d;
+
+    --m-red2: #271112;
+} 
+/* 白色主题 */
+/* :root[theme="light"] { */
+:root[theme="light"] { 
+    --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;
+    --m-grey21: #F6F8FA;
+    --m-grey22: #E4F5FF;
+    --m-grey22-hover: rgba(228, 245, 255, .8);
+    --m-grey23: #A5CDFF;
+    --m-grey26: #5179E2;
+
+    --m-grey31: #D6DEE3;
+
+    --m-black0: #F8FBFF;
+    --m-black1: #ECF2F5;
+    --m-black2: #FFFFFF;
+    --m-black3: #718FAE;
+    --m-black4: #EDF2F7;
+    --m-black5: #ECF2F5;
+    --m-black6: #DAE5EC;
+    --m-black7: #D4E0FF;
+    --m-black8: #DAE5EC;
+    --m-black9: #e3ebf1;
+    --m-black10: #ddebed;
+    --m-black11: #ECF2F5;
+    --m-black12: #ECF2F5;
+    --m-black13: #ECF2F5;
+    --m-black14: #FFFFFF;
+    --m-black15: #F6F8FA;
+    --m-black16: #CBD7DD;
+    --m-black17: #DAE5EC;
+    --m-black18: rgba(18, 22, 24, 0.15);
+    --m-black19: rgba(246 248 250 / 20%);
+    --m-black20: #EDF2F7;
+    --m-black21: #182635;
+    --m-black22: #ffffff;
+    --m-black23: #173025;
+    --m-black24: #2c3e50;
+    --m-black25: #E4F5FF;
+    --m-black26: #3A87F7;
+    --m-black27: #ffffff;
+    --m-black28: #DDE3E8;
+    --m-black29: #2B3F52;
+    --m-black30: #15202B;
+
+    --m-blue0: #5179E2;
+    --m-blue0-hover: rgba(81, 121, 226, .8);
+    --m-blue2: #5179E2;
+    --m-blue2-hover: rgba(81, 121, 226, .8);
+    --m-blue3: #DEEFFF;
+    --m-blue4: #5179E2;
+    --m-blue5: #7497F4;
+    --m-blue6: #5179E2;
+    --m-blue6-hover: rgba(81, 121, 226, .8);
+    --m-blue7: #5179E2;
+    --m-blue7-hover: rgba(81, 121, 226, .8);
+    --m-blue8: #5179E2;
+    --m-blue8-hover: rgba(81, 121, 226, .8);
+    --m-blue9: #5179E2;
+    --m-blue9-hover: rgba(81, 121, 226, .8);
+    --m-blue10: #0C95FF;
+    --m-blue11: #ffffff;
+    --m-blue12: #D4E0FF;
+    --m-blue13: #DEEFFF;
+    --m-blue14: #ECF2F5;
+    --m-blue15: #0D8AEB;
+    --m-blue16: #ADBCC5;
+    --m-blue17: #3A87F7;
+    --m-blue18:#5179E2;
+    --m-blue19: #ECF2F5;
+    --m-blue20: #D6E0F0;
+    --m-blue21: #5179E2;
+
+    --body-bg: #FFFFFF;
+    --m-white0: #ffffff;
+    --m-white0-hover: rgba(255, 255, 255, .8);
+    --m-white1: #333333;
+    --m-white5: #FFFFFF;
+
+    --m-green0: #00A843;
+    --m-green1: #e8ffef;
+
+    --m-red2: #ffe2e2;
 }
 
 /* 黑色主题 */
-:root[theme="dark"] {
+:root[theme="black"] {
     --m-grey0: #364048 ;
     --m-grey1: #7a8a94;
     --m-grey2: #88a0ae;
@@ -48,30 +231,84 @@
     --m-grey18: #1D2327;
     --m-grey19: #162534;
     --m-grey20: #1B2A38;
-}
+    --m-grey21: #15202B;
+    --m-grey22: #424E59;
+    --m-grey22-hover: rgba(66, 78, 89, .8);
+    --m-grey23: #48545F;
+    --m-grey26: #343e48;
 
-/* 白色主题 */
-:root[theme="light"] {
-    --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;
+    --m-grey31: #212629;
+    --m-green1: #e8ffef;
+
+    --m-black0: #242a2e;
+    --m-black1: #181e22;
+    --m-black2: #0E0E0F;
+    --m-black3: #4D5A64;
+    --m-black4: #14181B;
+    --m-black5: #121415;
+    --m-black6: #1B2F41;
+    --m-black7: #15293A;
+    --m-black8: #212629;
+    --m-black9: #161A1C;
+    --m-black10: #121618;
+    --m-black11: #0B1620;
+    --m-black12: #13202D;
+    --m-black13: #08131F;
+    --m-black14: #1F262B;
+    --m-black15: #0f161c;
+    --m-black16: #181d1f;
+    --m-black17: #2E3539;
+    --m-black18: rgba(18, 22, 24, 0.36);
+    --m-black19: rgb(26 187 207 / 20%);
+    --m-black20: #4b5861;
+    --m-black21: #182635;
+    --m-black22: #1d2f3f;
+    --m-black23: #173025;
+    --m-black24: #2c3e50;
+    --m-black25: #282e34;
+    --m-black26: #192125;
+    --m-black27: #0E1A25;
+    --m-black28: #000c17;
+    --m-black29: #2B3F52;
+    --m-black30: #15202B;
+
+    --m-blue0: #3a87f7;
+    --m-blue0-hover: rgba(58, 135, 247, .8);
+    --m-blue2: #3270d2;
+    --m-blue2-hover: rgba(58, 135, 247, .8);
+    --m-blue3: #172B56;
+    --m-blue4: #112C43;
+    --m-blue5: #084258;
+    --m-blue6: #26487C;
+    --m-blue6-hover: rgba(38, 72, 124,.8);
+    --m-blue7: #29538C;
+    --m-blue7-hover: rgba(41, 83, 140, .8);
+    --m-blue8: #3163BA;
+    --m-blue8-hover: rgba(49, 99, 186, .8);
+    --m-blue9: #4179DB;
+    --m-blue9-hover: rgba(65, 121, 219, .8);
+    --m-blue10: #0C95FF;
+    --m-blue11: #1271BA;
+    --m-blue12: #1556B5;
+    --m-blue13: #193778;
+    --m-blue14: #1D2F3F;
+    --m-blue15: #0D8AEB;
+    --m-blue16: #334c5c;
+    --m-blue17: #1F3245;
+    --m-blue18:#1b3356;
+    --m-blue19: #102442;
+    --m-blue20: #122d55;
+    --m-blue21: #102e45;
+
+    --body-bg: #e9eef3;
+    --m-white0: #ffffff;
+    --m-white0-hover: rgba(255, 255, 255, .8);
+    --m-white1: #E5E5E5;
+    --m-white5: #fffefe;
+
+    --m-green0: #1FF195;
+    --m-green1: #10251d;
+
+    --m-red2: #271112;
 }
+

src/assets/styles/variables.less

@@ -23,98 +23,101 @@
 @m-grey15-hover: var(--m-grey15-hover);
 @m-grey16: var(--m-grey16);
 @m-grey16-hover: var(--m-grey16-hover);
-@m-grey17: #556772;    // orderTable颜色没用到
+@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);
-@m-grey23: #48545F;
+@m-grey21: var(--m-grey21);
+@m-grey22: var(--m-grey22);
+@m-grey22-hover: var(--m-grey22-hover);
+@m-grey23: var(--m-grey23);
 @m-grey24: #444444;
 @m-grey25: #3b444a;
-@m-grey26: #343e48;
+@m-grey26: var(--m-grey26);
 @m-grey27: #34444E;
 @m-grey28: #36506B;
 @m-grey29: #4D647A;
 @m-grey30: #223548;
-
-
-@m-black: rgba(0, 0, 0, 0);
-@m-black0: #242a2e;
-@m-black1: #181e22;
-@m-black2: #0E0E0F;
-@m-black3: #4D5A64;
-@m-black4: #14181B;
-@m-black5: #121415;
-@m-black6: #1B2F41;
-@m-black7: #15293A;
-@m-black8: #212629;
-@m-black9: #161A1C;
-@m-black10: #121618;
-@m-black11: #0B1620;
-@m-black12: #13202D;
-@m-black13: #08131F;
-@m-black14: #1F262B;
-@m-black15: #0f161c;
-@m-black16: #181d1f;
-@m-black17: #2E3539;
-@m-black18: rgba(18, 22, 24, 0.36);
-@m-black19: rgb(26 187 207 / 20%);
-@m-black20: #4b5861;
-@m-black21: #070808;
-@m-black22: #1d2f3f;
-@m-black23: #173025;
-@m-black24: #2c3e50;
-@m-black25: #282e34;
-@m-black26: #192125;
-@m-black27: #0E1A25;
-
-
-@m-blue0: #3a87f7;
-@m-blue0-hover: rgba(@m-blue0, .8);
-@m-blue1: #4885eb;
-@m-blue2: #3270d2;
-@m-blue2-hover: rgba(@m-blue2, .8);
-@m-blue3: #172B56;
-@m-blue4: #112C43;
-@m-blue5: #084258;
-@m-blue6: #26487C;
-@m-blue6-hover: rgba(@m-blue6, .8);
-@m-blue7: #29538C;
-@m-blue7-hover: rgba(@m-blue7, .8);
-@m-blue8: #3163BA;
-@m-blue8-hover: rgba(@m-blue8, .8);
-@m-blue9: #4179DB;
-@m-blue9-hover: rgba(@m-blue9, .8);
-@m-blue10: #0C95FF;
-@m-blue11: #1271BA;
-@m-blue12: #1556B5;
-@m-blue13: #193778;
-@m-blue14: #1D2F3F;
-@m-blue15: #0D8AEB;
-@m-blue16: #334c5c;
-@m-blue17: #1F3245;
-@m-blue18: #1b3356;
-@m-blue19: #102442;
-@m-blue20: #122d55;
-@m-blue21: #102e45;
-@m-blue22: #0e2f4c;
-@m-blue23: #223F7E;
-@m-blue24: #2484FC;
+@m-grey31: var(--m-grey31);
+
+@m-black: #000000;
+@m-black0: var(--m-black0);
+@m-black1: var(--m-black1);
+@m-black2: var(--m-black2);
+@m-black3: var(--m-black3);
+@m-black4: var(--m-black4);
+@m-black5: var(--m-black5);
+@m-black6: var(--m-black6);
+@m-black7: var(--m-black7);
+@m-black8: var(--m-black8);
+@m-black9: var(--m-black9);
+@m-black10: var(--m-black10);
+@m-black11: var(--m-black11);
+@m-black12: var(--m-black12);
+@m-black13: var(--m-black13);
+@m-black14: var(--m-black14);
+@m-black15: var(--m-black15);
+@m-black16: var(--m-black16);
+@m-black17: var(--m-black17);
+@m-black18: var(--m-black18);
+@m-black19: var(--m-black19);
+@m-black20: var(--m-black20);
+@m-black21: var(--m-black21);                // 角色详情复选框未选中背景色   白色版本等色值修改
+@m-black22: var(--m-black22);                // 交易弹窗背景色
+@m-black23: var(--m-black23);
+@m-black24: var(--m-black24);
+@m-black25: var(--m-black25);
+@m-black26: var(--m-black26);
+@m-black27: var(--m-black27);
+@m-black28: var(--m-black28);
+@m-black29: var(--m-black29);                // 角色详情复选框未选中边框色   白色版本等色值修改
+@m-black30: var(--m-black30);                // 角色详情复选框选中背景色   白色版本等色值修改
+
+
+@m-blue0: var(--m-blue0);
+@m-blue0-hover: var(--m-blue0-hover);
+@m-blue1: #4885eb;               // 登录界面色值
+@m-blue2: var(--m-blue2);
+@m-blue2-hover: var(--m-blue2-hover);
+@m-blue3: var(--m-blue3);
+@m-blue4: var(--m-blue4);
+@m-blue5: var(--m-blue5);
+@m-blue6: var(--m-blue6);
+@m-blue6-hover: var(--m-blue6-hover);
+@m-blue7: var(--m-blue7);
+@m-blue7-hover: var(--m-blue7-hover);
+@m-blue8: var(--m-blue8);
+@m-blue8-hover: var(--m-blue8-hover);
+@m-blue9: var(--m-blue9);
+@m-blue9-hover: var(--m-blue9-hover);
+@m-blue10: var(--m-blue10);
+@m-blue11: var(--m-blue11);
+@m-blue12: var(--m-blue12);
+@m-blue13: var(--m-blue13);                           // 白色版本买卖大厅小行情背景色
+@m-blue14: var(--m-blue14);
+@m-blue15: var(--m-blue15);
+@m-blue16: var(--m-blue16);
+@m-blue17: var(--m-blue17);
+@m-blue18: var(--m-blue18);
+@m-blue19: var(--m-blue19);
+@m-blue20: var(--m-blue20);
+@m-blue21: var(--m-blue21);
+@m-blue22: #0e2f4c;                                 // 交易界面色值
+@m-blue23: #223F7E;                                 // 履约明细界面色值
+@m-blue24: #2484FC;                                 // 履约明细界面色值
 
 @body-bg: #e9eef3;
-@m-white0: #ffffff;
-@m-white0-hover: rgba(@m-white0, .8);
-@m-white1: #E5E5E5;
+@m-white0: var(--m-white0);
+@m-white0-hover: var(--m-white0-hover);
+@m-white1: var(--m-white1);
 @m-white2: rgb(240, 240, 240);
 @m-white3: rgb(54 187 207);
 @m-white4: #FEFEFE;
-@m-white5: #fffefe;
+@m-white5: var(--m-white5);
 
 
-@m-green0: #1FF195;
-@m-green1: #10251d;
+@m-green0: var(--m-green0);
+@m-green1: var(--m-green1);
 @m-green2: rgb(26, 187, 207);
 @m-green3: #1abbcf;
 @m-green4: #1ee18c;
@@ -124,13 +127,13 @@
 @m-red0-hover: rgba(@m-red0, .8);
 @m-red1: #FF2B2B;
 @m-red1-hover: rgba(@m-red1, .8);
-@m-red2: #271112;
-@m-red3: #ff2b2f;
-@m-red4: #2c1b1b;
-@m-red5: #691010;
-@m-red6: #422b0d;
-@m-red7: #f52b2b;
-@m-red8: #f12a2d;
+@m-red2: var(--m-red2);
+@m-red3: #ff2b2f;                // 交易界面色值
+@m-red4: #2c1b1b;                // 交易界面色值
+@m-red5: #691010;                // 交易界面色值
+@m-red6: #422b0d;                // 交易界面色值
+@m-red7: #f52b2b;                // 交易界面色值
+@m-red8: #f12a2d;                // 交易界面色值
 @m-red9: #FF5C6F;
 @m-red9-hover: rgba(@m-red9, .8);
 @m-red10: #FB7F75;

src/views/information/account_info/compoments/managers-permission-detail/index.vue

@@ -299,12 +299,13 @@ export default defineComponent({
             margin-right: 2px;
             .ant-checkbox-inner {
                 background: @m-grey21;
-                border: 1px solid @m-black21;
+                border: 1px solid @m-black29;
                 border-radius: 3px;
             }
         }
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
+                background: @m-black30;
                 &::after {
                     border-color: @m-blue0;
                 }

src/views/information/goods/components/leftMenu/index.vue

@@ -1,26 +1,25 @@
 <template>
-  <div class="leftMenu">
-    <a-menu theme="dark"
+    <div class="leftMenu">
+        <a-menu
+            theme="dark"
             mode="inline"
             class="left-menu"
             v-model:selectedKeys="selectedKeys"
             v-model:openKeys="openKeys"
-            @click="menuClick">
-      <a-sub-menu v-for="item in menuList"
-                  :key="item.key">
-        <template #title>
-          <span>
-            <span class="menu-item_title"
-                  v-show="!collapsed">{{ item.title }}</span>
-          </span>
-        </template>
-        <a-menu-item :key="subItem.key"
-                     v-for="subItem in item.children">
-          <span>{{ subItem.title }}</span>
-        </a-menu-item>
-      </a-sub-menu>
-    </a-menu>
-  </div>
+            @click="menuClick"
+        >
+            <a-sub-menu v-for="item in menuList" :key="item.key">
+                <template #title>
+                    <span>
+                        <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
+                    </span>
+                </template>
+                <a-menu-item :key="subItem.key" v-for="subItem in item.children">
+                    <span>{{ subItem.title }}</span>
+                </a-menu-item>
+            </a-sub-menu>
+        </a-menu>
+    </div>
 </template>
 
 <script lang="ts">
@@ -96,7 +95,7 @@ export default defineComponent({
                 }
             }
             .ant-menu-inline.ant-menu-sub {
-                background-color: transparent;
+                background-color: transparent !important;
                 box-shadow: none;
                 .ant-menu-item {
                     padding-left: 64px !important;

src/views/market/spot_trade/components/buy-sell-market/index.vue

@@ -1,104 +1,101 @@
 <template>
-  <!-- 买卖大厅 -->
-  <div class="buy-sell-market">
-    <div class="buy-sell-market-title">
-      <a class="backIcon"
-         @click="cancel">
-        <LeftOutlined />
-      </a>
-      <div class="titleBtn">
-        <div class="name">{{selectedRow.deliverygoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.wrgoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.warehousename}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn3"
-           v-if="!isWR(enumName)">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">
-          <a-month-picker :allowClear="false"
-                          v-model:value="time"
-                          @change="timeChange"
-                          class="commonDatePicker conditionPicker" />
+    <!-- 买卖大厅 -->
+    <div class="buy-sell-market">
+        <div class="buy-sell-market-title">
+            <a class="backIcon" @click="cancel">
+                <LeftOutlined />
+            </a>
+            <div class="titleBtn">
+                <div class="name">{{selectedRow.deliverygoodsname}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{selectedRow.wrgoodsname}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{selectedRow.warehousename}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn3" v-if="!isWR(enumName)">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">
+                    <a-month-picker
+                        :allowClear="false"
+                        v-model:value="time"
+                        @change="timeChange"
+                        class="commonDatePicker conditionPicker"
+                    />
+                </div>
+                <DownOutlined />
+            </div>
+            <div class="green bdf1 ml20">
+                <div class="numBlock ml15" v-if="isFloat()">
+                    <div class="first">卖基差</div>
+                    <div class="last">{{selectedRow.sellpricemove}}</div>
+                </div>
+                <div class="numBlock ml15" v-else>
+                    <div class="first">卖价</div>
+                    <div class="last">{{selectedRow.sellprice}}</div>
+                </div>
+                <div class="numBlock">
+                    <div class="first">卖量</div>
+                    <div class="last">{{selectedRow.sellqty}}</div>
+                </div>
+            </div>
+            <div class="red ml35">
+                <div class="numBlock" v-if="isFloat()">
+                    <div class="first">买基差</div>
+                    <div class="last">{{selectedRow.buypricemove}}</div>
+                </div>
+                <div class="numBlock" v-else>
+                    <div class="first">买价</div>
+                    <div class="last">{{selectedRow.buyprice}}</div>
+                </div>
+                <div class="numBlock">
+                    <div class="first">买量</div>
+                    <div class="last">{{selectedRow.buyqty}}</div>
+                </div>
+            </div>
+            <div class="market" v-if="isFloat()">
+                <div class="first">{{selectedRow.goodscode}}</div>
+                <div class="last red">{{getGoodsPrice()}}</div>
+                <LineChartOutlined />
+            </div>
+            <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
         </div>
-        <DownOutlined />
-      </div>
-      <div class="green">
-        <div class="numBlock"
-             v-if="isFloat()">
-          <div class="first">卖基差</div>
-          <div class="last">{{selectedRow.sellpricemove}}</div>
-        </div>
-        <div class="numBlock"
-             v-else>
-          <div class="first">卖价</div>
-          <div class="last">{{selectedRow.sellprice}}</div>
-        </div>
-        <div class="numBlock">
-          <div class="first">卖量</div>
-          <div class="last">{{selectedRow.sellqty}}</div>
-        </div>
-      </div>
-      <div class="red ml35">
-        <div class="numBlock"
-             v-if="isFloat()">
-          <div class="first">买基差</div>
-          <div class="last">{{selectedRow.buypricemove}}</div>
-        </div>
-        <div class="numBlock"
-             v-else>
-          <div class="first">买价</div>
-          <div class="last">{{selectedRow.buyprice}}</div>
-        </div>
-        <div class="numBlock">
-          <div class="first">买量</div>
-          <div class="last">{{selectedRow.buyqty}}</div>
-        </div>
-      </div>
-      <div class="market"
-           v-if="isFloat()">
-        <div class="first">{{selectedRow.goodscode}}</div>
-        <div class="last red">{{getGoodsPrice()}}</div>
-        <LineChartOutlined />
-      </div>
-      <BtnList :btnList="firstBtn"
-               :record="selectedRow"
-               @click="openComponent" />
+        <a-row class="buySellHall">
+            <a-col :span="12" v-if="sellMarket.isMarket">
+                <Sell
+                    :enumName="enumName"
+                    ref="sellRef"
+                    :parantSelectedRow="selectedRow"
+                    :time="time"
+                    :btnList="handleBtnList(sellMarket.btnList)"
+                />
+            </a-col>
+            <a-col :span="12" v-if="buyMarket.isMarket">
+                <Buy
+                    :enumName="enumName"
+                    ref="buyRef"
+                    :time="time"
+                    :parantSelectedRow="selectedRow"
+                    :btnList="handleBtnList(buyMarket.btnList)"
+                />
+            </a-col>
+        </a-row>
+        <component
+            :is="componentId"
+            v-if="componentId"
+            :selectedRow="selectedRow"
+            :goodsPrice="getGoodsPrice()"
+            :enumName="enumName"
+            :time="time"
+            @cancel="closeComponent"
+        ></component>
     </div>
-    <a-row class="buySellHall">
-      <a-col :span="12"
-             v-if="sellMarket.isMarket">
-        <Sell :enumName="enumName"
-              ref="sellRef"
-              :parantSelectedRow="selectedRow"
-              :time="time"
-              :btnList="handleBtnList(sellMarket.btnList)" />
-      </a-col>
-      <a-col :span="12"
-             v-if="buyMarket.isMarket">
-        <Buy :enumName="enumName"
-             ref="buyRef"
-             :time="time"
-             :parantSelectedRow="selectedRow"
-             :btnList="handleBtnList(buyMarket.btnList)" />
-      </a-col>
-    </a-row>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :goodsPrice="getGoodsPrice()"
-               :enumName="enumName"
-               :time="time"
-               @cancel="closeComponent"></component>
-  </div>
 </template>
 
 <script lang="ts">