提交 7240fafb 编写于 作者: 杨广俊's avatar 杨广俊

去掉动画效果

上级 4b75b80b
<template> <template>
<mt-popup v-model="isShowSelection" position="top"> <!-- <mt-popup v-model="isShowSelection" position="top"> -->
<!-- <section v-show="isShowSelection" style="position:fixed;top:0;z-index:201;background:#fff;height:100%;overflow-x:auto;"> --> <section v-show="isShowSelection" style="position:fixed;top:0;z-index:201;background:#fff;height:100%;overflow-x:auto;">
<article class="lect-selection"> <article class="lect-selection">
<section class="lect-selection-title"> <section class="lect-selection-title">
<img @click="closeSelectedPage" src="../../images//select-delete.png"> <img @click="closeSelectedPage" src="../../images//select-delete.png">
...@@ -111,8 +111,8 @@ ...@@ -111,8 +111,8 @@
</table> </table>
</article> </article>
</section> </section>
<!-- </section> --> </section>
</mt-popup> <!-- </mt-popup> -->
</template> </template>
<script> <script>
export default { export default {
......
<template>
<div class="main-body" ref="wrapper">
<section class="home-header">
<div class="home-topMenu">
<YqyHomeHeader :searchFix="searchFix"/>
</div>
<div class="swiper">
<mt-swipe :auto="3000" :speed="speedSwiper" :stopPropagation="prevent">
<mt-swipe-item v-for="(item, index) in listSwiper" :key="index">
<img :src="item.imageUrl" @click="goLinkByswiper(item)">
</mt-swipe-item>
</mt-swipe>
</div>
</section>
<!-- 热门讲师 -->
<YqyHotLecturer/>
<!-- 讲师标题 -->
<YqyLecturerTitle/>
<!-- 讲师选择标题 -->
<YqyLecturerSelect
@selectedType="selectedTypeFromTitle"
:selectedAreaName="selectedTitleTitle"
:selectedLevelName="selectedLevelName"
:selectedDepartName="selectedDepartName"
/>
<!-- 讲师排序 -->
<YqyLecturerOrder ref="lecturerOrderRef" groupTitle="全部讲师" @order="orderAction"/>
<!-- 讲师列表 -->
<YqyTeacherList :parmData="parmDataDoctList"/>
<!-- 讲师选择组件 - 弹框 -->
<YqyLecturerSelectContent ref="lecturerSelContRef" @selectedData="selectedLecturerList"/>
<!--返回顶部-->
<BackTop v-if="searchFix"/>
</div>
</template>
<script>
import { arraySort } from "@/utils/index";
import { Swipe, SwipeItem } from "mint-ui";
import { mapState, mapMutations, mapActions } from "vuex";
import BackTop from "@/components/business/backTop";
import YqyHomeHeader from "@/components/business/yqy-home-header";
import YqyLecturerTitle from "@/components/business/yqy-lecturer-title";
import YqyLecturerSelect from "@/components/business/yqy-lecturer-select";
import YqyLecturerOrder from "@/components/business/yqy-lecturer-order";
import YqyLecturerSelectContent from "@/components/business/yqy-lecturer-select-content";
import YqyHotLecturer from "@/components/business/yqy-hot-lecturer";
import YqyTeacherList from "@/components/business/yqy-teacher-list";
export default {
data() {
return {
showSelectedPage: true,
parmDataDoctList: [],
oldParmDataDoctList: [],
selectedTypeIndex: 1,
prevent: true,
isShowBackTop: false,
speedSwiper: 300,
//轮播图默认数据
listSwiper: [
{
imageUrl: require("../../images/banner-default.png")
},
{
imageUrl: require("../../images/banner-default.png")
},
{
imageUrl: require("../../images/banner-default.png")
},
{
imageUrl: require("../../images/banner-default.png")
},
{
imageUrl: require("../../images/banner-default.png")
}
],
scrollTimer: null,
scrollTop: 0,
userToken: "",
searchFix: false,
statusBarHeight: 0,
userMobile: "",
isFailSwiper: 1,
selectedTitleTitle: "全国",
selectedAreaName: "全国",
selectedAreaSubName: "",
selectedLevelName: "全部等级",
selectedDepartName: "全部科室"
};
},
components: {
Swipe,
SwipeItem,
BackTop,
YqyHomeHeader,
YqyLecturerTitle,
YqyLecturerSelect,
YqyLecturerOrder,
YqyLecturerSelectContent,
YqyHotLecturer,
YqyTeacherList
},
computed: {
selectedTitle() {
return this.selectedTypeIndex === 1
? "选择地区"
: this.selectedTypeIndex === 2
? "选择等级"
: "选择科室";
}
},
beforeCreate() {},
created() {
let _this = this;
_this.initAll();
},
beforeMount() {},
mounted() {
window.addEventListener("scroll", this.scrollFun);
},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
watch: {},
methods: {
// 排序
orderAction(orderName, isSortUp) {
let orderType = isSortUp ? -1 : 1;
let orderData = this.oldParmDataDoctList.slice();
if (orderName === "doctorFirstNameChar") {
orderData = arraySort(orderData, isSortUp, orderName, fieldValue => {
return fieldValue.charCodeAt(0);
});
} else if (orderName === "newTime") {
orderData = arraySort(orderData, isSortUp, orderName, fieldValue => {
return new Date(fieldValue.replace(/-/g, "/")).getTime() / 1000;
});
} else {
orderData = arraySort(orderData, isSortUp, orderName);
}
this.parmDataDoctList = orderData;
},
// 选择器组件回调
selectedLecturerList(
paramList,
selectedTitle,
selectedLevelName,
selectedDepartName
) {
this.parmDataDoctList = paramList;
this.oldParmDataDoctList = paramList;
this.orderAction("doctorFirstNameChar", true);
this.$refs.lecturerOrderRef.reset();
this.selectedTitleTitle = selectedTitle;
this.selectedLevelName = selectedLevelName;
this.selectedDepartName = selectedDepartName;
},
// 选择标题组件
selectedTypeFromTitle(index) {
this.selectedTypeIndex = index;
this.$refs.lecturerSelContRef.selectedType(index);
this.$refs.lecturerSelContRef.show();
},
// 请求数据
initAll() {
this.getSwiper();
this.getYqDoctorDataByCD();
},
//轮播图跳转
goLinkByswiper(itemData) {
this.pageBurialPoin({
menuLevel: 1,
menuCode: "m_home",
functionCode: "f_banner",
actionCode: "c_banner",
labelId: itemData.id,
labelValue: itemData.name
});
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
//根据条件获取讲师列表
getYqDoctorDataByCD() {
let _this = this,
para = {
provinceId: 0,
cityId: 0,
countyId: 0,
levelGrade: 0,
departmentId: 0,
setEntry: "headers"
};
this.GET("contents/courseDoctor/v1/getAllTeacher", para).then(res => {
if (res.code == "000000") {
_this.parmDataDoctList = (res.data && res.data.list) || [];
_this.oldParmDataDoctList = (res.data && res.data.list) || [];
_this.orderAction("doctorFirstNameChar", true);
}
});
},
scrollEndFun() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
// let newCourseTop = document.querySelector('#famus-teacher').offsetTop;
// let fivesTop = document.querySelector('#fiveBoxMenu').offsetTop;
},
// 响应滚动事件,截流处理
scrollFun() {
let isBusy = false;
if (!isBusy) {
isBusy = true;
setTimeout(() => {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 20) {
this.searchFix = true;
} else {
this.searchFix = false;
}
isBusy = false;
}, 100);
}
},
// 获取轮播图数据
getSwiper() {
let _this = this,
para = {
setEntry: "headers"
};
this.GET("contents/courseDoctorBanner/queryList", para).then(res => {
if (res.code == "000000") {
_this.listSwiper = res.data.bannerList || [];
}
if (_this.listSwiper.length == 0) {
_this.isFailSwiper += 1;
}
_this.isFailSwiper = _this.listSwiper.length == 0 ? 2 : 1;
});
}
}
};
</script>
<style>
.mint-popup.mint-popup-top {
height: 100%;
z-index: 2001;
/* overflow: auto; */
}
.swiper .mint-swipe-indicators {
right: 6px;
top: 50%;
bottom: inherit;
left: inherit;
width: 10px;
text-align: center;
transform: translateX(0%);
transform: translateY(-50%);
}
.swiper .mint-swipe-item img {
width: 100%;
height: 100%;
}
.swiper .mint-swipe-indicator {
width: 2px;
height: 8px;
background: #fff;
opacity: 0.4;
float: left;
margin-top: 3px;
border-radius: 0;
}
.swiper .is-active {
opacity: 1;
}
.mint-loadmore-top .mint-loadmore-text {
font-size: 12px;
}
.banner-container.swiper-container-horizontal > .swiper-pagination-bullets {
width: 2px;
left: inherit;
transform: translateY(-50%);
position: absolute;
right: 6px;
top: 50%;
}
.banner-container.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet {
width: 2px;
height: 7px;
background: #fff;
margin: 6px 0 0 0;
float: left;
opacity: 0.4;
}
.banner-container.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet-active {
opacity: 1;
}
.banner-pagination {
width: 2px;
z-index: 100;
right: 10px;
top: 10px;
position: absolute;
}
/* .swiper-pagination-bullet{
} */
.swiper-slide img {
width: 100%;
height: 100%;
}
</style>
<style lang="scss" scoped>
@import "../../style/mixin";
@import "../../style/swiper.min.css";
.banner-container {
height: px2rem(210px);
}
.main-body {
position: relative;
}
.box-BG {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0);
}
.font-style {
@include sc(0.6rem, #666);
}
.top-evaluat {
}
@keyframes myPullDown {
from {
padding-top: 0;
}
to {
padding-top: px2rem(225px);
}
}
@keyframes myPullUp {
from {
padding-top: px2rem(225px);
}
to {
padding-top: 0;
}
}
.pull-down {
-webkit-animation: myPullDown 1.2s;
animation: myPullDown 1.2s;
padding-top: px2rem(225px);
}
.pull-up {
-webkit-animation: myPullUp 1.2s;
animation: myPullUp 1.2s;
padding-top: 0;
}
.news-update {
display: block;
position: fixed;
background: #f9f6ef;
right: 0;
bottom: px2rem(140px);
height: px2rem(27px);
padding: 0 px2rem(12px);
line-height: px2rem(27px);
border: 1px solid RGBA(162, 129, 60, 0.2);
font-size: px2rem(13px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
border-radius: px2rem(14px) 0 0 px2rem(14px);
z-index: 101;
.news-info {
color: #a2813c;
position: relative;
display: inline-block;
i {
position: absolute;
right: -(px2rem(6px));
top: px2rem(4px);
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
border-radius: 100%;
background: #f47a48;
}
}
}
.home-topMenu {
width: 100%;
text-align: center;
top: 0;
position: absolute;
z-index: 10;
}
.home-header {
height: px2rem(234px); // banner图片变高了
// height: px2rem(210px);
.swiper {
height: 100%;
/* @include bis('../../../images//lect-bg.png');*/
}
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.home-body {
background: #fff;
}
.pathologic-list {
width: 100%;
height: px2rem(52px);
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.pathologic-item {
float: left;
width: 48%;
box-shadow: 0 px2rem(2px) px2rem(8px) rgba(49, 127, 119, 0.2);
border-radius: px2rem(3px);
background: #fff;
/* padding: px2rem(12px) 0 px2rem(12px) 0;*/
margin-right: 4%;
text-align: center;
.pathologic-icon {
height: px2rem(52px);
/* height: px2rem(20px);*/
img {
width: 100%;
height: px2rem(52px);
padding-bottom: px2rem(8px);
vertical-align: middle;
display: inline-block;
}
}
.pathologic-txt {
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
}
.clear {
clear: both;
}
}
</style>
<style lang="scss" scoped>
@import "../../style/mixin.scss";
.lect-selection-content {
position: absolute;
top: px2rem(122px);
z-index: 201;
width: px2rem(375px);
height: 100%;
overflow: auto;
font-size: px2rem(14px);
color: #666666;
margin-right: px2rem(15px);
width: px2rem(360px);
table {
width: 100%;
border-collapse: collapse;
}
&-rp-tb {
padding: px2rem(4px) px2rem(15px);
&-left {
td {
padding-left: px2rem(15px);
border-bottom: 1px solid #f5f6f6;
}
background: #f5f6f6;
}
tr {
height: px2rem(40px);
line-height: px2rem(40px);
}
td {
height: px2rem(40px);
img {
position: relative;
top: px2rem(6px);
left: 0;
width: 20px;
height: 20px;
}
}
&-tb {
td {
padding-left: px2rem(8px);
border-bottom: 1px solid #f0f0f0;
}
}
&-tb-2 {
td {
padding-left: 0;
border-bottom: 1px solid #f0f0f0;
}
table {
width: 96%;
margin: 0 px2rem(15px);
}
}
}
}
.lect-selection {
display: flex;
background: #fff;
flex-direction: row;
&-title {
display: flex;
flex-direction: row;
padding: px2rem(33px) px2rem(15px) px2rem(13px);
width: px2rem(375px);
justify-content: space-between;
font-size: px2rem(13px);
height: px2rem(68px);
// line-height: px2rem(64px);
border-bottom: 1px solid #e7e7e7;
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
height: px2rem(18px);
font-size: px2rem(18px);
color: #333;
}
}
}
.group-title {
position: absolute;
top: px2rem(80px);
z-index: 202;
display: flex;
flex-direction: row;
padding: px2rem(4px) px2rem(25px) px2rem(16px);
border-bottom: 1px solid #f0f0f0;
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
span {
font-size: px2rem(15px);
color: #333;
}
img {
position: relative;
top: 0;
left: px2rem(-1px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284 !important;
}
.bg-white {
background: #fff;
}
</style>
...@@ -262,11 +262,10 @@ export default { ...@@ -262,11 +262,10 @@ export default {
}; };
</script> </script>
<style> <style>
.mint-popup.mint-popup-top { /* .mint-popup.mint-popup-top {
height: 100%; height: 100%;
z-index: 2001; z-index: 2001;
/* overflow: auto; */ } */
}
.swiper .mint-swipe-indicators { .swiper .mint-swipe-indicators {
right: 6px; right: 6px;
top: 50%; top: 50%;
...@@ -293,10 +292,10 @@ export default { ...@@ -293,10 +292,10 @@ export default {
.swiper .is-active { .swiper .is-active {
opacity: 1; opacity: 1;
} }
.mint-loadmore-top .mint-loadmore-text { /* .mint-loadmore-top .mint-loadmore-text {
font-size: 12px; font-size: 12px;
} } */
.banner-container.swiper-container-horizontal > .swiper-pagination-bullets { /* .banner-container.swiper-container-horizontal > .swiper-pagination-bullets {
width: 2px; width: 2px;
left: inherit; left: inherit;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -318,15 +317,15 @@ export default { ...@@ -318,15 +317,15 @@ export default {
> .swiper-pagination-bullets > .swiper-pagination-bullets
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
opacity: 1; opacity: 1;
} } */
.banner-pagination { /* .banner-pagination {
width: 2px; width: 2px;
z-index: 100; z-index: 100;
right: 10px; right: 10px;
top: 10px; top: 10px;
position: absolute; position: absolute;
} } */
/* .swiper-pagination-bullet{ /* .swiper-pagination-bullet{
} */ } */
...@@ -344,78 +343,14 @@ export default { ...@@ -344,78 +343,14 @@ export default {
.main-body { .main-body {
position: relative; position: relative;
} }
.box-BG {
width: 100%; // .mint-header {
height: 100%; // background-color: rgba($color: #000000, $alpha: 0);
position: absolute; // }
top: 0;
left: 0;
z-index: 10000;
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0);
}
.font-style { .font-style {
@include sc(0.6rem, #666); @include sc(0.6rem, #666);
} }
.top-evaluat {
}
@keyframes myPullDown {
from {
padding-top: 0;
}
to {
padding-top: px2rem(225px);
}
}
@keyframes myPullUp {
from {
padding-top: px2rem(225px);
}
to {
padding-top: 0;
}
}
.pull-down {
-webkit-animation: myPullDown 1.2s;
animation: myPullDown 1.2s;
padding-top: px2rem(225px);
}
.pull-up {
-webkit-animation: myPullUp 1.2s;
animation: myPullUp 1.2s;
padding-top: 0;
}
.news-update {
display: block;
position: fixed;
background: #f9f6ef;
right: 0;
bottom: px2rem(140px);
height: px2rem(27px);
padding: 0 px2rem(12px);
line-height: px2rem(27px);
border: 1px solid RGBA(162, 129, 60, 0.2);
font-size: px2rem(13px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
border-radius: px2rem(14px) 0 0 px2rem(14px);
z-index: 101;
.news-info {
color: #a2813c;
position: relative;
display: inline-block;
i {
position: absolute;
right: -(px2rem(6px));
top: px2rem(4px);
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
border-radius: 100%;
background: #f47a48;
}
}
}
.home-topMenu { .home-topMenu {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -431,176 +366,9 @@ export default { ...@@ -431,176 +366,9 @@ export default {
height: 100%; height: 100%;
/* @include bis('../../../images//lect-bg.png');*/ /* @include bis('../../../images//lect-bg.png');*/
} }
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
} }
.home-body { .home-body {
background: #fff; background: #fff;
} }
.pathologic-list {
width: 100%;
height: px2rem(52px);
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.pathologic-item {
float: left;
width: 48%;
box-shadow: 0 px2rem(2px) px2rem(8px) rgba(49, 127, 119, 0.2);
border-radius: px2rem(3px);
background: #fff;
/* padding: px2rem(12px) 0 px2rem(12px) 0;*/
margin-right: 4%;
text-align: center;
.pathologic-icon {
height: px2rem(52px);
/* height: px2rem(20px);*/
img {
width: 100%;
height: px2rem(52px);
padding-bottom: px2rem(8px);
vertical-align: middle;
display: inline-block;
}
}
.pathologic-txt {
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
}
.clear {
clear: both;
}
}
</style>
<style lang="scss" scoped>
@import "../../style/mixin.scss";
.lect-selection-content {
position: absolute;
top: px2rem(122px);
z-index: 201;
width: px2rem(375px);
height: 100%;
overflow: auto;
font-size: px2rem(14px);
color: #666666;
margin-right: px2rem(15px);
width: px2rem(360px);
table {
width: 100%;
border-collapse: collapse;
}
&-rp-tb {
padding: px2rem(4px) px2rem(15px);
&-left {
td {
padding-left: px2rem(15px);
border-bottom: 1px solid #f5f6f6;
}
background: #f5f6f6;
}
tr {
height: px2rem(40px);
line-height: px2rem(40px);
}
td {
height: px2rem(40px);
img {
position: relative;
top: px2rem(6px);
left: 0;
width: 20px;
height: 20px;
}
}
&-tb {
td {
padding-left: px2rem(8px);
border-bottom: 1px solid #f0f0f0;
}
}
&-tb-2 {
td {
padding-left: 0;
border-bottom: 1px solid #f0f0f0;
}
table {
width: 96%;
margin: 0 px2rem(15px);
}
}
}
}
.lect-selection {
display: flex;
background: #fff;
flex-direction: row;
&-title {
display: flex;
flex-direction: row;
padding: px2rem(33px) px2rem(15px) px2rem(13px);
width: px2rem(375px);
justify-content: space-between;
font-size: px2rem(13px);
height: px2rem(68px);
// line-height: px2rem(64px);
border-bottom: 1px solid #e7e7e7;
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
height: px2rem(18px);
font-size: px2rem(18px);
color: #333;
}
}
}
.group-title {
position: absolute;
top: px2rem(80px);
z-index: 202;
display: flex;
flex-direction: row;
padding: px2rem(4px) px2rem(25px) px2rem(16px);
border-bottom: 1px solid #f0f0f0;
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
span {
font-size: px2rem(15px);
color: #333;
}
img {
position: relative;
top: 0;
left: px2rem(-1px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284 !important;
}
.bg-white {
background: #fff;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册