Skip to content

P
project-online-old
提交 93b7522a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 210e32f7
隐藏空白字符变更
内嵌 并排
正在显示 包含 298 行增加 和 13 行删除
package.json
浏览文件 @ 93b7522a
......@@ -71,7 +71,7 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@ezijing/vue-form": "^2.2.1",
"@ezijing/vue-form": "^2.1.9",
"animate.css": "^4.1.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
......
src/pages/major-set/index.vue
浏览文件 @ 93b7522a
......@@ -216,11 +216,30 @@
</div>
</div>
<div class="layout_com_page_banner major-kc-wm" :style="{'min-height':700 + 'px'}">
<h3>
<h3 style="padding-top:30px;">
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body">
<div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<swiper ref="mySwiper" :options="swiperOptions">
<template v-for="(item, index) in wmList">
<swiper-slide :key="index">
<div class="major-kc-wm-list">
<div class="list-img">
<img :src="item.img" style="width: 162px"/>
</div>
<div class="list-body">
<span class="font-size-18 nowrap title">{{item.title}}</span>
<span class="font-size-14 wm-red zs">{{item.label}}</span>
<template v-for="(sItem, sIndex) in item.main">
<span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
</template>
</div>
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<div class="list-img">
<img :src="item.img" />
</div>
......@@ -229,7 +248,45 @@
<span class="font-size-14 wm-red">{{item.label}}</span>
<span class="font-size-14 max-width-180">{{item.main}}</span>
</div>
</div>
</div> -->
</div>
</div>
<div class="layout_com_page_banner major-kc-wm bg2" :style="{'min-height':700 + 'px'}">
<h3>
<span>师资介绍</span>
</h3>
<div class="major-kc-wm-body" @mouseover="mouseOver2" @mouseleave="mouseLeave2">
<swiper ref="mySwiper2" :options="swiperOptions">
<template v-for="(item, index) in wmList2">
<swiper-slide :key="index">
<div class="major-kc-wm-list">
<div class="list-img">
<img :src="item.img" style="width: 162px"/>
</div>
<div class="list-body">
<span class="font-size-18 nowrap title">{{item.title}}</span>
<span class="font-size-14 wm-red zs">{{item.label}}</span>
<template v-for="(sItem, sIndex) in item.main">
<span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
</template>
</div>
</div>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <div class="major-kc-wm-list" v-for="(item, index) in wmList" :key="index">
<div class="list-img">
<img :src="item.img" />
</div>
<div class="list-body">
<span class="font-size-18 nowrap title">{{item.title}}</span>
<span class="font-size-14 wm-red zs">{{item.label}}</span>
<template v-for="(sItem, sIndex) in item.main">
<span :key="sIndex+'-'+index" class="font-size-14 mian-txt">{{sItem}}</span>
</template>
</div>
</div> -->
</div>
</div>
<div ref="leavex">
......@@ -250,37 +307,197 @@ import FilterJson from './filterType.json'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
import Vue from 'vue'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'major-set',
mixins: [dyHeight],
components: {
Leavex,
PageFooter
PageFooter,
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
},
swiper2() {
return this.$refs.mySwiper2.$swiper
}
},
data() {
return {
swiperOptions: {
observer: true,
autoHeight: true,
slidesPerView: 3,
// paginationClickable: true,
spaceBetween: 0,
freeMode: true,
// autoplay: {
// delay: 2000
// },
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
}
},
mIndex: 0,
FilterJson,
course: 1,
wmList2: [
{
img: require('@/assets/images/wm/wm_011.png'),
title: '韩卓',
label: '',
main: [
'北京师范大学心理学部副教授、博士生导师',
'哥伦比亚大学毕业、斯坦福大学访问学者'
]
},
{
img: require('@/assets/images/wm/wm_022.png'),
title: '胡晓毅',
label: '',
main: [
'北京师范大学教育学部教授、硕士生导师',
'美国堪萨斯大学特殊教育系博士',
'北京师范大学教育学部孤独症儿童教育研究中心主任'
]
},
{
img: require('@/assets/images/wm/wm_033.png'),
title: '刘文',
label: '',
main: [
'辽宁师范大学特聘二级教授、博士生导师、副院长',
'中国心理学会认定心理学家-6岁主教'
]
},
{
img: require('@/assets/images/wm/wm_044.png'),
title: '刘肖岑',
label: '',
main: [
'首都师范大学学前教育学院副教授 ',
'华东师范大学心理学博士',
'加拿大英属哥伦比亚大学心理学联合培养博士生'
]
},
{
img: require('@/assets/images/wm/wm_055.png'),
title: '黄翯青',
label: '',
main: [
'首都师范大学副教授 ',
'北京大学发展心理学博士'
]
},
{
img: require('@/assets/images/wm/wm_066.png'),
title: '朱晶晶',
label: '',
main: [
'上海师范大学教育学院副教授 ',
'上海师范大学博士后',
'Carleton University访问学者'
]
},
{
img: require('@/assets/images/wm/wm_077.png'),
title: '祝贺',
label: '',
main: [
'华东师范大学教育学部副教授 ',
'北京师范大学教育学部教育学专业博士'
]
},
{
img: require('@/assets/images/wm/wm_088.png'),
title: '魏寿洪',
label: '',
main: [
'重庆师范大学教育科学院教授、硕士生导师',
'北京师范大学特殊教育博士',
'重庆师范大学教育科学学院特殊教育系系主任'
]
}
],
wmList: [
{
img: require('@/assets/images/wm/wm_01.png'),
title: 'Sharon Hundley,Ed.D.',
label: '教授',
main:
'康博斯威尔大学教育学院早期儿童教育项目主任；AMI认证3-6岁主教；AMS授证导师'
main: [
'康博斯威尔大学教育学院早期儿童教育项目主任',
'AMI认证3-6岁主教',
'AMS授证导师'
]
},
{
img: require('@/assets/images/wm/wm_02.png'),
title: 'Marilyn Goodwin,Ph.D.',
label: '副教授',
main: '康博斯威尔大学教育学院早期儿童教育项目副主任'
main: [
'康博斯威尔大学教育学院早期儿童教育项目副主任'
]
},
{
img: require('@/assets/images/wm/wm_03.png'),
title: 'Julie Ann Ball',
label: '副教授',
main: '康博斯威尔大学教育学院早期儿童教育项目成员；AMI认证3-6岁主教'
main: [
'康博斯威尔大学教育学院早期儿童教育项目成员',
'AMI认证3-6岁主教'
]
},
{
img: require('@/assets/images/wm/wm_04.png'),
title: 'April Lin',
label: '',
main: [
'康博斯威尔大学AMI培训师',
'AMI3-6培训教师',
'中国语文培训专任教师'
]
},
{
img: require('@/assets/images/wm/wm_05.png'),
title: 'Ellen Hamilton-Ford, Ed.D.',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目副教授'
]
},
{
img: require('@/assets/images/wm/wm_06.png'),
title: 'Jeffrey Herron, Ed.D.',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目副教授'
]
},
{
img: require('@/assets/images/wm/wm_07.png'),
title: 'Josh Switzer, Ph.D.候选人',
label: '',
main: [
'康博斯威尔大学早期儿童项目经理'
]
},
{
img: require('@/assets/images/wm/wm_08.png'),
title: 'Rita Curtis',
label: '',
main: [
'康博斯威尔大学教育学院早期儿童教育项目讲师'
]
}
],
bannerList: [
......@@ -354,6 +571,18 @@ export default {
}
},
methods: {
mouseOver() {
this.swiper.autoplay.stop()
},
mouseLeave() {
this.swiper.autoplay.start()
},
mouseOver2() {
this.swiper2.autoplay.stop()
},
mouseLeave2() {
this.swiper2.autoplay.start()
},
newChildOver() {
this.newChildIsShow = true
},
......@@ -833,6 +1062,10 @@ export default {
align-items: center;
flex-wrap: wrap;
overflow: hidden;
&.bg2{
background: url(https://zws-imgs-pub.ezijing.com/static/public/bf9ce097a044e3efbe11cb0d80270c59.png);
background-size: cover;
}
h3 {
width: 100%;
display: inline-flex;
......@@ -854,6 +1087,15 @@ export default {
}
}
.major-kc-wm-body {
::v-deep .swiper-container{
.swiper-pagination-bullet{
opacity:1;
background: #fff;
}
.swiper-pagination-bullet-active{
background: rgb(174,14,63);
}
}
width: 80%;
display: flex;
justify-content: center;
......@@ -869,7 +1111,7 @@ export default {
z-index: 3;
position: relative;
position: absolute;
left: 50%;
left: 53%;
background: #fff;
border-radius: 50%;
top: 7%;
......@@ -887,19 +1129,56 @@ export default {
.list-body {
display: flex;
position: relative;
align-items: center;
// align-items: center;
flex-direction: column;
background: #fff;
border-radius: 26px;
width: 300px;
padding: 100px 0px 30px 0px;
min-height: 200px;
min-height: 150px;
.max-width-180 {
max-width: 180px;
}
span {
padding: 5px 0px;
padding: 5px 15px 0 40px;
color: #222222ff;
line-height: 20px;
}
&::before {
content: '';
position: absolute;
height: 90%;
width: 90%;
top: 5%;
border: 1px solid rgba(151, 151, 151, 1);
border-radius: 26px;
border-style: dashed;
}
.mian-txt{
position: relative;
&::before{
content:'';
position: absolute;
left: 22px;
top: 10px;
// -webkit-transform: translateX(-50%);
width: 8px;
height: 8px;
border: 2px solid rgb(174,14,63);
border-radius: 50%;
}
}
.title{
padding: 0;
display: block;
width: 100%;
text-align: center;
}
.zs{
padding: 5px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
&::before {
content: '';
......@@ -907,6 +1186,8 @@ export default {
height: 90%;
width: 90%;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
border: 1px solid rgba(151, 151, 151, 1);
border-radius: 26px;
border-style: dashed;
......@@ -974,4 +1255,8 @@ export default {
}
}
}
.swiper-container{
padding-top: 70px;
padding-bottom: 40px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论