初始化
This commit is contained in:
dzj
parent
172377160b
commit
a92f78af56
15
.babelrc
Normal file
15
.babelrc
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
|
||||
{
|
||||
"presets": [["es2015", { "modules": false }]],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
}
|
||||
696
package-lock.json
generated
696
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -7,16 +7,21 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^2.15.14",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"swiper": "^5.4.5",
|
||||
"vue": "^2.6.14",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/swiper": "^6.0.0",
|
||||
"@vue/cli-plugin-pwa": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
106
src/App.vue
106
src/App.vue
@ -1,32 +1,96 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<nav>
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</nav>
|
||||
<div>
|
||||
<div id="header" :class="{ 'topheader': isScrolled }">
|
||||
|
||||
<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-item index="1">首页</el-menu-item>
|
||||
<el-menu-item index="2">走进飞阳</el-menu-item>
|
||||
<el-menu-item index="3">新闻资讯</el-menu-item>
|
||||
<el-menu-item index="4">工程展示</el-menu-item>
|
||||
<el-menu-item index="5">人才招聘</el-menu-item>
|
||||
<el-menu-item index="6">联系我们</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<router-view/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
isScrolled:false,
|
||||
activeIndex:'1'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 监听滚动事件
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除滚动事件监听
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
// 获取滚动条位置
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
// 根据滚动条位置判断是否添加类名
|
||||
if (scrollPosition > 0) {
|
||||
this.isScrolled = true;
|
||||
} else {
|
||||
this.isScrolled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
<style lang="scss" scoped>
|
||||
#header{
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
max-width: 1362px;
|
||||
margin: auto;
|
||||
position: fixed;
|
||||
top: 43px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 9999;
|
||||
transition: all .4s;
|
||||
-webkit-transition: all .4s;
|
||||
|
||||
}
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
height: 82px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-width{
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.topheader{
|
||||
top:0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
7
src/assets/global.css
Normal file
7
src/assets/global.css
Normal file
@ -0,0 +1,7 @@
|
||||
body,html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
padding-top: 581px;
|
||||
}
|
||||
BIN
src/assets/images/1.png
Normal file
BIN
src/assets/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
src/assets/images/2.png
Normal file
BIN
src/assets/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
src/assets/images/3.png
Normal file
BIN
src/assets/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 981 KiB |
BIN
src/assets/images/4.png
Normal file
BIN
src/assets/images/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/images/index3.png
Normal file
BIN
src/assets/images/index3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
src/assets/images/index3_1.png
Normal file
BIN
src/assets/images/index3_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
BIN
src/assets/images/index3_2.png
Normal file
BIN
src/assets/images/index3_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
src/assets/images/index3_3.png
Normal file
BIN
src/assets/images/index3_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/images/point.png
Normal file
BIN
src/assets/images/point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
BIN
src/assets/images/vedio.png
Normal file
BIN
src/assets/images/vedio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 735 KiB |
@ -3,9 +3,11 @@ import App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import './assets/global.css'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
||||
@ -1,18 +1,417 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div>
|
||||
<div class="banner" style="height: 581px;">
|
||||
|
||||
<div class="bd" style="height: 581px;position: relative;">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide"><img src="@/assets/images/1.png" style="width: 100%;height:100%;"></div>
|
||||
<div class="swiper-slide"><img src="@/assets/images/2.png" style="width: 100%;height:100%;"></div>
|
||||
<div class="swiper-slide"><img src="@/assets/images/3.png" style="width: 100%;height:100%;"></div>
|
||||
<div class="swiper-slide"><img src="@/assets/images/4.png" style="width: 100%;height:100%;"></div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
|
||||
<div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="Wrapper index" style="">
|
||||
<div class="index_1" style="width: 80%;margin: 0 auto;padding: 50px 0;">
|
||||
<div class="content-top">
|
||||
<div class="content-left">
|
||||
<h3>企业新闻</h3>
|
||||
<h6>CORPORATE NEWS</h6>
|
||||
<!-- <div class="shares" style="">
|
||||
<h3 style="font-size: 14px;
|
||||
display: inline-block;
|
||||
color: #42424e;
|
||||
color: rgba(66, 66, 78, .6);
|
||||
padding-top: 4px;"><em style="display: block;">SH 600048</em>
|
||||
保利发展控股股票代码</h3>
|
||||
<h5 class="red green"><em style="display: block;">8.03</em>RMB</h5>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="index-top">
|
||||
<h3 style=" font-size: 24px;
|
||||
color: #3c3c48;
|
||||
color: rgba(60, 60, 72, .8);
|
||||
line-height: 30px;">飞阳建设南江滨东大道获得福州市2020年度市政道路工程品质</h3>
|
||||
<h5 style=" width: auto;
|
||||
float: none;
|
||||
font-size: 30px;
|
||||
color: #c0a988;
|
||||
margin: 3px 0 6px; line-height: 1;
|
||||
font-weight: bold;
|
||||
letter-spacing: -.2px;font-family: 'Rajdhani';">2023.12.31</h5>
|
||||
<p style=" color: rgba(115, 115, 124, .6); font-size: 13px;
|
||||
color: #95959d;
|
||||
line-height: 24px;
|
||||
text-align: justify;">最近,一场以品质为核心的比拼在福州城区多条道路悄悄展开。聚焦工程质量、路面铺装、绿化景观、安全文明等“赛点” ，包括我
|
||||
司承建的南江滨东大道项目在内的74个在建市政道路工程进行百日比拼。作为三江口片区的进出城主通道,南江滨东大道上每日车来
|
||||
车往，但因过往重型车辆较多,路面出现沉降等病害。针对需进行沉降病害处理的车行道，工程采用高分子聚
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 style=" font-family: 'Rajdhani';
|
||||
font-size: 23px;
|
||||
color: #8e8e95;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
letter-spacing: -.2px;
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: 18%;">2020.03.07 </h5>
|
||||
<h3 style=" float: left;
|
||||
margin: 0;
|
||||
width: 78%;
|
||||
font-size: 17px;
|
||||
color: #8e8e95;
|
||||
color: rgba(142, 142, 149, .8);
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;">核酸筛选检测进工地为疫情期间有序复工送上“定心丸”</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="index_2" style="padding-bottom: 70px;width: 80%;margin: 0 auto;">
|
||||
<div style="display: flex;">
|
||||
<div class="content2-left">
|
||||
<div>
|
||||
<h3>行业动态</h3>
|
||||
<h6>INDUSTRY TRENDS</h6>
|
||||
</div>
|
||||
<div class="textbox">
|
||||
<h3>齐心战役 民族担当</h3>
|
||||
<!-- <h3></h3> -->
|
||||
<h5>飞阳建设援建疫情防控集中点</h5>
|
||||
<!-- <h5></h5> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2-right">
|
||||
<img src="@/assets/images/vedio.png" style="width: 100%;height: 320px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index_3">
|
||||
<div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
|
||||
<div class="tiltle">
|
||||
<h3>飞扬建设工程业务领域<br>
|
||||
建筑产业<br>
|
||||
现代化发展趋势
|
||||
</h3>
|
||||
<p>飞扬包含房屋建筑市政公路、工业建筑，金属门窗、”钢结构广等业务领域
|
||||
</p>
|
||||
<p>
|
||||
致力于数据化、智能化创新发展，积极探索建筑产业现代化发展趋势
|
||||
</p>
|
||||
</div>
|
||||
<div class="list" style="position: absolute;
|
||||
left: 0;
|
||||
bottom: -42px;
|
||||
margin-right: -14px;
|
||||
z-index: 2;">
|
||||
<div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide1"><img src="@/assets/images/index3_1.png"></div>
|
||||
<div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div>
|
||||
<div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div>
|
||||
<div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div>
|
||||
<div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-pagination1" style="text-align: center;"></div>
|
||||
|
||||
</div>
|
||||
<!-- <div><img src=""></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index_4">
|
||||
<div style="padding: 120px 0 42px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 80%;
|
||||
margin: 0 auto;">
|
||||
<div class="content2-left">
|
||||
<div>
|
||||
<h3 style=" line-height: 60px;
|
||||
font-weight: lighter; font-size: 48px">公司荣耀<br>及成就展示</h3>
|
||||
</div>
|
||||
<div class="textbox">
|
||||
|
||||
<!-- <h3></h3> -->
|
||||
<h5 style="line-height: 20px;">荣获行业诸多奖项<br>
|
||||
拥有一支高素质的专业管理团队
|
||||
</h5>
|
||||
<!-- <h5></h5> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
// import Swiper from 'swiper';
|
||||
|
||||
|
||||
import Swiper from 'swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
HelloWorld
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 创建交叉观察器实例
|
||||
// this.observer = new IntersectionObserver(entries => {
|
||||
// entries.forEach(entry => {
|
||||
// if (entry.isIntersecting) {
|
||||
// entry.target.classList.add('visible');
|
||||
// } else {
|
||||
// entry.target.classList.remove('visible');
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// 观察每个项目元素
|
||||
// this.items.forEach((item, index) => {
|
||||
// const target = this.$refs['box' + index][0]; // 获取对应的元素
|
||||
// this.observer.observe(target); // 开始观察元素
|
||||
// });
|
||||
|
||||
|
||||
|
||||
// 初始化Swiper
|
||||
|
||||
new Swiper('.swiper-container', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4100,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
}
|
||||
)
|
||||
new Swiper('.swiper2', {
|
||||
slidesPerView: 3,
|
||||
slidesPerGroup: 1,
|
||||
spaceBetween: 20,
|
||||
pagination: {
|
||||
el: '.swiper-pagination1'
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 在组件销毁之前停止观察器
|
||||
// if (this.observer) {
|
||||
// this.items.forEach((item, index) => {
|
||||
// const target = this.$refs['box' + index][0];
|
||||
// this.observer.unobserve(target);
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.banner {
|
||||
width: 100%;
|
||||
margin: 0 auto !important;
|
||||
overflow: hidden;
|
||||
min-width: 1260px;
|
||||
height: 700px;
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.banner .bd {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.Wrapper {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 样式可根据需求自定义 */
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide1 {
|
||||
min-width: calc(26.66666vw - 14px);
|
||||
max-width: calc(26.66666vw - 14px);
|
||||
|
||||
margin-right: 14px;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide1 img {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.swiper-slide::after {
|
||||
content: '';
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
background-color: #DDCAB8;
|
||||
transition: width ease-in-out 4s;
|
||||
}
|
||||
|
||||
.swiper-slide-active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
color: RGB(48, 113, 183);
|
||||
line-height: 1;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 9px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: 'Rajdhani';
|
||||
font-size: 15px;
|
||||
color: #c0a988;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content-left {
|
||||
width: 33.5%;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.shares h5 {
|
||||
font-family: 'Rajdhani';
|
||||
font-size: 20px;
|
||||
color: #474747;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
letter-spacing: -.2px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
margin-left: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.shares h5:before {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: #d9d9d9;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.index-top {
|
||||
position: relative;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 2px solid #c9c9c9;
|
||||
border-bottom: 2px solid rgba(201, 201, 201, .5);
|
||||
|
||||
}
|
||||
|
||||
.content-top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content2-left {
|
||||
padding-top: 14px;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.content2-left .textbox h3 {
|
||||
font-size: 14.5px;
|
||||
color: #293d48
|
||||
}
|
||||
|
||||
.content2-left .textbox h5 {
|
||||
color: #8e8e95;
|
||||
margin-top: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.content2-right {
|
||||
width: 66.5%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.index_3 {
|
||||
padding-top: 140px;
|
||||
width: 100%;
|
||||
height: 787px;
|
||||
background: url(../assets/images/index3.png) no-repeat center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.tiltle h3 {
|
||||
font-size: 48px;
|
||||
color: RGB(48, 113, 183);
|
||||
line-height: 60px;
|
||||
margin-bottom: 14px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.tiltle p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
1
swiper.d.ts
vendored
Normal file
1
swiper.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'swiper';
|
||||
Loading…
Reference in New Issue
Block a user