diff --git a/f/web-kboss/src/assets/css/iconfont/demo_index.html b/f/web-kboss/src/assets/css/iconfont/demo_index.html
index 20b7491..2357ca4 100644
--- a/f/web-kboss/src/assets/css/iconfont/demo_index.html
+++ b/f/web-kboss/src/assets/css/iconfont/demo_index.html
@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">购物车空</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">icon_关机-开机</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">icon_arrow_left</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe60d;</span>
                 <div class="name">发送</div>
@@ -138,9 +156,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1776735138822') format('woff2'),
-       url('iconfont.woff?t=1776735138822') format('woff'),
-       url('iconfont.ttf?t=1776735138822') format('truetype');
+  src: url('iconfont.woff2?t=1781579680075') format('woff2'),
+       url('iconfont.woff?t=1781579680075') format('woff'),
+       url('iconfont.ttf?t=1781579680075') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -166,6 +184,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-gouwuchekong"></span>
+            <div class="name">
+              购物车空
+            </div>
+            <div class="code-name">.icon-gouwuchekong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_guanji-kaiji"></span>
+            <div class="name">
+              icon_关机-开机
+            </div>
+            <div class="code-name">.icon-icon_guanji-kaiji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_arrow_left"></span>
+            <div class="name">
+              icon_arrow_left
+            </div>
+            <div class="code-name">.icon-icon_arrow_left
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-fasong"></span>
             <div class="name">
@@ -292,6 +337,30 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gouwuchekong"></use>
+                </svg>
+                <div class="name">购物车空</div>
+                <div class="code-name">#icon-gouwuchekong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_guanji-kaiji"></use>
+                </svg>
+                <div class="name">icon_关机-开机</div>
+                <div class="code-name">#icon-icon_guanji-kaiji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_arrow_left"></use>
+                </svg>
+                <div class="name">icon_arrow_left</div>
+                <div class="code-name">#icon-icon_arrow_left</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-fasong"></use>
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.css b/f/web-kboss/src/assets/css/iconfont/iconfont.css
index a15c738..2ca8bb6 100644
--- a/f/web-kboss/src/assets/css/iconfont/iconfont.css
+++ b/f/web-kboss/src/assets/css/iconfont/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5043107 */
-  src: url('iconfont.woff2?t=1776735138822') format('woff2'),
-       url('iconfont.woff?t=1776735138822') format('woff'),
-       url('iconfont.ttf?t=1776735138822') format('truetype');
+  src: url('iconfont.woff2?t=1781579680075') format('woff2'),
+       url('iconfont.woff?t=1781579680075') format('woff'),
+       url('iconfont.ttf?t=1781579680075') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gouwuchekong:before {
+  content: "\e600";
+}
+
+.icon-icon_guanji-kaiji:before {
+  content: "\e609";
+}
+
+.icon-icon_arrow_left:before {
+  content: "\e62e";
+}
+
 .icon-fasong:before {
   content: "\e60d";
 }
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.js b/f/web-kboss/src/assets/css/iconfont/iconfont.js
index 1547a99..68ef109 100644
--- a/f/web-kboss/src/assets/css/iconfont/iconfont.js
+++ b/f/web-kboss/src/assets/css/iconfont/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_5043107='<svg><symbol id="icon-fasong" viewBox="0 0 1024 1024"><path d="M931.392 11.264L45.12 530.688c-28.736 16.896-43.52 39.424-45.12 61.248v8.128c2.048 26.112 23.04 49.984 61.632 60.416l171.968 46.592a34.304 34.304 0 0 0 41.28-25.536 35.584 35.584 0 0 0-23.808-43.136L79.68 592l873.408-511.872-95.232 703.488c-1.408 10.432-9.152 15.68-18.752 12.992l-365.632-100.288 296.32-305.856a36.416 36.416 0 0 0 0-50.24 33.728 33.728 0 0 0-48.704 0l-324.8 335.36a110.72 110.72 0 0 0-7.872 9.088 35.52 35.52 0 0 0-16.128 30.784 104 104 0 0 0-5.248 32.64v206.4c0 49.664 53.568 79.168 93.568 51.712l166.272-114.368c10.24-6.976 16-19.136 15.232-31.872a35.712 35.712 0 0 0-19.2-29.504 33.28 33.28 0 0 0-34.24 2.304L435.84 937.856v-178.432l385.472 105.6c49.6 13.632 97.472-19.072 104.576-71.808l97.152-717.568c8.448-60.48-40-94.72-91.648-64.384z" fill="#666666" ></path></symbol><symbol id="icon-fuzhi" viewBox="0 0 1024 1024"><path d="M731.68184 676.057473 731.68184 183.323259c0-30.233582-24.512277-54.745858-54.747905-54.745858L184.216093 128.577401c-30.233582 0-54.746882 24.512277-54.746882 54.745858l0 492.734214c0 30.207999 24.5133 54.746882 54.746882 54.746882l492.717841 0C707.16854 730.804355 731.68184 706.265472 731.68184 676.057473zM622.1891 676.057473 238.962975 676.057473c-30.233582 0-54.746882-24.538883-54.746882-54.745858L184.216093 238.07014c0-30.233582 24.5133-54.746882 54.746882-54.746882l383.226125 0c30.233582 0 54.744835 24.512277 54.744835 54.746882l0 383.242498C676.933935 651.51859 652.421658 676.057473 622.1891 676.057473zM841.17458 292.817022l-54.745858 0 0 54.746882c30.232558 0 54.745858 24.5133 54.745858 54.759161l0 383.228171c0 30.206976-24.5133 54.745858-54.745858 54.745858L403.201573 840.297095c-30.233582 0-54.746882-24.538883-54.746882-54.745858l-54.746882 0 0 54.745858c0 30.207999 24.5133 54.747905 54.746882 54.747905l492.719888 0c30.234605 0 54.747905-24.539906 54.747905-54.747905L895.922485 347.563904C895.922485 317.329299 871.408161 292.817022 841.17458 292.817022z" fill="#666666" ></path></symbol><symbol id="icon-dalei-quanbuchanpin" viewBox="0 0 1024 1024"><path d="M961.815077 230.423807L533.942199 4.419159a58.51253 58.51253 0 0 0-44.615805 0L62.184923 231.155214a58.51253 58.51253 0 0 0-35.107518 54.12409 57.781124 57.781124 0 0 0 35.107518 54.124091L490.057801 565.408043a53.392684 53.392684 0 0 0 21.942199 4.38844 51.198464 51.198464 0 0 0 21.942199-4.38844l427.141471-226.004648a59.243937 59.243937 0 0 0 35.107519-54.855497 57.781124 57.781124 0 0 0-34.376112-54.124091z m-36.570331 54.855497L512 503.969887l-413.244746-219.421989L512 66.588722z"  ></path><path d="M961.08367 457.159862a32.913298 32.913298 0 0 0-43.152991 16.822353 33.644705 33.644705 0 0 0 8.045473 37.301738L512 731.437348 98.023848 512.01536a33.644705 33.644705 0 0 0 7.314066-37.301739 32.181892 32.181892 0 0 0-19.016572-17.553759 30.719078 30.719078 0 0 0-24.136419 0A61.438157 61.438157 0 0 0 27.077405 512.01536a57.781124 57.781124 0 0 0 35.107518 54.12409l427.872878 226.736055a58.51253 58.51253 0 0 0 21.942199 4.38844 48.272838 48.272838 0 0 0 21.942199-5.119846l427.141471-226.004649a60.70675 60.70675 0 0 0 35.107519-54.12409 57.781124 57.781124 0 0 0-35.107519-54.855498z"  ></path><path d="M961.08367 684.627324a32.913298 32.913298 0 0 0-43.152991 16.822353 31.450485 31.450485 0 0 0 8.045473 36.570331L512 955.979183l-415.438965-219.421988a32.913298 32.913298 0 0 0 9.508286-12.433913 30.719078 30.719078 0 0 0 0-24.136419 29.987672 29.987672 0 0 0-16.090946-15.359539 32.913298 32.913298 0 0 0-26.330639 0 59.243937 59.243937 0 0 0-35.838925 54.124091 57.781124 57.781124 0 0 0 35.107519 54.12409l427.872878 226.736055A58.51253 58.51253 0 0 0 512 1024a53.392684 53.392684 0 0 0 22.673606-5.119846l426.410064-225.273242a60.70675 60.70675 0 0 0 35.107519-54.855497 58.51253 58.51253 0 0 0-35.107519-54.124091z"  ></path></symbol><symbol id="icon-ziyuanguanliqi" viewBox="0 0 1024 1024"><path d="M942.08 1013.76h-332.8a64 64 0 0 1-64-64V613.76a64 64 0 0 1 64-67.2h332.8a64 64 0 0 1 64 67.2v333.44a64 64 0 0 1-64 66.56z m-329.6-396.8v330.24l329.6-3.2-3.84-330.24z m-3.2 0zM942.08 479.36h-332.8a64 64 0 0 1-64-64V79.36a64 64 0 0 1 64-64h332.8a64 64 0 0 1 64 67.2v330.24a64 64 0 0 1-64 66.56z m-329.6-396.8v330.24l329.6-3.84-3.84-329.6z m-3.2 0zM414.72 479.36h-332.8a64 64 0 0 1-64-64V79.36a64 64 0 0 1 64-64h332.8a64 64 0 0 1 64 67.2v330.24a64 64 0 0 1-64 66.56z m-328.96-396.8v330.24l328.96-3.84-3.2-329.6z m-3.84 0zM448 815.36H50.56a34.56 34.56 0 0 1-35.2-35.2 35.2 35.2 0 0 1 35.2-35.2H448a35.2 35.2 0 0 1 35.2 35.2 35.2 35.2 0 0 1-35.2 35.2z" fill="#323333" ></path><path d="M248.32 1013.76a35.2 35.2 0 0 1-35.2-35.2V582.4a35.2 35.2 0 0 1 35.2-35.2 34.56 34.56 0 0 1 35.2 35.2v396.16a35.2 35.2 0 0 1-35.2 35.2z" fill="#323333" ></path></symbol><symbol id="icon-shequfuwu" viewBox="0 0 1024 1024"><path d="M150.1 485.2c-4.2 0-8.5-1.6-11.8-4.7-6.8-6.5-7-17.3-0.5-24l343-357.2c7.9-8.3 19.1-13 30.6-13S534 91 542 99.3l344.2 357c6.5 6.8 6.3 17.5-0.4 24-6.8 6.5-17.5 6.3-24-0.4l-344.2-357c-1.6-1.7-3.8-2.6-6.1-2.6s-4.4 0.9-6 2.6L162.4 480c-3.4 3.5-7.8 5.2-12.3 5.2zM804.6 826H219.5V516.7c0-9.4 7.6-17 17-17s17 7.6 17 17V792h517.1V516.7c0-9.4 7.6-17 17-17s17 7.6 17 17V826z" fill="#333333" ></path><path d="M637.6 737c-18.2 0-33-14.8-33-33 0-39.8-25.8-75.1-62.8-87.6 8.1 17.3 20.3 45 24 64.1l0.1 0.6c0.7 4.8-1.2 9.6-5 12.9l-0.3 0.3c-3.1 2.5-15 11.2-40 19.9l-2.1 0.9-0.7 0.2-0.7 0.1c-0.6 0.1-1.6 0.4-2.9 0.5-3 0.4-6 0.1-8.8-0.9l-0.3-0.1c-23.6-8.6-37-17.5-40.3-19.9-5-3.3-7.4-9.1-6.2-14.7 3.6-18.7 14.9-44.7 24-63.9-37 12.5-62.9 47.8-62.9 87.6 0 18.2-14.8 33-33 33s-33-14.8-33-33c0-53.7 26.7-102.8 70.8-131.9-12-13.6-20.7-29.9-25.3-47.7-6-23.2-4.8-47.3 3.5-69.7 8.3-22.4 23.1-41.5 42.7-55.2 19.6-13.7 42.7-20.9 66.6-20.9s46.9 7.2 66.6 20.9c19.6 13.7 34.4 32.7 42.7 55.2 8.3 22.5 9.5 46.6 3.4 69.8-4.6 17.8-13.2 34-25.2 47.6 43.9 29 70.8 78.2 71.1 132 0 18.1-14.8 32.9-33 32.9zM529.3 588.5l6.8 1.4c26.1 5.5 49.8 19.9 66.6 40.6 16.8 20.7 26.1 46.8 26.1 73.5 0 4.9 4 8.8 8.8 8.8 4.9 0 8.8-4 8.8-8.8-0.3-50.2-27.9-95.8-72.1-118.9l-15.8-8.3 13.5-11.6c29.2-25 39.9-66.1 26.6-102.3-13.4-36.1-48.2-60.3-86.7-60.3s-73.3 24.2-86.7 60.3c-13.4 36.1-2.7 77.2 26.6 102.2l13.5 11.6-15.8 8.3c-44.3 23.2-71.8 68.7-71.8 118.8 0 4.9 4 8.8 8.8 8.8 4.9 0 8.8-4 8.8-8.8 0-26.7 9.3-52.8 26.1-73.5 16.8-20.7 40.5-35.1 66.7-40.6l6.7-1.4 4.6 5c2 2.1 4.2 4.1 6.7 5.8l5.8 4 6.1-4c2.3-1.5 4.4-3.4 6.3-5.5l5-5.1z m-45.5 90c5.2 3.1 14.6 8.1 28 13.1 14.4-4.9 23.7-9.8 28.8-12.9-4.9-17.9-16.5-44.1-26.5-64.1l-1.9-3.9-1.9 3.8c-12.8 25.5-22.3 48.7-26.5 64zM512 569.8c-41.2 0-74.8-33.5-74.8-74.8s33.5-74.8 74.8-74.8 74.8 33.5 74.8 74.8-33.6 74.8-74.8 74.8z m0-125.4c-27.9 0-50.6 22.7-50.6 50.6 0 27.9 22.7 50.6 50.6 50.6 27.9 0 50.6-22.7 50.6-50.6 0-27.9-22.7-50.6-50.6-50.6z" fill="#333333" ></path></symbol><symbol id="icon-fuzhi-" viewBox="0 0 1024 1024"><path d="M263.2 761.3H145.4c-45.5 0-82.5-37-82.5-82.5V150.6c0-45.5 37-82.5 82.5-82.5h488.9c45.5 0 82.5 37 82.5 82.5v70.1c0 11-9 20-20 20s-20-9-20-20v-70.1c0-23.4-19-42.5-42.5-42.5H145.4c-23.4 0-42.5 19-42.5 42.5v528.3c0 23.4 19 42.5 42.5 42.5h117.8c11 0 20 9 20 20s-8.9 19.9-20 19.9z" fill="#1C1C1C" ></path><path d="M897.2 971.1H400.9c-42.5 0-77.2-34.6-77.2-77.2V358.4c0-42.5 34.6-77.2 77.2-77.2h496.4c42.5 0 77.2 34.6 77.2 77.2V894c-0.1 42.5-34.7 77.1-77.3 77.1zM400.9 321.2c-20.5 0-37.2 16.7-37.2 37.2V894c0 20.5 16.7 37.2 37.2 37.2h496.4c20.5 0 37.2-16.7 37.2-37.2V358.4c0-20.5-16.7-37.2-37.2-37.2H400.9z" fill="#1C1C1C" ></path></symbol><symbol id="icon-dingdanguanli" viewBox="0 0 1024 1024"><path d="M871.04 120.32h-104.96v-6.4c0-62.72-51.2-113.92-113.92-113.92H371.84c-62.72 0-113.92 51.2-113.92 113.92v5.76H152.32C103.68 120.32 64 159.36 64 208.64v651.52C64 950.4 137.6 1024 227.84 1024h568.32c90.24 0 163.84-73.6 163.84-163.84V208.64c0-49.28-39.68-88.32-88.96-88.32z m-549.12-6.4c0-27.52 22.4-49.92 49.92-49.92h280.32c27.52 0 49.92 22.4 49.92 49.92V256H321.92V113.92zM896 860.16c0 55.04-44.8 99.84-99.84 99.84H227.84C172.8 960 128 915.2 128 860.16V208.64c0-13.44 10.88-24.32 24.32-24.32h104.96V288c0 17.92 14.08 32 32 32h444.16c17.92 0 32-14.08 32-32V184.32h104.96c13.44 0 24.32 10.88 24.32 24.32v651.52z" fill="#333333" ></path><path d="M734.08 448H289.92c-17.92 0-32 14.08-32 32s14.08 32 32 32h444.16c17.92 0 32-14.08 32-32s-14.08-32-32-32zM734.08 640H289.92c-17.92 0-32 14.08-32 32s14.08 32 32 32h444.16c17.92 0 32-14.08 32-32s-14.08-32-32-32z" fill="#333333" ></path></symbol><symbol id="icon-kefu" viewBox="0 0 1051 1024"><path d="M55.351351 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0z m763.101406 211.552865A137.852541 137.852541 0 0 1 774.918919 664.326919v-110.924108A138.378378 138.378378 0 0 1 912.328649 415.135135C898.131027 214.071351 730.499459 55.351351 525.837838 55.351351 321.148541 55.351351 153.544649 214.071351 139.347027 415.135135A138.461405 138.461405 0 0 1 276.756757 553.402811v110.924108a138.378378 138.378378 0 0 1-276.756757 0v-110.924108a138.378378 138.378378 0 0 1 83.303784-126.865297C91.883243 189.523027 286.72 0 525.837838 0s433.954595 189.523027 442.534054 426.537514A138.461405 138.461405 0 0 1 1051.675676 553.402811v110.924108a138.378378 138.378378 0 0 1-184.790487 130.269405 470.763243 470.763243 0 0 1-188.858811 121.21946A96.809514 96.809514 0 0 1 580.912432 1010.162162h-82.528864c-53.690811 0-97.113946-43.174054-97.113946-96.864865 0-53.607784 43.284757-96.864865 97.141621-96.864865h82.473514c34.954378 0 65.536 18.265946 82.639567 45.803244a415.273514 415.273514 0 0 0 154.900757-97.28zM830.27027 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0zM498.438919 954.810811h82.473513c23.302919 0 41.79027-18.487351 41.790271-41.513514 0-23.053838-18.570378-41.513514-41.790271-41.513513h-82.473513c-23.302919 0-41.79027 18.487351-41.79027 41.513513 0 23.053838 18.570378 41.513514 41.79027 41.513514z" fill="#666666" ></path></symbol><symbol id="icon-ditu_diqiu_o" viewBox="0 0 1024 1024"><path d="M550.4 896h-17.066667C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667h21.333334c192 12.8 341.333333 170.666667 341.333333 362.666666 0 174.933333-123.733333 320-290.133333 354.133334-17.066667 4.266667-38.4 8.533333-55.466667 8.533333z m-34.133333-42.666667v-145.066666l-59.733334-81.066667 123.733334-123.733333 59.733333 59.733333h115.2l76.8 76.8v8.533333c12.8-38.4 21.333333-76.8 21.333333-119.466666 0-166.4-128-302.933333-290.133333-320L473.6 298.666667l59.733333 59.733333V469.333333l-98.133333 98.133334-187.733333-179.2c-21.333333 42.666667-34.133333 93.866667-34.133334 145.066666 0 170.666667 132.266667 311.466667 302.933334 320zM366.933333 260.266667c-38.4 25.6-68.266667 51.2-93.866666 89.6l162.133333 162.133333 55.466667-55.466667V379.733333L413.866667 302.933333l12.8-12.8 72.533333-72.533333c-46.933333 4.266667-89.6 17.066667-132.266667 42.666667z m192 430.933333V853.333333c42.666667-4.266667 89.6-17.066667 136.533334-42.666666 38.4-21.333333 68.266667-51.2 93.866666-85.333334v-68.266666l-51.2-51.2h-115.2l-42.666666-42.666667-64 64 42.666666 64z" fill="#444444" ></path></symbol><symbol id="icon-xiaoxi" viewBox="0 0 1024 1024"><path d="M506.31 162.55C362.92 165.58 247.6 282.77 247.6 426.87V631.5l-79.76 106.34c-16.33 21.78-11.92 52.67 9.86 69.01a49.28 49.28 0 0 0 29.57 9.86h609.47c10.64 0 21-3.45 29.52-9.82l2.51-2.03c19.73-16.88 22.98-46.17 7.44-66.96l-79.87-106.79V426.87c0-146.01-118.37-264.37-264.37-264.37l-5.66 0.05z m5.66 62.68c111.36 0 201.64 90.28 201.64 201.64v215.08l0.13 2.83c0.61 6.58 3.26 12.82 7.64 17.82l1.31 1.49 67.21 89.89H234.14l69.92-93.2a31.371 31.371 0 0 0 6.27-18.82V426.87c0-111.36 90.28-201.64 201.64-201.64z"  ></path><path d="M453.31 839.11c0 34.65 28.09 62.73 62.73 62.73 34.65 0 62.73-28.09 62.73-62.73m-17.92-672.13c0.01-24.75-20.04-44.82-44.79-44.83-24.75-0.01-44.82 20.04-44.83 44.79v0.04"  ></path></symbol><symbol id="icon-AIzhushou" viewBox="0 0 1024 1024"><path d="M521.0112 4.608c151.808 0 278.784 47.4624 367.0528 137.728 88.2688 90.1632 137.9328 226.048 135.8848 377.344a511.9488 511.9488 0 0 1-47.5136 212.736c-102.7584 214.7328-307.3536 263.3728-472.4736 263.68-81.8176 0-163.2256-10.6496-242.2784-31.488H100.352a66.3552 66.3552 0 0 1-66.2528-76.0832l18.2272-129.024C23.04 711.4752 5.6832 635.904 0.768 534.016A501.1456 501.1456 0 0 1 368.0256 23.3472 610.2016 610.2016 0 0 1 521.0112 4.608z m0.1536 74.24a535.7056 535.7056 0 0 0-134.5024 16.384 426.6496 426.6496 0 0 0-311.6032 434.688c4.096 89.6512 18.7392 156.16 42.0352 192 8.2944 12.4416 11.776 27.4944 9.5744 42.3424l-17.8176 126.3104h155.136c6.0928 0 12.032 0.768 17.8688 2.4576 49.4592 13.6192 476.7744 123.5968 627.3024-191.488a444.1088 444.1088 0 0 0 40.7552-182.3744c2.4576-131.2256-38.2976-247.1936-114.688-324.096-76.288-76.8512-179.8656-116.224-314.0608-116.224z m-41.472 252.0064c4.1984 5.9392 7.68 12.288 10.3936 19.0464l10.8544 27.392 92.5696 228.5568c6.4512 12.032 10.5984 25.2416 12.3904 38.8608a31.744 31.744 0 0 1-10.0864 22.784c-6.4512 6.5536-15.36 10.24-24.7296 10.0864a29.2864 29.2864 0 0 1-24.7296-11.1104 68.7104 68.7104 0 0 1-8.6528-16.0768c-4.2496-7.0144-6.0928-13.4656-9.3184-18.944l-16.7936-44.4928H367.7696l-17.0496 45.1584c-4.1472 12.5952-9.728 24.576-16.8448 35.84a26.8288 26.8288 0 0 1-23.04 9.472 33.8432 33.8432 0 0 1-24.7296-9.8304 30.5664 30.5664 0 0 1-10.3424-22.528c0.1536-5.0176 0.9216-9.9328 2.4576-14.848a283.136 283.136 0 0 1 7.8848-21.504l90.7264-229.888c2.4576-6.656 5.7344-14.592 9.216-24.6784 2.9696-8.192 6.8608-15.7696 11.6224-23.04a46.4896 46.4896 0 0 1 16.0768-14.848 49.408 49.408 0 0 1 65.9968 14.592z m215.2448-19.1488a34.2016 34.2016 0 0 1 26.1632 10.5984c7.2704 9.216 10.8544 20.8384 9.8304 32.6144v278.784c1.024 11.776-2.56 23.552-9.8304 32.8704a33.9456 33.9456 0 0 1-26.112 10.8544 33.2288 33.2288 0 0 1-24.7296-10.8544 47.3088 47.3088 0 0 1-9.8816-25.8048V354.9184a46.336 46.336 0 0 1 9.8816-32.3584 32.768 32.768 0 0 1 24.6784-10.8544z m-256.1024 74.752L386.56 532.6848h105.472L438.8352 386.5088z" fill="#575757" ></path></symbol></svg>',(t=>{var c=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var a,e,i,o,n,h=function(c,l){l.parentNode.insertBefore(c,l)};if(c&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_5043107,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?h(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),a()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=a,o=t.document,n=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}function s(){n||(n=!0,i())}function d(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}s()}})(window);
\ No newline at end of file
+window._iconfont_svg_string_5043107='<svg><symbol id="icon-gouwuchekong" viewBox="0 0 1028 1024"><path d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z"  ></path></symbol><symbol id="icon-icon_guanji-kaiji" viewBox="0 0 1024 1024"><path d="M554.67 128h-85.33v426.67h85.33V128z m206.29 92.37l-60.37 60.37C767.57 335.57 810.67 418.56 810.67 512c0 164.91-133.76 298.67-298.67 298.67S213.33 676.91 213.33 512c0-93.44 43.09-176.43 110.08-231.25l-60.37-60.37C180.69 290.77 128 395.09 128 512c0 212.05 171.95 384 384 384s384-171.95 384-384c0-116.91-52.69-221.23-135.04-291.63z"  ></path></symbol><symbol id="icon-icon_arrow_left" viewBox="0 0 1024 1024"><path d="M669.472 162.88l49.504 49.696-294.56 300.48 297.024 297.952-49.088 50.08-346.56-347.616z"  ></path></symbol><symbol id="icon-fasong" viewBox="0 0 1024 1024"><path d="M931.392 11.264L45.12 530.688c-28.736 16.896-43.52 39.424-45.12 61.248v8.128c2.048 26.112 23.04 49.984 61.632 60.416l171.968 46.592a34.304 34.304 0 0 0 41.28-25.536 35.584 35.584 0 0 0-23.808-43.136L79.68 592l873.408-511.872-95.232 703.488c-1.408 10.432-9.152 15.68-18.752 12.992l-365.632-100.288 296.32-305.856a36.416 36.416 0 0 0 0-50.24 33.728 33.728 0 0 0-48.704 0l-324.8 335.36a110.72 110.72 0 0 0-7.872 9.088 35.52 35.52 0 0 0-16.128 30.784 104 104 0 0 0-5.248 32.64v206.4c0 49.664 53.568 79.168 93.568 51.712l166.272-114.368c10.24-6.976 16-19.136 15.232-31.872a35.712 35.712 0 0 0-19.2-29.504 33.28 33.28 0 0 0-34.24 2.304L435.84 937.856v-178.432l385.472 105.6c49.6 13.632 97.472-19.072 104.576-71.808l97.152-717.568c8.448-60.48-40-94.72-91.648-64.384z" fill="#666666" ></path></symbol><symbol id="icon-fuzhi" viewBox="0 0 1024 1024"><path d="M731.68184 676.057473 731.68184 183.323259c0-30.233582-24.512277-54.745858-54.747905-54.745858L184.216093 128.577401c-30.233582 0-54.746882 24.512277-54.746882 54.745858l0 492.734214c0 30.207999 24.5133 54.746882 54.746882 54.746882l492.717841 0C707.16854 730.804355 731.68184 706.265472 731.68184 676.057473zM622.1891 676.057473 238.962975 676.057473c-30.233582 0-54.746882-24.538883-54.746882-54.745858L184.216093 238.07014c0-30.233582 24.5133-54.746882 54.746882-54.746882l383.226125 0c30.233582 0 54.744835 24.512277 54.744835 54.746882l0 383.242498C676.933935 651.51859 652.421658 676.057473 622.1891 676.057473zM841.17458 292.817022l-54.745858 0 0 54.746882c30.232558 0 54.745858 24.5133 54.745858 54.759161l0 383.228171c0 30.206976-24.5133 54.745858-54.745858 54.745858L403.201573 840.297095c-30.233582 0-54.746882-24.538883-54.746882-54.745858l-54.746882 0 0 54.745858c0 30.207999 24.5133 54.747905 54.746882 54.747905l492.719888 0c30.234605 0 54.747905-24.539906 54.747905-54.747905L895.922485 347.563904C895.922485 317.329299 871.408161 292.817022 841.17458 292.817022z" fill="#666666" ></path></symbol><symbol id="icon-dalei-quanbuchanpin" viewBox="0 0 1024 1024"><path d="M961.815077 230.423807L533.942199 4.419159a58.51253 58.51253 0 0 0-44.615805 0L62.184923 231.155214a58.51253 58.51253 0 0 0-35.107518 54.12409 57.781124 57.781124 0 0 0 35.107518 54.124091L490.057801 565.408043a53.392684 53.392684 0 0 0 21.942199 4.38844 51.198464 51.198464 0 0 0 21.942199-4.38844l427.141471-226.004648a59.243937 59.243937 0 0 0 35.107519-54.855497 57.781124 57.781124 0 0 0-34.376112-54.124091z m-36.570331 54.855497L512 503.969887l-413.244746-219.421989L512 66.588722z"  ></path><path d="M961.08367 457.159862a32.913298 32.913298 0 0 0-43.152991 16.822353 33.644705 33.644705 0 0 0 8.045473 37.301738L512 731.437348 98.023848 512.01536a33.644705 33.644705 0 0 0 7.314066-37.301739 32.181892 32.181892 0 0 0-19.016572-17.553759 30.719078 30.719078 0 0 0-24.136419 0A61.438157 61.438157 0 0 0 27.077405 512.01536a57.781124 57.781124 0 0 0 35.107518 54.12409l427.872878 226.736055a58.51253 58.51253 0 0 0 21.942199 4.38844 48.272838 48.272838 0 0 0 21.942199-5.119846l427.141471-226.004649a60.70675 60.70675 0 0 0 35.107519-54.12409 57.781124 57.781124 0 0 0-35.107519-54.855498z"  ></path><path d="M961.08367 684.627324a32.913298 32.913298 0 0 0-43.152991 16.822353 31.450485 31.450485 0 0 0 8.045473 36.570331L512 955.979183l-415.438965-219.421988a32.913298 32.913298 0 0 0 9.508286-12.433913 30.719078 30.719078 0 0 0 0-24.136419 29.987672 29.987672 0 0 0-16.090946-15.359539 32.913298 32.913298 0 0 0-26.330639 0 59.243937 59.243937 0 0 0-35.838925 54.124091 57.781124 57.781124 0 0 0 35.107519 54.12409l427.872878 226.736055A58.51253 58.51253 0 0 0 512 1024a53.392684 53.392684 0 0 0 22.673606-5.119846l426.410064-225.273242a60.70675 60.70675 0 0 0 35.107519-54.855497 58.51253 58.51253 0 0 0-35.107519-54.124091z"  ></path></symbol><symbol id="icon-ziyuanguanliqi" viewBox="0 0 1024 1024"><path d="M942.08 1013.76h-332.8a64 64 0 0 1-64-64V613.76a64 64 0 0 1 64-67.2h332.8a64 64 0 0 1 64 67.2v333.44a64 64 0 0 1-64 66.56z m-329.6-396.8v330.24l329.6-3.2-3.84-330.24z m-3.2 0zM942.08 479.36h-332.8a64 64 0 0 1-64-64V79.36a64 64 0 0 1 64-64h332.8a64 64 0 0 1 64 67.2v330.24a64 64 0 0 1-64 66.56z m-329.6-396.8v330.24l329.6-3.84-3.84-329.6z m-3.2 0zM414.72 479.36h-332.8a64 64 0 0 1-64-64V79.36a64 64 0 0 1 64-64h332.8a64 64 0 0 1 64 67.2v330.24a64 64 0 0 1-64 66.56z m-328.96-396.8v330.24l328.96-3.84-3.2-329.6z m-3.84 0zM448 815.36H50.56a34.56 34.56 0 0 1-35.2-35.2 35.2 35.2 0 0 1 35.2-35.2H448a35.2 35.2 0 0 1 35.2 35.2 35.2 35.2 0 0 1-35.2 35.2z" fill="#323333" ></path><path d="M248.32 1013.76a35.2 35.2 0 0 1-35.2-35.2V582.4a35.2 35.2 0 0 1 35.2-35.2 34.56 34.56 0 0 1 35.2 35.2v396.16a35.2 35.2 0 0 1-35.2 35.2z" fill="#323333" ></path></symbol><symbol id="icon-shequfuwu" viewBox="0 0 1024 1024"><path d="M150.1 485.2c-4.2 0-8.5-1.6-11.8-4.7-6.8-6.5-7-17.3-0.5-24l343-357.2c7.9-8.3 19.1-13 30.6-13S534 91 542 99.3l344.2 357c6.5 6.8 6.3 17.5-0.4 24-6.8 6.5-17.5 6.3-24-0.4l-344.2-357c-1.6-1.7-3.8-2.6-6.1-2.6s-4.4 0.9-6 2.6L162.4 480c-3.4 3.5-7.8 5.2-12.3 5.2zM804.6 826H219.5V516.7c0-9.4 7.6-17 17-17s17 7.6 17 17V792h517.1V516.7c0-9.4 7.6-17 17-17s17 7.6 17 17V826z" fill="#333333" ></path><path d="M637.6 737c-18.2 0-33-14.8-33-33 0-39.8-25.8-75.1-62.8-87.6 8.1 17.3 20.3 45 24 64.1l0.1 0.6c0.7 4.8-1.2 9.6-5 12.9l-0.3 0.3c-3.1 2.5-15 11.2-40 19.9l-2.1 0.9-0.7 0.2-0.7 0.1c-0.6 0.1-1.6 0.4-2.9 0.5-3 0.4-6 0.1-8.8-0.9l-0.3-0.1c-23.6-8.6-37-17.5-40.3-19.9-5-3.3-7.4-9.1-6.2-14.7 3.6-18.7 14.9-44.7 24-63.9-37 12.5-62.9 47.8-62.9 87.6 0 18.2-14.8 33-33 33s-33-14.8-33-33c0-53.7 26.7-102.8 70.8-131.9-12-13.6-20.7-29.9-25.3-47.7-6-23.2-4.8-47.3 3.5-69.7 8.3-22.4 23.1-41.5 42.7-55.2 19.6-13.7 42.7-20.9 66.6-20.9s46.9 7.2 66.6 20.9c19.6 13.7 34.4 32.7 42.7 55.2 8.3 22.5 9.5 46.6 3.4 69.8-4.6 17.8-13.2 34-25.2 47.6 43.9 29 70.8 78.2 71.1 132 0 18.1-14.8 32.9-33 32.9zM529.3 588.5l6.8 1.4c26.1 5.5 49.8 19.9 66.6 40.6 16.8 20.7 26.1 46.8 26.1 73.5 0 4.9 4 8.8 8.8 8.8 4.9 0 8.8-4 8.8-8.8-0.3-50.2-27.9-95.8-72.1-118.9l-15.8-8.3 13.5-11.6c29.2-25 39.9-66.1 26.6-102.3-13.4-36.1-48.2-60.3-86.7-60.3s-73.3 24.2-86.7 60.3c-13.4 36.1-2.7 77.2 26.6 102.2l13.5 11.6-15.8 8.3c-44.3 23.2-71.8 68.7-71.8 118.8 0 4.9 4 8.8 8.8 8.8 4.9 0 8.8-4 8.8-8.8 0-26.7 9.3-52.8 26.1-73.5 16.8-20.7 40.5-35.1 66.7-40.6l6.7-1.4 4.6 5c2 2.1 4.2 4.1 6.7 5.8l5.8 4 6.1-4c2.3-1.5 4.4-3.4 6.3-5.5l5-5.1z m-45.5 90c5.2 3.1 14.6 8.1 28 13.1 14.4-4.9 23.7-9.8 28.8-12.9-4.9-17.9-16.5-44.1-26.5-64.1l-1.9-3.9-1.9 3.8c-12.8 25.5-22.3 48.7-26.5 64zM512 569.8c-41.2 0-74.8-33.5-74.8-74.8s33.5-74.8 74.8-74.8 74.8 33.5 74.8 74.8-33.6 74.8-74.8 74.8z m0-125.4c-27.9 0-50.6 22.7-50.6 50.6 0 27.9 22.7 50.6 50.6 50.6 27.9 0 50.6-22.7 50.6-50.6 0-27.9-22.7-50.6-50.6-50.6z" fill="#333333" ></path></symbol><symbol id="icon-fuzhi-" viewBox="0 0 1024 1024"><path d="M263.2 761.3H145.4c-45.5 0-82.5-37-82.5-82.5V150.6c0-45.5 37-82.5 82.5-82.5h488.9c45.5 0 82.5 37 82.5 82.5v70.1c0 11-9 20-20 20s-20-9-20-20v-70.1c0-23.4-19-42.5-42.5-42.5H145.4c-23.4 0-42.5 19-42.5 42.5v528.3c0 23.4 19 42.5 42.5 42.5h117.8c11 0 20 9 20 20s-8.9 19.9-20 19.9z" fill="#1C1C1C" ></path><path d="M897.2 971.1H400.9c-42.5 0-77.2-34.6-77.2-77.2V358.4c0-42.5 34.6-77.2 77.2-77.2h496.4c42.5 0 77.2 34.6 77.2 77.2V894c-0.1 42.5-34.7 77.1-77.3 77.1zM400.9 321.2c-20.5 0-37.2 16.7-37.2 37.2V894c0 20.5 16.7 37.2 37.2 37.2h496.4c20.5 0 37.2-16.7 37.2-37.2V358.4c0-20.5-16.7-37.2-37.2-37.2H400.9z" fill="#1C1C1C" ></path></symbol><symbol id="icon-dingdanguanli" viewBox="0 0 1024 1024"><path d="M871.04 120.32h-104.96v-6.4c0-62.72-51.2-113.92-113.92-113.92H371.84c-62.72 0-113.92 51.2-113.92 113.92v5.76H152.32C103.68 120.32 64 159.36 64 208.64v651.52C64 950.4 137.6 1024 227.84 1024h568.32c90.24 0 163.84-73.6 163.84-163.84V208.64c0-49.28-39.68-88.32-88.96-88.32z m-549.12-6.4c0-27.52 22.4-49.92 49.92-49.92h280.32c27.52 0 49.92 22.4 49.92 49.92V256H321.92V113.92zM896 860.16c0 55.04-44.8 99.84-99.84 99.84H227.84C172.8 960 128 915.2 128 860.16V208.64c0-13.44 10.88-24.32 24.32-24.32h104.96V288c0 17.92 14.08 32 32 32h444.16c17.92 0 32-14.08 32-32V184.32h104.96c13.44 0 24.32 10.88 24.32 24.32v651.52z" fill="#333333" ></path><path d="M734.08 448H289.92c-17.92 0-32 14.08-32 32s14.08 32 32 32h444.16c17.92 0 32-14.08 32-32s-14.08-32-32-32zM734.08 640H289.92c-17.92 0-32 14.08-32 32s14.08 32 32 32h444.16c17.92 0 32-14.08 32-32s-14.08-32-32-32z" fill="#333333" ></path></symbol><symbol id="icon-kefu" viewBox="0 0 1051 1024"><path d="M55.351351 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0z m763.101406 211.552865A137.852541 137.852541 0 0 1 774.918919 664.326919v-110.924108A138.378378 138.378378 0 0 1 912.328649 415.135135C898.131027 214.071351 730.499459 55.351351 525.837838 55.351351 321.148541 55.351351 153.544649 214.071351 139.347027 415.135135A138.461405 138.461405 0 0 1 276.756757 553.402811v110.924108a138.378378 138.378378 0 0 1-276.756757 0v-110.924108a138.378378 138.378378 0 0 1 83.303784-126.865297C91.883243 189.523027 286.72 0 525.837838 0s433.954595 189.523027 442.534054 426.537514A138.461405 138.461405 0 0 1 1051.675676 553.402811v110.924108a138.378378 138.378378 0 0 1-184.790487 130.269405 470.763243 470.763243 0 0 1-188.858811 121.21946A96.809514 96.809514 0 0 1 580.912432 1010.162162h-82.528864c-53.690811 0-97.113946-43.174054-97.113946-96.864865 0-53.607784 43.284757-96.864865 97.141621-96.864865h82.473514c34.954378 0 65.536 18.265946 82.639567 45.803244a415.273514 415.273514 0 0 0 154.900757-97.28zM830.27027 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0zM498.438919 954.810811h82.473513c23.302919 0 41.79027-18.487351 41.790271-41.513514 0-23.053838-18.570378-41.513514-41.790271-41.513513h-82.473513c-23.302919 0-41.79027 18.487351-41.79027 41.513513 0 23.053838 18.570378 41.513514 41.79027 41.513514z" fill="#666666" ></path></symbol><symbol id="icon-ditu_diqiu_o" viewBox="0 0 1024 1024"><path d="M550.4 896h-17.066667C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667h21.333334c192 12.8 341.333333 170.666667 341.333333 362.666666 0 174.933333-123.733333 320-290.133333 354.133334-17.066667 4.266667-38.4 8.533333-55.466667 8.533333z m-34.133333-42.666667v-145.066666l-59.733334-81.066667 123.733334-123.733333 59.733333 59.733333h115.2l76.8 76.8v8.533333c12.8-38.4 21.333333-76.8 21.333333-119.466666 0-166.4-128-302.933333-290.133333-320L473.6 298.666667l59.733333 59.733333V469.333333l-98.133333 98.133334-187.733333-179.2c-21.333333 42.666667-34.133333 93.866667-34.133334 145.066666 0 170.666667 132.266667 311.466667 302.933334 320zM366.933333 260.266667c-38.4 25.6-68.266667 51.2-93.866666 89.6l162.133333 162.133333 55.466667-55.466667V379.733333L413.866667 302.933333l12.8-12.8 72.533333-72.533333c-46.933333 4.266667-89.6 17.066667-132.266667 42.666667z m192 430.933333V853.333333c42.666667-4.266667 89.6-17.066667 136.533334-42.666666 38.4-21.333333 68.266667-51.2 93.866666-85.333334v-68.266666l-51.2-51.2h-115.2l-42.666666-42.666667-64 64 42.666666 64z" fill="#444444" ></path></symbol><symbol id="icon-xiaoxi" viewBox="0 0 1024 1024"><path d="M506.31 162.55C362.92 165.58 247.6 282.77 247.6 426.87V631.5l-79.76 106.34c-16.33 21.78-11.92 52.67 9.86 69.01a49.28 49.28 0 0 0 29.57 9.86h609.47c10.64 0 21-3.45 29.52-9.82l2.51-2.03c19.73-16.88 22.98-46.17 7.44-66.96l-79.87-106.79V426.87c0-146.01-118.37-264.37-264.37-264.37l-5.66 0.05z m5.66 62.68c111.36 0 201.64 90.28 201.64 201.64v215.08l0.13 2.83c0.61 6.58 3.26 12.82 7.64 17.82l1.31 1.49 67.21 89.89H234.14l69.92-93.2a31.371 31.371 0 0 0 6.27-18.82V426.87c0-111.36 90.28-201.64 201.64-201.64z"  ></path><path d="M453.31 839.11c0 34.65 28.09 62.73 62.73 62.73 34.65 0 62.73-28.09 62.73-62.73m-17.92-672.13c0.01-24.75-20.04-44.82-44.79-44.83-24.75-0.01-44.82 20.04-44.83 44.79v0.04"  ></path></symbol><symbol id="icon-AIzhushou" viewBox="0 0 1024 1024"><path d="M521.0112 4.608c151.808 0 278.784 47.4624 367.0528 137.728 88.2688 90.1632 137.9328 226.048 135.8848 377.344a511.9488 511.9488 0 0 1-47.5136 212.736c-102.7584 214.7328-307.3536 263.3728-472.4736 263.68-81.8176 0-163.2256-10.6496-242.2784-31.488H100.352a66.3552 66.3552 0 0 1-66.2528-76.0832l18.2272-129.024C23.04 711.4752 5.6832 635.904 0.768 534.016A501.1456 501.1456 0 0 1 368.0256 23.3472 610.2016 610.2016 0 0 1 521.0112 4.608z m0.1536 74.24a535.7056 535.7056 0 0 0-134.5024 16.384 426.6496 426.6496 0 0 0-311.6032 434.688c4.096 89.6512 18.7392 156.16 42.0352 192 8.2944 12.4416 11.776 27.4944 9.5744 42.3424l-17.8176 126.3104h155.136c6.0928 0 12.032 0.768 17.8688 2.4576 49.4592 13.6192 476.7744 123.5968 627.3024-191.488a444.1088 444.1088 0 0 0 40.7552-182.3744c2.4576-131.2256-38.2976-247.1936-114.688-324.096-76.288-76.8512-179.8656-116.224-314.0608-116.224z m-41.472 252.0064c4.1984 5.9392 7.68 12.288 10.3936 19.0464l10.8544 27.392 92.5696 228.5568c6.4512 12.032 10.5984 25.2416 12.3904 38.8608a31.744 31.744 0 0 1-10.0864 22.784c-6.4512 6.5536-15.36 10.24-24.7296 10.0864a29.2864 29.2864 0 0 1-24.7296-11.1104 68.7104 68.7104 0 0 1-8.6528-16.0768c-4.2496-7.0144-6.0928-13.4656-9.3184-18.944l-16.7936-44.4928H367.7696l-17.0496 45.1584c-4.1472 12.5952-9.728 24.576-16.8448 35.84a26.8288 26.8288 0 0 1-23.04 9.472 33.8432 33.8432 0 0 1-24.7296-9.8304 30.5664 30.5664 0 0 1-10.3424-22.528c0.1536-5.0176 0.9216-9.9328 2.4576-14.848a283.136 283.136 0 0 1 7.8848-21.504l90.7264-229.888c2.4576-6.656 5.7344-14.592 9.216-24.6784 2.9696-8.192 6.8608-15.7696 11.6224-23.04a46.4896 46.4896 0 0 1 16.0768-14.848 49.408 49.408 0 0 1 65.9968 14.592z m215.2448-19.1488a34.2016 34.2016 0 0 1 26.1632 10.5984c7.2704 9.216 10.8544 20.8384 9.8304 32.6144v278.784c1.024 11.776-2.56 23.552-9.8304 32.8704a33.9456 33.9456 0 0 1-26.112 10.8544 33.2288 33.2288 0 0 1-24.7296-10.8544 47.3088 47.3088 0 0 1-9.8816-25.8048V354.9184a46.336 46.336 0 0 1 9.8816-32.3584 32.768 32.768 0 0 1 24.6784-10.8544z m-256.1024 74.752L386.56 532.6848h105.472L438.8352 386.5088z" fill="#575757" ></path></symbol></svg>',(t=>{var c=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var a,i,e,o,n,h=function(c,l){l.parentNode.insertBefore(c,l)};if(c&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_5043107,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?h(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),a()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(e=a,o=t.document,n=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}function s(){n||(n=!0,e())}function d(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}s()}})(window);
\ No newline at end of file
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.json b/f/web-kboss/src/assets/css/iconfont/iconfont.json
index 25b46a1..c79f7bd 100644
--- a/f/web-kboss/src/assets/css/iconfont/iconfont.json
+++ b/f/web-kboss/src/assets/css/iconfont/iconfont.json
@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1306",
+      "name": "购物车空",
+      "font_class": "gouwuchekong",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "11518201",
+      "name": "icon_关机-开机",
+      "font_class": "icon_guanji-kaiji",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "18418399",
+      "name": "icon_arrow_left",
+      "font_class": "icon_arrow_left",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
     {
       "icon_id": "12719937",
       "name": "发送",
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.ttf b/f/web-kboss/src/assets/css/iconfont/iconfont.ttf
index 5138289..b894936 100644
Binary files a/f/web-kboss/src/assets/css/iconfont/iconfont.ttf and b/f/web-kboss/src/assets/css/iconfont/iconfont.ttf differ
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.woff b/f/web-kboss/src/assets/css/iconfont/iconfont.woff
index df9cfd4..4d7fd20 100644
Binary files a/f/web-kboss/src/assets/css/iconfont/iconfont.woff and b/f/web-kboss/src/assets/css/iconfont/iconfont.woff differ
diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 b/f/web-kboss/src/assets/css/iconfont/iconfont.woff2
index a6f7a8b..7d6499d 100644
Binary files a/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 and b/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 differ
diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index 0828d53..653460f 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -337,6 +337,18 @@ export const constantRoutes = [
       name: "homePageIndex",
       hidden: true,
       meta: { title: "首页", onCache: true },
+    }, {
+      path: "computeMarket",
+      component: () => import("@/views/homePage/computeMarket/index.vue"),
+      name: "computeMarket",
+      hidden: true,
+      meta: { title: "算力市场", onCache: true },
+    }, {
+      path: "computeMarket/createInstance",
+      component: () => import("@/views/homePage/computeMarket/createInstance.vue"),
+      name: "computeMarketCreateInstance",
+      hidden: true,
+      meta: { title: "创建实例", onCache: true },
     }, {
       path: "detail",
       component: () => import("@/views/homePage/detail/index.vue"),
@@ -1127,6 +1139,33 @@ export const asyncRoutes = [
   },
 
 
+  // 容器实例 - 客户角色可见
+  {
+    path: "/containerInstance",
+    component: Layout,
+    redirect: "/containerInstance/index",
+    meta: {
+      title: "容器实例",
+      icon: "el-icon-box",
+      noCache: true,
+      fullPath: "/containerInstance",
+      roles: ["客户"]
+    },
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/customer/containerInstance"),
+        name: "ContainerInstance",
+        meta: {
+          title: "容器实例",
+          fullPath: "/containerInstance/index",
+          roles: ["客户"]
+        }
+      }
+    ]
+  },
+
+
   // 退订管理 - 变为一级菜单（包含子菜单）
   {
     path: "/unsubscribeManagement",
diff --git a/f/web-kboss/src/store/modules/permission.js b/f/web-kboss/src/store/modules/permission.js
index 1b2d5bb..5431965 100644
--- a/f/web-kboss/src/store/modules/permission.js
+++ b/f/web-kboss/src/store/modules/permission.js
@@ -28,6 +28,7 @@ const BASE_USER_ROUTE_PATHS = ['/orderManagement', '/resourceManagement'];
 
 // 客户角色额外能看到的一级菜单。
 const CUSTOMER_EXTRA_ROUTE_PATHS = [
+  '/containerInstance',
   '/unsubscribeManagement',
   '/informationPerfect',
   '/rechargeManagement',
diff --git a/f/web-kboss/src/views/customer/containerInstance/index.vue b/f/web-kboss/src/views/customer/containerInstance/index.vue
new file mode 100644
index 0000000..7dd71bf
--- /dev/null
+++ b/f/web-kboss/src/views/customer/containerInstance/index.vue
@@ -0,0 +1,500 @@
+<template>
+  <div class="container-instance-page">
+    <div class="page-header">
+      <div>
+        <h1>容器实例</h1>
+        <p>管理训练、推理和实验环境中的容器实例</p>
+      </div>
+  
+    </div>
+
+    <div class="stat-grid">
+      <div v-for="item in statCards" :key="item.label" class="stat-card">
+        <div class="stat-card__top">
+          <span class="stat-icon" :class="item.type">
+            <i :class="item.icon"></i>
+          </span>
+          <span>{{ item.label }}</span>
+        </div>
+        <strong>{{ item.value }}</strong>
+      </div>
+    </div>
+
+    <div class="table-card">
+      <el-table :data="containerList" stripe class="container-table">
+        <el-table-column width="48">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.checked"></el-checkbox>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="容器名称" min-width="220">
+          <template slot-scope="scope">
+            <div class="name-cell">
+              <strong>{{ scope.row.name }}</strong>
+              <span>Pod: {{ scope.row.pod }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="120">
+          <template slot-scope="scope">
+            <span class="status-badge" :class="scope.row.statusType">
+              <i></i>{{ scope.row.status }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="命名空间" width="130">
+          <template slot-scope="scope">
+            <span class="namespace-tag">{{ scope.row.namespace }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="镜像" min-width="200">
+          <template slot-scope="scope">
+            <div class="image-cell">
+              <strong>{{ scope.row.image }}</strong>
+              <span>{{ scope.row.gpu }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="disk" label="本地磁盘" width="100"></el-table-column>
+        <el-table-column prop="spec" label="CPU/内存" width="130"></el-table-column>
+
+        <el-table-column label="付费方式" width="110">
+          <template slot-scope="scope">
+            <span class="pay-tag" :class="scope.row.payType">{{ scope.row.payText }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="releaseTime" label="释放时间/停机时间" min-width="150"></el-table-column>
+
+        <el-table-column label="登录指令/密码" min-width="210">
+          <template slot-scope="scope">
+            <div class="login-cell">
+              <span>SSH: <em>{{ scope.row.ssh }}</em></span>
+              <span>密码: <em>{{ scope.row.password }}</em></span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="快捷工具" width="170">
+          <template slot-scope="scope">
+            <div class="tool-cell">
+              <el-button
+                size="mini"
+                :disabled="scope.row.statusType === 'pending'"
+                @click="handleTool('Jupyter', scope.row)"
+              >
+                Jupyter
+              </el-button>
+              <el-button
+                size="mini"
+                type="success"
+                plain
+                :disabled="scope.row.statusType === 'pending'"
+                @click="handleTool('实例监测', scope.row)"
+              >
+                实例监测
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="210" fixed="right">
+          <template slot-scope="scope">
+            <div class="action-cell">
+              <el-button
+                v-if="scope.row.statusType === 'stopped' || scope.row.statusType === 'error'"
+                type="text"
+                class="success-text"
+                @click="handleAction('启动', scope.row)"
+              >
+                启动
+              </el-button>
+              <el-button
+                v-else
+                type="text"
+                class="warning-text"
+                :disabled="scope.row.statusType === 'pending'"
+                @click="handleAction('停止', scope.row)"
+              >
+                停止
+              </el-button>
+              <el-button type="text" @click="handleAction('重启', scope.row)">重启</el-button>
+              <el-button type="text" @click="handleAction('日志', scope.row)">日志</el-button>
+              <el-button type="text" class="danger-text" @click="handleAction('删除', scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContainerInstance',
+  data() {
+    return {
+      statCards: [
+        { label: '运行中', value: 5, icon: 'el-icon-check', type: 'success' },
+        { label: 'Pending', value: 1, icon: 'el-icon-time', type: 'warning' },
+        { label: '异常/重启', value: 0, icon: 'el-icon-close', type: 'danger' },
+        { label: 'GPU使用', value: '18 / 32 GB', icon: 'el-icon-cpu', type: 'primary' }
+      ],
+      containerList: [
+        {
+          name: 'train-bert-finetune-7b8f9c',
+          pod: 'train-bert-finetune-7b8f9c-xkq2m',
+          status: 'Running',
+          statusType: 'running',
+          namespace: 'ml-training',
+          image: 'pytorch/pytorch:2.1.0',
+          gpu: 'GPU: A100 40GB x 1',
+          disk: '50GB',
+          spec: '4 Core / 16 GB',
+          payText: '按量计费',
+          payType: 'hourly',
+          releaseTime: '2025-02-18 10:30',
+          ssh: 'ssh root@10.0.0.1',
+          password: 'Vm**k9#2'
+        },
+        {
+          name: 'llama2-inference-3d2e1a',
+          pod: 'llama2-inference-3d2e1a-pqr8n',
+          status: 'Running',
+          statusType: 'running',
+          namespace: 'ml-inference',
+          image: 'meta-llama/llama2:7b-chat',
+          gpu: 'GPU: RTX 4090 x 1',
+          disk: '100GB',
+          spec: '8 Core / 32 GB',
+          payText: '包月',
+          payType: 'monthly',
+          releaseTime: '2025-02-15 09:15',
+          ssh: 'ssh root@10.0.0.2',
+          password: 'Ab**c3$5'
+        },
+        {
+          name: 'sd-training-exp-9f4b2c',
+          pod: 'sd-training-exp-9f4b2c-zlm3p',
+          status: 'Pending',
+          statusType: 'pending',
+          namespace: 'ml-training',
+          image: 'stabilityai/stable-diffusion:fp16',
+          gpu: 'GPU: A100 80GB x 2',
+          disk: '200GB',
+          spec: '16 Core / 64 GB',
+          payText: '按量计费',
+          payType: 'hourly',
+          releaseTime: '-',
+          ssh: '等待分配',
+          password: '-'
+        },
+        {
+          name: 'glm-finetune-pod-5e6d7f',
+          pod: 'glm-finetune-pod-5e6d7f-abc9h',
+          status: 'Error',
+          statusType: 'error',
+          namespace: 'ml-tuning',
+          image: 'chatglm2-6b:fp16',
+          gpu: 'GPU: V100 32GB x 1',
+          disk: '80GB',
+          spec: '8 Core / 32 GB',
+          payText: '按量计费',
+          payType: 'hourly',
+          releaseTime: '异常停机',
+          ssh: 'ssh root@10.0.0.4',
+          password: 'Xy**z8#1'
+        },
+        {
+          name: 'qwen-infer-srv-2c3d4e',
+          pod: 'qwen-infer-srv-2c3d4e-hjk7m',
+          status: 'Stopped',
+          statusType: 'stopped',
+          namespace: 'ml-inference',
+          image: 'qwen-7b-chat:beta',
+          gpu: 'GPU: A10G x 1',
+          disk: '50GB',
+          spec: '4 Core / 16 GB',
+          payText: '包周',
+          payType: 'weekly',
+          releaseTime: '2025-01-24 14:20',
+          ssh: 'ssh root@10.0.0.5',
+          password: 'Pq**r6$2'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleCreate() {
+      this.$router.push('/homePage/computeMarket')
+    },
+    handleTool(name, row) {
+      this.$message.info(`${name}：${row.name}`)
+    },
+    handleAction(action, row) {
+      this.$message.info(`${action}：${row.name}`)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container-instance-page {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f7fb;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+
+  h1 {
+    margin: 0;
+    color: #1f2937;
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 8px 0 0;
+    color: #8a94a6;
+    font-size: 14px;
+  }
+}
+
+.create-btn {
+  border-radius: 10px;
+  box-shadow: 0 10px 18px rgba(64, 158, 255, 0.18);
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.stat-card,
+.table-card {
+  background: #fff;
+  border: 1px solid #edf1f7;
+  border-radius: 16px;
+  box-shadow: 0 10px 28px rgba(31, 72, 135, 0.06);
+}
+
+.stat-card {
+  padding: 22px;
+
+  strong {
+    display: block;
+    color: #1f2937;
+    font-size: 26px;
+    line-height: 1.2;
+  }
+}
+
+.stat-card__top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  color: #667085;
+  font-size: 14px;
+}
+
+.stat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+
+  &.success {
+    color: #059669;
+    background: #dff8ee;
+  }
+
+  &.warning {
+    color: #d97706;
+    background: #fef3c7;
+  }
+
+  &.danger {
+    color: #dc2626;
+    background: #fee2e2;
+  }
+
+  &.primary {
+    color: #1e6fff;
+    background: #e8f1ff;
+  }
+}
+
+.table-card {
+  padding: 14px;
+}
+
+.container-table {
+  ::v-deep th {
+    color: #667085;
+    font-size: 12px;
+    font-weight: 700;
+    background: #f8fafc;
+  }
+
+  ::v-deep td {
+    color: #5f6b7a;
+    font-size: 13px;
+  }
+}
+
+.name-cell,
+.image-cell,
+.login-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  strong {
+    color: #1f2937;
+    font-weight: 600;
+  }
+
+  span {
+    color: #98a2b3;
+    font-size: 12px;
+  }
+}
+
+.login-cell em {
+  color: #1e6fff;
+  font-family: Consolas, Monaco, monospace;
+  font-style: normal;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+
+  i {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+  }
+
+  &.running {
+    color: #059669;
+    background: #dff8ee;
+
+    i {
+      background: #10b981;
+    }
+  }
+
+  &.pending {
+    color: #d97706;
+    background: #fef3c7;
+
+    i {
+      background: #f59e0b;
+    }
+  }
+
+  &.error {
+    color: #dc2626;
+    background: #fee2e2;
+
+    i {
+      background: #ef4444;
+    }
+  }
+
+  &.stopped {
+    color: #667085;
+    background: #eef2f7;
+
+    i {
+      background: #98a2b3;
+    }
+  }
+}
+
+.namespace-tag,
+.pay-tag {
+  display: inline-flex;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.namespace-tag {
+  color: #1e6fff;
+  background: #eef5ff;
+}
+
+.pay-tag.hourly {
+  color: #d97706;
+  background: #fef3c7;
+}
+
+.pay-tag.monthly,
+.pay-tag.weekly {
+  color: #1e6fff;
+  background: #eef5ff;
+}
+
+.tool-cell,
+.action-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.success-text {
+  color: #10b981;
+}
+
+.warning-text {
+  color: #f59e0b;
+}
+
+.danger-text {
+  color: #ef4444;
+}
+
+@media (max-width: 1100px) {
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .container-instance-page {
+    padding: 16px;
+  }
+
+  .page-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue
index b00f0be..b034e7d 100644
--- a/f/web-kboss/src/views/homePage/components/topBox/index.vue
+++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue
@@ -19,9 +19,11 @@
               <a @click="goHome">首页</a>
             </p>
             <!-- 产品与服务：鼠标移入显示子菜单 -->
-            <p @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)">
-              <a>基础云</a>
-            </p>
+            <!-- <p @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)">
+              <a>算力云</a>
+            </p> -->
+            <!-- 算力市场 -->
+            <p class="nav-hover" :class="{ active: $route.path.includes('/computeMarket') }" @click="$router.push('/homePage/computeMarket')">算力市场</p>
             <p class="nav-hover" :class="{ active: isActiveTokenMarket }" @click="handleModelSquareClick">token市集</p>
             <!-- 训推平台 -->
             <p class="nav-hover" @click="goTrainPlatform">训推平台</p>
@@ -410,6 +412,11 @@ export default Vue.extend({
       })
     },
 
+    // 跳转算力市场
+    goComputeMarket() {
+      this.$router.push('/homePage/computeMarket')
+    },
+
     // 跳转训推平台
     goTrainPlatform() {
       window.open('http://101.200.145.167:8923/', '_blank')
diff --git a/f/web-kboss/src/views/homePage/computeMarket/createInstance.vue b/f/web-kboss/src/views/homePage/computeMarket/createInstance.vue
new file mode 100644
index 0000000..5c50ff4
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/computeMarket/createInstance.vue
@@ -0,0 +1,713 @@
+<template>
+  <div class="create-instance-page">
+    <main class="create-main">
+      <div class="breadcrumb-row">
+        <div class="breadcrumb">
+          <span class="link" @click="$router.push('/homePage/computeMarket')"> <i class="iconfont icon-icon_arrow_left"></i> 返回算力市场</span>
+        </div>
+      </div>
+
+      <section class="content-card">
+        <div class="card-header">
+          <h2>计费方式:</h2>
+          <button type="button" class="link-btn">计费规则</button>
+        </div>
+        <div class="option-list">
+          <button
+            v-for="option in billingOptions"
+            :key="option.value"
+            type="button"
+            class="option-btn"
+            :class="{ active: billingType === option.value }"
+            @click="billingType = option.value"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+        <p class="card-tip">创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准</p>
+      </section>
+
+      <section class="content-card">
+        <div class="card-header">
+          <h2>选择主机:</h2>
+        </div>
+
+        <div class="host-table-wrap">
+          <table class="host-table">
+            <thead>
+              <tr>
+                <th></th>
+                <th>主机ID</th>
+                <th>算力型号/显存</th>
+                <th>空闲GPU</th>
+                <th>每GPU分配</th>
+                <th>CPU型号</th>
+                <th>硬盘</th>
+                <th>驱动/CUDA</th>
+                <th>价格(单卡)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="host in hosts"
+                :key="host.id"
+                :class="{ selected: selectedHostId === host.id }"
+                @click="selectedHostId = host.id"
+              >
+                <td>
+                  <span class="radio-dot"></span>
+                </td>
+                <td class="host-name">{{ host.name }}</td>
+                <td>
+                  <strong class="gpu-name">{{ host.gpu }}</strong>
+                  <span class="gpu-memory"> {{ host.memory }}</span>
+                </td>
+                <td><strong class="free-count">{{ host.freeGpu }}</strong></td>
+                <td>{{ host.allocation }}</td>
+                <td class="muted small">{{ host.cpu }}</td>
+                <td class="muted small">{{ host.disk }}</td>
+                <td class="muted small">{{ host.driver }}</td>
+                <td>
+                  <strong class="price">¥{{ host.price }}/时</strong>
+                  <span class="origin-price">¥{{ host.originalPrice }}/时</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="field-block">
+          <h3>GPU数量:</h3>
+          <div class="option-list option-list--compact">
+            <button
+              v-for="count in gpuCounts"
+              :key="count"
+              type="button"
+              class="option-btn gpu-count-btn"
+              :class="{ active: gpuCount === count }"
+              @click="gpuCount = count"
+            >
+              {{ count }}
+            </button>
+          </div>
+        </div>
+
+        <div class="disk-row">
+          <span>数据盘: 免费50GB</span>
+          <label>
+            <input v-model="needExpandDisk" type="checkbox">
+            <span>需要扩容</span>
+          </label>
+          <div v-if="needExpandDisk" class="disk-input">
+            <input v-model.number="expandDiskSize" type="number" min="50">
+            <span>GB</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="spec-bar">
+        <strong>实例规格:</strong>
+        <span>{{ specSummary }}</span>
+      </section>
+
+      <section class="content-card">
+        <div class="card-header">
+          <h2>镜像:</h2>
+          <button type="button" class="link-btn">没有我要的环境?</button>
+        </div>
+        <div class="option-list">
+          <button
+            v-for="option in imageTypes"
+            :key="option.value"
+            type="button"
+            class="option-btn image-option"
+            :class="{ active: imageType === option.value }"
+            @click="imageType = option.value"
+          >
+            {{ option.label }}
+            <em v-if="option.hot">HOT</em>
+          </button>
+        </div>
+        <p class="card-tip">基础镜像包含常用基本软件，如：深度学习框架、Miniconda等。如需其他软件可创建后安装</p>
+        <div class="select-wrap">
+          <select v-model="selectedEnv">
+            <option value="">请选择框架名称/框架版本/Python版本/CUDA版本</option>
+            <option value="pytorch">PyTorch 2.1.0 / Python 3.10 / CUDA 12.1</option>
+            <option value="tensorflow">TensorFlow 2.14.0 / Python 3.10 / CUDA 12.1</option>
+            <option value="paddle">PaddlePaddle 2.5.1 / Python 3.10 / CUDA 11.8</option>
+          </select>
+        </div>
+      </section>
+
+      <section class="content-card">
+        <div class="card-header">
+          <h2>优惠券:</h2>
+        </div>
+        <div class="select-wrap">
+          <select v-model="coupon">
+            <option value="">请选择</option>
+            <option value="10">新人专享满100减10元</option>
+            <option value="50">充值满500减50元</option>
+            <option value="100">VIP用户满1000减100元</option>
+          </select>
+        </div>
+      </section>
+
+      <aside class="submit-bar">
+        <div class="submit-bar__inner">
+          <div class="submit-costs">
+            <span>日常费用: ¥0.00/日</span>
+            <span>
+              配置费用
+              <strong>¥{{ estimatedPrice }}/时</strong>
+            </span>
+            <button type="button" class="detail-btn">费用明细</button>
+          </div>
+          <div class="submit-actions">
+            <!-- <span class="balance">账户余额 ¥0.00 <em>余额不足去充值</em></span> -->
+            <button type="button" class="cancel-btn" @click="$router.push('/homePage/computeMarket')">取消</button>
+            <button type="button" class="create-btn" @click="submitCreate">
+              <i class="iconfont icon-icon_guanji-kaiji"></i>
+              创建并开机
+            </button>
+          </div>
+        </div>
+      </aside>
+    </main>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'ComputeMarketCreateInstance',
+  data() {
+    return {
+      billingType: 'hourly',
+      selectedHostId: 'D42',
+      gpuCount: 1,
+      needExpandDisk: false,
+      expandDiskSize: 100,
+      imageType: 'basic',
+      selectedEnv: '',
+      coupon: '',
+      billingOptions: [
+        { label: '按量计费', value: 'hourly' },
+        { label: '包日', value: 'daily' },
+        { label: '包周', value: 'weekly' },
+        { label: '包月', value: 'monthly' },
+        { label: '包年', value: 'yearly' }
+      ],
+      gpuCounts: [1, 2, 3, 4, 5, 6, 7, 8],
+      imageTypes: [
+        { label: '基础镜像', value: 'basic' },
+        { label: '社区镜像', value: 'community', hot: true },
+        { label: '我的镜像', value: 'custom' }
+      ],
+      hosts: [
+        {
+          id: 'D42',
+          name: 'D42机',
+          gpu: 'RTX PRO 6000',
+          memory: '96GB',
+          freeGpu: '1 / 8',
+          allocation: 'CPU: 25核 内存: 120GB',
+          cpu: 'Xeon(R) Platinum 8470Q',
+          disk: '数据盘: 50GB 可扩容: 1622GB',
+          driver: '驱动: 595.58.03 CUDA: 13.2',
+          price: 5.98,
+          originalPrice: 7.97
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      loginStateVuex: state => state.login.loginState
+    }),
+    loginState() {
+      const userId = sessionStorage.getItem('userId')
+      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '')
+    },
+    selectedHost() {
+      return this.hosts.find(host => host.id === this.selectedHostId) || this.hosts[0]
+    },
+    dataDiskText() {
+      return this.needExpandDisk ? `数据盘：${this.expandDiskSize}GB SSD` : '数据盘：免费50GB SSD'
+    },
+    specSummary() {
+      const host = this.selectedHost
+      return `GPU型号：${host.gpu} *${this.gpuCount}卡 | CPU：25核心 | 内存：120GB | 系统盘：30GB | ${this.dataDiskText}`
+    },
+    estimatedPrice() {
+      return (Number(this.selectedHost.price) * this.gpuCount).toFixed(2)
+    }
+  },
+  created() {
+    const gpu = this.$route.query.gpu
+    if (gpu) {
+      this.hosts[0].gpu = String(gpu).split('/')[0].trim()
+      this.hosts[0].memory = (String(gpu).split('/')[1] || '96 GB').trim()
+    }
+  },
+  methods: {
+    submitCreate() {
+      if (!this.loginState) {
+        this.$message.warning('请先登录后再创建实例')
+        this.$router.push({
+          path: '/login',
+          query: {
+            fromPath: 'computeMarketCreateInstance',
+            redirect: this.$route.fullPath
+          }
+        })
+        return
+      }
+
+      if (!this.selectedEnv) {
+        this.$message.warning('请先选择镜像环境')
+        return
+      }
+      this.$message.success('实例创建请求已提交')
+      this.$router.push('/containerInstance/index')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.create-instance-page {
+  min-height: 100vh;
+  padding: 28px 0 88px;
+  background:
+    radial-gradient(circle at top left, rgba(30, 111, 255, 0.12), transparent 30%),
+    linear-gradient(180deg, #f7fbff 0%, #f5f7fb 100%);
+}
+
+.create-main {
+  width: min(1160px, calc(100% - 48px));
+  margin: 0 auto;
+}
+
+.breadcrumb-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #98a2b3;
+  font-size: 14px;
+
+  .link {
+    color: #1e6fff;
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  strong {
+    color: #344054;
+  }
+}
+
+.content-card,
+.spec-bar,
+.submit-bar {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(219, 234, 254, 0.78);
+  border-radius: 18px;
+  box-shadow: 0 12px 34px rgba(31, 72, 135, 0.08);
+}
+aside{
+  margin: 0;
+}
+.content-card {
+  padding: 24px;
+  margin-bottom: 18px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    color: #1f2937;
+    font-size: 16px;
+  }
+}
+
+.link-btn {
+  color: #1e6fff;
+  font-size: 14px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.option-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.option-list--compact {
+  margin-bottom: 0;
+}
+
+.option-btn {
+  min-width: 88px;
+  height: 40px;
+  padding: 0 18px;
+  color: #5f6b7a;
+  font-size: 14px;
+  font-weight: 600;
+  background: #fff;
+  border: 2px solid #e3e8f0;
+  border-radius: 12px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+
+  &.active,
+  &:hover {
+    color: #1e6fff;
+    border-color: #1e6fff;
+    background: #eef5ff;
+  }
+}
+
+.image-option em {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  padding: 2px 7px;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  background: #ef4444;
+  border-radius: 999px;
+}
+
+.card-tip {
+  margin: 0;
+  color: #8a94a6;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.host-table-wrap {
+  overflow-x: auto;
+  margin-bottom: 22px;
+  border: 1px solid #edf1f7;
+  border-radius: 16px;
+}
+
+.host-table {
+  width: 100%;
+  min-width: 1060px;
+  border-collapse: collapse;
+  font-size: 13px;
+
+  th {
+    padding: 14px 12px;
+    color: #667085;
+    text-align: left;
+    font-weight: 700;
+    background: #f8fafc;
+  }
+
+  td {
+    padding: 16px 12px;
+    color: #5f6b7a;
+    border-top: 1px solid #edf1f7;
+  }
+
+  tr {
+    cursor: pointer;
+  }
+
+  tr.selected {
+    background: #f2f7ff;
+  }
+}
+
+.radio-dot {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #1e6fff;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 4px #fff;
+  background: #1e6fff;
+}
+
+.host-name {
+  color: #1f2937;
+  font-weight: 700;
+}
+
+.gpu-name {
+  color: #1e6fff;
+}
+
+.gpu-memory,
+.muted {
+  color: #8a94a6;
+}
+
+.small {
+  font-size: 12px;
+}
+
+.free-count {
+  color: #10b981;
+}
+
+.price {
+  display: block;
+  color: #ef4444;
+  font-weight: 800;
+}
+
+.origin-price {
+  display: block;
+  color: #98a2b3;
+  font-size: 12px;
+  text-decoration: line-through;
+}
+
+.field-block {
+  margin-bottom: 18px;
+
+  h3 {
+    margin: 0 0 12px;
+    color: #1f2937;
+    font-size: 16px;
+  }
+}
+
+.gpu-count-btn {
+  min-width: 44px;
+  padding: 0 14px;
+}
+
+.disk-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 18px;
+  color: #5f6b7a;
+  font-size: 14px;
+
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+  }
+
+  input[type='checkbox'] {
+    width: 15px;
+    height: 15px;
+    accent-color: #1e6fff;
+  }
+}
+
+.disk-input {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  input {
+    width: 92px;
+    height: 34px;
+    padding: 0 10px;
+    border: 1px solid #dfe5ef;
+    border-radius: 10px;
+    outline: none;
+  }
+}
+
+.spec-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 18px 20px;
+  margin-bottom: 18px;
+  background: #eef5ff;
+
+  strong {
+    flex-shrink: 0;
+    color: #1e6fff;
+    font-size: 16px;
+  }
+
+  span {
+    color: #344054;
+    font-size: 14px;
+    line-height: 1.7;
+  }
+}
+
+.select-wrap {
+  position: relative;
+
+  select {
+    width: 100%;
+    height: 46px;
+    padding: 0 14px;
+    color: #667085;
+    background: #fff;
+    border: 1px solid #dfe5ef;
+    border-radius: 12px;
+    outline: none;
+  }
+}
+
+.submit-bar {
+  position: fixed;
+  right: 0;
+  bottom: 0 !important;
+  left: 0;
+  z-index: 30;
+  width: 100%;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.98);
+  border: none;
+  border-top: 1px solid rgba(223, 229, 239, 0.95);
+  border-radius: 0;
+  box-shadow: 0 -10px 30px rgba(31, 72, 135, 0.08);
+  backdrop-filter: blur(10px);
+}
+
+.submit-bar__inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  width: min(1600px, calc(100% - 48px));
+  min-height: 86px;
+  margin: 0 auto;
+  padding: 18px 0;
+}
+
+.submit-costs,
+.submit-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.submit-costs span,
+.balance {
+  color: #667085;
+  font-size: 14px;
+}
+
+.submit-costs strong {
+  color: #ef4444;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.detail-btn {
+  color: #1e6fff;
+  font-size: 13px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.balance em {
+  margin-left: 6px;
+  color: #ef4444;
+  font-size: 12px;
+  font-style: normal;
+}
+
+.cancel-btn,
+.create-btn {
+  height: 48px;
+  padding: 0 26px;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel-btn {
+  color: #667085;
+  background: #fff;
+  border: 1px solid #dfe5ef;
+
+  &:hover {
+    color: #1e6fff;
+    border-color: #1e6fff;
+  }
+}
+
+.create-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #fff;
+  background: linear-gradient(135deg, #1e6fff, #43a3ff);
+  border: none;
+  box-shadow: 0 10px 20px rgba(30, 111, 255, 0.24);
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 24px rgba(30, 111, 255, 0.3);
+  }
+
+  i {
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 768px) {
+  .create-main {
+    width: calc(100% - 24px);
+  }
+
+  .content-card {
+    padding: 18px;
+  }
+
+  .card-header,
+  .spec-bar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .submit-bar__inner {
+    width: calc(100% - 24px);
+    min-height: auto;
+    align-items: stretch;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 0;
+  }
+
+  .submit-costs,
+  .submit-actions {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .create-btn {
+    flex: 1;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/computeMarket/index.vue b/f/web-kboss/src/views/homePage/computeMarket/index.vue
new file mode 100644
index 0000000..c20a48c
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/computeMarket/index.vue
@@ -0,0 +1,1010 @@
+<template>
+  <div class="compute-market-page">
+    <main class="market-main">  
+      <section class="filter-section">
+        <div class="filter-toolbar">
+          <div>
+            <h2>资源筛选</h2>
+            <p>组合筛选条件，快速定位合适算力规格</p>
+          </div>
+          <button type="button" class="reset-btn" @click="resetFilters">重置筛选</button>
+        </div>
+        <div v-for="group in filterGroups" :key="group.key" class="filter-row">
+          <div class="filter-label">{{ group.label }}</div>
+          <div class="filter-options" :class="{ 'filter-options--checkbox': group.type === 'checkbox' }">
+            <template v-if="group.type === 'checkbox'">
+              <label
+                v-for="option in group.options"
+                :key="option.value"
+                class="checkbox-item"
+                :class="{ disabled: option.disabled }"
+              >
+                <input
+                  type="checkbox"
+                  :checked="selectedGpuModels.includes(option.value)"
+                  :disabled="option.disabled"
+                  @change="handleGpuModelChange(option.value)"
+                >
+                <span>
+                  {{ option.label }}
+                  <em v-if="option.count" :class="{ muted: option.disabled }">{{ option.count }}</em>
+                </span>
+              </label>
+            </template>
+            <template v-else>
+              <button
+                v-for="option in group.options"
+                :key="option.value"
+                class="filter-btn"
+                :class="{ active: selectedFilters[group.key] === option.value, 'filter-btn--square': group.key === 'gpuCount' }"
+                type="button"
+                @click="setFilter(group.key, option.value)"
+              >
+                {{ option.label }}
+              </button>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <section class="result-bar">
+        <div class="result-count">
+          共找到 <strong>{{ filteredResources.length }}</strong> 条符合条件的算力资源
+        </div>
+        <div class="sort-box">
+          <span>排序：</span>
+          <select v-model="sortType" @change="currentPage = 1">
+            <option value="priceAsc">价格从低到高</option>
+            <option value="priceDesc">价格从高到低</option>
+            <option value="performance">性能优先</option>
+            <option value="latest">最新上架</option>
+          </select>
+        </div>
+      </section>
+
+      <section class="resource-list">
+        <article v-for="resource in pagedResources" :key="resource.id" class="resource-card">
+          <div class="resource-header">
+            <div>
+              <div class="resource-title">
+                <span>{{ resource.region }} / {{ resource.machine }} | {{ resource.id }}</span>
+                <em :class="['status-badge', resource.statusType]">{{ resource.status }}</em>
+              </div>
+              <div class="resource-meta">
+                <span>可租用至：{{ resource.availableUntil }}</span>
+                <span class="gpu-name">{{ resource.gpu }}</span>
+                <span>空闲/总量 <strong :class="resource.statusType">{{ resource.free }} / {{ resource.total }}</strong></span>
+              </div>
+            </div>
+            <div class="gpu-chip">{{ resource.gpu.split('/')[0].trim() }}</div>
+          </div>
+
+          <div class="config-grid">
+            <div v-for="config in resource.configs" :key="config.title" class="config-card">
+              <div class="config-title">
+                <span class="config-icon" :class="config.iconClass">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <path
+                      v-if="config.type === 'gpu'"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                    />
+                    <path
+                      v-else-if="config.type === 'disk'"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"
+                    />
+                    <path
+                      v-else
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                    />
+                  </svg>
+                </span>
+                <strong>{{ config.title }}</strong>
+              </div>
+              <p v-for="line in config.lines" :key="line">{{ line }}</p>
+            </div>
+          </div>
+
+          <div class="price-row">
+            <div class="price-left">
+              <span class="price">¥{{ resource.price }}</span>
+              <span class="unit">/时</span>
+              <span class="original-price">¥{{ resource.originalPrice }}/时</span>
+              <span class="discount">{{ resource.discount }}</span>
+            </div>
+            <div class="price-action">
+              <span>会员最低享{{ resource.discount }} ¥{{ resource.price }}/时</span>
+              <button type="button" :class="['rent-btn', resource.statusType]" @click="handleRent(resource)">
+                <i class="iconfont icon-gouwuchekong"></i>
+                {{ resource.actionText }}
+              </button>
+            </div>
+          </div>
+        </article>
+      </section>
+
+      <div v-if="!pagedResources.length" class="empty-state">
+        暂无符合条件的算力资源，请调整筛选条件
+      </div>
+
+      <div v-if="totalPages > 1" class="pagination">
+        <button type="button" :disabled="currentPage === 1" @click="goPage(currentPage - 1)">&lt;</button>
+        <button
+          v-for="item in visiblePageItems"
+          :key="item.key"
+          type="button"
+          :class="{ active: currentPage === item.page, ellipsis: item.ellipsis }"
+          :disabled="item.ellipsis"
+          @click="!item.ellipsis && goPage(item.page)"
+        >
+          {{ item.label }}
+        </button>
+        <button type="button" :disabled="currentPage === totalPages" @click="goPage(currentPage + 1)">&gt;</button>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComputeMarket',
+  data() {
+    return {
+      total: 128,
+      sortType: 'priceAsc',
+      currentPage: 1,
+      pageSize: 3,
+      marketStats: [
+        { label: '在线资源', value: '128' },
+        { label: '可用 GPU', value: '331' },
+        { label: '覆盖区域', value: '6' }
+      ],
+      selectedFilters: {
+        billing: 'usage', 
+        region: 'northwest-b',
+        zone: '',
+        gpuCount: '1'
+      },
+      selectedGpuModels: ['all'],
+      filterGroups: [
+        {
+          key: 'billing',
+          label: '计费方式',
+          options: [
+            { label: '按量计费', value: 'usage' },
+            { label: '包日', value: 'day' },
+            { label: '包周', value: 'week' },
+            { label: '包月', value: 'month' },
+            { label: '包年', value: 'year' }
+          ]
+        },
+        {
+          key: 'region',
+          label: '选择地区',
+          options: [
+            { label: '西北B区', value: 'northwest-b' },
+            { label: '北京B区', value: 'beijing-b' },
+            { label: '重庆A区', value: 'chongqing-a' },
+            { label: '内蒙B区', value: 'neimeng-b' },
+            { label: '北京A区', value: 'beijing-a' },
+            { label: '佛山区', value: 'foshan' }
+          ]
+        },
+        {
+          key: 'zone',
+          label: '专属分区',
+          options: [
+            { label: 'V100专区', value: 'v100' },
+            { label: 'A800专区', value: 'a800' },
+            { label: '摩尔线程专区', value: 'mthreads' },
+            { label: '华为昇腾专区', value: 'ascend' },
+            { label: 'L20专区', value: 'l20' }
+          ]
+        },
+        {
+          key: 'gpuModel',
+          label: 'GPU型号',
+          type: 'checkbox',
+          options: [
+            { label: '全部', value: 'all' },
+            { label: 'RTX 5090', value: 'rtx-5090', count: '(37/1728)' },
+            { label: 'RTX PRO 6000', value: 'rtx-pro-6000', count: '(246/1397)' },
+            { label: 'vGPU-32GB', value: 'vgpu-32gb', count: '(19/1810)' },
+            { label: 'vGPU-48GB', value: 'vgpu-48gb', count: '(21/786)' },
+            { label: 'H800', value: 'h800', count: '(1/96)' },
+            { label: 'RTX 4090D', value: 'rtx-4090d', count: '(2/1164)' },
+            { label: 'RTX 4090', value: 'rtx-4090', count: '(0/1879)', disabled: true },
+            { label: 'RTX 3090', value: 'rtx-3090', count: '(0/222)', disabled: true },
+            { label: 'RTX 3080x2', value: 'rtx-3080x2', count: '(0/368)', disabled: true },
+            { label: 'RTX 3080 Ti', value: 'rtx-3080-ti', count: '(0/380)', disabled: true },
+            { label: 'RTX A4000', value: 'rtx-a4000', count: '(0/24)', disabled: true },
+            { label: 'RTX 3060', value: 'rtx-3060', count: '(2/32)' },
+            { label: 'GTX 1080 Ti', value: 'gtx-1080-ti', count: '(0/14)', disabled: true },
+            { label: 'CPU', value: 'cpu', count: '(0/334)', disabled: true },
+            { label: 'CPU-close-HT', value: 'cpu-close-ht', count: '(0/6)', disabled: true },
+            { label: 'vGPU-48GB-350W', value: 'vgpu-48gb-350w', count: '(6/152)' }
+          ]
+        },
+        {
+          key: 'gpuCount',
+          label: 'GPU数量',
+          options: ['1', '2', '3', '4', '5', '6', '7', '8', '10', '12'].map(value => ({ label: value, value }))
+        }
+      ],
+      resources: []
+    }
+  },
+  computed: {
+    filteredResources() {
+      const selectedModels = this.selectedGpuModels
+      const rows = this.resources.filter(resource => {
+        const billingMatched = resource.billingTypes.includes(this.selectedFilters.billing)
+        const regionMatched = resource.regionValue === this.selectedFilters.region
+        const zoneMatched = !this.selectedFilters.zone || resource.zone === this.selectedFilters.zone
+        const gpuCountMatched = Number(resource.gpuCount) >= Number(this.selectedFilters.gpuCount)
+        const modelMatched = selectedModels.includes('all') || selectedModels.includes(resource.gpuModelValue)
+        return billingMatched && regionMatched && zoneMatched && gpuCountMatched && modelMatched
+      })
+
+      return rows.sort((a, b) => {
+        if (this.sortType === 'priceDesc') return Number(b.price) - Number(a.price)
+        if (this.sortType === 'performance') return b.performance - a.performance
+        if (this.sortType === 'latest') return b.createdAt - a.createdAt
+        return Number(a.price) - Number(b.price)
+      })
+    },
+    totalPages() {
+      return Math.max(Math.ceil(this.filteredResources.length / this.pageSize), 1)
+    },
+    pagedResources() {
+      const start = (this.currentPage - 1) * this.pageSize
+      return this.filteredResources.slice(start, start + this.pageSize)
+    },
+    visiblePageItems() {
+      const makePage = page => ({ key: `page-${page}`, page, label: page })
+      if (this.totalPages <= 5) {
+        return Array.from({ length: this.totalPages }, (_, index) => makePage(index + 1))
+      }
+
+      if (this.currentPage <= 3) {
+        return [
+          makePage(1),
+          makePage(2),
+          makePage(3),
+          { key: 'ellipsis-right', label: '...', ellipsis: true },
+          makePage(this.totalPages)
+        ]
+      }
+
+      if (this.currentPage >= this.totalPages - 2) {
+        return [
+          makePage(1),
+          { key: 'ellipsis-left', label: '...', ellipsis: true },
+          makePage(this.totalPages - 2),
+          makePage(this.totalPages - 1),
+          makePage(this.totalPages)
+        ]
+      }
+
+      return [
+        makePage(1),
+        { key: 'ellipsis-left', label: '...', ellipsis: true },
+        makePage(this.currentPage),
+        { key: 'ellipsis-right', label: '...', ellipsis: true },
+        makePage(this.totalPages)
+      ]
+    }
+  },
+  created() {
+    this.resources = this.buildMockResources()
+  },
+  methods: {
+    setFilter(key, value) {
+      if (key === 'zone' && this.selectedFilters.zone === value) {
+        this.selectedFilters.zone = ''
+      } else {
+        this.selectedFilters[key] = value
+      }
+      this.currentPage = 1
+    },
+    resetFilters() {
+      this.selectedFilters = {
+        billing: 'usage',
+        region: 'northwest-b',
+        zone: '',
+        gpuCount: '1'
+      }
+      this.selectedGpuModels = ['all']
+      this.sortType = 'priceAsc'
+      this.currentPage = 1
+    },
+    handleGpuModelChange(value) {
+      if (value === 'all') {
+        this.selectedGpuModels = ['all']
+        this.currentPage = 1
+        return
+      }
+
+      const withoutAll = this.selectedGpuModels.filter(item => item !== 'all')
+      if (withoutAll.includes(value)) {
+        const next = withoutAll.filter(item => item !== value)
+        this.selectedGpuModels = next.length ? next : ['all']
+        this.currentPage = 1
+        return
+      }
+
+      this.selectedGpuModels = [...withoutAll, value]
+      this.currentPage = 1
+    },
+    goPage(page) {
+      this.currentPage = Math.min(Math.max(page, 1), this.totalPages)
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    },
+    buildMockResources() {
+      const rows = [
+        ['cc6a41b03a', '西北B区', 'northwest-b', '268机', 'l20', 'rtx-5090', 'RTX 5090 / 32 GB', 1, 8, 2.78, 2.93, '9.5折', '2027-01-01', 980, ['usage', 'day', 'week', 'month']],
+        ['f9d72a11be', '西北B区', 'northwest-b', 'D42机', 'a800', 'rtx-pro-6000', 'RTX PRO 6000 / 96 GB', 1, 8, 5.98, 7.97, '7.5折', '2027-02-15', 1180, ['usage', 'day', 'week']],
+        ['83ad77c201', '西北B区', 'northwest-b', '190机', 'v100', 'vgpu-32gb', 'vGPU-32GB / 32 GB', 4, 16, 1.26, 1.58, '8折', '2026-11-12', 620, ['usage', 'month', 'year']],
+        ['72c81e59ad', '西北B区', 'northwest-b', '221机', 'l20', 'vgpu-48gb-350w', 'vGPU-48GB-350W / 48 GB', 6, 8, 2.16, 2.4, '9折', '2026-10-08', 760, ['usage', 'day', 'month']],
+        ['bf72c9e18d', '北京B区', 'beijing-b', '156机', 'a800', 'rtx-4090d', 'RTX 4090D / 24 GB', 2, 16, 1.85, 2.05, '9折', '2026-12-31', 820, ['usage', 'day', 'week', 'month']],
+        ['d91b4420fc', '北京B区', 'beijing-b', '233机', 'mthreads', 'vgpu-48gb', 'vGPU-48GB / 48 GB', 3, 12, 2.05, 2.46, '8.3折', '2026-08-18', 700, ['usage', 'month', 'year']],
+        ['a8f632d1ca', '北京B区', 'beijing-b', '88机', 'v100', 'rtx-3060', 'RTX 3060 / 12 GB', 2, 8, 0.58, 0.72, '8折', '2026-07-21', 360, ['usage', 'day']],
+        ['cb395e77a0', '重庆A区', 'chongqing-a', '71机', 'ascend', 'vgpu-48gb', 'vGPU-48GB / 48 GB', 4, 16, 1.96, 2.18, '9折', '2026-12-01', 680, ['usage', 'day', 'week']],
+        ['c1fd9026bb', '重庆A区', 'chongqing-a', '103机', 'l20', 'rtx-5090', 'RTX 5090 / 32 GB', 2, 8, 2.88, 3.2, '9折', '2027-01-20', 960, ['usage', 'day', 'month']],
+        ['a3f8d21c4e', '内蒙B区', 'neimeng-b', '89机', 'a800', 'h800', 'H800 / 80 GB', 1, 96, 18.5, 20.56, '9折', '2026-09-30', 1400, ['usage', 'day', 'week', 'month']],
+        ['e27caa1904', '内蒙B区', 'neimeng-b', '206机', 'ascend', 'vgpu-48gb-350w', 'vGPU-48GB-350W / 48 GB', 6, 12, 2.08, 2.31, '9折', '2026-10-30', 740, ['usage', 'month', 'year']],
+        ['f203c9b817', '内蒙B区', 'neimeng-b', '117机', 'mthreads', 'vgpu-32gb', 'vGPU-32GB / 32 GB', 8, 16, 1.18, 1.48, '8折', '2026-08-05', 600, ['usage', 'day', 'week']],
+        ['b7e0441f8e', '北京A区', 'beijing-a', '35机', 'l20', 'rtx-4090d', 'RTX 4090D / 24 GB', 4, 8, 1.92, 2.13, '9折', '2026-12-18', 830, ['usage', 'day', 'month']],
+        ['f845d110be', '北京A区', 'beijing-a', '63机', 'a800', 'rtx-pro-6000', 'RTX PRO 6000 / 96 GB', 2, 8, 6.28, 7.85, '8折', '2027-03-01', 1160, ['usage', 'week', 'month', 'year']],
+        ['9cad11e372', '北京A区', 'beijing-a', '99机', 'v100', 'rtx-3060', 'RTX 3060 / 12 GB', 3, 6, 0.62, 0.78, '8折', '2026-06-28', 340, ['usage', 'day']],
+        ['58e2d0ab34', '佛山区', 'foshan', 'F12机', 'mthreads', 'vgpu-48gb', 'vGPU-48GB / 48 GB', 2, 8, 1.98, 2.35, '8.5折', '2026-11-25', 690, ['usage', 'day', 'week']],
+        ['6b9ab3c45d', '佛山区', 'foshan', 'F31机', 'ascend', 'vgpu-32gb', 'vGPU-32GB / 32 GB', 5, 10, 1.15, 1.44, '8折', '2026-09-19', 610, ['usage', 'month', 'year']],
+        ['905adcef72', '佛山区', 'foshan', 'F56机', 'l20', 'rtx-5090', 'RTX 5090 / 32 GB', 1, 4, 2.92, 3.25, '9折', '2027-02-06', 990, ['usage', 'day', 'week']]
+      ]
+
+      return rows.map((row, index) => this.createResource(row, index))
+    },
+    createResource(row, index) {
+      const [id, region, regionValue, machine, zone, gpuModelValue, gpu, free, total, price, originalPrice, discount, availableUntil, performance, billingTypes] = row
+      const statusType = free <= 1 ? 'warning' : 'available'
+      const cpuCore = gpu.includes('H800') ? 64 : gpu.includes('PRO 6000') ? 25 : gpu.includes('5090') ? 25 : 20
+      const memory = gpu.includes('H800') ? 256 : gpu.includes('PRO 6000') ? 120 : gpu.includes('48') ? 96 : 64
+      const cuda = gpu.includes('5090') ? '≤ 13.0' : gpu.includes('H800') ? '≤ 12.4' : '≤ 12.2'
+      const driver = gpu.includes('5090') ? '580.76.05' : gpu.includes('H800') ? '560.28.03' : '535.129.03'
+      return {
+        id,
+        region,
+        regionValue,
+        machine,
+        zone,
+        gpuModelValue,
+        billingTypes,
+        status: free <= 1 ? '紧张' : '可租用',
+        statusType,
+        availableUntil,
+        gpu,
+        free,
+        total,
+        gpuCount: free,
+        price: Number(price).toFixed(2),
+        originalPrice: Number(originalPrice).toFixed(2),
+        discount,
+        performance,
+        createdAt: Date.now() - index * 86400000,
+        actionText: free <= 1 ? '立即抢租' : `${free}卡可租`,
+        configs: [
+          { title: '每GPU分配', type: 'gpu', iconClass: 'blue', lines: [`CPU：${cpuCore} 核，Xeon(R) Platinum 8470Q`, `内存：${memory} GB`] },
+          { title: '硬盘', type: 'disk', iconClass: 'blue', lines: ['系统盘：30 GB', `数据盘：50 GB，可扩容 ${free * 720 + 1150} GB`] },
+          { title: '软件环境', type: 'software', iconClass: 'cyan', lines: [`GPU驱动：${driver}`, `CUDA版本：${cuda}`] }
+        ]
+      }
+    },
+    handleRent(resource) {
+      this.$router.push({
+        path: '/homePage/computeMarket/createInstance',
+        query: {
+          hostId: resource.id,
+          gpu: resource.gpu,
+          region: resource.region
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.compute-market-page {
+  min-height: 100vh;
+  padding: 28px 0 8px;
+  background:
+    radial-gradient(circle at top left, rgba(64, 158, 255, 0.18), transparent 34%),
+    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
+    linear-gradient(180deg, #f7fbff 0%, #f5f7fb 100%);
+}
+
+.market-main {
+  width: min(1280px, calc(100% - 48px));
+  margin: 0 auto;
+}
+
+
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 620px;
+  color: #fff;
+
+  .hero-kicker {
+    display: inline-flex;
+    margin-bottom: 12px;
+    padding: 5px 12px;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    letter-spacing: 0.04em;
+    background: rgba(255, 255, 255, 0.16);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 999px;
+  }
+
+  h1 {
+    margin: 0 0 10px;
+    font-size: 32px;
+    line-height: 1.2;
+  }
+
+  p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.86);
+    font-size: 15px;
+    line-height: 1.8;
+  }
+}
+
+.hero-stats {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 108px);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.hero-stat-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 92px;
+  padding: 14px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 18px;
+  backdrop-filter: blur(10px);
+
+  strong {
+    color: #fff;
+    font-size: 26px;
+    line-height: 1;
+  }
+
+  span {
+    margin-top: 10px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 13px;
+  }
+}
+
+.filter-section,
+.resource-card {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(219, 234, 254, 0.75);
+  border-radius: 18px;
+  box-shadow: 0 12px 34px rgba(31, 72, 135, 0.08);
+}
+
+.filter-section {
+  overflow: hidden;
+}
+
+.filter-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 22px 24px;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), rgba(255, 255, 255, 0.95));
+  // border-bottom: 1px solid rgba(229, 231, 235, 0.72);
+
+  h2 {
+    margin: 0 0 6px;
+    color: #111827;
+    font-size: 18px;
+  }
+
+  p {
+    margin: 0;
+    color: #8a94a6;
+    font-size: 13px;
+  }
+}
+
+.reset-btn {
+  height: 36px;
+  padding: 0 14px;
+  color: #1e6fff;
+  font-size: 13px;
+  background: #eef5ff;
+  border: 1px solid #cfe0ff;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #e3efff;
+  }
+}
+
+.filter-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 18px 24px;
+  // border-bottom: 1px solid rgba(229, 231, 235, 0.72);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.filter-label {
+  width: 86px;
+  flex-shrink: 0;
+  padding-top: 9px;
+  color: #667085;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.filter-options {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-options--checkbox {
+  gap: 12px 22px;
+}
+
+.filter-btn {
+  min-width: 76px;
+  height: 40px;
+  padding: 0 18px;
+  color: #596579;
+  font-size: 14px;
+  font-weight: 500;
+  background: #fff;
+  border: 1px solid #dfe5ef;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover,
+  &.active {
+    color: #1e6fff;
+    border-color: #1e6fff;
+    background: #eef5ff;
+    box-shadow: 0 8px 16px rgba(30, 111, 255, 0.12);
+  }
+}
+
+.filter-btn--square {
+  min-width: 40px;
+  width: 40px;
+  padding: 0;
+}
+
+.checkbox-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #5f6b7a;
+  font-size: 14px;
+  cursor: pointer;
+
+  input {
+    width: 14px;
+    height: 14px;
+    accent-color: #1e6fff;
+  }
+
+  em {
+    color: #10b981;
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  &.disabled {
+    color: #a5adba;
+    cursor: not-allowed;
+  }
+
+  .muted {
+    color: #a5adba;
+  }
+}
+
+.result-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 24px 0 18px;
+}
+
+.result-count {
+  color: #667085;
+  font-size: 14px;
+
+  strong {
+    color: #1e6fff;
+    font-size: 18px;
+  }
+}
+
+.sort-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #667085;
+  font-size: 14px;
+
+  select {
+    height: 38px;
+    padding: 0 38px 0 14px;
+    color: #344054;
+    background: #fff;
+    border: 1px solid #dfe5ef;
+    border-radius: 12px;
+    outline: none;
+  }
+}
+
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.empty-state {
+  margin: 28px 0;
+  padding: 44px 20px;
+  color: #8a94a6;
+  font-size: 15px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px dashed #cfe0ff;
+  border-radius: 18px;
+}
+
+.resource-card {
+  padding: 24px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 16px 40px rgba(31, 72, 135, 0.12);
+  }
+}
+
+.resource-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.resource-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+  color: #111827;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.status-badge {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+
+  &.available {
+    color: #059669;
+    background: #dff8ee;
+  }
+
+  &.warning {
+    color: #ea580c;
+    background: #ffedd5;
+  }
+}
+
+.resource-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 28px;
+  color: #667085;
+  font-size: 14px;
+
+  .gpu-name {
+    color: #1e6fff;
+    font-weight: 600;
+  }
+
+  strong {
+    &.available {
+      color: #10b981;
+    }
+
+    &.warning {
+      color: #f97316;
+    }
+  }
+}
+
+.gpu-chip {
+  align-self: flex-start;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  color: #1e6fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: #eef5ff;
+  border: 1px solid #d7e6ff;
+  border-radius: 999px;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.config-card {
+  padding: 16px;
+  background: #f8fbff;
+  border: 1px solid #e8eef7;
+  border-radius: 14px;
+}
+
+.config-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: #344054;
+  font-size: 14px;
+}
+
+.config-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  &.blue {
+    color: #1e6fff;
+    background: #dbeafe;
+  }
+
+  &.cyan {
+    color: #0891b2;
+    background: #cffafe;
+  }
+}
+
+.config-card p {
+  margin: 7px 0 0;
+  color: #5f6b7a;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #edf1f7;
+}
+
+.price-left,
+.price-action {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.price {
+  color: #f43f5e;
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.unit,
+.original-price,
+.price-action span {
+  color: #8a94a6;
+  font-size: 13px;
+}
+
+.original-price {
+  text-decoration: line-through;
+}
+
+.discount {
+  padding: 4px 10px;
+  color: #b45309;
+  font-size: 12px;
+  font-weight: 700;
+  background: #fef3c7;
+  border-radius: 999px;
+}
+
+.rent-btn {
+  min-width: 104px;
+  height: 40px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &.available {
+    background: linear-gradient(135deg, #1e6fff, #43a3ff);
+    box-shadow: 0 10px 20px rgba(30, 111, 255, 0.24);
+  }
+
+  &.warning {
+    background: linear-gradient(135deg, #f97316, #f59e0b);
+    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.22);
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin: 36px 0 12px;
+
+  button {
+    width: 40px;
+    height: 40px;
+    color: #5f6b7a;
+    background: #fff;
+    border: 1px solid #dfe5ef;
+    border-radius: 12px;
+    cursor: pointer;
+
+    &.active {
+      color: #fff;
+      background: #1e6fff;
+      border-color: #1e6fff;
+      box-shadow: 0 8px 16px rgba(30, 111, 255, 0.22);
+    }
+
+    &:disabled {
+      color: #c1c7d0;
+      cursor: not-allowed;
+    }
+  }
+
+  span {
+    color: #98a2b3;
+  }
+}
+
+@media (max-width: 900px) {
+  .market-main {
+    width: calc(100% - 24px);
+  }
+
+  .market-hero,
+  .filter-row,
+  .result-bar,
+  .price-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero-stats {
+    width: 100%;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .filter-label {
+    width: auto;
+    padding-top: 0;
+  }
+
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .price-action {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 640px) {
+  .compute-market-page {
+    padding-top: 16px;
+  }
+
+  .market-hero {
+    padding: 22px 18px;
+    border-radius: 18px;
+  }
+
+  .hero-content h1 {
+    font-size: 26px;
+  }
+
+  .hero-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-toolbar,
+  .resource-header,
+  .price-action,
+  .price-left {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .resource-card {
+    padding: 18px;
+  }
+
+  .resource-title {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .price {
+    font-size: 26px;
+  }
+
+  .rent-btn {
+    width: 100%;
+  }
+}
+</style>