|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="topBanner">
|
|
|
- <img class="msg"
|
|
|
+ <img class="msg animated fadeInDown"
|
|
|
src='@/assets/images/project/projectTitle.png' />
|
|
|
</div>
|
|
|
- <div class="projectWrap">
|
|
|
+ <!-- <div class="projectWrap">
|
|
|
<div class="tab width1200">
|
|
|
<div class="tabItem"
|
|
|
:class="activeNum==1?'active':''"
|
|
@@ -134,17 +134,61 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class='projectWrap'>
|
|
|
+ <div class="projectList width1200">
|
|
|
+ <div class="left">
|
|
|
+ <div class="projectInfoWrap">
|
|
|
+ <section>
|
|
|
+ <p class="title">酷乐秀考生APP <i class="el-icon-arrow-right"></i></p>
|
|
|
+ <p v-for="(item,index) in vaidoJson.app"
|
|
|
+ :key="index"
|
|
|
+ :class="activeRow.id===item.id?'active':''"
|
|
|
+ @click='activeRow = item'>{{item.title}} </p>
|
|
|
+
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <p class="title">酷乐秀管理端 <i class="el-icon-arrow-right"></i></p>
|
|
|
+ <p v-for="(item,index) in vaidoJson.admin"
|
|
|
+ :key="index"
|
|
|
+ :class="activeRow.id===item.id?'active':''"
|
|
|
+ @click='activeRow = item'>{{item.title}}</p>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <p class="title">酷乐秀考生APP <i class="el-icon-arrow-right"></i></p>
|
|
|
+ <p v-for="(item,index) in vaidoJson.teacher"
|
|
|
+ :key="index"
|
|
|
+ :class="activeRow.id===item.id?'active':''"
|
|
|
+ @click='activeRow = item'>{{item.title}}</p>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <h2>{{activeRow.title}}</h2>
|
|
|
+ <video :src="activeRow.src"
|
|
|
+ :width="activeRow.width"
|
|
|
+ autoplay
|
|
|
+ controls
|
|
|
+ loop></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<silder />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { vaidoJson } from './video'
|
|
|
+import "@/animate/animate.min.css"
|
|
|
import silder from '@/components/silder.vue'
|
|
|
export default {
|
|
|
components: { silder },
|
|
|
data () {
|
|
|
return {
|
|
|
activeNum: 1,
|
|
|
+ vaidoJson,
|
|
|
+ activeRow: { src: require('@/assets/video/student-remind.mp4'), width: '352', title: '考试信息及时提醒', father: 'app', id: 1 }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -277,4 +321,64 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+// 新版本
|
|
|
+.projectWrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.projectList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 80px 0 60px;
|
|
|
+ .left {
|
|
|
+ margin-right: 50px;
|
|
|
+ width: 220px;
|
|
|
+ border: 1px solid #dedede;
|
|
|
+ border-top: none;
|
|
|
+ .title {
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ border-top: 1px solid #dedede;
|
|
|
+ border-bottom: 1px solid #dedede;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 600;
|
|
|
+ .el-icon-arrow-right {
|
|
|
+ line-height: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-left: 30px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 800px;
|
|
|
+ padding: 0 30px 30px;
|
|
|
+ border: 1px solid #dedede;
|
|
|
+ h2 {
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #dedede;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|