mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 21:06:42 +08:00
408 lines
10 KiB
Vue
408 lines
10 KiB
Vue
<template>
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
:visible.sync="guideCollection"
|
||
:append-to-body="true"
|
||
@closed="closeDlg"
|
||
top="90px"
|
||
:width="dlgWidth">
|
||
<div class="gui-box" :style="{'min-height':dlgHeight,width:dlgWidth}">
|
||
<span class="close-right" @click="guideCollection = false"><i style="font-size: 28px;color: #999;" class="el-icon-close"></i></span>
|
||
<div class="gui-box-left" :style="{width:leftWidth}">
|
||
<dl>
|
||
<dt class="left-title">新功能查看</dt>
|
||
<dd v-if="item.images.length>0" v-for="item in guideList" @click="showImg(item)">{{item.title}}</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="gui-box-right">
|
||
<div id="guideBox" style="z-index:99;">
|
||
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
|
||
<swiper-slide style="margin: 0 auto;" v-for="(item, idx ) in resonimg" :key="item.id" class="swiper-slide games">
|
||
<img class="banner-img" style=" margin: 0 auto;" :src="fileBaseUrl + item.img" alt="">
|
||
</swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
</swiper>
|
||
</div>
|
||
<p class="gui-text">{{description}}</p>
|
||
<!-- <el-button type="primary" class="btn-one" @click="goHome()">进入首页</el-button> -->
|
||
<el-button type="primary" class="btn-one" @click="goHome()">进入首页</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import { mapGetters, mapActions } from 'vuex';
|
||
// import apiUserhobby from "@/api/phase2/userhobby.js"
|
||
import apiGuide from "@/api/phase2/guide.js"
|
||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||
export default {
|
||
props:{
|
||
// show:{
|
||
// type:Boolean,
|
||
// default:false
|
||
// }
|
||
},
|
||
data(){
|
||
return {
|
||
dlgHeight:'650px',
|
||
dlgWidth:'688px',
|
||
leftWidth:'160px',
|
||
description:'',
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
guideCollection:false,// 兴趣采集
|
||
guideList:[],
|
||
resonimg:[],
|
||
swiperOption: {
|
||
autoplay: {
|
||
disableOnInteraction: false ,
|
||
delay: 2000,
|
||
},
|
||
speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
|
||
loop:true, //循环切换
|
||
observe:true,
|
||
peed: 300,//循环速度
|
||
scrollbar: '.swiper-scrollbar',
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
// type : 'progressbar', //分页器形状
|
||
clickable :true, //点击分页器的指示点分页器会控制Swiper切换
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
//这里的以后要去掉的，不应该是这样计算的
|
||
let width = document.body.clientWidth;
|
||
console.log(width,'width');
|
||
if(width > 1921) {
|
||
this.dlgWidth = '1088px';
|
||
this.leftWidth='220px';
|
||
}
|
||
if(width > 1681 && width < 1921) {
|
||
this.dlgWidth = '888px';
|
||
this.leftWidth='200px';
|
||
}
|
||
if(width > 1367 && width < 1680) {
|
||
this.dlgWidth = '848px';
|
||
this.leftWidth='180px';
|
||
}
|
||
if(width < 1366) {
|
||
this.dlgWidth = '688px';
|
||
this.leftWidth='160px';
|
||
}
|
||
|
||
//这里必须放在当前的Session存储中，不能每次都调用
|
||
// apiGuide.hasUser().then(res=>{
|
||
// if(res.result) {
|
||
// this.guideCollection = false;
|
||
// } else {
|
||
// this.guideCollection = true;
|
||
|
||
// }
|
||
// });
|
||
//只是在显示时才调用
|
||
},
|
||
mounted() {
|
||
this.getlist();
|
||
},
|
||
methods:{
|
||
show(){
|
||
this.guideCollection=true;
|
||
},
|
||
closeDlg(){
|
||
this.$emit('close');
|
||
},
|
||
goHome() {
|
||
this.guideCollection = false;
|
||
this.$router.push('/index')
|
||
},
|
||
getlist() {
|
||
apiGuide.list().then(res=>{
|
||
if(res.status == 200) {
|
||
this.guideList = res.result;
|
||
this.showImg(res.result[0]);
|
||
}
|
||
})
|
||
},
|
||
|
||
showImg(item) {
|
||
this.resonimg = [];
|
||
if(item){
|
||
this.description = item.description;
|
||
this.resonimg = item.images;
|
||
}
|
||
},
|
||
notYet() {
|
||
this.interestCollection = false;
|
||
localStorage.setItem('notYet',new Date());
|
||
},
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
computed:{
|
||
...mapGetters(['userInfo','studyTaskCount']),
|
||
swiper() {
|
||
return this.$refs.mySwiper.swiper
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep.swiper-slide .games .swiper-slide-active{
|
||
text-align: center !important;
|
||
}
|
||
.gui-box{
|
||
display: flex;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.close-right{
|
||
position: absolute;
|
||
right:28px;
|
||
// top:45px;
|
||
}
|
||
|
||
::v-deep .swiper-wrapper{
|
||
padding-bottom: 60px;
|
||
}
|
||
// swiper-pagination-bullet swiper-pagination-bullet-active
|
||
// .swiper-pagination-bullet
|
||
::v-deep .swiper-pagination-bullet-active{
|
||
width: 48px !important;
|
||
height: 6px !important;
|
||
background: #387DF7 !important;
|
||
border-radius: 8px !important;
|
||
}
|
||
::v-deep .swiper-slide-prev{
|
||
|
||
}
|
||
::v-deep .swiper-pagination-bullet{
|
||
width: 12px;
|
||
height: 6px;
|
||
background: #387DF7;
|
||
border-radius: 8px;
|
||
// opacity: 0.36;
|
||
}
|
||
.gui-box-left{
|
||
padding-top: 90px;
|
||
// width: 190px;
|
||
// background: #387DF7;
|
||
background: url('../../../public/images/homeWu/guide-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 10px 0 0 10px;
|
||
.left-title{
|
||
// width: 190px;
|
||
margin-bottom: 42px;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
}
|
||
dd{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 22px;
|
||
// margin-left: 20px;
|
||
padding: 0 20px;
|
||
margin-bottom: 27px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.gui-box-right{
|
||
flex: 1;
|
||
// width: 897px;
|
||
background: #e6effb;
|
||
padding: 74px 0 64px 0;
|
||
border-radius:0 10px 10px 0;
|
||
text-align: center;
|
||
.gui-text{
|
||
color: #387DF7;
|
||
font-size: 16px;
|
||
margin-top: 30px;
|
||
}
|
||
.btn-one{
|
||
margin-top: 40px;
|
||
width: 457px;
|
||
height: 62px;
|
||
background: #387DF7;
|
||
border-radius: 8px;
|
||
}
|
||
.swiper-slide{
|
||
// width: 576px;
|
||
// height: 500px;
|
||
text-align: center;
|
||
.banner-img{
|
||
// width: 576px;
|
||
// height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-dialog{
|
||
// background: #fff url('/images/homeWu/interest.png') no-repeat;
|
||
border-radius: 10px;
|
||
.el-dialog__header{
|
||
display: none;
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
.el-dialog__footer{
|
||
display: none;
|
||
}
|
||
// height: 840px;
|
||
}
|
||
// .el-checkbox.is-bordered.is-checked{
|
||
// border-color: #4677F4;
|
||
// }
|
||
// ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||
// color: #4677F4;
|
||
// }
|
||
// .el-checkbox{
|
||
// font-size: 14px;
|
||
// color: #333333;
|
||
// }
|
||
|
||
.dialog-footer{
|
||
text-align: center;
|
||
.btn-one{
|
||
width: 473px;
|
||
height: 59px;
|
||
background: linear-gradient(146deg, #4D7BF6 0%, #2F65EC 100%);
|
||
border-radius: 30px;
|
||
}
|
||
.btn-tow{
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1366px){
|
||
.gui-box-left{
|
||
//width: 160px;
|
||
.left-title{
|
||
width: 160px;
|
||
}
|
||
dd{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.gui-box-right{//资源引导位宽度
|
||
width: 497px;
|
||
.swiper-slide{
|
||
width: 376px;
|
||
height: 300px;
|
||
text-align: center;
|
||
.banner-img{
|
||
width: 376px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.gui-box{
|
||
.close-right{
|
||
right:28px;
|
||
top:25px;
|
||
}
|
||
}
|
||
}
|
||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||
.gui-box-left{
|
||
//width: 160px;
|
||
.left-title{
|
||
width: 160px;
|
||
}
|
||
dd{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.gui-box-right{//资源引导位宽度
|
||
width: 658px;
|
||
.swiper-slide{
|
||
width: 476px;
|
||
height: 400px;
|
||
text-align: center;
|
||
.banner-img{
|
||
width: 476px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.gui-box{
|
||
.close-right{
|
||
right:28px;
|
||
top:25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||
.gui-box-left{
|
||
//width: 160px;
|
||
.left-title{
|
||
width: 160px;
|
||
}
|
||
dd{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.gui-box-right{//资源引导位宽度
|
||
width: 722px;
|
||
.swiper-slide{
|
||
width: 560px;
|
||
height: 430px;
|
||
text-align: center;
|
||
.banner-img{
|
||
width: 560px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.gui-box{
|
||
.close-right{
|
||
right:28px;
|
||
top:28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1921px){
|
||
.gui-box-left{
|
||
// width: 190px;
|
||
.left-title{
|
||
width: 190px;
|
||
}
|
||
dd{
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
.gui-box-right{//资源引导位宽度
|
||
width: 897px;
|
||
.swiper-slide{
|
||
width: 576px;
|
||
height: 500px;
|
||
text-align: center;
|
||
.banner-img{
|
||
width: 576px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.gui-box{
|
||
.close-right{
|
||
right:28px;
|
||
top:45px;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|