111

css/home/home.less

 @import '../common/base.less';
+@import '../common/font/iconfont.less';
 
 .width-1180 {
   width: 1180px;
@@ -94,15 +95,44 @@
         height: 241px;
         margin-top: 87px;
         box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
-        .header-form-navs{
-          height:90px;
-          .header-form-nav{
-            color:#575E66;
+
+        .header-form-navs {
+          height: 90px;
+          border-bottom: 1px solid #F0F4F7;
+
+          .header-form-nav {
+            color: #575E66;
             font-size: 16px;
-            &.active{
-              color:#2B2F33
+            cursor: pointer;
+            padding: 32px 65px 0 40px;
+            height: 90px;
+
+            &.active {
+              color: #2B2F33;
+              font-weight: 600;
+              border-bottom: 4px solid #E89721;
+
+              i {
+                color: #0081D2;
+                font-weight: normal;
               }
             }
+
+            i {
+              font-size: 27px;
+              margin-right: 10px;
+            }
+          }
+        }
+
+        .header-form-content {
+          .header-form-content-l {}
+
+          .header-form-content-r {
+            width: 167px;
+            height: 151px;
+            background-color:#E89721 ;
+          }
         }
       }
     }

index.html

@@ -67,11 +67,27 @@
                     factory to your door. <br />Fast
                     shipping from our factory near Hong Kong Aviation Hub.</p>
                 <div class="header-form">
-                    <div class="header-form-navs clr">
-                        <div class="header-form-nav">
-                            <i></i>
+                    <div class="header-form-navs clr boxsiz">
+                        <div class="header-form-nav fl boxsiz active">
+                            <i class="iconfont icondianluban lineBlock va-m"></i>
                             PCB Prototype
                         </div>
+                        <div class="header-form-nav fl boxsiz">
+                            <i class="iconfont iconjixieshou lineBlock va-m"></i>
+                            PCB Assembly
+                        </div>
+                        <div class="header-form-nav fl boxsiz">
+                            <i class="iconfont iconpcbban lineBlock va-m"></i>
+                            SMT-Stencil
+                        </div>
+                        <div class="header-form-nav fl boxsiz">
+                            <i class="iconfont iconkaiguan lineBlock va-m"></i>
+                            Membrane Switch
+                        </div>
+                    </div>
+                    <div class="header-form-content clr">
+                        <div class="header-form-content-l fl"></div>
+                        <div class="header-form-content-r fr"></div>
                     </div>
                 </div>
             </div>