You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<template>
|
|
|
|
|
|
<!-- 首页页面 -->
|
|
|
|
|
|
<div class="main-container">
|
|
|
|
|
|
<div class="bgimg">
|
|
|
|
|
|
<a-carousel :autoplay="true" effect="fade" :dots="false" ref="scrollimg">
|
|
|
|
|
|
<img :src="item" alt="" v-for="(item, index) in imglist" :key="index" />
|
|
|
|
|
|
</a-carousel>
|
|
|
|
|
|
<div class="middleslogan" :style="{ opacity: isshow ? '1' : '0' }">
|
|
|
|
|
|
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottominfo">
|
|
|
|
|
|
Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
|
|
|
|
|
|
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
|
|
|
|
|
|
>京ICP备16043923号-9</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
// 组件名称
|
|
|
|
|
|
name: "main",
|
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
|
props: {},
|
|
|
|
|
|
// 组件状态值
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
isshow: false,
|
|
|
|
|
|
imglist: [
|
|
|
|
|
|
require("../../assets/banner1.png"),
|
|
|
|
|
|
require("../../assets/banner2.png"),
|
|
|
|
|
|
require("../../assets/banner3.png"),
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
// 计算属性
|
|
|
|
|
|
computed: {},
|
|
|
|
|
|
// 侦听器
|
|
|
|
|
|
watch: {},
|
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
|
|
*/
|
|
|
|
|
|
created() {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
this.isshow = true;
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
|
*/
|
|
|
|
|
|
mounted() {},
|
|
|
|
|
|
// 组件方法
|
|
|
|
|
|
methods: {},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
.main-container {
|
|
|
|
|
|
height: calc(100vh - 80px);
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
.bgimg {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: calc(100% - 80px);
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
// background: url("../../assets/banner1.png") no-repeat center;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.middleslogan {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 40%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
z-index: 99;
|
|
|
|
|
|
transition: all 1.5s;
|
|
|
|
|
|
i {
|
|
|
|
|
|
font-size: 90px;
|
|
|
|
|
|
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottominfo {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
