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

<template>
  <div class="joylink-card">
    <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>
  </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 {
            simulationImgList: [
                { src: simulation1 },
                { src: simulation2 },
                { src: simulation3 },
                { src: simulation4 },
                { src: simulation5 }
            ],
            lessonImgList: [
                { src: teach1 }
            ],
            examImgList: [
                { src: exam1 }
            ]
        };
    },
    computed: {
        listImg() {
            return this[(this.$route.query.type || '').toLowerCase() + 'ImgList'] || [];
        },
        title() {
            const typeMap = {'Simulation':'仿真系统', 'Lesson':'教学系统', 'Exam':'考试系统'};
            return typeMap[this.$route.query.type] || '';
        }
    }
};
</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: auto;
		.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>