commit

src/assets/styles/symbol_no_color/demo_index.html

@@ -32,6 +32,108 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">日期</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">加</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb58;</span>
+                <div class="name">下箭头</div>
+                <div class="code-name">&amp;#xeb58;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">下箭头</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">设 置</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cd;</span>
+                <div class="name">向左</div>
+                <div class="code-name">&amp;#xe6cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb57;</span>
+                <div class="name">向左</div>
+                <div class="code-name">&amp;#xeb57;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">快进</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65d;</span>
+                <div class="name">返 回</div>
+                <div class="code-name">&amp;#xe65d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">屏幕_全屏</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb55;</span>
+                <div class="name">快进</div>
+                <div class="code-name">&amp;#xeb55;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">塞选条件图标</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6eb;</span>
+                <div class="name">闭眼</div>
+                <div class="code-name">&amp;#xe6eb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">睁眼</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b6;</span>
+                <div class="name">子级 子</div>
+                <div class="code-name">&amp;#xe7b6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a6;</span>
+                <div class="name">母</div>
+                <div class="code-name">&amp;#xe6a6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">星星</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe654;</span>
                 <div class="name">涨价</div>
                 <div class="code-name">&amp;#xe654;</div>
@@ -73,6 +175,18 @@
                 <div class="code-name">&amp;#xe700;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xeb54;</span>
+                <div class="name">用户</div>
+                <div class="code-name">&amp;#xeb54;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">密 码</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -124,6 +238,159 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-riqi"></span>
+            <div class="name">
+              日期
+            </div>
+            <div class="code-name">.icon-riqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jia"></span>
+            <div class="name">
+              加
+            </div>
+            <div class="code-name">.icon-jia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-up"></span>
+            <div class="name">
+              下箭头
+            </div>
+            <div class="code-name">.icon-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-down"></span>
+            <div class="name">
+              下箭头
+            </div>
+            <div class="code-name">.icon-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设 置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left-copy"></span>
+            <div class="name">
+              向左
+            </div>
+            <div class="code-name">.icon-left-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right-copy"></span>
+            <div class="name">
+              向左
+            </div>
+            <div class="code-name">.icon-right-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-start"></span>
+            <div class="name">
+              快进
+            </div>
+            <div class="code-name">.icon-start
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fanhui"></span>
+            <div class="name">
+              返 回
+            </div>
+            <div class="code-name">.icon-fanhui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fullScreen"></span>
+            <div class="name">
+              屏幕_全屏
+            </div>
+            <div class="code-name">.icon-fullScreen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-start-yincang-copy"></span>
+            <div class="name">
+              快进
+            </div>
+            <div class="code-name">.icon-start-yincang-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-saixuantiaojiantubiao"></span>
+            <div class="name">
+              塞选条件图标
+            </div>
+            <div class="code-name">.icon-saixuantiaojiantubiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biyan"></span>
+            <div class="name">
+              闭眼
+            </div>
+            <div class="code-name">.icon-biyan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhengyan"></span>
+            <div class="name">
+              睁眼
+            </div>
+            <div class="code-name">.icon-zhengyan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zijizi"></span>
+            <div class="name">
+              子级 子
+            </div>
+            <div class="code-name">.icon-zijizi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mu"></span>
+            <div class="name">
+              母
+            </div>
+            <div class="code-name">.icon-mu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-weibiaoti-"></span>
+            <div class="name">
+              星星
+            </div>
+            <div class="code-name">.icon-weibiaoti-
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-zhangjia"></span>
             <div class="name">
               涨价
@@ -186,6 +453,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu"></span>
+            <div class="name">
+              用户
+            </div>
+            <div class="code-name">.icon-yonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mima1"></span>
+            <div class="name">
+              密 码
+            </div>
+            <div class="code-name">.icon-mima1
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -217,6 +502,142 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-riqi"></use>
+                </svg>
+                <div class="name">日期</div>
+                <div class="code-name">#icon-riqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jia"></use>
+                </svg>
+                <div class="name">加</div>
+                <div class="code-name">#icon-jia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-up"></use>
+                </svg>
+                <div class="name">下箭头</div>
+                <div class="code-name">#icon-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-down"></use>
+                </svg>
+                <div class="name">下箭头</div>
+                <div class="code-name">#icon-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设 置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left-copy"></use>
+                </svg>
+                <div class="name">向左</div>
+                <div class="code-name">#icon-left-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right-copy"></use>
+                </svg>
+                <div class="name">向左</div>
+                <div class="code-name">#icon-right-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-start"></use>
+                </svg>
+                <div class="name">快进</div>
+                <div class="code-name">#icon-start</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fanhui"></use>
+                </svg>
+                <div class="name">返 回</div>
+                <div class="code-name">#icon-fanhui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fullScreen"></use>
+                </svg>
+                <div class="name">屏幕_全屏</div>
+                <div class="code-name">#icon-fullScreen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-start-yincang-copy"></use>
+                </svg>
+                <div class="name">快进</div>
+                <div class="code-name">#icon-start-yincang-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-saixuantiaojiantubiao"></use>
+                </svg>
+                <div class="name">塞选条件图标</div>
+                <div class="code-name">#icon-saixuantiaojiantubiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biyan"></use>
+                </svg>
+                <div class="name">闭眼</div>
+                <div class="code-name">#icon-biyan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhengyan"></use>
+                </svg>
+                <div class="name">睁眼</div>
+                <div class="code-name">#icon-zhengyan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zijizi"></use>
+                </svg>
+                <div class="name">子级 子</div>
+                <div class="code-name">#icon-zijizi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mu"></use>
+                </svg>
+                <div class="name">母</div>
+                <div class="code-name">#icon-mu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weibiaoti-"></use>
+                </svg>
+                <div class="name">星星</div>
+                <div class="code-name">#icon-weibiaoti-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-zhangjia"></use>
                 </svg>
                 <div class="name">涨价</div>
@@ -271,6 +692,22 @@
                 <div class="code-name">#icon-yonghu1</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu"></use>
+                </svg>
+                <div class="name">用户</div>
+                <div class="code-name">#icon-yonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mima1"></use>
+                </svg>
+                <div class="name">密 码</div>
+                <div class="code-name">#icon-mima1</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

src/assets/styles/symbol_no_color/iconfont.json

@@ -6,6 +6,125 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "1204268",
+      "name": "日期",
+      "font_class": "riqi",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "19471733",
+      "name": "加",
+      "font_class": "jia",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "20986111",
+      "name": "下箭头",
+      "font_class": "up",
+      "unicode": "eb58",
+      "unicode_decimal": 60248
+    },
+    {
+      "icon_id": "5782369",
+      "name": "下箭头",
+      "font_class": "down",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "19727864",
+      "name": "设 置",
+      "font_class": "shezhi",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "17433715",
+      "name": "向左",
+      "font_class": "left-copy",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "20972473",
+      "name": "向左",
+      "font_class": "right-copy",
+      "unicode": "eb57",
+      "unicode_decimal": 60247
+    },
+    {
+      "icon_id": "4427180",
+      "name": "快进",
+      "font_class": "start",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "17989293",
+      "name": "返 回",
+      "font_class": "fanhui",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "19657959",
+      "name": "屏幕_全屏",
+      "font_class": "fullScreen",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "20952066",
+      "name": "快进",
+      "font_class": "start-yincang-copy",
+      "unicode": "eb55",
+      "unicode_decimal": 60245
+    },
+    {
+      "icon_id": "18998212",
+      "name": "塞选条件图标",
+      "font_class": "saixuantiaojiantubiao",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "8552952",
+      "name": "闭眼",
+      "font_class": "biyan",
+      "unicode": "e6eb",
+      "unicode_decimal": 59115
+    },
+    {
+      "icon_id": "11499989",
+      "name": "睁眼",
+      "font_class": "zhengyan",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "688151",
+      "name": "子级 子",
+      "font_class": "zijizi",
+      "unicode": "e7b6",
+      "unicode_decimal": 59318
+    },
+    {
+      "icon_id": "3947208",
+      "name": "母",
+      "font_class": "mu",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "13891748",
+      "name": "星星",
+      "font_class": "weibiaoti-",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
       "icon_id": "10608915",
       "name": "涨价",
       "font_class": "zhangjia",
@@ -53,6 +172,20 @@
       "font_class": "yonghu1",
       "unicode": "e700",
       "unicode_decimal": 59136
+    },
+    {
+      "icon_id": "15410550",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "eb54",
+      "unicode_decimal": 60244
+    },
+    {
+      "icon_id": "18403766",
+      "name": "密 码",
+      "font_class": "mima1",
+      "unicode": "e604",
+      "unicode_decimal": 58884
     }
   ]
 }

src/assets/styles/variables.less

@@ -8,39 +8,51 @@
 @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-red0: #ff4d4f;
+@m-red1: #FF2B2B;
 @m-white: #fff;
 @m-black0: #242a2e;
 @m-black1: #181e22;
 @m-black2: #0E0E0F;
+@m-black3: #4D5A64;
+@m-black4: #14181B;
 @m-blue0: #3a87f7;
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;
 @body-bg: #e9eef3;
+@m-white0: #ffffff;
+@m-green0: #1FF195;
+
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 
 //高度设置
 @bottomHeight: 330px;
 
 /*滚动条样式*/
-// ::-webkit-scrollbar {
-//     width: 10px;
-//     height: 10px;
-// }
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
 
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
+    background-color: @m-grey8;
 }
 
 ::-webkit-scrollbar-button {
-    background-color: transparent;
+    background-color:  @m-grey7;
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: transparent;
+    background-color:  @m-grey7;
 }
 
 ::-webkit-scrollbar-corner,
 .el-input::-webkit-scrollbar-corner {
-    background-color: transparent;
+    background-color:  @m-grey7;
 }

src/components/capitalInfo/index.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="capital-info">
     <!-- 资金信息 -->
-    <a-collapse v-model="activeKey">
-      <a-collapse-panel key="1" header="This is panel header 1">
-        <p>{{current}}</p>
+    <a-collapse class="capitalCollapse"  default-active-key="1" :bordered="false" expand-icon-position="right">
+      <a-collapse-panel key="1" header="南山铜加工厂（074345345345345345）">
+        <div class="capitalItem">
+            <div class="firstLine">
+                <div>净值</div>
+                <div><i class="iconfont icon-zhengyan"></i></div>
+            </div>
+            <div class="numBar">128,000.00</div>
+        </div>
+        <div class="capitalItem">
+            <div class="firstLine">
+                <div>占用</div>
+            </div>
+            <div class="numBar green">128,000.00</div>
+        </div>
+        <div class="capitalItem">
+            <div class="firstLine">
+                <div>冻结</div>
+            </div>
+            <div class="numBar red">128,000.00</div>
+        </div>
+        <div class="capitalItem">
+            <div class="firstLine">
+                <div>可用</div>
+            </div>
+            <div class="numBar blue">128,000.00</div>
+        </div>
         <a-icon slot="extra" type="setting" @click="handleClick" />
       </a-collapse-panel>
     </a-collapse>
@@ -16,7 +40,13 @@ import { defineComponent, ref, PropType } from 'vue';
 interface Key {
     [propName: string]: string;
 }
-
+// 折叠
+const handleCollapse = () => {
+    function handleClick(value: any) {
+        console.log(value);
+    }
+    return { handleClick };
+}
 export default defineComponent({
     name: 'capital-info',
     props: {
@@ -38,11 +68,12 @@ export default defineComponent({
             context.emit('selectMenu', props.list[index]);
         };
         const activeKey = ref<string[]>(['1']);
-
+        const handleClick = handleCollapse();
         return {
             current,
             menuClick,
             activeKey,
+            handleClick,
         };
     },
 });
@@ -52,5 +83,74 @@ export default defineComponent({
 .capital-info {
     width: 100%;
     height: 100%;
+    background: @m-grey6;
+    .capitalCollapse {
+        height: 100%;
+        background: transparent;
+        .ant-collapse-item {
+            height: 100%;
+            border: 0;
+            .ant-collapse-header {
+                width: 100%;
+                padding: 0 25px 0 12px;
+                height: 40px;
+                line-height: 40px;
+                border: 1px solid @m-blue0;
+                border-left: 0;
+                font-size: 14px;
+                font-family: Adobe Heiti Std;
+                color: @m-white0;
+                .ellipse;
+                .ant-collapse-arrow {
+                    right: 10px;
+                }
+            }
+            .ant-collapse-content {
+                height: calc(100% - 40px);
+                overflow-y: auto;
+                .ant-collapse-content-box {
+                    padding: 10px 12px;
+                    .flex();
+                    flex-direction: column;
+                    .capitalItem {
+                        width: 100%;
+                        padding-top: 5px;
+                        font-size: 14px;
+                        color: @m-grey1;
+                        .firstLine {
+                            width: 100%;
+                            .inlineflex;
+                            justify-content: space-between;
+                            height: 18px;
+                            line-height: 18px;
+                            .iconfont {
+                                font-size: 18px;
+                                color: @m-black3;
+                            }
+                        }
+                        .numBar {
+                            width: 100%;
+                            margin-top: 10px;
+                            height: 16px;
+                            line-height: 16px;
+                            font-size: 16px;
+                            text-align: left;
+                            color: @m-white0;
+                            margin-bottom: 14px;
+                        }
+                        .green {
+                            color: @m-green0;
+                        }
+                        .red {
+                            color: @m-red1;
+                        }
+                        .blue {
+                            color: @m-blue0;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 </style>;

src/components/secondeMenu/index.vue

@@ -1,15 +1,128 @@
 <template>
   <div class="second_menu">
-
+      <a-layout-sider class="m-layout-left" width="180"  @collapse="collapse" collapsible> 
+          <!-- v-model:collapsed="collapsed" -->
+            <a-menu theme="dark" mode="inline" class="left-menu"  @click="menuClick">
+                <!-- v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" -->
+                <a-sub-menu v-for="item in menuList" :key="item.key">
+                    <template #title>
+                        <span v-if="item.code">
+                            <svg class="icon svg-icon" aria-hidden="true">
+                                <use :xlink:href="fontIcon(item.code)"></use>
+                            </svg>
+                            <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
+                        </span>
+                    </template>
+                    <a-menu-item :key="subItem.code" v-for="subItem in item.children">
+                        <span>{{ subItem.title }}</span>
+                    </a-menu-item>
+                </a-sub-menu>
+            </a-menu>
+        </a-layout-sider>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue';
+import APP from '@/services';
 
 interface Key {
     [propName: string]: string;
 }
+// 菜单栏
+const handleMenu = () => {
+    const collapsed = ref<boolean>(false);
+    const selectedKeys = ref<string[]>(['1-1']);
+    const openKeys = ref<string[]>(['1']);
+    const preOpenKeys = ref<string[]>(['1']);
+    // const menuList = APP.getRef('menus');
+    const menuList = [
+        {
+          key: '1',
+          title: '市场',
+          code: 'market',
+          children: [
+            {
+              key: '1-1',
+              title: '现货贸易',
+              code: ''
+            },
+          ],
+        },
+        {
+          key: '2',
+          title: '查询',
+          code: 'search',
+          children: [
+            {
+              key: '2-1',
+              title: '单据记录',
+              code: ''
+            },
+            {
+              key: '2-2',
+              title: '资金流水',
+              code: ''
+            },
+            {
+              key: '2-3',
+              title: '出入库',
+              code: ''
+            },
+            {
+              key: '2-4',
+              title: '登录日志',
+              code: ''
+            },
+          ],
+        },
+        {
+          key: '3',
+          title: '报表',
+          code: 'report'
+        },
+      ];
+
+    // 控制菜单是否隐藏
+    function collapse(collapsed: boolean) {
+        if (collapsed) {
+            preOpenKeys.value = openKeys.value;
+            openKeys.value = [];
+        } else {
+            openKeys.value = preOpenKeys.value;
+        }
+    }
+
+    function menuClick(value: any) {
+        console.log(value);
+    }
+    // 一级菜单图标
+    function fontIcon(code: string): string {
+        let result = 'icon-jinrongfenxi';
+        switch (code) {
+            case 'market':
+                result = 'icon-jinrongfenxi';
+                break;
+            case 'info':
+                result = 'icon-zhangdan';
+                break;
+            case 'business':
+                result = 'icon-renwu';
+                break;
+            case 'manage':
+                result = 'icon-quanxian';
+                break;
+            case 'search':
+                result = 'icon-chazhaojilu';
+                break;
+            case 'report':
+                result = 'icon-bingtu';
+                break;
+        }
+        return '#' + result;
+    }
+    return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, fontIcon };
+};
 
 export default defineComponent({
     name: 'second_menu',
@@ -26,57 +139,156 @@ export default defineComponent({
     },
     components: {},
     setup(props, context) {
+        const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, fontIcon } = handleMenu();
         const current = ref<string[]>(['0']);
-        function menuClick(value: any) {
-            const index = +value.key;
-            context.emit('selectMenu', props.list[index]);
-        }
+        
         return {
             current,
             menuClick,
+            collapsed,
+            collapse,
+            selectedKeys,
+            openKeys,
+            menuList,
+            fontIcon,
         };
     },
 });
 </script>
 
 <style lang="less">
-.noBorderBottom {
-    border-bottom: none;
-}
-.menu_container {
-    .flex();
-    justify-content: space-between;
-    border-bottom: 1px solid @m-blue0 !important;
-    background-color: @m-black1;
-    .a-menu_container {
-        padding-top: 5px;
-        .flex();
-        height: 34px;
-        line-height: 34px;
-        .ant-menu-item {
-            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
-            margin-left: 3px;
-            font-size: 16px;
-            columns: @m-grey2;
-            border-radius: 5px 5px 0px 0px;
-            cursor: pointer;
-            font-family: Adobe Heiti Std;
-            font-weight: normal;
-            &:hover {
-                .noBorderBottom;
+.second_menu {
+    height: 100%;
+    // .left-menu {
+    //     height: 100%;
+    //     .menu-item_title {
+    //         margin-left: 10px;
+    //     }
+    // }
+    
+    // .ant-avatar-icon {
+    //     background-color: @m-grey1;
+    //     cursor: pointer;
+    // }
+    // .m-layout-left {
+    //     background: @m-black0;
+    //     .ant-layout-sider-trigger {
+    //     background: @m-black0;
+    // }
+    // }
+    .m-layout-left {
+        height: 100%;
+        background: @m-black4;
+        .ant-layout-sider-children {
+            ul.ant-menu.ant-menu-inline {
+                li.ant-menu-submenu {
+                    padding-bottom: 0;
+                    .ant-menu-submenu-title {
+                        color: @m-grey2;
+                        font-size: 16px;
+                        height: 60px;
+                        line-height: 60px;
+                        margin-top: 0;
+                        margin-bottom: 0;
+                        padding: 5px 0;
+                        .icon {
+                            font-size: 20px;
+                        }
+                        .menu-item_title {
+                            display: inline-block;
+                            font-size: 16px;
+                            margin-left: 15px;
+                        }
+                    }
+                    .ant-menu-sub {
+                        .ant-menu-item {
+                            padding-left: 60px !important;
+                            margin-top: 5px;
+                            margin-bottom: 5px;
+                        }
+                    }
+                }
+                li.ant-menu-submenu-open {
+                    .ant-menu-submenu-title {
+                        color: @m-white0;
+                        .icon {
+                            color: @m-white0;
+                        }
+                    }
+                    .ant-menu-sub {
+                        .ant-menu-item.ant-menu-item-selected {
+                            background-color: @m-blue0;
+                        }
+                    }
+                }
             }
         }
-        .ant-menu-item-active {
-            .noBorderBottom;
+        .ant-layout-sider-trigger {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            background: @m-black0;
+        }
+    }
+    .ant-menu-vertical {
+        .ant-menu-submenu-vertical {
+            height: 60px;
+            line-height: 60px;
+            padding: 5px 0;
+            .ant-menu-submenu-title {
+                height: 50px;
+                line-height: 50px;
+                .icon {
+                    font-size: 20px;
+                }
+            }
         }
-        .ant-menu-item-selected {
-            .noBorderBottom;
-            color: @m-white;
-            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
-            &:hover {
-                color: @m-white;
+        .ant-menu-submenu {
+            .ant-menu-submenu-title {
+                .menu-item_title {
+                    display: none;
+                }
             }
         }
     }
 }
+// .noBorderBottom {
+//     border-bottom: none;
+// }
+// .menu_container {
+//     .flex();
+//     justify-content: space-between;
+//     border-bottom: 1px solid @m-blue0 !important;
+//     background-color: @m-black1;
+//     .a-menu_container {
+//         padding-top: 5px;
+//         .flex();
+//         height: 34px;
+//         line-height: 34px;
+//         .ant-menu-item {
+//             background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
+//             margin-left: 3px;
+//             font-size: 16px;
+//             columns: @m-grey2;
+//             border-radius: 5px 5px 0px 0px;
+//             cursor: pointer;
+//             font-family: Adobe Heiti Std;
+//             font-weight: normal;
+//             &:hover {
+//                 .noBorderBottom;
+//             }
+//         }
+//         .ant-menu-item-active {
+//             .noBorderBottom;
+//         }
+//         .ant-menu-item-selected {
+//             .noBorderBottom;
+//             color: @m-white;
+//             background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
+//             &:hover {
+//                 color: @m-white;
+//             }
+//         }
+//     }
+// }
 </style>;

src/layout/index.vue

@@ -6,7 +6,11 @@
                 <div>
                     <span>{{ username }}（2500000001），您好！</span>
                 </div>
-
+                <div class="relative">
+                    <a-input-search ref="userNameInput"  class="searchInput" placeholder="请输入代码/名称" @pressEnter="search" >
+                    </a-input-search>
+                    <!-- <a-icon type="search" /> -->
+                </div>
                 <div class="news-container">
                     <a-badge dot @click="chooseSetMenu('notice')">
                         <svg class="icon svg-icon" aria-hidden="true">
@@ -30,25 +34,9 @@
             </div>
         </a-layout-header>
         <a-layout class="middleLayout">
-            <a-layout-sider class="m-layout-left" width="180" v-model:collapsed="collapsed" @collapse="collapse" collapsible>
-                <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.code">
-                        <template #title>
-                            <span>
-                                <svg class="icon svg-icon" aria-hidden="true">
-                                    <use :xlink:href="fontIcon(item.code)"></use>
-                                </svg>
-                                <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
-                            </span>
-                        </template>
-                        <a-menu-item :key="subItem.code" v-for="subItem in item.children">
-                            <span>{{ subItem.title }}</span>
-                        </a-menu-item>
-                    </a-sub-menu>
-                </a-menu>
-            </a-layout-sider>
+            <SecondMenu></SecondMenu>
             <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
-                <router-view />
+                <!-- <router-view /> -->
             </a-layout-content>
         </a-layout>
         <div class="sliderLayout">
@@ -57,7 +45,7 @@
         <a-layout class="bottomLayout">
             <a-layout-sider class="m-layout-left" width="180">
                 <!-- 这里左边需要加上资金信息 capital-info -->
-                <capitalInfo></capitalInfo>
+                <CapitalInfo></CapitalInfo>
             </a-layout-sider>
             <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
             </a-layout-content>
@@ -67,57 +55,10 @@
 <script lang="ts">
 import { UserOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref, provide } from 'vue';
-import APP from '@/services';
 import Setting from '@/views/setting/index.vue';
-import capitalInfo from '@/components/capitalInfo/index.vue';
-
-// 菜单栏
-const handleMenu = () => {
-    const collapsed = ref<boolean>(false);
-    const selectedKeys = ref<string[]>(['1-1']);
-    const openKeys = ref<string[]>(['1']);
-    const preOpenKeys = ref<string[]>(['1']);
-    const menuList = APP.getRef('menus');
-    // 控制菜单是否隐藏
-    function collapse(collapsed: boolean) {
-        if (collapsed) {
-            preOpenKeys.value = openKeys.value;
-            openKeys.value = [];
-        } else {
-            openKeys.value = preOpenKeys.value;
-        }
-    }
-
-    function menuClick(value: any) {
-        console.log(value);
-    }
-    // 一级菜单图标
-    function fontIcon(code: string): string {
-        let result = 'icon-jinrongfenxi';
-        switch (code) {
-            case 'market':
-                result = 'icon-jinrongfenxi';
-                break;
-            case 'info':
-                result = 'icon-zhangdan';
-                break;
-            case 'business':
-                result = 'icon-renwu';
-                break;
-            case 'manage':
-                result = 'icon-quanxian';
-                break;
-            case 'search':
-                result = 'icon-chazhaojilu';
-                break;
-            case 'report':
-                result = 'icon-bingtu';
-                break;
-        }
-        return '#' + result;
-    }
-    return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, fontIcon };
-};
+import CapitalInfo from '@/components/capitalInfo/index.vue';
+import SecondMenu from '@/components/secondeMenu/index.vue';
+import APP from '@/services';
 
 // 设置
 const setFn = () => {
@@ -140,28 +81,33 @@ const setFn = () => {
 
     return { visible, setMenu, chooseSetMenu };
 };
+// 搜索
+const onSearch = () => {
+    function search(value: string) {
+        console.log(value);
+    }
+    return {  search }
+};
 export default defineComponent({
     name: 'layout',
     components: {
         Setting,
         UserOutlined,
+        CapitalInfo,
+        SecondMenu
     },
     setup() {
-        const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, fontIcon } = handleMenu();
-        const username = APP.get('username');
         const { visible, setMenu, chooseSetMenu } = setFn();
+        const username = APP.get('username');
+        const { search } = onSearch(); 
+        const searchName = ref<string[]>(['']);
         return {
-            collapsed,
-            collapse,
-            selectedKeys,
-            openKeys,
-            menuClick,
-            username,
-            menuList,
             visible,
             setMenu,
             chooseSetMenu,
-            fontIcon,
+            username,
+            search,
+            searchName,
         };
     },
 });
@@ -181,6 +127,39 @@ export default defineComponent({
         padding: 0 20px;
         .flex();
         justify-content: space-between;
+        .searchInput.ant-input-affix-wrapper {
+            width: 240px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            background: @m-grey9;
+            border: 0;
+            vertical-align: middle;
+            padding-left: 40px;
+            position: relative;
+            .rounded-corners(15px);
+            .ant-input {
+                background: @m-grey9;
+                color: @m-white0;
+            }
+            .ant-input-suffix {
+                margin-left: -215px;
+                .ant-input-search-icon {
+                    color: @m-grey10;
+                }
+
+            }
+        }
+        // .relative {
+        //     position: relative;
+        //     .a-icon {
+        //         font-size: 14px;
+        //         .position(absolute, 50%, auto, auto, 10px);
+        //         margin-top: -7px;
+        //         color: @m-grey10;
+        //         z-index: 10;
+        //     }
+        // }
         .m-layout-header-right {
             .flex();
             .news-container {
@@ -203,22 +182,7 @@ export default defineComponent({
             }
         }
     }
-    .left-menu {
-        height: 100%;
-        .menu-item_title {
-            margin-left: 10px;
-        }
-    }
-    .ant-layout-sider-trigger {
-        background: @m-black0;
-    }
-    .ant-avatar-icon {
-        background-color: @m-grey1;
-        cursor: pointer;
-    }
-    .m-layout-left {
-        background: @m-black0;
-    }
+    
     .middleLayout {
         flex: 1;
         width: 100%;
@@ -249,6 +213,7 @@ export default defineComponent({
     }
     .bottomLayout {
         width: 100%;
+        flex: none;
         height: @bottomHeight;
         .inlineflex;
     }

src/views/market/warehouseTrade/index.vue

@@ -1,20 +1,17 @@
 <template>
   <!-- 仓单贸易 -->
   <section class="forward-section warehouse-trade">
-    <div class="topBar">
-        <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
-        <firstMenu :list="list"
-                :value="'value'"
-                @selectMenu="selectMenu" />
-        
-        <quoteTable :columns="columns"
-                    :dataSource="data"
-                    :contextMenuList="contextMenuList" />
-    </div>
-    <div class="warehouse-trade-order">
-      <!-- 右边是单据 -->
-      单据
-    </div>
+    <!-- 这里需要加上二级菜单 二级菜单封装在公告组件里面 secondeMenu -->
+    <firstMenu :list="list"
+            :value="'value'"
+            @selectMenu="selectMenu" />
+    
+    <quoteTable :columns="columns"
+                :dataSource="data"
+                :contextMenuList="contextMenuList" />
+    <!-- <div class="warehouse-trade-order">
+       单据
+    </div> -->
   </section>
 </template>