rt-sim-training-client/src/views/designPlatform/home.vue

<template>
    <el-card :style="{height: height+'px'}">
        <div class="home-box" :style="{height: height+'px'}">
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <h1 class="title">
                    城市轨道交通设计平台
                    <!-- <img :src="logo" alt="" class="logo-img"> -->
                </h1>
                <div class="card-box">
                    <el-carousel :interval="4000" type="card" height="380px">
                        <el-carousel-item v-for="(item, index) in listImg" :key="index">
                            <img :src="item.src" alt="" height="100%" width="100%">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="brief-box">{{ $t('demonstration.simulationSystemDescription') }}</div>
            </el-scrollbar>
        </div>
    </el-card>
</template>

<script>
    import logo from '@/assets/logo.png';
    import home1 from '@/assets/home/home1.png';
    import home2 from '@/assets/home/home2.png';
    import home3 from '@/assets/home/demon1.jpg';
    import home4 from '@/assets/home/tring1.png';
    import home5 from '@/assets/home/tring4.jpg';
    import home6 from '@/assets/home/demon2.jpg';
    export default {
        name: 'Home',
        data() {
            return {
                listImg: [
                    { src: home1 },
                    { src: home2 },
                    { src: home3 },
                    { src: home4 },
                    { src: home5 },
                    { src: home6 }
                ],
                logo: logo
            };
        },
        computed: {
            height() {
                return this.$store.state.app.height - 50;
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    /deep/ .el-carousel {
        overflow: hidden;
    }

    .home-box {
        padding: 15px 100px;
        float: left;
        width: 100%;
        font-family: 'Microsoft YaHei';

    .title {
        font-size: 35px;
        width: 100%;
        text-align: center;
        font-weight: 400;
        margin-top: 55px;
        border-bottom: 2px dashed #333;
        padding-bottom: 15px;
        margin-bottom: 70px;
        position: relative;

    .logo-img {
        position: absolute;
        right: 0;
        top: 0;
        width: 55px;
    }
    }

    .card-box {
        width: 100%;
        padding: 0 50px;
    }

    .brief-box {
        font-size: 18px;
        text-indent: 2em;
        line-height: 32px;
        padding: 40px 20px 0;
        font-family: unset;
    }
    }
</style>