rt-sim-training-client/src/views/trainingPlatform/secondaryHome.vue

<template>
  <div class="joylink-card">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div class="content_box">
        <h1 class="title">{{ title }}</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>-->
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import simulation1 from '@/assets/home_simulation/simulation1.png';
import simulation2 from '@/assets/home_simulation/simulation2.png';
import simulation3 from '@/assets/home_simulation/simulation3.png';
import simulation4 from '@/assets/home_simulation/simulation4.png';
import simulation5 from '@/assets/home_simulation/simulation5.png';
import teach1 from '@/assets/home_teach/teach1.png';
import exam1 from '@/assets/home_exam/exam1.png';

export default {
    name: 'SecondaryHome',
    data() {
        return {
            title: '',
            simulationImgList: [
                { src: simulation1 },
                { src: simulation2 },
                { src: simulation3 },
                { src: simulation4 },
                { src: simulation5 }
            ],
            teachImgList: [
                { src: teach1 }
            ],
            examImgList: [
                { src: exam1 }
            ]
        };
    },
    computed: {
        listImg() {
            return [];
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/styles/mixin.scss";

	/deep/ .el-carousel {
		overflow: hidden;
		width:100%;
	}
	.joylink-card{
		height: 100%;
		font-family: 'Microsoft YaHei';
		overflow: hidden;
		.content_box{
			padding: 0 100px 15px;
		}
		.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>