头部，地址等一些微调

src/common/header.js

@@ -10,14 +10,16 @@ export default function () {
     $('.active', '.nav').removeClass('active');
     const $li = $(this).parent();
     $li.addClass('active');
-    if ($li.data('index') == 1) {
-      $introduce.slideToggle(300);
-    } else {
-      $introduce.slideUp(300);
-    }
     e.stopPropagation();
   });
-
+  $('.nav .company').on({
+    "mouseenter": function(){
+      $introduce.slideDown(300);
+    },
+    "mouseleave": function(){
+      $introduce.slideUp(300);
+    }
+  })
 }
 
 

src/pages/about/about.html

@@ -13,11 +13,11 @@
 <div class="header">
   <div class="header-box">
     <ul class="nav">
-      <li data-index="0">
-        <a href="/">首页 <br> HOME</a>
+      <li>
+        <a href="/">首页</a>
       </li>
-      <li class='active' data-index="1">
-        <a href="javascript:;">公司介绍 <br> COMPANY</a>
+      <li class='active company'>
+        <a href="javascript:;">公司介绍</a>
         <div class="introduce">
           <div class="left fl">
             <a href="/about.html">关于礼瀚</a>
@@ -33,11 +33,11 @@
           </p>
         </div>
       </li>
-      <li data-index="2">
-        <a href="/news.html">动态新闻 <br> NEWS</a>
+      <li>
+        <a href="/news.html">动态新闻</a>
       </li>
-      <li data-index="3">
-        <a href="/contact.html">联系我们 <br> CONTACT</a>
+      <li>
+        <a href="/contact.html">联系我们</a>
       </li>
     </ul>
   </div>
@@ -68,10 +68,13 @@
 <div class="footer">
   <div class="top">
     <div class="address-phone">
-      <address>浙江.杭州市玉皇山基金小镇甘水巷150号</address>
+      <address>
+        <i class="iconfont icon-dizhi"></i>
+        浙江.杭州市玉皇山基金小镇甘水巷150号
+      </address>
       <br/>
       <span class="phone">
-                <i></i>
+          <i class="iconfont icon-phone"></i>
           +86-0571-8773151
       </span>
     </div>

src/pages/contact/contact.html

@@ -13,11 +13,11 @@
 <div class="header">
   <div class="header-box">
     <ul class="nav">
-      <li data-index="0">
-        <a href="/">首页 <br> HOME</a>
+      <li>
+        <a href="/">首页</a>
       </li>
-      <li data-index="1">
-        <a href="javascript:;">公司介绍 <br> COMPANY</a>
+      <li class="company">
+        <a href="javascript:;">公司介绍</a>
         <div class="introduce">
           <div class="left fl">
             <a href="/about.html">关于礼瀚</a>
@@ -33,19 +33,17 @@
           </p>
         </div>
       </li>
-      <li data-index="2">
-        <a href="/news.html">动态新闻 <br> NEWS</a>
+      <li>
+        <a href="/news.html">动态新闻</a>
       </li>
-      <li class='active' data-index="3">
-        <a href="/contact.html">联系我们 <br> CONTACT</a>
+      <li class="active">
+        <a href="/contact.html">联系我们</a>
       </li>
     </ul>
   </div>
 </div>
 <div class="banner">
-  <div>
-    <img src="images/banner.jpg"/>
-  </div>
+  <img src="images/banner.jpg" alt="banner"/>
 </div>
 <div class="address-phone">
   <div class="address-phone-box clear-fl">

src/pages/contact/contact.less

@@ -2,19 +2,8 @@
 
 :global {
   #contact {
-    .banner {
-      background-color: #7e7e7e;
-      padding: 50px 0;
-      & > div {
-        margin: 0 auto;
-        //margin: 0 7% 0 21%;
-        height: 400px;
-        text-align: right;
-        img {
-          height: 400px;
-          max-width: 100%;
-        }
-      }
+    .banner > img {
+      width: 100%;
     }
     .address-phone {
       .address-phone-box {

src/pages/culture/culture.html

@@ -13,11 +13,11 @@
 <div class="header">
     <div class="header-box">
         <ul class="nav">
-            <li data-index="0">
-                <a href="/">首页 <br> HOME</a>
+            <li>
+                <a href="/">首页</a>
             </li>
-            <li class='active' data-index="1">
-                <a href="javascript:;">公司介绍 <br> COMPANY</a>
+            <li class="active company">
+                <a href="javascript:;">公司介绍</a>
                 <div class="introduce">
                     <div class="left fl">
                         <a href="/about.html">关于礼瀚</a>
@@ -33,11 +33,11 @@
                     </p>
                 </div>
             </li>
-            <li  data-index="2">
-                <a href="/news.html">动态新闻 <br> NEWS</a>
+            <li>
+                <a href="/news.html">动态新闻</a>
             </li>
-            <li  data-index="3">
-                <a href="/contact.html">联系我们 <br> CONTACT</a>
+            <li>
+                <a href="/contact.html">联系我们</a>
             </li>
         </ul>
     </div>
@@ -63,10 +63,13 @@
 <div class="footer">
     <div class="top bgImg">
         <div class="address-phone">
-            <address>浙江.杭州市玉皇山基金小镇甘水巷150号</address>
+            <address>
+                <i class="iconfont icon-dizhi"></i>
+                浙江.杭州市玉皇山基金小镇甘水巷150号
+            </address>
             <br/>
             <span class="phone">
-                <i></i>
+                <i class="iconfont icon-phone"></i>
                 +86-0571-8773151
             </span>
         </div>

src/pages/index/index.html

@@ -12,11 +12,11 @@
     <div class="header">
         <div class="header-box">
             <ul class="nav">
-                <li class='active' data-index="0">
-                    <a href="/">首页 <br> HOME</a>
+                <li class='active'>
+                    <a href="/">首页</a>
                 </li>
-                <li data-index="1">
-                    <a href="javascript:;">公司介绍 <br> COMPANY</a>
+                <li class="company">
+                    <a href="javascript:;">公司介绍</a>
                     <div class="introduce">
                         <div class="left fl">
                             <a href="/about.html">关于礼瀚</a>
@@ -32,11 +32,11 @@
                         </p>
                     </div>
                 </li>
-                <li  data-index="2">
-                    <a href="/news.html">动态新闻 <br> NEWS</a>
+                <li>
+                    <a href="/news.html">动态新闻</a>
                 </li>
-                <li  data-index="3">
-                    <a href="/contact.html">联系我们 <br> CONTACT</a>
+                <li>
+                    <a href="/contact.html">联系我们</a>
                 </li>
         </ul>
         </div>
@@ -44,7 +44,6 @@
     <div class="main">
         <div class="banner">
             <img src="images/lihan.jpg" alt="banner"/>
-            <h1>禮樂春秋環保夢&nbsp;&nbsp;&nbsp;瀚海沉浮金融心</h1>
         </div>
         <div class="lihan">
             <div class="lihan-box">
@@ -106,7 +105,10 @@
     <div class="footer">
         <div class="top">
             <div class="address-phone">
-                <address>浙江.杭州市玉皇山基金小镇甘水巷150号</address>
+                <address>
+                    <i class="iconfont icon-dizhi"></i>
+                    浙江.杭州市玉皇山基金小镇甘水巷150号
+                </address>
                 <br/>
                 <span class="phone">
                 <i class="iconfont icon-phone"></i>

src/pages/news/news.html

@@ -15,11 +15,11 @@
 <div class="header">
   <div class="header-box">
     <ul class="nav">
-      <li data-index="0">
-        <a href="/">首页 <br> HOME</a>
+      <li>
+        <a href="/">首页</a>
       </li>
-      <li data-index="1">
-        <a href="javascript:;">公司介绍 <br> COMPANY</a>
+      <li class="company">
+        <a href="javascript:;">公司介绍</a>
         <div class="introduce">
           <div class="left fl">
             <a href="/about.html">关于礼瀚</a>
@@ -35,11 +35,11 @@
           </p>
         </div>
       </li>
-      <li class='active' data-index="2">
-        <a href="/news.html">动态新闻 <br> NEWS</a>
+      <li class='active'>
+        <a href="/news.html">动态新闻</a>
       </li>
-      <li data-index="3">
-        <a href="/contact.html">联系我们 <br> CONTACT</a>
+      <li>
+        <a href="/contact.html">联系我们</a>
       </li>
     </ul>
   </div>
@@ -70,8 +70,14 @@
 <div class="footer">
   <div class="top">
     <div class="address-phone">
-      <address>浙江.杭州市玉皇山基金小镇甘水巷150号</address><br/>
-      <span class="phone"><i></i>+86-0571-8773151</span>
+      <address>
+        <i class="iconfont icon-dizhi"></i>
+        浙江.杭州市玉皇山基金小镇甘水巷150号
+      </address>
+      <br/>
+      <span class="phone">
+        <i class="iconfont icon-phone"></i>
+        +86-0571-8773151</span>
     </div>
   </div>
   <div class="bottom">浙备案号： 浙ICP 13006995号 2016. All right reserved.</div>

src/pages/team/team.html

@@ -14,11 +14,11 @@
 <div class="header">
   <div class="header-box">
     <ul class="nav">
-      <li data-index="0">
-        <a href="/">首页 <br/> HOME</a>
+      <li>
+        <a href="/">首页</a>
       </li>
-      <li class='active' data-index="1">
-        <a href="javascript:;">公司介绍 <br> COMPANY</a>
+      <li class='active company'>
+        <a href="javascript:;">公司介绍</a>
         <div class="introduce">
           <div class="left fl">
             <a href="/about.html">关于礼瀚</a>
@@ -34,11 +34,11 @@
           </p>
         </div>
       </li>
-      <li data-index="2">
-        <a href="/news.html">动态新闻 <br/> NEWS</a>
+      <li>
+        <a href="/news.html">动态新闻</a>
       </li>
-      <li data-index="3">
-        <a href="/contact.html">联系我们 <br/> CONTACT</a>
+      <li>
+        <a href="/contact.html">联系我们</a>
       </li>
     </ul>
   </div>
@@ -67,10 +67,6 @@
     <div>
       <div class="left-pic fl">
         <img alt=""/>
-        <div>
-          <h2></h2>
-          <p></p>
-        </div>
       </div>
       <div class="right-content fl">
         <div>
@@ -86,7 +82,10 @@
 <div class="footer">
   <div class="top">
     <div class="address-phone">
-      <address>浙江.杭州市玉皇山基金小镇甘水巷150号</address>
+      <address>
+        <i class="iconfont icon-dizhi"></i>
+        浙江.杭州市玉皇山基金小镇甘水巷150号
+      </address>
       <br/>
       <span class="phone">
         <i class="iconfont icon-phone"></i>

src/pages/team/team.js

@@ -9,6 +9,13 @@ import "./team.html";
 
 //团队数据
 const teamData = [
+    {
+        name: '杨媛',
+        job: '总经理',
+        desc: '法学专业，12年金融从业经验。熟悉证券、基金、银行、保险金融业务。具有金融公司运营、管理经验，熟悉相关政策和法规。<br/>擅长私募基金项目开发，股权、债券等产品设计，销售渠道开发。具有基金业从业资格。',
+        largeImg: require('./images/yangyuan.png'),
+        smallImg: require('./images/yangyuan-small.jpg')
+    },
     {
         name: '葛健斌',
         job: '副总经理',
@@ -17,11 +24,11 @@ const teamData = [
         smallImg: require('./images/gejianbin-small.jpg')
     },
     {
-        name: '杨媛',
-        job: '总经理',
-        desc: '法学专业，12年金融从业经验。熟悉证券、基金、银行、保险金融业务。具有金融公司运营、管理经验，熟悉相关政策和法规。<br/>擅长私募基金项目开发，股权、债券等产品设计，销售渠道开发。具有基金业从业资格。',
-        largeImg: require('./images/yangyuan.png'),
-        smallImg: require('./images/yangyuan-small.jpg')
+        name: '刘川',
+        job: '环保能源事业部副总',
+        desc: '刘川先生毕业于浙江财经大学，中国注册会计师。<br/>近6年证券业相关单位从业经验，曾任天健会计师事务所项目经理、国信证券投行部项目经理，主要参与过海正药业、升华拜克、兔宝宝等上市公司的年报审计、并购重组及IPO等事项。<br/>2016年加入杭州礼瀚，公司环保能源产业事业部主要成员。',
+        largeImg: require('./images/liuchuan.png'),
+        smallImg: require('./images/liuchuan-small.jpg')
     },
     {
         name: '吴霄薇',
@@ -37,13 +44,6 @@ const teamData = [
         largeImg: require('./images/luohangting.png'),
         smallImg: require('./images/luohangting-small.jpg')
     },
-    {
-        name: '刘川',
-        job: '环保能源事业部副总',
-        desc: '刘川先生毕业于浙江财经大学，中国注册会计师。<br/>近6年证券业相关单位从业经验，曾任天健会计师事务所项目经理、国信证券投行部项目经理，主要参与过海正药业、升华拜克、兔宝宝等上市公司的年报审计、并购重组及IPO等事项。<br/>2016年加入杭州礼瀚，公司环保能源产业事业部主要成员。',
-        largeImg: require('./images/liuchuan.png'),
-        smallImg: require('./images/liuchuan-small.jpg')
-    },
     {
         name: '吴炜',
         job: '财务经理',
@@ -71,16 +71,13 @@ export default function() {
         <li class="partner-pic fl">
             <img src="${value.smallImg}" alt="">
             <h2>${value.name} ${value.job}</h2>
-            <div class="icon">
-                <i class="wechat iconfont icon-weixin"></i>
-            </div>
         </li>
     `);
     return arr;
   }, []);
 
   $('.team .detail').html(lis[0] + lis[1] + lis[2]);
-
+    lis.splice(0,3);
   $('.introduce-main .list').html(lis.join(''));
 
 

src/pages/team/team.less

@@ -10,7 +10,7 @@
         display: block;
       }
       .partner-pic {
-        padding: 32px 0 0 0;
+        padding: 32px 0 50px 0;
         background-color: #fff;
         & > img {
           display: inline-block;
@@ -19,19 +19,10 @@
           border-radius: 50%;
         }
         & > h2 {
+          margin: 20px 0 0 0;
           font-size: 16px;
           font-weight: normal;
         }
-        .icon {
-          padding: 10px 0;
-          background-color: #e8eff1;
-        }
-        &:hover .icon {
-          background-color: #ffac55;
-          .wechat:before {
-            color: #fff;
-          }
-        }
       }
       .boss {
         & > i {
@@ -192,18 +183,6 @@
               height: 300px;
               z-index: 0;
             }
-            & > div {
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              & > h2 {
-                margin: 230px 0 0 0;
-                font-size: 20px;
-                font-weight: normal;
-              }
-            }
           }
           .right-content {
             width: 53%;

src/styles/common.less

@@ -55,6 +55,22 @@
           float: left;
           padding: 0 30px 8px 30px;
           text-align: center;
+          &:nth-child(1) > a:after{
+            content: 'HOME';
+            display: block;
+          }
+          &:nth-child(2) > a:after{
+            content: 'COMPANY';
+            display: block;
+          }
+          &:nth-child(3) > a:after{
+            content: 'NEWS';
+            display: block;
+          }
+          &:nth-child(4) > a:after{
+            content: 'CONTACT';
+            display: block;
+          }
           & > a {
             color: #fca960;
             font-size: 18px;
@@ -130,9 +146,22 @@
         background: url(../images/logo-footer.png) no-repeat;
         font-size: 16px;
         color: #777;
-        .iconfont.icon-phone {
+        & > address {
+          font-style: normal;
+        }
+        .iconfont {
+          display: inline-block;
+          width: 30px;
+          &.icon-phone {
             position: relative;
             top: -2px;
+            left: 5px;
+          }
+          &.icon-dizhi {
+            position: relative;
+            top: -33px;
+            font-size: 27px;
+          }
         }
       }
     }