You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
1.9 KiB
117 lines
1.9 KiB
<!--
|
|
描述: 酷屏首页模板
|
|
作者: Jack Chen
|
|
日期: 2020-04-29
|
|
-->
|
|
|
|
<template>
|
|
<div class="home-container">
|
|
<div class="wrap" ref="editor">
|
|
<div class="top"></div>
|
|
|
|
<sinan />
|
|
<seamless />
|
|
<pyramid />
|
|
|
|
<scrollArc />
|
|
<szBar />
|
|
|
|
<ringPin />
|
|
<rotateColorful />
|
|
<circleRunway />
|
|
<scanRadius />
|
|
|
|
<cakeLinkage />
|
|
<pyramidTrend />
|
|
<dynamicLine />
|
|
|
|
<staffMix />
|
|
<flashCloud />
|
|
<ringPie />
|
|
<colorfulRadar />
|
|
|
|
<dynamicList />
|
|
<bar3d />
|
|
<colorfulArea />
|
|
|
|
<rainbow />
|
|
<gauge />
|
|
<waterPolo />
|
|
<circleNesting />
|
|
|
|
<div class="divider"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { screenSize } from '@/assets/js/utils'
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
screenSize(this.$refs.editor);
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.wrap {
|
|
transform-origin: 0px 0px 0px;
|
|
background: url(../assets/img/bj.jpg) no-repeat;
|
|
background-size: contain;
|
|
background-position: 50% 0;
|
|
background-color: rgb(0, 0, 0);
|
|
min-width: auto;
|
|
width: 1920px;
|
|
min-height: auto;
|
|
height: 1080px;
|
|
overflow: auto;
|
|
.top {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
background-color: transparent;
|
|
background: url(../assets/img/top_nav.png) no-repeat;
|
|
background-position: 65% 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
}
|
|
.divider {
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 3253px;
|
|
width: 90%;
|
|
height: 50px;
|
|
width: 300px;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|