导航页完成初版

src/App.vue

@@ -4,7 +4,7 @@
         
         <div :class="{ 'header': true, 'fixed-width': isScrolled }" >
           <img style="margin: 24px 0 0 42px;width: 213px;object-fit: contain;" src="@/assets/images/logo.png" >
-          <el-menu style="margin-right: 15px;float: right;height: 100%;display: flex;align-items: center;background-color:transparent ;border: none;"  :default-active="activeIndex" class="el-menu-demo" mode="horizontal" >
+          <el-menu style="margin-right: 15px;float: right;height: 100%;display: flex;align-items: center;background-color:transparent ;border: none;"  :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="switchto" >
             <el-menu-item index="1">首页</el-menu-item>
             <el-menu-item index="2">走进飞阳</el-menu-item>
             <el-menu-item index="3">新闻资讯</el-menu-item>
@@ -22,7 +22,7 @@
       <div class="content" style="display: flex;justify-content: space-between;text-decoration: none;">
     <div class="text" >
       <!-- <h3>020-89898233</h3> -->
-      <p>地址：福建省莆田市荔城区荔园中路西侧50米飞阳建设工程有限公司(香槟国际)</p>
+      <p style="margin-top: 0;">地址：福建省莆田市荔城区荔园中路西侧50米飞阳建设工程有限公司(香槟国际)</p>
       <p>飞阳建筑集团 版权所有</p>
    
 
@@ -49,7 +49,15 @@ export default{
   data(){
     return{
       isScrolled:false,
-      activeIndex:'1'
+      activeIndex:'1',
+      routerlist:{
+        '1':'/',
+        '2':'/aboutus',
+        '3':'/news',
+        '4':'/project',
+        '5':'/recruit',
+        '6':'/contactus'
+      }
     }
   },
   mounted() {
@@ -61,6 +69,14 @@ export default{
     window.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
+    switchto(index){
+     if(location.pathname==this.routerlist[index]){
+      return
+     }
+this.$router.push({
+  path:this.routerlist[index]
+})
+    },
     handleScroll() {
       // 获取滚动条位置
       const scrollPosition = window.scrollY;

src/assets/global.css

@@ -2,6 +2,3 @@ body,html{
     margin: 0;
     padding: 0;
 }
-body{
-    padding-top: 581px;
-}

src/router/index.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-
+import aboutus from '../views/aboutus.vue'
+import news from '@/views/news.vue'
+import project  from '@/views/project.vue'
+import recruit from '@/views/recruit.vue'
+import contactus from '@/views/contactus.vue'
 Vue.use(VueRouter)
 
 const routes = [
@@ -11,14 +15,25 @@ const routes = [
     component: HomeView
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-    }
+    path:'/aboutus',
+    name:'aboutus',
+    component:aboutus
+  },
+  {
+    path:'/news',
+    component:news
+  },
+  {
+    path:'/project',
+    component:project
+  },
+  {
+    path:'/recruit',
+    component:recruit
+  },
+  {
+    path:'/contactus',
+    component:contactus
   }
 ]
 

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding-top: 581px;">
     <div class="banner" style="height: 581px;">
 
       <div class="bd" style="height: 581px;position: relative;">
@@ -315,6 +315,7 @@ export default {
   width:100%;
 
 }
+
  .swiper-slide::after {
   content: '';
   left: 0px;

src/views/aboutus.vue

@@ -0,0 +1,428 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">走进飞阳</a> <a href="javascript:;">公司简介</a>
+                    </div>
+                    <div class="list" style="bottom:-15px">
+                        <el-tabs v-model="activeName" @tab-click="handleClick">
+                            <el-tab-pane label="公司简介" name="first"></el-tab-pane>
+                            <el-tab-pane label="公司荣誉" name="second"></el-tab-pane>
+                            <el-tab-pane label="组织架构" name="third"></el-tab-pane>
+                            <el-tab-pane label="企业文化" name="fourth"></el-tab-pane>
+                        </el-tabs>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="width: 80%;margin: auto;">
+            <div style="height: 50px;"></div>
+            <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: 30px;">
+                飞阳建设工程有限公司创立于1963年，为福建省建筑业龙头企业。具有房屋建筑工程、市政公用工程施工总承包一级，钢结构工程、建筑装修装饰工程、环保工程、地基
+                基础工程、消防设施工程专业承包一级等资质。公司通过IS09001 质量、ISO14001 环境、OHSMS18001 职业健康安全管理体系认证。
+                <div style="height: 20px;"></div>
+                公司长期致力于新工艺、新科技的革新换代，并将新技术推广应用于施工现场。近年相继承建国家及省重点工程平潭社会福利院、莆田市体育公园飞碟靶场扩建工程、环
+                东海域滨海旅游浪漫线景观市政配套等项目并圆满交付使用。公司承建的“莆田皇冠制罐有限公司建设主生产厂房”、“ 鹭燕医药莆田仓储物流中心”、“福州新店西安
+                置房工程”、“高林学校” 等多个项目荣获福建省优质工程“闽江杯”荣誉称号。并获得了保利地产、建发地产、百威英博(ABInbev) 、美国皇冠制罐、佳通轮胎、南
+                平铝业、福清核电、湄洲湾核电、鹭燕医药等众多国内外客户的赞誉和认可。
+                <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 style="width: 80%;margin: auto;">
+            <div style="height: 50px;"></div>
+            <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>拥有职工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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            activeName: 'first'
+        };
+    },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
+        }
+    }
+};
+</script>
+<style scoped>
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+
+.page_nav .inner_bor {
+    height: 4px;
+    background: #f23c39;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    display: block;
+}
+
+::v-deep .el-tabs__item {
+
+    color: rgba(255, 255, 255, 0.8);
+    border: none;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+    background-color: transparent;
+}
+
+.bg {
+    background-image: url(' ../assets/images/公司简介背景.png');
+    background-size: cover;
+}
+
+.about2 .bg {
+    position: relative;
+    width: 100%;
+    height: 540px;
+
+    background-size: cover;
+    padding-top: 155px;
+    background-size: 100% 100%;
+    border-radius: 14px;
+    -webkit-border-radius: 14px;
+    -moz-border-radius: 14px;
+    -ms-border-radius: 14px;
+    -o-border-radius: 14px;
+}
+
+.about2 .float {
+    width: 335px;
+    height: 286px;
+    background: no-repeat center;
+    background-size: cover;
+    position: absolute;
+    top: 43px;
+    left: 76px;
+    background-image: url('../assets/images/com-logo.png');
+}
+
+.about2 .introduce {
+    width: 60.5%;
+    float: right;
+}
+
+.about2 h3 {
+    font-size: 36px;
+    color: #fff;
+    line-height: 1;
+    /* letter-spacing: 44px; */
+    font-weight: lighter;
+    margin-bottom: 22px;
+}
+
+.about2 p {
+    font-size: 15px;
+    color: #262a3b;
+    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;
+    color: #ffffff;
+    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;
+    line-height: 1;
+    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;
+}
+
+.bl_map .scope.s3:before {
+    animation: h_map 2s .6s linear alternate infinite;
+    -webkit-animation: h_map 2s .6s linear alternate infinite;
+}
+.bl_map .scope:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: #d1486c;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    opacity: .5;
+    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);
+}
+100% {
+  
+    transform: scale(1);
+}
+}
+.bl_map .scope.s3 p {
+    width: 100%;
+    text-align: center;
+}
+.bl_map .scope p {
+    font-size: 14.5px;
+    color: #c2cff3;
+    white-space: nowrap;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -12px;
+}
+</style>

src/views/contactus.vue

@@ -0,0 +1,278 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">联系我们</a> <a href="javascript:;">联系我们</a>
+                    </div>
+                
+                </div>
+            </div>
+        </div>
+        <div style="height: 80px;"></div>
+        <div class="content">
+            <div class="bg" >
+                    <div class="slogan wow fadeInUp animated" style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp;">
+                        <h3>为客户创造价值</h3>
+                        <h5>CREATING VALUE</h5>
+                    </div>
+                    <div class="text wow fadeInUp animated" style="animation-delay: 0.3s; visibility: visible; animation-name: fadeInUp;">
+                        <h3>飞阳建筑工程有限公司</h3>
+                       <p>地址：福建省莆田市荔城区荔园中路西侧50米飞阳建设工程有限公司(香槟国际)
+</p>
+<p>电话：05943613551</p>
+<p>传真：05943613551</p>
+<p>邮箱：1053059120@qq.com</p>
+<p class="no_margin">网址：https://www.fygroup.cn
+</p>
+                    </div>
+                     <div class="float">
+                        <div class="introduction wow fadeInRight animated" style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInRight;">
+                            <h3>关注飞阳建筑工程</h3>
+                            <h5>FOLLOW US</h5>
+                            <p class="no_margin">关注我们的社交帐号</p>
+                        </div>
+                        <!-- <div class="socials_wrap">
+                            <a href="javascript:;" class=""><span class="social_icon social_icon_wechat">
+                                    <div class="weChat_img"><img src="../images/wechat_bg.jpg"></div>
+                                </span></a>
+                            <a href="javascript:;" class="on"><span class="social_icon social_icon_video">
+                                    <div class="weChat_img"><img src="../images/video_bg.jpg"></div>
+                                </span></a>
+                            <a href="javascript:;" class=""><span class="social_icon social_icon_blog">
+                                    <div class="weChat_img"><img src="../images/blog_bg.jpg"></div>
+                                </span></a>
+                            <a href="javascript:;"><span class="social_icon social_icon_applet">
+                                    <div class="weChat_img"><img src="../images/applet_bg.jpg"></div>
+                                </span></a>
+                        </div> -->
+                       <img src="@/assets/images/weixin.png" style="width: 100%;">
+                    </div>
+                </div>
+<div style="height: 60px;"></div>
+<div>
+    <div style="background-color: rgb(232,232,232);padding: 8px 15px;border-radius: 14px 14px 0 0;display: flex;">
+    <img src="@/assets/images/留言图标.png" style="width: 40;object-fit: contain;">
+    <p style="margin-left: 20px;font-size: 20px;color:rgb(48,113,183) ;">留言联系</p>
+    
+    </div>
+    <div style="width: 90%;margin: auto;">
+    <p style="padding: 25px 0;border-bottom: 1px solid rgba(0,0,0,.2);">若您有合作意向，请您为我们留言或使用上面方式联系我们，我们将尽快给你回复，并为您提供最真诚的服务，谢谢。
+</p>
+<div style="height: 30px;"></div>
+<div style="display: flex;justify-content: space-between;">
+    <div style="width: 45%;">
+    <el-input style="margin-bottom: 20px;" v-model="input1" placeholder="联系人"></el-input>
+    <el-input style="margin-bottom: 20px;" v-model="input2" placeholder="电话"></el-input>
+    <el-input v-model="input3" placeholder="邮箱"></el-input>
+</div>
+<div style="width: 50%;height: 100%;">
+    <el-input
+    style="height: 100%;"
+  type="textarea"
+  :autosize="{ minRows: 7, maxRows: 22}"
+  placeholder="留言内容"
+  v-model="textarea2">
+</el-input>
+<div style="height: 10px;"></div>
+<div style="display: flex;justify-content: end;"><el-button type="primary">发送留言</el-button></div>
+</div>
+</div>
+    </div>
+</div>
+        </div>
+<div style="height: 60px;"></div>
+    </div>
+
+</template>
+<script>
+</script>
+<style scoped>
+.content{
+    width: 80%;
+    margin:auto
+}
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+::v-deep .el-input__inner{
+    background-color: rgb(240,240,240);
+}
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+
+.page_nav .inner_bor {
+    height: 4px;
+    background: #f23c39;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    display: block;
+}
+
+.bg{
+    background-image: url('@/assets/images/cantactus.png');
+    position: relative;
+    width: 100%;
+    height: 542px;
+ 
+    background-size: cover;
+    border-radius: 14px;
+    -webkit-border-radius: 14px;
+}
+.slogan {
+    position: absolute;
+    top: 94px;
+    left: 72px;
+}
+ .slogan h3 {
+    font-size: 60px;
+    color: #ffffff;
+    line-height: 1;
+    font-weight: lighter;
+    letter-spacing: 42px;
+    margin: initial;
+}
+.slogan h5 {
+    font-family: 'Rajdhani';
+    font-size: 36px;
+    color: #ffffff;
+    color: rgba(48,113,183, .5);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: -.4px;
+    margin-top: 8px;
+}
+.text {
+    position: absolute;
+    bottom: 60px;
+    left: 72px;
+}
+.text h3 {
+    font-size: 24px;
+    color: #3c3c48;
+    margin-bottom: 14px;
+
+}
+ .text p {
+    font-size: 15px;
+    color: #44526a;
+    line-height: 24px;
+}
+
+p {
+    font-size: 14px;
+    color: #95959d;
+    line-height: 24px;
+    text-align: justify;
+}
+.no_margin {
+    margin-bottom: 0 !important;
+}
+ .float {
+    position: absolute;
+    height: 100%;
+    right: 0px;
+    background-color: rgb(242,242,242);
+    padding: 42px 44px 145px 44px;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    -ms-border-radius: 6px;
+    -o-border-radius: 6px;
+}
+.float h5{
+    color: rgb(48,113,183);
+}
+ .float .introduction {
+    margin-bottom: 10px;
+}
+.foot_section .links_list, .socials_wrap {
+    display: inline-block;
+    vertical-align: top;
+}
+</style>

src/views/news.vue

@@ -0,0 +1,385 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">新闻资讯</a> <a href="javascript:;">企业新闻</a>
+                    </div>
+                    <div class="list" style="bottom:-15px">
+                        <el-tabs v-model="activeName" @tab-click="handleClick">
+                            <el-tab-pane label="企业新闻" name="first"></el-tab-pane>
+                            <el-tab-pane label="行业动态" name="second"></el-tab-pane>
+                           
+                        </el-tabs>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="height: 80px;"></div>
+        <div style="width: 80%;margin: auto;">
+            <el-row>
+  <el-col :span="8" >
+    <el-card :body-style="{ padding: '0px' }">
+      <div class="card_img1 mark" >
+        <div class="date">2020.12.31</div>
+      </div>
+      <div>
+        <div class="news_li_con"><div class="title">飞阳建设南江滨东大道获得福州</div> <div class="introduction">最近，一场以品质为核心的比拼在福州城区多条道路悄悄
+展开。聚焦工程质量、路面铺装、绿化景观、安全文明等"赛点"，包括我司承建的南江滨东大道项目在内的...</div>  <div class="more">more...</div> </div>
+       
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="8" >
+    <el-card :body-style="{ padding: '0px' }">
+      <div class="card_img2 mark" >
+        <div class="date">2020.03.07</div>
+      </div>
+      <div>
+        <div class="news_li_con"><div class="title">核酸筛选检测进工地为疫情期间</div> <div class="introduction">为进一步做好疫情期间复工复产工作,3月6日我司组织华
+大生物科技(武汉)有限公司进入保利城六期项目，为所有返岗工人和项目管理人员进行新型冠状病毒核酸检测...</div>  <div class="more">more...</div> </div>
+       
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="8" >
+    <el-card :body-style="{ padding: '0px' }">
+      <div class="card_img3 mark" >
+        <div class="date">2017.02.19</div>
+      </div>
+      <div>
+        <div class="news_li_con"><div class="title">点赞!莆田市新飞天鞋业有限公司</div> <div class="introduction">江口镇充分发挥辖区内新飞天鞋业有限公司产业链完整的
+优势，根据上级部署,积极调度该公司转移产能，火线生产急需的防疫物资,为打赢新冠肺炎防控阻击战提供充...
+</div>  <div class="more">more...</div> </div>
+       
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+        </div>
+        <div style="height: 70px;"></div>
+        <div style="width: 80%;margin: auto;">
+        <div v-for="item in newslist" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;">
+            <div class="date1" style="width: 12%;">2019.07.10</div>
+            <div class="" style="  float: left;
+    width: 88%;"> <div class="title1">增强服务意识构建共享平台-飞阳厦门分公司机场大道工程举办搅拌桩智能化工艺观摩会
+</div> <div class="introduction1">厦门市政建设开发有限公司(厦门翔安机场大道工程业主), 为更好地向集团旗下所属企业共享市政软基处理施工的先进工艺。特邀我司于2019年6月22日在厦门翔安机
+场大道工程项目施工现场，举办水泥搅拌桩标准化施工专项观摩会供其属下企业共同学习水泥搅拌桩智能化施工的先进施工工艺，为加快厦门市市政建设工程做出贡献
+</div></div>
+        </div>
+        <div style="height: 40px;"></div>
+        <div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+                    <em>更多新闻</em>
+                </div>
+                <div style="height: 60px;"></div>
+    </div>
+</div>
+</template>
+<script>
+import '@/assets/images/news1.png'
+export default{
+    data(){
+        return{
+            activeName:'first',
+            newslist:[{},{},{},{},{},{}]
+
+        }
+    },
+    methods:{
+        handleClick(){
+
+        }
+    }
+}
+</script>
+<style scoped>
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.date{
+  
+    font-size: 26px;
+    color: #dfd4c3;
+    line-height: 1;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+    padding: 0 30px;
+    width: 100%;
+}
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+
+.page_nav .inner_bor {
+    height: 4px;
+    background: #f23c39;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    display: block;
+}
+
+::v-deep .el-tabs__item {
+
+    color: rgba(255, 255, 255, 0.8);
+    border: none;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+    background-color: transparent;
+}
+.card_img1{
+    border-radius: 14px;
+    background-image: url('../assets/images/news1.png');
+    position: relative;
+    width: 100%;
+    height: 307px;
+
+    background-size: cover;
+    margin-bottom: 16px;
+   border-radius: 14px;
+}
+.card_img2{
+    border-radius: 14px;
+    background-image: url('../assets/images/news2.png');
+    position: relative;
+    width: 100%;
+    height: 307px;
+
+    background-size: cover;
+    margin-bottom: 16px;
+   border-radius: 14px;
+}
+.card_img3{
+    border-radius: 14px;
+    background-image: url('../assets/images/news3.png');
+    position: relative;
+    width: 100%;
+    height: 307px;
+
+    background-size: cover;
+    margin-bottom: 16px;
+   border-radius: 14px;
+}
+.mark::before{
+    
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    opacity: .25;
+    filter: alpha(opacity = 25);
+    -webkit-filter: alpha(opacity = 25);
+    border-radius: 14px;
+
+}
+::v-deep .el-card.is-always-shadow{
+    border-radius: 14px;
+    box-shadow: initial;
+}
+::v-deep el-card{
+    border:none
+}
+.news_li_con {
+    position: relative;
+padding-left: 28px;
+}
+ .news_li_con:before {
+    content: '';
+    width: 6px;
+    height: 21px;
+    background-color: rgb(48,113,183);
+    position: absolute;
+    top: 4px;
+    left: 0;
+}
+.title {
+    font-size: 22px;
+    color: #3c3c48;
+    color: rgba(60, 60, 72, .7);
+    line-height: 30px;
+    font-weight: bold;
+    max-width: 77%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all .4s;
+    -webkit-transition: all .4s;
+    -moz-transition: all .4s;
+    -ms-transition: all .4s;
+    -o-transition: all .4s;
+}
+ .introduction {
+    min-height: 72px;
+    font-size: 14.5px;
+    color: #848484;
+    color: rgba(132, 132, 132, .7);
+    line-height: 24px;
+    margin: 8px 0 14px;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+ .more {
+    font-family: 'Rajdhani';
+    font-size: 18px;
+    color: #3958cd;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: -.4px;
+}
+div{
+    box-sizing: border-box;
+}
+.el-col{
+   padding: 0px 8px;
+}
+.newsitem::before{
+    content: '';
+    width: 100%;
+    height: 2px;
+    background-color: #ebebeb;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+.newsitem .date1{
+    width: 128px;
+    float: left;
+    font-family: 'Rajdhani';
+    font-size: 26px;
+    color: rgb(48,113,183);
+    line-height: 1;
+}
+.title1{
+    font-size: 20px;
+    color: #3c3c48;
+    color: rgba(60, 60, 72, .7);
+    line-height: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    max-width: 77%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all .4s;
+    -webkit-transition: all .4s;
+    -moz-transition: all .4s;
+    -ms-transition: all .4s;
+    -o-transition: all .4s;
+}
+.newsitem .introduction1{
+    font-size: 14.5px;
+    color: #848484;
+    color: rgba(132, 132, 132, .7);
+    line-height: 24px;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.page_more {
+    position: relative;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 70px;
+    background-color:  rgb(48,113,183);
+    text-align: center;
+    cursor: pointer;
+    border-radius: 14px;
+    -webkit-border-radius: 14px;
+    -moz-border-radius: 14px;
+    -ms-border-radius: 14px;
+    -o-border-radius: 14px;
+}
+</style>

src/views/project.vue

@@ -0,0 +1,269 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">工程展示</a> <a href="javascript:;">工程展示</a>
+                    </div>
+                
+                </div>
+            </div>
+        </div>
+        <div style="margin: 60px 0px;text-align: center;" >
+    <el-radio-group v-model="radio3" style="margin: auto;" >
+      <el-radio-button class="myself" style="border-radius: 26px;margin-right:18px" label="1" border>房屋建筑</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="2" border >市政公路</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="3" border >工业建筑</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="4" border >金属门窗</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="5" border >钢结构厂</el-radio-button>
+    </el-radio-group>
+  </div>
+  <div class="content2" style="width: 80%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;">
+    <div style="width: 32%;border-radius: 15px 15px 0 0 ;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project1.png" style="width: 100%;border-radius: 15px 15px 0 0 ;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>兴国幼儿园</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project2.png" style="width: 100%;border-radius: 15px 15px 0 0 ;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>漳州龙海石码中心小学</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project3.png" style="width: 100%;border-radius: 15px 15px 0 0 ">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>漳州市保利时光印象
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project4.png" style="width: 100%;border-radius: 15px 15px 0 0 ">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>2021P07地块(一期)二期
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project5.png" style="width: 100%;border-radius: 15px 15px 0 0">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>厦门现代服务业基地
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project6.png" style="width: 100%;border-radius: 15px 15px 0 0;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>高林学校</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project7.png" style="width: 100%;border-radius: 15px 15px 0 0;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>J2016P01地块建设工程
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project8.png" style="width: 100%;border-radius: 15px 15px 0 0;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>保利叁仟栋三期(地块二)
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
+     <img src="@/assets/images/project9.png" style="width: 100%;border-radius: 15px 15px 0 0;">
+     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
+    <p>南安保利香槟公馆
+</p><p class="project-font" >MORE...</p>
+    </div>
+    </div>
+   
+    
+  </div>
+  <el-pagination style="text-align: center;margin: 60px;"
+  background
+  layout="prev, pager, next"
+  prev-text="上一页"
+  next-text="下一页"
+  :total="50">
+
+</el-pagination>
+    </div>
+    
+</template>
+<script>
+export default{
+    data(){
+        return{
+            activeName:'first',
+            radio3:'1'
+        }
+    },
+    methods:{
+        handleClick(){
+            
+        }
+    }
+}
+</script>
+<style scoped>
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+
+.page_nav .inner_bor {
+    height: 4px;
+    background: #f23c39;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    display: block;
+}
+
+::v-deep .el-tabs__item {
+
+    color: rgba(255, 255, 255, 0.8);
+    border: none;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+    background-color: transparent;
+}
+ ::v-deep .el-radio-button__inner {
+    border-radius: 30px !important;
+    border-left: 1px solid #DCDFE6;
+}
+.project-font{
+    font-family: 'Rajdhani';
+    /* font-size: 18px; */
+    color: #3958cd;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: -.4px;
+    font-weight: bold;
+}
+.content2 img{
+    width: 389px;
+    height: 258px;
+}
+.custom-prev,
+.custom-next {
+  border: 1px solid #ccc; /* 浅色边框 */
+  background-color: #fff; /* 白色背景 */
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+    ::v-deep .el-pagination.is-background .btn-next{
+      margin: 0 5px;
+      background-color: white;
+      color: black;
+      min-width: 68px;
+      height: 40px;
+      border-radius: 5px;
+      border:1px solid #4581ae ;
+    }
+    ::v-deep .el-pagination.is-background .btn-prev{
+      margin: 0 5px;
+      background-color: white;
+      color: black;
+      min-width: 68px;
+      height: 40px;
+      border-radius: 5px;
+      border:1px solid #4581ae ;
+    }
+    ::v-deep .el-pager li{
+        line-height: 39px;
+        height: 40px;
+    }
+
+</style>

src/views/recruit.vue

@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">人才招聘</a> <a href="javascript:;">人才招聘</a>
+                    </div>
+                
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div style="height: 60px;"></div>
+            <div style="font-size: 26px;color:rgba(0,0,0,.6)">我们坚信</div>
+            <div style="color:rgba(60,115,164);font-size:34px">人力资源是公司的核心竞争力之一</div>
+            <div style="height: 40px;"></div>
+            <div style="color: rgba(0,0,0,.6);line-height: 30px;">
+                对于中国建筑而言，最能体现竞争优势的一个方面就是拥有一大批忠诚于企业、 忠于事业、坚信团队利益高于个人利益，能够自我约束、自我激励和自我发 展的懂技术、
+会管理、擅营销的人才团队。
+
+                <div style="height: 30px;"></div>
+            <img src="@/assets/images/人才招聘.png" style="display: block;width: 100%;object-fit: contain;">
+        
+        </div>
+        <div style="height: 60px;"></div>
+            <div style="font-size: 26px;color:rgba(0,0,0,.6)">我们将始终遵循</div>
+            <div style="color:rgba(60,115,164);font-size:34px;line-height: normal;">"事业留人、感情留人、待遇留人”和“关注个体”的基本人力资源管理理念
+</div>
+            <div style="height: 40px;"></div>
+            <div style="color: rgba(0,0,0,.6);line-height: 30px;">
+                并将这一理念贯彻于我们的各项人力资源管理政策当中，通过职业规划、教育培训和绩效考核的三个全员覆盖，建立与个人价值创造和能力结合、共享企业发展成果的薪
+酬激励机制，强化人才的吸引发展力度，更好地为企业发展提供强有力的人才支撑。      
+            <div style="height: 60px;"></div>
+        </div>
+      
+            <div style="font-size: 26px;color:rgba(0,0,0,.6)">我们将始终坚持</div>
+            <div style="color:rgba(60,115,164);font-size:34px;line-height: normal;">德才兼备、以德为先的用人原则
+</div>
+            <div style="height: 40px;"></div>
+            <div style="color: rgba(0,0,0,.6);line-height: 30px;">
+                尺有所短、寸有所长，我们不追求完人，而是遵循“用人所长”的理念。我们始终坚持“绩效原则”，通过“赛马机制”以“业绩论英雄”。
+唯一可以否定一个人的便是他的“品行”， 我们绝对不会使用“品行不端” 之人。
+
+
+           
+            <div style="height: 100px;"></div>
+        </div>
+        </div>
+    </div>
+</template>
+<script>
+</script>
+<style scoped>
+.content{
+    width: 80%;
+    margin:auto
+}
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+
+.page_nav .inner_bor {
+    height: 4px;
+    background: #f23c39;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    display: block;
+}
+
+</style>