设计图各个静态页面

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,6 +20,7 @@
                 </div>
             </div>
         </div>
+        <div v-show="activeName == 'first'">
             <div style="width: 80%;margin: auto;">
                 <div style="height: 50px;"></div>
                 <div style="font-size: 26px;color:rgba(0,0,0,.6)">飞阳建设</div>
@@ -45,7 +47,8 @@
                             <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>
+                                    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;">
                                 公司秉承“诚信、责任、和谐、效益”的核心价值观
@@ -94,7 +97,6 @@
 
                     </p>
                     <p>知识型、管理型、创新型的团队将为公司持续发展注入无限动力。
-
                     </p>
 
                     <div style="height: 70px;"></div>
@@ -104,19 +106,26 @@
             <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 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;">本地行业之首
+                        <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万吨
+                        <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) 、美国皇冠制罐、佳通轮胎、南
+                        <p class="wow fadeInUp animated"
+                            style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInUp;">
+                            获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
                             平铝业、福清核电、<br>湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
                         </p>
 
@@ -133,17 +142,299 @@
                 </div>
             </div>
         </div>
+        <div v-show="activeName == 'second'">
+            <!--时间线-->
+            <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="width: 80%;margin: auto;display: flex;justify-content: space-between;">
+                <div style="width:   32%;margin-bottom: 20px;">
+                    <div style=" ">
+                        <img src="@/assets/images/rongyu/yuanjing.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>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>
 <script>
 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%;
@@ -402,20 +707,24 @@ li {
     animation: h_map 2s linear alternate infinite;
     -webkit-animation: h_map 2s linear alternate infinite;
 }
+
 @keyframes h_map {
     0% {
 
         transform: scale(.6);
     }
+
     100% {
 
         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>