|
|
|
|
@ -1,26 +1,45 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-container class="home-container" id="topAnchor" direction="vertical">
|
|
|
|
|
<div style="height:45px; width:100%; background-color:#f7f8fa ">
|
|
|
|
|
<div style="position:absolute;top:10px;left:12%;line-height:2.5em;">预约热线 000-000-000</div>
|
|
|
|
|
<div style="position:absolute;top:10px;right:5%">
|
|
|
|
|
<router-link to="login"><el-button style="width:100px;">登陆</el-button></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<el-container
|
|
|
|
|
class="home-container"
|
|
|
|
|
id="topAnchor"
|
|
|
|
|
direction="vertical"
|
|
|
|
|
>
|
|
|
|
|
<div style="height:45px; width:100%; position:fixed; z-index: 99;left:90%; top:3%">
|
|
|
|
|
<router-link to="login">
|
|
|
|
|
<el-button style="width:100px;">登陆</el-button>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- //导航栏 -->
|
|
|
|
|
<el-header style="height: 100px; width:100% display: flex ; justify-content: space-between; background-color: #fff;">
|
|
|
|
|
<el-header
|
|
|
|
|
style="height: 800px; width:100% display: flex ; justify-content: space-between; background-color: #fff;"
|
|
|
|
|
class="home-header"
|
|
|
|
|
>
|
|
|
|
|
<div style="position: relative;">
|
|
|
|
|
<h3 class="top_title1">控温者 - 数据中心节能平台</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <p >高路交通理解云</p> -->
|
|
|
|
|
|
|
|
|
|
</el-header>
|
|
|
|
|
|
|
|
|
|
<!-- //轮播图 start-->
|
|
|
|
|
<div class="carousel">
|
|
|
|
|
<div
|
|
|
|
|
class="carousel"
|
|
|
|
|
style="margin-top:40px"
|
|
|
|
|
>
|
|
|
|
|
<template>
|
|
|
|
|
<el-carousel :interval="4000" type="card" height="450px">
|
|
|
|
|
<el-carousel-item v-for="(item, index) in list" :key="index">
|
|
|
|
|
<img :src="item.src" alt="" style="width: 100%; height: 100%; " />
|
|
|
|
|
<el-carousel
|
|
|
|
|
:interval="4000"
|
|
|
|
|
type="card"
|
|
|
|
|
height="450px"
|
|
|
|
|
>
|
|
|
|
|
<el-carousel-item
|
|
|
|
|
v-for="(item, index) in list"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:src="item.src"
|
|
|
|
|
alt=""
|
|
|
|
|
style="width: 100%; height: 100%; "
|
|
|
|
|
/>
|
|
|
|
|
</el-carousel-item>
|
|
|
|
|
</el-carousel>
|
|
|
|
|
</template>
|
|
|
|
|
@ -54,8 +73,7 @@
|
|
|
|
|
<!-- 返回顶部按钮 -->
|
|
|
|
|
<template>
|
|
|
|
|
<el-backtop>
|
|
|
|
|
<div
|
|
|
|
|
style="{
|
|
|
|
|
<div style="{
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
@ -64,8 +82,7 @@
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
color: #1989fa;
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
}">
|
|
|
|
|
<i class="el-icon-caret-top"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-backtop>
|
|
|
|
|
@ -74,30 +91,51 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as THREE from 'three'
|
|
|
|
|
import RINGS from 'vanta/src/vanta.rings'
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Home',
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
list: [
|
|
|
|
|
{
|
|
|
|
|
src: 'https://img2.baidu.com/it/u=903467524,2920385702&fm=26&fmt=auto'
|
|
|
|
|
src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3-tt.byteimg.com%2Forigin%2Fpgc-image%2F52bca5d182394988b80af5bc369f1ef6%3Ffrom%3Dpc&refer=http%3A%2F%2Fp3-tt.byteimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658374833&t=e3208e68b5c1b74d8af58a1950c4d8db'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: 'https://img2.baidu.com/it/u=1514194555,1408855411&fm=26&fmt=auto'
|
|
|
|
|
src: 'https://img2.baidu.com/it/u=3926330427,864487345&fm=253&fmt=auto&app=138&f=PNG?w=500&h=313'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: 'https://img1.baidu.com/it/u=4264221152,3602489092&fm=26&fmt=auto'
|
|
|
|
|
src: 'https://img2.baidu.com/it/u=3669930060,566996354&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=500'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
src: 'https://img2.baidu.com/it/u=2673658967,4041565795&fm=26&fmt=auto'
|
|
|
|
|
src: 'https://img0.baidu.com/it/u=2449644919,3388231827&fm=253&fmt=auto&app=120&f=JPEG?w=505&h=338'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: 'https://img1.baidu.com/it/u=135466862,2358213243&fm=26&fmt=auto'
|
|
|
|
|
src: 'https://img0.baidu.com/it/u=2533984163,3128338185&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
activeIndex: '1'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.vantaEffect = RINGS({
|
|
|
|
|
el: ".home-header",
|
|
|
|
|
mouseControls: true,
|
|
|
|
|
touchControls: true,
|
|
|
|
|
gyroControls: false,
|
|
|
|
|
minHeight: 200.00,
|
|
|
|
|
minWidth: 200.00,
|
|
|
|
|
scale: 1.00,
|
|
|
|
|
scaleMobile: 1.00,
|
|
|
|
|
backgroundColor: 0x90914,
|
|
|
|
|
color: 0x27281f, THREE: THREE
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy () {
|
|
|
|
|
if (this.vantaEffect) {
|
|
|
|
|
this.vantaEffect.destroy()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -105,10 +143,10 @@ export default {
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.top_title1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
color: #409eff;
|
|
|
|
|
font-size: 35px;
|
|
|
|
|
top: -12px;
|
|
|
|
|
left: 36%;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
top: 42px;
|
|
|
|
|
left: 5%;
|
|
|
|
|
}
|
|
|
|
|
.top_title2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -157,7 +195,7 @@ export default {
|
|
|
|
|
.clearfix:before,
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
display: table;
|
|
|
|
|
content: '';
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
@ -175,7 +213,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-menu-item:before {
|
|
|
|
|
content: '';
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
.news_title {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
