初始化

This commit is contained in:
dzj 2024-04-12 10:30:56 +08:00
parent 172377160b
commit a92f78af56
20 changed files with 949 additions and 302 deletions

15
.babelrc Normal file
View File

@ -0,0 +1,15 @@
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

696
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,16 +7,21 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"element-ui": "^2.15.14",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"swiper": "^5.4.5",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@types/swiper": "^6.0.0",
"@vue/cli-plugin-pwa": "~5.0.0", "@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"babel-plugin-component": "^1.1.1",
"sass": "^1.32.7", "sass": "^1.32.7",
"sass-loader": "^12.0.0", "sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"

View File

@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>

View File

@ -1,32 +1,96 @@
<template> <template>
<div id="app"> <div>
<nav> <div id="header" :class="{ 'topheader': isScrolled }">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> <div :class="{ 'header': true, 'fixed-width': isScrolled }" >
</nav> <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/> <router-view/>
</div> </div>
</template> </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 { if (scrollPosition > 0) {
font-family: Avenir, Helvetica, Arial, sans-serif; this.isScrolled = true;
-webkit-font-smoothing: antialiased; } else {
-moz-osx-font-smoothing: grayscale; this.isScrolled = false;
text-align: center; }
color: #2c3e50; }
}
} }
</script>
nav { <style lang="scss" scoped>
padding: 30px; #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; 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> </style>

7
src/assets/global.css Normal file
View File

@ -0,0 +1,7 @@
body,html{
margin: 0;
padding: 0;
}
body{
padding-top: 581px;
}

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

BIN
src/assets/images/vedio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 735 KiB

View File

@ -3,9 +3,11 @@ import App from './App.vue'
import './registerServiceWorker' import './registerServiceWorker'
import router from './router' import router from './router'
import store from './store' 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.config.productionTip = false
Vue.use(ElementUI);
new Vue({ new Vue({
router, router,
store, store,

View File

@ -1,18 +1,417 @@
<template> <template>
<div class="home"> <div>
<img alt="Vue logo" src="../assets/logo.png"> <div class="banner" style="height: 581px;">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<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>
<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> </template>
<script> <script>
// @ is an alias to /src // @ 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 { export default {
name: 'HomeView', data() {
components: { return {
HelloWorld
}
},
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> </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
View File

@ -0,0 +1 @@
declare module 'swiper';