调整竞赛系统首页样式

src/views/jsxt/competition/home.vue

@@ -1,20 +1,83 @@
 <template>
-  <div class="">
+  <div class="joylink-card">
-    首页
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <div class="content_box">
+        <h1 class="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 home1 from '@/assets/home/home1.png';
+import home2 from '@/assets/home/home2.png';
+import home3 from '@/assets/home/script.png';
+
 export default {
-    name: '',
+    name: 'Home',
     data() {
         return {
-
+            listImg: [
+                { src: home1 },
+                { src: home2 },
+                { src: home3 }
+            ]
         };
     }
 };
 </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>