<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2023-09-06 16:04:12
 * @LastEditors: gcz
 * @LastEditTime: 2023-09-07 10:30:04
 * @FilePath: \loginpage\src\views\SelectPage.vue
 * @Copyright: Copyright (c) 2016~2023 by gcz, All Rights Reserved. 
-->
<template>
    <div class='selectPage'>
        <div class="title">
            <div class="text">达泽系统选择</div>
        </div>
        <div class="carousel-wrap">
            <carousel :links="linkArray"></carousel>
        </div>
    </div>
</template>

<script>
import Carousel from "../components/carousel.vue";
    export default {
        name: '',
        components: {
            Carousel
        },
        data () {
            return {
                linkArray: ['Link 1', 'Link 2', 'Link 3', 'Link 4', 'Link 5', 'Link 6', 'Link 7', 'Link 8', 'Link 9', 'Link 10']
            };
        },
        created(){},
        methods: {},
    }
</script>

<style lang='scss' scoped>
//@import url()
.selectPage{
    min-height: 100vh;
    background: url(~@/assets/img/selectPage/pagebg.png) no-repeat;
    background-size: cover;
    overflow: hidden;
}
.title{
    margin-top: 184px;
    height: 110px;
    background: url(~@/assets/img/selectPage/title-bg.png) center no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    .text{
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        color: #fff;
        font-size: 60px;
        /* 字间距 */
        letter-spacing: 15px;
        /* 转大写 */
        text-transform: uppercase;
        text-align: center;
        line-height: 76px;
        outline: none;
        /* 自定义属性--c，可通过var函数对其调用 */
        --c:lightseagreen;
        /* 调用自定义属性--c，设置文字阴影（发光效果） */
        text-shadow: 0 0 10px var(--c),
        0 0 20px var(--c),
        0 0 40px var(--c),
        0 0 80px var(--c),
        0 0 160px var(--c);
        /* 执行动画：动画名 时长 线性的 无限次播放 */
        animation: animate 5s linear infinite;
    }

    /* 定义动画 */
    @keyframes animate {
        to{
            /* 色相旋转滤镜（设置度数可改变颜色） */
            filter: hue-rotate(360deg);
        }
    }
}
.carousel-wrap{
    width: 80%;
    margin: 100px auto 24px;
}
</style>