优化

index.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -130,18 +130,18 @@
             <i class="sanjiao-left"></i>
             <div class="clear"></div>
         </li>
-        <li>
-            <img src="./static/images/index_icon4.png" alt=""/><p>网上家园</p>
+        <li onclick="changeTab(4,this)" onmouseover="changeTab(4,this)">
+            <img id="index_icon4" src="./static/images/index_icon4.png" alt=""/><p>网上家园</p>
             <i class="sanjiao-left"></i>
             <div class="clear"></div>
         </li>
-        <li>
-            <img src="./static/images/index_icon5.png" alt=""/><p>GIS地图应用</p>
+        <li onclick="changeTab(5,this)" onmouseover="changeTab(5,this)">
+            <img id="index_icon5" src="./static/images/index_icon5.png" alt=""/><p>GIS地图应用</p>
             <i class="sanjiao-left"></i>
             <div class="clear"></div>
         </li>
-        <li>
-            <img src="./static/images/index_icon6.png" alt=""/><p>利益联结机制</p>
+        <li onclick="changeTab(6,this)" onmouseover="changeTab(6,this)">
+            <img id="index_icon6" src="./static/images/index_icon6.png" alt=""/><p>利益联结机制</p>
             <i class="sanjiao-left"></i>
             <div class="clear"></div>
         </li>
@@ -149,6 +149,9 @@
       <img src="./static/images/index_img1.png" id="img1" style="display: table-cell" class="leftImg" alt=""/>
       <img src="./static/images/index_img2.png" id="img2" style="display: none" class="leftImg" alt=""/>
       <img src="./static/images/index_img3.png" id="img3" style="display: none" class="leftImg" alt=""/>
+      <img src="./static/images/index_img4.png" id="img4" style="display: none" class="leftImg" alt=""/>
+      <img src="./static/images/index_img5.png" id="img5" style="display: none" class="leftImg" alt=""/>
+      <img src="./static/images/index_img6.png" id="img6" style="display: none" class="leftImg" alt=""/>
     </div>
 
     <div class="business">
@@ -287,21 +290,23 @@
         <p>服务能力</p>
       </div>
       <div class="service_box">
-        <ul>
-          <li>
+        <ul id="serviceList">
+          <li onmouseover="changeTabService(1,this)">
             <p><i></i>功能定制服务</p>
             <p>基于农村新型经营主体实际重点难点事项提供对应服务，充分利用信息平台优势及配备人员资源，持续提高对应服务水平。</p>
           </li>
-          <li>
+          <li onmouseover="changeTabService(2,this)">
             <p><i></i>代理记TTTT账服务</p>
             <p>代理记账服务将新型经营主体记账工作集约化、集中化、标准化、流程化、专业化、规范化，即减轻了新型经营主体管理人的负担，也可以有效保障记账的规范性与记账进度。</p>
           </li>
-          <li>
+          <li onmouseover="changeTabService(3,this)">
             <p><i></i>农业培训服务</p>
             <p>提供在线培训平台，涵盖各类农技及农业问题，通过远程指导或在线视频的方式提高农技授课触达及培训效果，提升区域整体农业水平。</p>
           </li>
         </ul>
-        <img src="./static/images/service_img.png" alt=""/>
+        <img src="./static/images/service_img01.png" id="img01" alt=""/>
+        <img src="./static/images/service_img02.png" id="img02" style="display: none" alt=""/>
+        <img src="./static/images/service_img03.png" id="img03" style="display: none" alt=""/>
       </div>
 
     </div>
@@ -311,7 +316,7 @@
         <img src="./static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="view/about.html#tellUs">立即咨询</a>
+          <a href="view/about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

static/css/index.css

@@ -248,14 +248,12 @@
   font-size: 36px;
   color: #070b29;
   font-family: "Source Han Sans SC Medium";
-  font-weight: bold;
 }
 
 .business_text p:nth-child(3){
   font-size: 16px;
   color: #070b29;
   margin-top: 45px;
-  font-weight: bold;
   line-height: 34px;
   font-family: "Source Han Sans SC Normal";
 }
@@ -467,6 +465,8 @@
   color: #ffffff!important;
   border-radius: 50px;
   padding: 10px 30px;
+  display: block;
+  text-align: center;
   box-shadow: 0px 5px 12px #a6bfd9;
 }
 .bottomAbout_box ul{
@@ -505,9 +505,11 @@
   padding: 25px 0;
   color: #636363;
 }
+
 .downTit{
   font-size: 36px;
   color: #1473e6;
+  font-weight: bold;
   text-align: left;
   margin-bottom: 35px;
 }

static/css/main.css

@@ -247,6 +247,13 @@ body {
     opacity: 0 !important;
 }
 
+.buttonHover:hover{
+    transform:scale(1.06)
+}
+
+.buttonHover{
+    transition:transform 0.5s;
+}
 .w-1200 {
     width: 1200px;
     margin: 0 auto;

static/js/project/index.js

@@ -11,7 +11,7 @@ function changeTab(id,that){
 
         li[i].className = '';
 
-        if(i<3){
+        if(i<6){
             document.getElementById('img'+(i+1)).style.display = 'none';
             document.getElementById('index_icon'+(i+1)).src = './static/images/index_icon'+(i+1)+'.png';
         }
@@ -24,4 +24,30 @@ function changeTab(id,that){
 
     document.getElementById('img'+id).style.display = 'table-cell';
 
+}
+
+var servicelist = document.getElementById('serviceList');
+
+var serviceli = servicelist.getElementsByTagName('li');
+
+serviceli[0].className = 'active'
+
+document.getElementById('index_icon1').src = './static/images/index_icon7.png';
+
+function changeTabService(id,that){
+
+    for (var i = 0; i < serviceli.length; i++) {
+
+        serviceli[i].className = '';
+
+        if(i<6){
+            document.getElementById('img0'+(i+1)).style.display = 'none';
+        }
+
+    }
+
+    that.className = 'active';
+
+    document.getElementById('img0'+id).style.display = 'table-cell';
+
 }

view/about.html

@@ -34,7 +34,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -274,7 +274,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="#tellUs">立即咨询</a>
+          <a href="#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

view/downLoad.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -69,7 +69,6 @@
       </div>
     </div>
 
-
     <div class="w-1200 downLoad" style="margin-top: 120px">
       <p class="downTit">工具下载</p>
       <table width="100%" cellspacing="0">
@@ -84,7 +83,7 @@
           <td>打印控件 32位</td>
           <td>CLodop_Setup_for_Win32NT</td>
           <td>4.4M</td>
-          <td><a href="../static/downFile/CLodop_Setup_for_Win32NT.exe"><img src="../static/images/ljxz.png"></a></td>
+          <td><a href="../static/downFile/CLodop_Setup_for_Win32NT.exe"><img src="../static/images/ljxz.png" class="buttonHover"></a></td>
         </tr>
 
 
@@ -92,7 +91,7 @@
           <td>打印控件 64位</td>
           <td>CLodop_Setup_for_Win64NT</td>
           <td>5.4M</td>
-          <td><a href="../static/downFile/CLodop_Setup_for_Win64NT.exe"><img src="../static/images/ljxz.png"></a></td>
+          <td><a href="../static/downFile/CLodop_Setup_for_Win64NT.exe"><img src="../static/images/ljxz.png" class="buttonHover"></a></td>
         </tr>
 
 
@@ -100,7 +99,7 @@
           <td>高拍仪驱动</td>
           <td>CZURPlugin_1.0.21.602_Setup</td>
           <td>75.2M</td>
-          <td><a href="../static/downFile/CZURPlugin_1.0.21.602_Setup.exe"><img src="../static/images/ljxz.png"></a></td>
+          <td><a href="../static/downFile/CZURPlugin_1.0.21.602_Setup.exe"><img src="../static/images/ljxz.png" class="buttonHover"></a></td>
         </tr>
 
 
@@ -108,7 +107,7 @@
           <td>向日葵服务端</td>
           <td>SunloginClient9.8.2</td>
           <td>4.5M</td>
-          <td><a href="../static/downFile/SunloginClient9.8.2.exe"><img src="../static/images/ljxz.png"></a></td>
+          <td><a href="../static/downFile/SunloginClient9.8.2.exe"><img src="../static/images/ljxz.png" class="buttonHover"></a></td>
         </tr>
 
 
@@ -116,7 +115,7 @@
           <td>谷歌浏览器</td>
           <td>ChromeSetup</td>
           <td>1.1M</td>
-          <td><a href="../static/downFile/ChromeSetup.exe"><img src="../static/images/ljxz.png"></a></td>
+          <td><a href="../static/downFile/ChromeSetup.exe"><img src="../static/images/ljxz.png" class="buttonHover"></a></td>
         </tr>
 
       </table>
@@ -127,7 +126,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="about.html#tellUs">立即咨询</a>
+          <a href="about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

view/product.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -137,7 +137,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="about.html#tellUs">立即咨询</a>
+          <a href="about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

view/productHomestead.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -126,7 +126,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="about.html#tellUs">立即咨询</a>
+          <a href="about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

view/productNewBusiness.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -127,7 +127,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="about.html#tellUs">立即咨询</a>
+          <a href="about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>

view/service.html

@@ -32,7 +32,7 @@
             <div class="clear"></div>
           </div>
 <!--          <a href="release.html" class="fl m-r-20 upBtn">登录</a>-->
-          <a href="release.html" class="fl m-r-20 serviceBtn">产品咨询</a>
+          <a href="release.html" class="fl m-r-20 serviceBtn buttonHover">产品咨询</a>
         </div>
         <div class="clear"></div>
       </div>
@@ -209,7 +209,7 @@
         <img src="../static/images/consulting_img.png" alt=""/>
         <p>以农立命，以信立燊，高科立业。</p>
         <div>
-          <a href="about.html#tellUs">立即咨询</a>
+          <a href="about.html#tellUs" class="buttonHover">立即咨询</a>
         </div>
       </div>
     </div>