行业需求

assets/scss/cus-client/cus-client-page.scss

@@ -220,8 +220,80 @@
     .client-demand-box{
       background: #F9FAFF;
       padding-bottom: 80px;
+      //tab
+      .demand-box-tab{
+        margin-top: 16px;
+          .el-tabs__nav div:first-child{border-radius: 4px 0 0 4px;}
+          .el-tabs__nav div:last-child{border-radius: 0 4px 4px 0;}
+          .el-tabs__item{width:112px;height: 32px;line-height: 32px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;border: 1px solid #FCA20E;}
+          .el-tabs__item.is-active{background: #FEBF11;border-color:#FEBF11;color: rgba(255,255,255,0.85);}
+
+      }
+      //覆盖饿了么样式
+      .el-tabs__header{margin: 0 0 48px;}
+      .demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
+      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{border: 0}
+      .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
+      .demand-box-tab .el-tabs__nav{float: none;}
+
+      // 考试ul
+      .demand-tab-list{
+        margin-right: -34px;
+        li{
+          width: 128px;height: 134px;margin-right: 34px;display: inline-block;background:#fff;text-align: center;box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
+          border-radius: 8px;transition: 0.3s;
+          i{width: 48px;height: 48px;display: inline-block;background-repeat: no-repeat;margin-top: 24px;transition: 0.3s;}
+          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);margin-top: 16px;transition: 0.3s;}
+        }
+        li:last-child{margin-right: 0;}
+        li:hover,li.active{
+          background-image: url("~static/images/client/index/demand-li-bg.png");cursor: pointer;
+          p{color: rgba(255,255,255,0.85);}
+        }
+      }
+
+      .demand-kaoshi-list{
+        li:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1.svg");}}
+        li:hover:nth-child(1),li.active:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1-a.svg");} }
+        li:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2.svg");}}
+        li:hover:nth-child(2),li.active:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2-a.svg");} }
+        li:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3.svg");}}
+        li:hover:nth-child(3),li.active:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3-a.svg");} }
+        li:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4.svg");}}
+        li:hover:nth-child(4),li.active:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4-a.svg");} }
+        li:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5.svg");}}
+        li:hover:nth-child(5),li.active:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5-a.svg");} }
+        li:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6.svg");}}
+        li:hover:nth-child(6),li.active:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6-a.svg");} }
+      }
+      //考试详情（li对应div）
+      .demand-content-box{
+        padding: 16px;margin-top:24px;background: #1276FF;
+        border-radius: 8px;
+        margin-right: 22px;
+        h5{
+          @include setFontStyle(-4);
+          color: rgba(255,255,255,0.85);
+          margin-bottom: 8px;
+        }
+        p{@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;margin-bottom: 24px;}
+        .content-top-box{
+          padding-bottom: 16px;
+          margin-bottom: 16px;
+          border-bottom:1px solid rgba(255,255,255,0.65);
+          span{@include setFontStyle(-4);float:right;color: #FEBF11;}
+        }
+      }
+      // 图标div
+      .demand-icon-box{
+        display: inline-block;
+        text-align: center;
+        margin-right: 40px;
+        img{width: 48px;height: 48px;border-radius: 4px;display: block;margin: 0 auto}
+        span{@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-top: 8px;}
+      }
       // 行业ul
-      .industry-box{
+      /*.industry-box{
         margin-top: 10px;
         li{
           width: 25%;display: inline-block;margin-top: 38px;height: 112px;overflow: hidden;
@@ -240,7 +312,7 @@
         li:last-child:hover{
           cursor: pointer;
         }
-      }
+      }*/
     }
 
     /* 超过10万家客户的信任之选 */

pages/index.vue

@@ -89,9 +89,33 @@
 
     <!-- 行业学习需求 -->
     <div class="client-demand-box">
-      <div class="client-container">
+      <div class="client-container-middle">
         <h4 class="client-title">满足不同行业学习需求</h4>
-        <ul class="industry-box">
+        <el-tabs v-model="activeName" type="card" class="demand-box-tab">
+          <el-tab-pane label="考试系统" name="first">
+            <ul class="demand-tab-list demand-kaoshi-list">
+              <li :class="{'active':kaoshiClicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in kaoshiLiArray"><i></i><p>{{item}}</p></li>
+            </ul>
+            {{divClicked}}----{{kaoshiClicked}}
+            <el-collapse-transition>
+              <div v-if="divClicked===index" v-for="(item,index) in kaoshiDivArray " :key="index" class="demand-content-box">
+                {{divClicked===index}}-{{index}}
+                <div class="content-top-box">
+
+                  <h5>行业详情</h5>
+                  <p>{{item.demandText}}</p>
+                  <a :href="item.demandHref" class="fn-clear"><span>了解详情</span></a>
+                </div>
+                <div>
+                  <h5>客户案例</h5>
+                  <div v-for="item2 in item.demandLinkBox" class="demand-icon-box"><a><img :src="item2.img" alt="客户案例"><span>{{item2.demandName}}</span></a></div>
+                </div>
+              </div>
+            </el-collapse-transition>
+          </el-tab-pane>
+          <el-tab-pane label="培训系统" name="second">培训系统</el-tab-pane>
+        </el-tabs>
+        <!--<ul class="industry-box">
           <li>
             <img :src="demandImg1" alt="政府机构" />
             <div>
@@ -194,7 +218,7 @@
               <a @click="goThirdParty(11)">了解更多</a>
             </div>
           </li>
-        </ul>
+        </ul>-->
       </div>
     </div>
 
@@ -326,18 +350,6 @@
         topCarousels2: [],
         // 需求img
         bannerTelImg: require(`~/static/images/client/index/index-banner-screen.png`),
-        demandImg1: require(`~/static/images/client/index/index-demand-img1.png`),
-        demandImg2: require(`~/static/images/client/index/index-demand-img2.png`),
-        demandImg3: require(`~/static/images/client/index/index-demand-img3.png`),
-        demandImg4: require(`~/static/images/client/index/index-demand-img4.png`),
-        demandImg5: require(`~/static/images/client/index/index-demand-img5.png`),
-        demandImg6: require(`~/static/images/client/index/index-demand-img6.png`),
-        demandImg7: require(`~/static/images/client/index/index-demand-img7.png`),
-        demandImg8: require(`~/static/images/client/index/index-demand-img8.png`),
-        demandImg9: require(`~/static/images/client/index/index-demand-img9.png`),
-        demandImg10: require(`~/static/images/client/index/index-demand-img10.png`),
-        demandImg11: require(`~/static/images/client/index/index-demand-img11.png`),
-        demandImg12: require(`~/static/images/client/index/index-demand-img12.png`),
         // 客户logo
         customerImg1: require(`~/static/images/client/index/index-customer-img1.png`),
         customerImg2: require(`~/static/images/client/index/index-customer-img2.png`),
@@ -369,12 +381,65 @@
         certImg7: require(`~/static/images/client/index/index-cert-img7.jpg`),
         certImg8: require(`~/static/images/client/index/index-cert-img8.jpg`),
         activeIndex: '首页',
+        activeName: 'first',// tab页签
+        kaoshiClicked:0,
+        kaoshiLiArray:['政府机构','能源化工','信息产业','金融保险','交通运输','汽车制造'],
+        kaoshiDivArray:[
+          {
+            demandText:'现如今，互联网教育正以迅雷不及掩耳之势搅动市场，“智能学习”成了一个新的市场。教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，现在都可以通过选择一套合理化的方案来得到解决，麦塔不仅是考试出题软',
+            demandHref:'www.baidu.com',
+            demandLinkBox:[
+              {
+                img:require(`~/static/images/client/index/index-demand-icon1-1.svg`),
+                demandName:'国家能源'
+              },
+              {
+                img:require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                demandName:'营口消防'
+              },
+              {
+                img:require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                demandName:'同煤社保'
+              },
+            ],
+          },
+          {
+            demandText:'23',
+            demandHref:'www.baidu.com',
+            demandLinkBox:[
+              {
+                img:'222',
+                demandName:'2222'
+              },
+              {
+                img:'222',
+                demandName:'222'
+              },
+              {
+                img:'222',
+                demandName:'222'
+              },
+            ],
+          },
+        ],
       }
     },
     methods: {
       checkInfo() {
         this.$router.push({ name: 'introduction' })
       },
+      tabSwitch(data,index){
+        this.kaoshiClicked = index;
+
+        // this.newsClassifyId = data.newsClassifyId
+        // this.getMessage();
+
+      },
+    },
+    computed:   {
+      divClicked(){
+        return this.kaoshiClicked;
+      },
     },
   }
 </script>

static/images/client/index/index-demand-img1-a.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#FFF" d="M3.30901699 42L45.6396204 42C45.8548356 42 46.045905 42.137715 46.113962 42.3418861L47.7806287 47.3418861C47.8679526 47.6038578 47.7263726 47.8870178 47.4644009 47.9743416 47.4134177 47.9913361 47.3600281 48 47.3062871 48L.809016994 48C.532874619 48 .309016994 47.7761424.309016994 47.5.309016994 47.4223775.32708954 47.3458209.361803399 47.2763932L2.8618034 42.2763932C2.94649941 42.1070012 3.11963097 42 3.30901699 42zM24.0861198.424001548L44.497631 15.1897756C44.9451055 15.5134806 45.0454406 16.1386452 44.7217356 16.5861198 44.5336906 16.8460643 44.2323415 17 43.9115112 17L3.08848882 17C2.53620408 17 2.08848882 16.5522847 2.08848882 16 2.08848882 15.6791697 2.24242448 15.3778206 2.50236904 15.1897756L22.9138802.424001548C23.2636627.170967429 23.7363373.170967429 24.0861198.424001548z"/>
+    <rect width="5" height="26" x="10" y="16" fill="#FFF"/>
+    <rect width="5" height="26" x="21" y="16" fill="#FFF"/>
+    <rect width="5" height="26" x="32" y="16" fill="#FFF"/>
+    <circle cx="24" cy="9" r="3" fill="#2B5CFD"/>
+  </g>
+</svg>

static/images/client/index/index-demand-img1.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#2B5CFD" d="M3.30901699,42 L45.6396204,42 C45.8548356,42 46.045905,42.137715 46.113962,42.3418861 L47.7806287,47.3418861 C47.8679526,47.6038578 47.7263726,47.8870178 47.4644009,47.9743416 C47.4134177,47.9913361 47.3600281,48 47.3062871,48 L0.809016994,48 C0.532874619,48 0.309016994,47.7761424 0.309016994,47.5 C0.309016994,47.4223775 0.32708954,47.3458209 0.361803399,47.2763932 L2.8618034,42.2763932 C2.94649941,42.1070012 3.11963097,42 3.30901699,42 Z"/>
+    <path fill="#E8ECFF" d="M24.0861198,0.424001548 L44.497631,15.1897756 C44.9451055,15.5134806 45.0454406,16.1386452 44.7217356,16.5861198 C44.5336906,16.8460643 44.2323415,17 43.9115112,17 L3.08848882,17 C2.53620408,17 2.08848882,16.5522847 2.08848882,16 C2.08848882,15.6791697 2.24242448,15.3778206 2.50236904,15.1897756 L22.9138802,0.424001548 C23.2636627,0.170967429 23.7363373,0.170967429 24.0861198,0.424001548 Z"/>
+    <rect width="5" height="26" x="10" y="16" fill="#E8ECFF"/>
+    <rect width="5" height="26" x="21" y="16" fill="#E8ECFF"/>
+    <rect width="5" height="26" x="32" y="16" fill="#E8ECFF"/>
+    <circle cx="24" cy="9" r="3" fill="#7998FF"/>
+  </g>
+</svg>

static/images/client/index/index-demand-img2-a.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
+  <defs>
+    <polygon id="能源化工-白-a" points="10 0 20 0 30 39 0 39"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(10 7)">
+      <mask id="能源化工-白-b" fill="#fff">
+        <use xlink:href="#能源化工-白-a"/>
+      </mask>
+      <use fill="#FFF" xlink:href="#能源化工-白-a"/>
+      <rect width="22" height="1" x="4.508" y="2.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 15.508 3.232)"/>
+      <rect width="22" height="1" x="3.508" y="7.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 14.508 8.232)"/>
+      <rect width="25" height="1" x="2.417" y="14.245" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 14.917 14.745)"/>
+      <rect width="40" height="1" x="-10.035" y="19.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 9.965 20.31)"/>
+      <rect width="40" height="1" x=".965" y="32.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 20.965 33.31)"/>
+      <rect width="22" height="1" x="5.508" y="1.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -91.387)"/>
+      <rect width="22" height="1" x="3.508" y="7.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -74.045)"/>
+      <rect width="25" height="1" x="4.417" y="14.245" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -81.197)"/>
+      <rect width="40" height="1" x="-8.035" y="22.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -44.546)"/>
+      <rect width="40" height="1" x="-10.035" y="32.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="scale(-1 1) rotate(20 0 -23.203)"/>
+    </g>
+    <rect width="38.5" height="4" x="9.055" y="5.312" fill="#FFF" transform="rotate(10 28.305 7.312)"/>
+    <rect width="39" height="2" x="24.202" y="26.333" fill="#FFF" transform="rotate(101 43.702 27.333)"/>
+    <rect width="32" height="4" x="9" y="44" fill="#FFF"/>
+    <path fill="#FFF" d="M4.4534307,24 C6.91299256,24 8.9068614,18.627417 8.9068614,12 C8.9068614,5.372583 11.3664233,0 8.9068614,0 C6.44729954,0 0,5.372583 0,12 C0,18.627417 1.99386884,24 4.4534307,24 Z"/>
+    <rect width="2" height="25" x="4" y="23" fill="#FFF"/>
+  </g>
+</svg>

static/images/client/index/index-demand-img2.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="49" viewBox="0 0 48 49">
+  <defs>
+    <polygon id="能源化工-蓝-a" points="10 0 20 0 30 39 0 39"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(10 7)">
+      <mask id="能源化工-蓝-b" fill="#fff">
+        <use xlink:href="#能源化工-蓝-a"/>
+      </mask>
+      <use fill="#E8ECFF" xlink:href="#能源化工-蓝-a"/>
+      <rect width="22" height="1" x="4.508" y="2.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 15.508 3.232)"/>
+      <rect width="22" height="1" x="3.508" y="7.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 14.508 8.232)"/>
+      <rect width="25" height="1" x="2.417" y="14.245" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 14.917 14.745)"/>
+      <rect width="40" height="1" x="-10.035" y="19.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 9.965 20.31)"/>
+      <rect width="40" height="1" x=".965" y="32.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 20.965 33.31)"/>
+      <rect width="22" height="1" x="5.508" y="1.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -91.387)"/>
+      <rect width="22" height="1" x="3.508" y="7.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -74.045)"/>
+      <rect width="25" height="1" x="4.417" y="14.245" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -81.197)"/>
+      <rect width="40" height="1" x="-8.035" y="22.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -44.546)"/>
+      <rect width="40" height="1" x="-10.035" y="32.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -23.203)"/>
+    </g>
+    <rect width="38.5" height="4" x="9.055" y="5.312" fill="#2B5CFD" transform="rotate(10 28.305 7.312)"/>
+    <rect width="39" height="2" x="24.202" y="26.333" fill="#E8ECFF" transform="rotate(101 43.702 27.333)"/>
+    <rect width="32" height="4" x="9" y="44" fill="#2B5CFD"/>
+    <path fill="#E8ECFF" d="M4.4534307,24 C6.91299256,24 8.9068614,18.627417 8.9068614,12 C8.9068614,5.372583 11.3664233,0 8.9068614,0 C6.44729954,0 0,5.372583 0,12 C0,18.627417 1.99386884,24 4.4534307,24 Z"/>
+    <rect width="2" height="25" x="4" y="23" fill="#E8ECFF"/>
+  </g>
+</svg>

static/images/client/index/index-demand-img3-a.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
+  <defs>
+    <circle id="信息产业-白-a" cx="24" cy="24" r="24"/>
+    <circle id="信息产业-白-c" cx="10" cy="10" r="10"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="信息产业-白-b" fill="#fff">
+      <use xlink:href="#信息产业-白-a"/>
+    </mask>
+    <use fill="#FFF" xlink:href="#信息产业-白-a"/>
+    <circle cx="9" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-白-b)" opacity=".64"/>
+    <circle cx="39" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-白-b)" opacity=".64" transform="matrix(-1 0 0 1 78 0)"/>
+    <circle cx="24" cy="-8" r="24" stroke="#2B5CFD" mask="url(#信息产业-白-b)"/>
+    <circle cx="24" cy="57" r="24" stroke="#2B5CFD" mask="url(#信息产业-白-b)"/>
+    <rect width="48.5" height="1" x="-.75" y="23.75" fill="#7998FF" mask="url(#信息产业-白-b)" transform="rotate(90 23.5 24.25)"/>
+    <rect width="48" height="1" y="24" fill="#2B5CFD" mask="url(#信息产业-白-b)"/>
+    <g transform="translate(28)">
+      <mask id="信息产业-白-d" fill="#fff">
+        <use xlink:href="#信息产业-白-c"/>
+      </mask>
+      <use fill="#2B5CFD" xlink:href="#信息产业-白-c"/>
+      <text fill="#FFF" font-family="CalistoMT-BoldItalic, Calisto MT" font-size="16" font-style="italic" font-weight="bold" mask="url(#信息产业-白-d)">
+        <tspan x="7" y="14">i</tspan>
+      </text>
+    </g>
+  </g>
+</svg>

static/images/client/index/index-demand-img3.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="49" viewBox="0 0 48 49">
+  <defs>
+    <circle id="信息产业-蓝-a" cx="24" cy="24" r="24"/>
+    <circle id="信息产业-蓝-c" cx="10" cy="10" r="10"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="信息产业-蓝-b" fill="#fff">
+      <use xlink:href="#信息产业-蓝-a"/>
+    </mask>
+    <use fill="#E8ECFF" xlink:href="#信息产业-蓝-a"/>
+    <circle cx="9" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-蓝-b)" opacity=".64"/>
+    <circle cx="39" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-蓝-b)" opacity=".64" transform="matrix(-1 0 0 1 78 0)"/>
+    <circle cx="24" cy="-8" r="24" stroke="#7998FF" mask="url(#信息产业-蓝-b)"/>
+    <circle cx="24" cy="57" r="24" stroke="#7998FF" mask="url(#信息产业-蓝-b)"/>
+    <rect width="48.5" height="1" x="-.75" y="23.75" fill="#7998FF" mask="url(#信息产业-蓝-b)" transform="rotate(90 23.5 24.25)"/>
+    <rect width="48" height="1" y="24" fill="#7998FF" mask="url(#信息产业-蓝-b)"/>
+    <g transform="translate(28)">
+      <mask id="信息产业-蓝-d" fill="#fff">
+        <use xlink:href="#信息产业-蓝-c"/>
+      </mask>
+      <use fill="#2B5CFD" xlink:href="#信息产业-蓝-c"/>
+      <text fill="#FFF" fill-opacity=".85" font-family="CalistoMT-BoldItalic, Calisto MT" font-size="16" font-style="italic" font-weight="bold" mask="url(#信息产业-蓝-d)">
+        <tspan x="7" y="14">i</tspan>
+      </text>
+    </g>
+  </g>
+</svg>

static/images/client/index/index-demand-img5-a.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="40" height="33" x="4" y="4" fill="#FFF" rx="4"/>
+    <rect width="35" height="17" x="7" y="11" stroke="#2B5CFD" opacity=".64" rx="4"/>
+    <circle cx="10.5" cy="31.5" r="1.5" fill="#2B5CFD"/>
+    <circle cx="37.5" cy="31.5" r="1.5" fill="#2B5CFD"/>
+    <rect width="20" height="8" x="14" fill="#FFF" rx="2"/>
+    <rect width="18" height="1" x="15" y="4" fill="#2B5CFD" rx=".5"/>
+    <rect width="18" height="1" x="14.5" y="18.5" fill="#2B5CFD" rx=".5" transform="rotate(90 23.5 19)"/>
+    <path fill="#FFF" d="M13.2071068,35 L35.7810844,35 C35.9206334,35 36.0538328,35.0583188 36.1484861,35.1608599 L47.2254092,47.1608599 C47.4127111,47.3637703 47.4000579,47.6800998 47.1971475,47.8674017 C47.1047864,47.9526581 46.9837025,48 46.8580075,48 L1.20710678,48 C0.930964406,48 0.707106781,47.7761424 0.707106781,47.5 C0.707106781,47.3673918 0.759785201,47.2402148 0.853553391,47.1464466 L12.8535534,35.1464466 C12.9473216,35.0526784 13.0744985,35 13.2071068,35 Z"/>
+    <rect width="18" height="1" x="15" y="40" fill="#2B5CFD" rx=".5"/>
+    <rect width="24" height="1" x="12" y="44" fill="#2B5CFD" rx=".5"/>
+  </g>
+</svg>

static/images/client/index/index-demand-img5.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="40" height="33" x="4" y="4" fill="#E8ECFF" rx="4"/>
+    <rect width="35" height="17" x="7" y="11" stroke="#7998FF" opacity=".64" rx="4"/>
+    <circle cx="10.5" cy="31.5" r="1.5" fill="#7998FF"/>
+    <circle cx="37.5" cy="31.5" r="1.5" fill="#7998FF"/>
+    <rect width="20" height="8" x="14" fill="#7998FF" rx="2"/>
+    <rect width="18" height="1" x="15" y="4" fill="#E8ECFF" rx=".5"/>
+    <rect width="18" height="1" x="14.5" y="18.5" fill="#7998FF" rx=".5" transform="rotate(90 23.5 19)"/>
+    <path fill="#2B5CFD" d="M13.2071068,35 L35.7810844,35 C35.9206334,35 36.0538328,35.0583188 36.1484861,35.1608599 L47.2254092,47.1608599 C47.4127111,47.3637703 47.4000579,47.6800998 47.1971475,47.8674017 C47.1047864,47.9526581 46.9837025,48 46.8580075,48 L1.20710678,48 C0.930964406,48 0.707106781,47.7761424 0.707106781,47.5 C0.707106781,47.3673918 0.759785201,47.2402148 0.853553391,47.1464466 L12.8535534,35.1464466 C12.9473216,35.0526784 13.0744985,35 13.2071068,35 Z"/>
+    <rect width="18" height="1" x="15" y="40" fill="#E8ECFF" rx=".5"/>
+    <rect width="24" height="1" x="12" y="44" fill="#E8ECFF" rx=".5"/>
+  </g>
+</svg>