细节修改

contactus.html

@@ -87,8 +87,8 @@
     <div id="introduction" class="main_body">
         <div>
             <div class="model_top">
-                <div class="model_title wow animated fadeInUp">品牌介绍</div>
-                <p class="model_eng wow animated fadeInUp">Introduction</p>
+                <div class="model_title">品牌介绍</div>
+                <p class="model_eng">INTRODUCTION</p>
             </div>
         </div>
         <div class="brand">
@@ -146,8 +146,8 @@
     <div id="introduction" class="main_body">
         <div>
             <div class="model_top">
-                <div class="model_title wow animated fadeInUp">六大支持</div>
-                <p class="model_eng wow animated fadeInUp">Support</p>
+                <div class="model_title">六大支持</div>
+                <p class="model_eng">SUPPORT</p>
             </div>
         </div>
         <div class="introduce_box wow animated fadeInUp">
@@ -229,8 +229,8 @@
     <div id="process" class="main_body">
         <div>
             <div class="model_top">
-                <div class="model_title wow animated fadeInUp">加盟流程</div>
-                <p class="model_eng wow animated fadeInUp">Process</p>
+                <div class="model_title">加盟流程</div>
+                <p class="model_eng">PROCESS</p>
             </div>
         </div>
         <div class="introduce_box wow animated fadeInUp">

css/contactus.css

@@ -7,15 +7,15 @@
 #poster .poster_banner{
     width:100%;
     height:100%;
-    background: url('../images/company_poster.jpg') center;
+    background: url('../images/company_posters.png') center;
 }
 #poster .poster_banner .main_body{
     position: relative;
 }
 #poster .banner_left{
     position: absolute;
-    top:0px;
-    left:-365px;
+    top:-38px;
+    left:-340px;
     width:230px;
     margin: 240px 0px 0px 301px;
     text-align: center;
@@ -97,7 +97,7 @@
 }
 /* 品牌展示 */
 #introduction .brand {
-    margin-top: 60px;
+    margin-top: 95px;
     height: 395px;
 }
 #introduction .brand .estate{
@@ -205,6 +205,7 @@
     height: 700px;
     position: relative;
     display: none;
+    top:70px;
 }
 .circleProgress_wrapper{
     width: 440px;
@@ -303,6 +304,7 @@
     position: absolute;
     top:320px;
     left: 160px;
+    filter: blur(5px);
 }
 .thirty-two{
     font-size: 90.45px;
@@ -312,6 +314,7 @@
     position: absolute;
     top:320px;
     left: 840px;
+    filter: blur(5px);
 }
 .sixty-seven{
     font-size: 90.45px;
@@ -321,6 +324,7 @@
     position: absolute;
     top:93px;
     left: 900px;
+    filter: blur(5px);
 }
 .center_text{
     font-size: 18px;
@@ -336,8 +340,9 @@
 }
  /* 六大支持 */
  #test1{
-    margin-top: 70px;
+    margin-top: 120px;
     height: 400px;
+    overflow: hidden;
 }
 #test1 ul{
    float: left;
@@ -356,40 +361,52 @@
 #test1 ul li:nth-of-type(1){
     width: 536px;
     background: url(../images/a1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(1){
     width: 536px;
     background: url(../images/a.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul li:nth-of-type(2){
     background: url(../images/b1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(2){
     background: url(../images/b.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul li:nth-of-type(3){
     background: url(../images/c1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(3){
     background: url(../images/c.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul li:nth-of-type(4){
     background: url(../images/d1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(4){
     background: url(../images/d.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul li:nth-of-type(5){
     background: url(../images/e1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(5){
     background: url(../images/e.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul li:nth-of-type(6){
     background: url(../images/f1.png) no-repeat;
+    transition:width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(6){
     background: url(../images/f.png) no-repeat;
+    transition:width 0.6s ;
 }
 #test1 .on .shadow{
    background: rgba(0,0,0,0.5);
@@ -443,13 +460,13 @@
 }
   /* 加盟流程 */
   #process{
-    margin-top: 100px;
+    margin-top: 70px;
     margin-bottom: 60px;
 }
 #process .process{
     height: 525px;
     position: relative;
-    
+    top: 60px;
 }
 #process .process ul {
     height: 200px;

js/common.js

@@ -42,6 +42,8 @@ var common = function () {
     $(".on").click(function(){
         $(this).css("width","536px").siblings().css("width","118px");
         $(this).addClass('firsted').siblings().removeClass('firsted');
+        $(this).find(".shadow").css("width","536px");
+        $(this).siblings().find(".shadow").css("width","118px");
         $(this).find(".oness").css("left","430px");
         $(this).siblings().find(".oness").css("left","15px");
         $(this).find(".shadow .sected").css("display","block");