mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 03:16:42 +08:00
提交
This commit is contained in:
zhaofang
@@ -21,7 +21,7 @@ const save=function (data){
|
||||
* 判断当前用户是否登录过
|
||||
* */
|
||||
const hasUser=function (){
|
||||
return ajax.get('/xboe/subgroup/m/guide/hasUser');
|
||||
return ajax.get(baseURL,'/xboe/subgroup/m/guide/hasUser');
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
237
src/components/Portal/guideBox.vue
Normal file
237
src/components/Portal/guideBox.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="guideCollection"
|
||||
top="90px"
|
||||
width="1088px">
|
||||
<div class="gui-box">
|
||||
<div class="gui-box-left">
|
||||
<dl>
|
||||
<dt class="left-title">新功能查看</dt>
|
||||
<dd v-for="item in guideList" @click="showImg(item)">{{item.title}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="gui-box-right">
|
||||
<div id="guideBox" style="height:540px;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">进入首页</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 {
|
||||
description:'',
|
||||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||||
guideCollection:false,// 兴趣采集
|
||||
guideList:[],
|
||||
resonimg:[],
|
||||
swiperOption: {
|
||||
autoplay: {
|
||||
disableOnInteraction: false ,
|
||||
delay: 2000,
|
||||
},
|
||||
speed: 1000, //切换速度，即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() {
|
||||
apiGuide.hasUser().then(res=>{
|
||||
if(res.result) {
|
||||
this.guideCollection = true;
|
||||
} else {
|
||||
this.guideCollection = false;
|
||||
}
|
||||
})
|
||||
this.getlist();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
getlist() {
|
||||
apiGuide.list().then(res=>{
|
||||
if(res.status == 200) {
|
||||
this.guideList = res.result;
|
||||
this.showImg(res.result[0]);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
showImg(item) {
|
||||
this.description = item.description;
|
||||
this.resonimg = [];
|
||||
this.resonimg = item.images;
|
||||
// this.swiper.update();
|
||||
},
|
||||
notYet() {
|
||||
this.interestCollection = false;
|
||||
localStorage.setItem('notYet',new Date());
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
computed:{
|
||||
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;
|
||||
::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;
|
||||
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 30px;
|
||||
margin-bottom: 27px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.gui-box-right{
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background: #e6effb;
|
||||
padding: 74px 100px 64px 100px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -100,6 +100,7 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<interest-Collection></interest-Collection>
|
||||
<guide-box></guide-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -108,8 +109,9 @@ import { mapGetters } from 'vuex';
|
||||
import desk from '@/api/console.js';
|
||||
import Cookies from 'vue-cookies';
|
||||
import InterestCollection from '@/components/Portal/interestCollection.vue'
|
||||
import GuideBox from '@/components/Portal/guideBox.vue'
|
||||
export default {
|
||||
components:{InterestCollection},
|
||||
components:{InterestCollection,GuideBox},
|
||||
data() {
|
||||
return {
|
||||
interestShow:false,
|
||||
|
||||
Reference in New Issue
Block a user