设计图各个静态页面

src/App.vue

@@ -146,7 +146,7 @@ this.$router.push({
 #header{
   width: 100%;
     min-width: 1280px;
-    max-width: 1362px;
+    max-width: 100%;
     margin: auto;
     position: fixed;
     top: 43px;
@@ -159,7 +159,7 @@ this.$router.push({
 }
 .header {
   box-sizing: border-box;
-    width: 100%;
+    width: 80%;
     min-width: 1280px;
     height: 82px;
     margin: auto;

src/views/HomeView.vue

@@ -21,7 +21,7 @@
 
     </div>
     <div class="Wrapper index" style="">
-      <div class="index_1" style="width: 80%;margin: 0 auto;padding: 50px 0;">
+      <div class="index_1" style="width: 80%;margin: 0 auto;padding: 10px 0;">
         <div class="content-top">
           <div class="content-left">
             <h3>企业新闻</h3>
@@ -84,7 +84,7 @@
 
         </div>
       </div>
-      <div class="index_2" style="padding-bottom: 70px;width: 80%;margin: 0 auto;">
+      <div class="index_2" style="padding-bottom: 40px;width: 80%;margin: 0 auto;">
         <div style="display: flex;">
           <div class="content2-left">
             <div>
@@ -99,7 +99,7 @@
             </div>
           </div>
           <div class="content2-right">
-            <img src="@/assets/images/vedio.png" style="width: 100%;height: 320px;">
+            <img src="@/assets/images/vedio.png" style="width: 100%;object-fit: contain;">
           </div>
         </div>
       </div>
@@ -384,7 +384,7 @@ h6 {
 
 .index-top {
   position: relative;
-  padding-bottom: 24px;
+
   margin-bottom: 24px;
   border-bottom: 2px solid #c9c9c9;
   border-bottom: 2px solid rgba(201, 201, 201, .5);

src/views/aboutus.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+
         <div class="page_ban">
             <div class="img compbg"></div>
             <div class="content">
@@ -19,118 +20,312 @@
                 </div>
             </div>
         </div>
-        <div style="width: 80%;margin: auto;">
+        <div v-show="activeName == 'first'">
-            <div style="height: 50px;"></div>
+            <div style="width: 80%;margin: auto;">
-            <div style="font-size: 26px;color:rgba(0,0,0,.6)">飞阳建设</div>
+                <div style="height: 50px;"></div>
-            <div style="color:rgba(60,115,164);font-size:40px">致力于为每位客户提供一流服务</div>
+                <div style="font-size: 26px;color:rgba(0,0,0,.6)">飞阳建设</div>
-            <div style="height: 40px;"></div>
+                <div style="color:rgba(60,115,164);font-size:40px">致力于为每位客户提供一流服务</div>
-            <div style="color: rgba(0,0,0,.6);line-height: 30px;">
+                <div style="height: 40px;"></div>
-                飞阳建设工程有限公司创立于1963年，为福建省建筑业龙头企业。具有房屋建筑工程、市政公用工程施工总承包一级，钢结构工程、建筑装修装饰工程、环保工程、地基
+                <div style="color: rgba(0,0,0,.6);line-height: 30px;">
-                基础工程、消防设施工程专业承包一级等资质。公司通过IS09001 质量、ISO14001 环境、OHSMS18001 职业健康安全管理体系认证。
+                    飞阳建设工程有限公司创立于1963年，为福建省建筑业龙头企业。具有房屋建筑工程、市政公用工程施工总承包一级，钢结构工程、建筑装修装饰工程、环保工程、地基
-                <div style="height: 20px;"></div>
+                    基础工程、消防设施工程专业承包一级等资质。公司通过IS09001 质量、ISO14001 环境、OHSMS18001 职业健康安全管理体系认证。
-                公司长期致力于新工艺、新科技的革新换代，并将新技术推广应用于施工现场。近年相继承建国家及省重点工程平潭社会福利院、莆田市体育公园飞碟靶场扩建工程、环
+                    <div style="height: 20px;"></div>
-                东海域滨海旅游浪漫线景观市政配套等项目并圆满交付使用。公司承建的“莆田皇冠制罐有限公司建设主生产厂房”、“ 鹭燕医药莆田仓储物流中心”、“福州新店西安
+                    公司长期致力于新工艺、新科技的革新换代，并将新技术推广应用于施工现场。近年相继承建国家及省重点工程平潭社会福利院、莆田市体育公园飞碟靶场扩建工程、环
-                置房工程”、“高林学校” 等多个项目荣获福建省优质工程“闽江杯”荣誉称号。并获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
+                    东海域滨海旅游浪漫线景观市政配套等项目并圆满交付使用。公司承建的“莆田皇冠制罐有限公司建设主生产厂房”、“ 鹭燕医药莆田仓储物流中心”、“福州新店西安
-                平铝业、福清核电、湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
+                    置房工程”、“高林学校” 等多个项目荣获福建省优质工程“闽江杯”荣誉称号。并获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
-                <div style="height: 70px;"></div>
+                    平铝业、福清核电、湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
+                    <div style="height: 70px;"></div>
+                </div>
+
+            </div>
+            <div class="about2">
+                <div class="content">
+                    <div class="bg">
+                        <div class="float wow fadeInUp animated">
+                        </div>
+                        <div class="introduce">
+                            <h3 class="wow fadeInUp animated"
+                                style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp;">
+                                <span>信</span><span style="margin-left:44px">责任</span><span
+                                    style="margin-left:44px">和谐</span><span style="margin-left:44px">效益</span>
+                            </h3>
+                            <p class="wow fadeInUp animated"
+                                style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">
+                                公司秉承“诚信、责任、和谐、效益”的核心价值观
+                            </p>
+                            <p class="wow fadeInUp animated"
+                                style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">
+                                连年被授予国家“守合同重信用企业”、莆田市“纳税大户”、<br>"诚信企业先
+                                进单位”、“建筑业骨干企业”、 “综合实力十强” <br>等光荣称号。
+                            </p>
+
+                        </div>
+                    </div>
+                </div>
             </div>
 
-        </div>
+            <div style="width: 80%;margin: auto;">
-        <div class="about2">
+                <div style="height: 50px;"></div>
-            <div class="content">
+                <div style="font-size: 26px;color:rgba(0,0,0,.6)">人才队伍</div>
-                <div class="bg">
+                <div style="color:rgba(60,115,164);font-size:40px">广纳贤才形成一支高素质的专业管理团队
-                    <div class="float wow fadeInUp animated">
+                </div>
-                    </div>
+                <div style="height: 40px;"></div>
+                <div style="color: rgba(0,0,0,.6);line-height: 18px;">
+                    <p>拥有职工3000余人,其中高级职称工程技术人员35人、国家一级注册建造师42人。</p>
+                    <p>主编或参编了“福建省建筑工程常见质量问题控制规程”、“抗浮 锚杆ODEX施工工法”等十余项省级标准规范;
+                    </p>
+                    <p>在省级岗位职业技能竞赛中多次获得集体一、二、 三 等奖等优异成绩;
+                    </p>
+                    <p>公司承办了莆田市首个省级建筑施工现场质量、安全文明施工标准化及扬尘专项整治观摩会;
+                    </p>
+                    <p>充分展示了飞阳建设在全省建筑行业的技术实力与话语权。
+                    </p>
+                    <div style="height: 40px;"></div>
+                </div>
+
+            </div>
+            <div style="width: 80%;margin: auto;">
+
+                <div style="font-size: 26px;color:rgba(0,0,0,.6)">创新发展</div>
+                <div style="color:rgba(60,115,164);font-size:40px">致力于数据化、智能化创新发展
+                </div>
+                <div style="height: 40px;"></div>
+                <div style="color: rgba(0,0,0,.6);line-height: 18px;">
+                    <p>为腰应时代变革，公司致力于数据化、智能化创新发展，
+                    </p>
+                    <p>积极探索建筑产业现代化发展趋势。
+
+                    </p>
+                    <p>知识型、管理型、创新型的团队将为公司持续发展注入无限动力。
+                    </p>
+
+                    <div style="height: 70px;"></div>
+                </div>
+
+            </div>
+            <div class="about_4">
+                <div class="content">
                     <div class="introduce">
                         <h3 class="wow fadeInUp animated"
-                            style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp;">
+                            style="animation-delay: 0.2s; visibility: visible; animation-name: fadeInUp;">LEADING THE
-                            <span>信</span><span style="margin-left:44px">责任</span><span
+                            LOCAL INDUSTRY
-                                style="margin-left:44px">和谐</span><span style="margin-left:44px">效益</span></h3>
+                        </h3>
+                        <h5 class="wow fadeInUp animated"
+                            style="animation-delay: 0.4s; visibility: visible; animation-name: fadeInUp;">本地行业之首
+                            出
+                            10余个国
+                        </h5>
                         <p class="wow fadeInUp animated"
                             style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">
-                            公司秉承“诚信、责任、和谐、效益”的核心价值观
+                            自有两个具有设计、生产、安装能力的钢结构装配式基地，制造年产能超过5万吨
+                            位居本地行业之首,<br>产品出口美非亚等10余个国家
                         </p>
+
+                        <h6 class="wow fadeInUp" style="animation-delay: 0.6s;  animation-name: none;">荣获多个优质工程的荣誉称号
+                        </h6>
                         <p class="wow fadeInUp animated"
                             style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">
-                            连年被授予国家“守合同重信用企业”、莆田市“纳税大户”、<br>"诚信企业先
+                            获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
-                            进单位”、“建筑业骨干企业”、 “综合实力十强” <br>等光荣称号。
+                            平铝业、福清核电、<br>湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
                         </p>
 
+
+                    </div>
+                    <div class="bl_map">
+                        <img src="@/assets/images/map.png">
+
+                        <div class="scope s3">
+                            <p class="no_margin">中国内地</p>
+                        </div>
+
                     </div>
                 </div>
             </div>
         </div>
-      
+        <div v-show="activeName == 'second'">
-        <div style="width: 80%;margin: auto;">
+            <!--时间线-->
+            <div class="timeLine" style="overflow: hidden;">
+                <!-- <div class="content">
+            <p class="tit">{{timeLineList[timeIndex].year}}</p>
+            <p>{{timeLineList[timeIndex].info}}</p>
+        </div> -->
+
+                <div class="ul_box" style="padding: 50px 0px;">
+
+                    <ul class="my_timeline" ref="mytimeline" style=" display: flex;width: 80%;padding: 0;margin: auto;">
+                        <div class="my_timeline_prev" @click="moveLeft">
+                            <i style="color: skyblue;" class="el-icon-arrow-left"></i>
+                        </div>
+                        <li class="my_timeline_item" v-for="(item, index) in timeLineList" :key="index">
+                            <!--圈圈节点-->
+                            <div class="my_timeline_node" @click="changeActive(index)"
+                                :class="{ active: index == timeIndex }"> {{ item.timestamp }}</div>
+                            <!--线-->
+
+                            <!--标注-->
+
+                        </li>
+                        <div class="my_timeline_next" @click="moveRight">
+
+                            <i style="color: skyblue;" class="el-icon-arrow-right"></i>
+
+                        </div>
+                    </ul>
+                </div>
+            </div>
+            <div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
+  grid-column-gap: 2%;">
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                    <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
+                        <img src="@/assets/images/rongyu/1.png"
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <p style="color:rgb(155,155,155)">
+                            J2016P01地块建设工程(1-14号楼及联合地下
+                            室主体),荣膺2018年度市级建筑施工安全生
+                            产标准化优良项目。
+                        </p>
+
+                    </div>
+                </div>
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                    <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
+                        <img src="@/assets/images/rongyu/2.png"
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <p style="color:rgb(155,155,155)">
+                            月美池整治工程，荣膺2018年 度市级建筑施
+                            工安全生产标准化优良项目。
+                        </p>
+
+                    </div>
+                </div>
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                    <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
+                        <img src="@/assets/images/rongyu/3.png"
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <p style="color:rgb(155,155,155)">高林学校，荣膺2018年度市级建筑施工安全
+                            生产标准化优良项目。
+
+                        </p>
+
+                    </div>
+                </div>
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                    <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
+                        <img src="@/assets/images/rongyu/4.png"
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <p style="color:rgb(155,155,155)">荣获由“荔城区人民政府”颁发的“2018年
+                            度纳税大户”二等奖。
+
+                        </p>
+
+                    </div>
+                </div>
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                    <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
+                        <img src="@/assets/images/rongyu/5.png"
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <p style="color:rgb(155,155,155)">龙海市石码中心小学1#行政综合楼、2#教学
+                            楼综合、地下室、-5#体艺馆工程，荣膺第二
+                            十届“水仙杯”奖优质工程。
+
+
+                        </p>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div v-show="activeName == 'fourth'" style="margin-bottom: -50px;">
             <div style="height: 50px;"></div>
-            <div style="font-size: 26px;color:rgba(0,0,0,.6)">人才队伍</div>
+            <div style="width: 80%;margin: auto;display: flex;justify-content: space-between;">
-            <div style="color:rgba(60,115,164);font-size:40px">广纳贤才形成一支高素质的专业管理团队
+                <div style="width:   32%;margin-bottom: 20px;">
-</div>
+                    <div style=" ">
-            <div style="height: 40px;"></div>
+                        <img src="@/assets/images/rongyu/yuanjing.png"
-            <div style="color: rgba(0,0,0,.6);line-height: 18px;">
+                            style="width: 100%;object-fit: contain;margin: auto;display: block; border-radius: 14px 14px 0 0;">
-               <p>拥有职工3000余人,其中高级职称工程技术人员35人、国家一级注册建造师42人。</p>
-               <p>主编或参编了“福建省建筑工程常见质量问题控制规程”、“抗浮 锚杆ODEX施工工法”等十余项省级标准规范;
-</p>
-               <p>在省级岗位职业技能竞赛中多次获得集体一、二、 三 等奖等优异成绩;
-</p>
-               <p>公司承办了莆田市首个省级建筑施工现场质量、安全文明施工标准化及扬尘专项整治观摩会;
-</p>
-               <p>充分展示了飞阳建设在全省建筑行业的技术实力与话语权。
-</p>
-                <div style="height: 40px;"></div>
-            </div>
-
-        </div>
-        <div style="width: 80%;margin: auto;">
-         
-            <div style="font-size: 26px;color:rgba(0,0,0,.6)">创新发展</div>
-            <div style="color:rgba(60,115,164);font-size:40px">致力于数据化、智能化创新发展
-</div>
-            <div style="height: 40px;"></div>
-            <div style="color: rgba(0,0,0,.6);line-height: 18px;">
-               <p>为腰应时代变革，公司致力于数据化、智能化创新发展，
-</p>
-               <p>积极探索建筑产业现代化发展趋势。
-
-</p>
-               <p>知识型、管理型、创新型的团队将为公司持续发展注入无限动力。
-
-</p>
-  
-                <div style="height: 70px;"></div>
-            </div>
-
-        </div>
-        <div class="about_4">
-            <div class="content">
-                <div class="introduce">
-                   <h3 class="wow fadeInUp animated" style="animation-delay: 0.2s; visibility: visible; animation-name: fadeInUp;">LEADING THE LOCAL INDUSTRY
-</h3>
-<h5 class="wow fadeInUp animated" style="animation-delay: 0.4s; visibility: visible; animation-name: fadeInUp;">本地行业之首
-出
-10余个国
-</h5>
-<p class="wow fadeInUp animated" style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">自有两个具有设计、生产、安装能力的钢结构装配式基地，制造年产能超过5万吨
-位居本地行业之首,<br>产品出口美非亚等10余个国家
-</p>
-
-<h6 class="wow fadeInUp" style="animation-delay: 0.6s;  animation-name: none;">荣获多个优质工程的荣誉称号
-</h6>
-<p class="wow fadeInUp animated" style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
-平铝业、福清核电、<br>湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
-</p>
 
 
-                </div>
-                <div class="bl_map">
-                    <img src="@/assets/images/map.png">
-                 
-                    <div class="scope s3">
-                        <p class="no_margin">中国内地</p>
                     </div>
-                  
+                    <div
+                        style="background-color: rgb(248,248,248);padding: 40px 42px 0;    border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
+                        <h3 style="color:rgb(108,108,118);margin: 0;">企业愿景</h3>
+                        <h5>CORPORATE <br>VISION</h5>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">成为载誉八闽的一流建筑承包商</p>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">用一流服务打造一流的飞阳口碑
+                        </p>
+                    </div>
                 </div>
+                <div style="width:   32%;margin-bottom: 20px;">
+                    <div style=" ">
+                        <img src="@/assets/images/rongyu/shiming.png"
+                            style="width: 100%;object-fit: contain;margin: auto;display: block; border-radius: 14px 14px 0 0;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding: 40px 42px 0;    border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
+                        <h3 style="color:rgb(108,108,118);margin: 0;">企业使命</h3>
+                        <h5>CORPORATE <br>MISSION</h5>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">不断提升管理和服务能力</p>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">为客户创造价值
+                        </p>
+                    </div>
+                </div>
+                <div style="width:   32%;margin-bottom: 20px;">
+                    <div style=" ">
+                        <img src="@/assets/images/rongyu/jiazhi.png"
+                            style="width: 100%;object-fit: contain;margin: auto;display: block; border-radius: 14px 14px 0 0;">
+
+
+                    </div>
+                    <div
+                        style="background-color: rgb(248,248,248);padding: 40px 42px 0;    border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
+                        <h3 style="color:rgb(108,108,118);margin: 0;">核心价值观</h3>
+                        <h5>CORPORATE <br>VALUES</h5>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">敢言道正 树立榜样 尊重他人 客观持平 贵乎自知
+</p>
+                        <p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">承担责任 透明公开 诚恳可靠 正直不阿
+
+                        </p>
+                    </div>
+       
+                </div>
+                
             </div>
+            <div style="position: relative;top: -50px;z-index: -1;">
+                    <img style="width: 100%;object-fit: contain;" src="@/assets/images/rongyu/bg.png">
+                </div>
         </div>
     </div>
 </template>
@@ -138,12 +333,108 @@
 export default {
     data() {
         return {
-            activeName: 'first'
+            activeName: 'first',
-        };
+            timeIndex: 6,
+            timeLineList: [{
+                "timestamp": "2024年",
+                "color": "#999",
+                "fontsize": 18,
+                "year": "2019",
+                "bgcolor": "#e4e7ed",
+                "size": "28",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2023年",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "year": "2018",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2022年",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "year": "2017",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2021年",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "year": "2016",
+                "bgcolor": "#e4e7ed",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2020年",
+                "color": "#999",
+                "fontsize": 18,
+                "year": "2015",
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2019年",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "year": "2014",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2018年",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "year": "2013",
+                "info": "工作室更名为：西安拓美网络科技有限公司"
+            }, {
+                "timestamp": "2017及",
+                "color": "#999",
+                "fontsize": 18,
+                "size": "28",
+                "bgcolor": "#e4e7ed",
+                "icon": "el-iconprev",
+                "year": "2012",
+                "info": "chengli"
+            }]
+        }
     },
     methods: {
         handleClick(tab, event) {
-            console.log(tab, event);
+            console.log(tab.index);
+        },
+        changeActive(index) {
+            this.timeIndex = index;
+        },
+        moveLeft() {
+
+            // let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
+            // let listNum = 0;
+            // if(marginLeft <= 10 && (marginLeft >= -650)){
+            //     this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
+            if (this.timeIndex < 1) {
+                return
+            }
+            else {
+                this.timeIndex = this.timeIndex - 1
+                console.log(this.timeIndex)
+            }
+
+        },
+        moveRight() {
+            // let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
+            // if(marginLeft < (-200)){
+            //     this.$refs.mytimeline.style.marginLeft = marginLeft + 220 + 'px';
+            // }
+            if (this.timeIndex > this.timeLineList.length - 2) {
+                return
+            } else {
+                this.timeIndex = this.timeIndex + 1
+            }
         }
     }
 };
@@ -311,20 +602,24 @@ li {
     color: rgba(38, 42, 59, .7);
     line-height: 26px;
 }
+
 .about_4 {
     min-height: 660px;
     background: url('../assets/images/bg.png') no-repeat center;
     background-size: cover;
 }
+
 .about_4 .content {
     padding: 138px 0 0;
     position: relative;
     height: 100%;
 }
+
 .content {
     width: 80%;
     margin: 0 auto;
 }
+
 .about_4 h3 {
     font-family: 'Rajdhani';
     font-size: 48px;
@@ -332,18 +627,21 @@ li {
     color: rgba(255, 255, 255, .5);
     line-height: 1;
 }
+
 .about_4 h5 {
     font-size: 30px;
     color: #00b4b7;
     line-height: 1;
     margin: 8px 0 10px;
 }
+
 .about_4 p {
     font-size: 15px;
     color: #ffffff;
     color: rgba(255, 255, 255, .44);
     line-height: 30px;
 }
+
 .about_4 h6 {
     font-size: 48px;
     color: #00b4b7;
@@ -351,29 +649,35 @@ li {
     font-weight: lighter;
     margin: 52px 0 12px;
 }
+
 .about_4 ul {
     padding-left: 18px;
     list-style: inherit;
 }
+
 .about_4 li {
     list-style: inherit;
     color: #ffffff;
 }
+
 .about_4 .bl_map {
     position: absolute;
     top: 87px;
     right: -110px;
 }
+
 .bl_map {
     position: relative;
     width: 951px;
 }
+
 .bl_map .scope.s3 {
     width: 166px;
     height: 166px;
     left: 62%;
     top: 21%;
 }
+
 .bl_map .scope {
     position: absolute;
     z-index: 9;
@@ -383,6 +687,7 @@ li {
     animation: h_map 2s .6s linear alternate infinite;
     -webkit-animation: h_map 2s .6s linear alternate infinite;
 }
+
 .bl_map .scope:before {
     content: '';
     width: 100%;
@@ -397,25 +702,29 @@ li {
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     opacity: .5;
-    filter: alpha(opacity = 50);
+    filter: alpha(opacity=50);
-    -webkit-filter: alpha(opacity = 50);
+    -webkit-filter: alpha(opacity=50);
     animation: h_map 2s linear alternate infinite;
     -webkit-animation: h_map 2s linear alternate infinite;
 }
+
 @keyframes h_map {
     0% {
- 
+
-    transform: scale(.6);
+        transform: scale(.6);
-}
+    }
-100% {
+
-  
+    100% {
-    transform: scale(1);
+
-}
+        transform: scale(1);
+    }
 }
+
 .bl_map .scope.s3 p {
     width: 100%;
     text-align: center;
 }
+
 .bl_map .scope p {
     font-size: 14.5px;
     color: #c2cff3;
@@ -425,4 +734,78 @@ li {
     top: 50%;
     margin-top: -12px;
 }
+
+.my_timeline_prev,
+.my_timeline_next {
+    float: left;
+    display: inline-block;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+.my_timeline_prev {
+    /* width: 200px; */
+    /* float: left; */
+    flex: 0.5
+}
+
+.my_timeline_next {
+    /* width: 34px;
+    margin-left: -22px; */
+    flex: 0.5
+}
+
+.ul_box {
+    width: 100%;
+
+    display: inline-block;
+    float: left;
+    margin-top: 2px;
+    overflow: hidden;
+}
+
+.my_timeline_item {
+    display: inline-block;
+    flex: 1;
+
+}
+
+.my_timeline_node {
+    box-sizing: border-box;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.my_timeline_node.active {
+    background-color: #fff !important;
+    color: rgb(0, 113, 203);
+    font-size: 26px;
+    line-height: 24px;
+}
+
+.my_timeline_item_line {
+    /* width: 100%; */
+    height: 10px;
+    /* margin: -14px 0 0 28px; */
+    border-top: 2px solid #E4E7ED;
+    border-left: none;
+}
+
+.my_timeline_item_content {
+    width: 80%;
+    margin: auto;
+
+}
+
+h5 {
+    font-family: 'Rajdhani';
+    font-size: 30px;
+    color: #ffffff;
+    color: rgba(219, 219, 219);
+    line-height: 24px;
+    text-transform: uppercase;
+    letter-spacing: -1px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
 </style>