设计图各个静态页面
This commit is contained in:
dzj
parent
f8ca99b48e
commit
55b303fbaa
@ -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;
|
||||
|
||||
BIN
src/assets/images/rongyu/1.png
Normal file
BIN
src/assets/images/rongyu/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
src/assets/images/rongyu/2.png
Normal file
BIN
src/assets/images/rongyu/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/images/rongyu/3.png
Normal file
BIN
src/assets/images/rongyu/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
src/assets/images/rongyu/4.png
Normal file
BIN
src/assets/images/rongyu/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/images/rongyu/5.png
Normal file
BIN
src/assets/images/rongyu/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/images/rongyu/6.png
Normal file
BIN
src/assets/images/rongyu/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
src/assets/images/rongyu/7.png
Normal file
BIN
src/assets/images/rongyu/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
src/assets/images/rongyu/bg.png
Normal file
BIN
src/assets/images/rongyu/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/rongyu/jiazhi.png
Normal file
BIN
src/assets/images/rongyu/jiazhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
src/assets/images/rongyu/shiming.png
Normal file
BIN
src/assets/images/rongyu/shiming.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
BIN
src/assets/images/rongyu/yuanjing.png
Normal file
BIN
src/assets/images/rongyu/yuanjing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
@ -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);
|
||||
|
||||
@ -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 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 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>
|
||||
<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>
|
||||
<div class="about2">
|
||||
<div class="content">
|
||||
<div class="bg">
|
||||
<div class="float wow fadeInUp animated">
|
||||
</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.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="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;">
|
||||
连年被授予国家“守合同重信用企业”、莆田市“纳税大户”、<br>"诚信企业先
|
||||
进单位”、“建筑业骨干企业”、 “综合实力十强” <br>等光荣称号。
|
||||
获得了保利地产、建发地产、百威英博(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>
|
||||
|
||||
<div style="width: 80%;margin: auto;">
|
||||
<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="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 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 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);
|
||||
-webkit-filter: alpha(opacity = 50);
|
||||
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);
|
||||
}
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user