Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 3fd71c31 by yuanfeng
Options

update

parent d19254af
Showing with 225 additions and 5 deletions
src/components/Swiper/index.vue 0 → 100644
<template>
<swiper :options="swiperOption">
<slot>
<!-- 滚动内容 -->
<!-- 下面的按需求引入 -->
</slot>
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</template>
<script>
import { swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
swiperOption: {
// 滚动方向
// direction: 'vertical',
// 展示swiper-slide的个数
slidesPerView: 1,
// 展示swiper-slide是否居中
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true
// 显示分页
// pagination: {
// el: '.swiper-pagination',
// clickable: true // 允许分页点击跳转
// },
// 设置点击箭头
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// }
}
}
},
components: {
swiper
},
created () {
this.initPage()
},
methods: {
initPage () {
// 合并参数
Object.assign(this.swiperOption, this.options)
}
}
}
</script>
<style lang="less" scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
.swiper-slide {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/pages/index/Left.vue
...@@ -76,11 +76,30 @@ ...@@ -76,11 +76,30 @@
</div> </div>
<!-- 学员风采 --> <!-- 学员风采 -->
<div class="studentDemeanor" v-if="greatKey === 0"> <div class="studentDemeanor" v-if="greatKey === 0">
111 <swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in studentDemeanor" :key="index">
<img :src="item.pic" alt="照片" @click="openStudent(index)">
<p>{{item.name}}</p>
<p>{{item.position}}</p>
</swiper-slide>
</swiper>
</div> </div>
<!-- 明星班级 --> <!-- 明星班级 -->
<div class="starClass" v-if="greatKey === 1"> <div class="starClass" v-if="greatKey === 1">
222 <vue-seamless-scroll
:data="starClass"
:class-option="classOption"
class="scrolliframe"
>
<ul>
<li v-for="(item, index) in starClass" :key="index">
<span>{{item.name}}</span>
<span>{{item.content1}}</span>
<span>{{item.content2}}</span>
<span>{{item.content3}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,6 +110,8 @@ import TitleLine from '@/components/TitleLine' ...@@ -91,6 +110,8 @@ import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue' import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
import LineChart from '@/components/echarts/LineChart.vue' import LineChart from '@/components/echarts/LineChart.vue'
import Swiper from '@/components/Swiper'
import { swiperSlide } from 'vue-awesome-swiper'
import utils from 'utils' import utils from 'utils'
export default { export default {
name: 'Left', name: 'Left',
...@@ -99,7 +120,9 @@ export default { ...@@ -99,7 +120,9 @@ export default {
TitleLine, TitleLine,
BarChart, BarChart,
PieChart, PieChart,
LineChart LineChart,
Swiper,
swiperSlide
}, },
filters: { filters: {
...@@ -306,9 +329,76 @@ export default { ...@@ -306,9 +329,76 @@ export default {
degreeKey: '', degreeKey: '',
degreeConfig: {}, degreeConfig: {},
// 学员风采 // 学员风采
studentDemeanor: [], studentDemeanor: [
{
pic: require('../../../static/images/index/persion.png'),
name: '白岩松1',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松2',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松3',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松4',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松5',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松6',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松7',
position: '主持人/作家'
}
],
swiperOption: {
loop: false,
autoplay: false,
centeredSlides: false,
slidesPerView: 4.5
},
// 明星班级 // 明星班级
starClass: [], starClass: [
{
name: '2021年秋季班（21人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（22人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（23人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（24人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（25人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}
],
classOption: {
step: 0.35,
singleHeight: 50
},
greatKey: 0 greatKey: 0
} }
}, },
...@@ -441,6 +531,10 @@ export default { ...@@ -441,6 +531,10 @@ export default {
] ]
} }
} }
},
// 学员风采
openStudent (index) {
console.log(index)
} }
} }
} }
...@@ -604,6 +698,51 @@ export default { ...@@ -604,6 +698,51 @@ export default {
} }
.great { .great {
margin-top: 10px; margin-top: 10px;
.studentDemeanor {
margin-top: 17px;
width: 100%;
height: 150px;
.swiper-container {
.swiper-slide {
cursor: pointer;
text-align: center;
.img {
width: 88px;
height: 88px;
}
p {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
&:nth-child(3) {
margin-top: 5px;
}
}
}
}
}
.starClass {
.scrolliframe {
width: 100%;
height: 150px;
overflow: hidden;
ul {
li {
width: 480px;
height: 50px;
background: url('../../../static/images/index/starClassBg.png') no-repeat left center;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 34px;
padding: 8px 0px 8px 40px;
}
}
}
}
} }
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment