添加首页内容

.idea/workspace.xml

@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="5022b617-d045-4c00-9e44-77877d4e36e1" name="Default Changelist" comment="更改在线体验样式，公司资讯里面添加一些动态效果">
+    <list default="true" id="5022b617-d045-4c00-9e44-77877d4e36e1" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/css/bootstrap.min.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/bootstrap.min.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/common.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/common.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/images/laptop1.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/images/new-media.png" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -95,7 +97,8 @@
       <workItem from="1576635420046" duration="19140000" />
       <workItem from="1576717839947" duration="14115000" />
       <workItem from="1576739116348" duration="9951000" />
-      <workItem from="1576805766727" duration="11155000" />
+      <workItem from="1576805766727" duration="23170000" />
+      <workItem from="1577063104211" duration="6061000" />
     </task>
     <task id="LOCAL-00001" summary="官网1.0">
       <created>1574907211978</created>
@@ -188,7 +191,14 @@
       <option name="project" value="LOCAL" />
       <updated>1576742421277</updated>
     </task>
-    <option name="localTasksCounter" value="14" />
+    <task id="LOCAL-00014" summary="添加首页内容">
+      <created>1576823820849</created>
+      <option name="number" value="00014" />
+      <option name="presentableId" value="LOCAL-00014" />
+      <option name="project" value="LOCAL" />
+      <updated>1576823820849</updated>
+    </task>
+    <option name="localTasksCounter" value="15" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -217,6 +227,7 @@
     <MESSAGE value="更改样式" />
     <MESSAGE value="更改手机号" />
     <MESSAGE value="更改在线体验样式，公司资讯里面添加一些动态效果" />
-    <option name="LAST_COMMIT_MESSAGE" value="更改在线体验样式，公司资讯里面添加一些动态效果" />
+    <MESSAGE value="添加首页内容" />
+    <option name="LAST_COMMIT_MESSAGE" value="添加首页内容" />
   </component>
 </project>

css/common.css

@@ -38,6 +38,10 @@ a{
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
 }
+.fadeInDown{
+    animation-name: fadeInDown;
+    -webkit-animation-name: fadeInDown;
+}
 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn;
@@ -50,6 +54,10 @@ a{
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInRight;
 }
+.fadeInUpBig{
+    -webkit-animation-name:fadeInUpBig;
+    animation-name: fadeInUpBig;
+}
 .animated {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;

css/index.css

@@ -53,8 +53,8 @@
     width: 250px;
     height: 100%;
     position: absolute;
-    background: #49a1dc;
+    background: #ee8333;
-    background: rgba(73,161,220,0.9);
+    /*background: rgba(283,131,51,0.9);*/
      transition: 0.4s;
 }
 .cj_part_li:hover .link{
@@ -71,11 +71,11 @@
     border: 1px solid #ffffff;
     border-radius: 8px;
 }
-.step1{
+#step1{
-
+    height:590px;
 }
 .step1-title{
-    padding:50px 0 30px;
+    padding:65px 0 30px;
     text-align:center;
 }
 .step1-title h1{
@@ -85,6 +85,7 @@
 }
 .step1-title h1 span{
     color:#bf095f;
+    /*color:#ee8333;*/
 }
 .step1-title p{
     margin-top:10px;
@@ -109,6 +110,7 @@
     z-index:2;
     position:absolute;
     background:#bf095f;
+    /*background-color:#ee8333;*/
     border-radius:50%;
 }
 .zweb03 .line .num.n1{
@@ -224,12 +226,85 @@
     50%{right:6px;}
     100%{right:-14px;}
 }
-#step1{
+#step2{
     width:100%;
     height:647px;
-    background: url("");
+    background: url("../images/bg1.jpg") no-repeat center/cover;
+}
+.part-title2{
+    padding-top:80px;
+    padding-bottom:50px;
+}
+.part-title2 .num{
+    padding-bottom:3px;
+    font-size:80px;
+    color:#ec1c32;
+    text-align:center;
+    font-family:Agency FB,sans-serif;
+    background:url("../images/bg1.jpg") no-repeat center bottom;
+}
+.part-title2 h1{
+    margin-top:8px;
+    font-size:45px;
+    line-height:45px;
+    text-align:center;
+}
+.part-title2 h1.c2{
+    color:#ffffff;
+}
+.part-title2 p{
+    margin:0 auto;
+    margin-top:8px;
+    font-size:16px;
+    line-height:24px;
+    text-align:center;
+    width:635px;
+    color:#888888;
+}
+.part-title2 p.big{
+    width:1000px;
+}
+.teacher02{
+    width:1090px;
+    padding-bottom:40px;
+    margin: 0 auto;
+}
+.teacher02 .box{
+    float:left;
+    margin:0 15px;
+    width:187px;
+}
+.teacher02 .box img{
+    width:187px;
+    height:187px;
+}
+.teacher02 .box p{
+    margin-top:5px;
+    font-size:16px;
+    line-height:25px;
+    text-align:center;
+    color:#ffffff;
+}
+#step2 .btn{
+    margin:0 auto;
+    width:276px;
+    height:60px;
+    line-height:43px;
+    color:#ffffff;
+    font-size:24px;
+    text-align:center;
+    display:block;
+    transition:0.5s;
+    border:1px solid #ffffff;
+    border-radius:28px;
+}
+#step2 .btn:hover{
+    transition:0.5s;
+    color:#363636;
+    background:#ffffff;
 }
 #steps{
+
     padding-top: 60px;
     padding-bottom: 60px;
     box-sizing: border-box;
@@ -301,7 +376,7 @@ dl {
 #step3 {
     position: relative;
     padding-bottom: 150px;
-    background: url('../images/index1.jpg') no-repeat center/cover;
+    background: url('../images/bg2.jpg') no-repeat center/cover;
     box-sizing: border-box;
 }
 .step1BgContainer {
@@ -336,7 +411,7 @@ dl {
     margin-top: 40px;
 }
 .step1Detail {
-    margin-top:80px;
+    margin-top:20px;
     text-align: left;
     font-size: 18px;
     line-height: 36px;
@@ -345,12 +420,16 @@ dl {
     opacity: 0;
     margin-bottom: 80px;
     padding:10px;
-    background-color:rgba(204,204,204,0.3);
+    /*background-color:rgba(204,204,204,0.3);*/
     border-radius: 6px;
 }
 .holderDiv {
     height: 200px;
 }
+.font-size{
+    font-size: 48px;
+    color:#ee8333;
+}
 
 #step4 {
     position: relative;

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="baidu-site-verification" content="LDrSbJw8S0" />
-    <title>首页</title>
+    <title>车险呼叫中心-车险电销系统-车险算价器-汇盈帮手</title>
     <link rel="stylesheet" href="css/index.css"/>
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="http://www.etoppaas.com.cn/pandaInsure/css/animate.min_48b336b.css"/>
@@ -145,7 +145,35 @@
             </div>
         </div>
         <div id="step2">
-            <div class="inner"></div>
+            <div class="inner">
+                <div class="part-title2 animated fadeInDown" amstyle="fadeInDown" delaytime="300">
+                    <h1 class="c2">与车险业务完美贴合</h1>
+                    <p>多年实战开发及项目管理经验</p>
+                </div>
+                <div class="teacher02 clearfix">
+                    <div class="box animated fadeInUpBig" amstyle="fadeInUpBig" delaytime="300">
+                        <img src="images/step2-img1.png" />
+                        <p>数据分别流入细分<br/>数据库 管理更完善</p>
+                    </div>
+                    <div class="box animated fadeInUpBig" amstyle="fadeInUpBig" delaytime="300">
+                        <img src="images/step2-img2.png" />
+                        <p>保额智能计算优惠浮动 <br/>销售轻松快捷</p>
+                    </div>
+                    <div class="box animated fadeInUpBig" amstyle="fadeInUpBig" delaytime="300">
+                        <img src="images/step2-img3.png" />
+                        <p>直接获取上年保费、计算<br/> 当前保费报价方便快捷</p>
+                    </div>
+                    <div class="box animated fadeInUpBig" amstyle="fadeInUpBig" delaytime="300">
+                        <img src="images/step2-img4.png" />
+                        <p>强大的财务数据保驾护航 <br/>利润统计、工资计算、通时计算等</p>
+                    </div>
+                    <div class="box animated fadeInUpBig" amstyle="fadeInUpBig" delaytime="300">
+                        <img src="images/step2-img5.png" />
+                        <p>各岗位权限分配完善 <br/>工作效率迅速提升</p>
+                    </div>
+                </div>
+                <a class="btn animated fadeInUp" amstyle="fadeInUp" delaytime="300" href="experience.html">在线体验</a>
+            </div>
         </div>
         <div id="steps" class="step">
             <div class="inner">
@@ -264,8 +292,9 @@
             <div class="step1Content">
                 <div class="inner">
                     <div class="holderDiv"></div>
-                    <div class="stepWords fadeInUp animated" amstyle="fadeInUp" delaytime="300">营销方案制定</div>
+<!--                    <div></div>-->
-                    <div class="step1Line" style="width:220px;"></div>
+                    <div class="stepWords fadeInUp animated" amstyle="fadeInUp" delaytime="300"><span class="font-size">营销方案</span>制定</div>
+<!--                    <div class="step1Line" style="width:220px;"></div>-->
                     <p class="step1Detail fadeInUp animated" amstyle="fadeInUp" delaytime="300" >定制营销方案、以及对应的礼品业务在打电话的同时，可以选择对应方案，第一时间传达给客户。所选择的方案并同步生成在订单里</p>
                     <div class="step1BgContainer fadeInRight animated" amstyle="fadeInRight" delaytime="350">
                         <img src="images/laptop2.png" alt="" class="system-img lazy">