mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 04:16:45 +08:00
首页轮播
This commit is contained in:
lmj
19996
package-lock.json
generated
19996
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -38,7 +38,9 @@
|
||||
"script-ext-html-webpack-plugin": "^2.1.5",
|
||||
"snowflake-id-js": "^1.0.1",
|
||||
"svg-sprite-loader": "^6.0.9",
|
||||
"swiper": "^4.5.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-cookies": "^1.7.4",
|
||||
"vue-pdf": "^4.2.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin"/>
|
||||
<link rel="icon" href="<%= BASE_URL %>logo/favicon.ico">
|
||||
<title>京东方大学堂</title>
|
||||
|
||||
<script>
|
||||
|
||||
if(window.top != window.self){
|
||||
window.top.location=window.self.location;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,9 @@ import '@/assets/styles/portal.scss' // global css
|
||||
import Pagination from "@/components/Pagination";
|
||||
import Remark from "@/components/Remark";
|
||||
import './security'; //security control
|
||||
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper';
|
||||
import 'swiper/dist/css/swiper.css';
|
||||
Vue.use(VueAwesomeSwiper)
|
||||
import watermark from './utils/warterMark.js'
|
||||
|
||||
Vue.prototype.$watermark = watermark
|
||||
|
||||
@@ -1,6 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="course-banner">
|
||||
<portal-header current="index" ></portal-header>
|
||||
<div id="container">
|
||||
<swiper :options="swiperOption" ref="mySwiper">
|
||||
|
||||
|
||||
|
||||
<swiper-slide v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
|
||||
<img class="banner-img" :src=" fileBaseUrl + item.image" alt="">
|
||||
</swiper-slide>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portal-content xcontent" >
|
||||
<!-- 推荐课程 -->
|
||||
<div class="modules">
|
||||
@@ -335,6 +351,9 @@ import interactRowBar from '@/components/Portal/interactRowBar.vue';
|
||||
import courseImage from '@/components/Course/courseImage.vue';
|
||||
import articleImage from '@/components/Article/articleImage.vue';
|
||||
import { toScore,cutFullName} from '@/utils/tools.js';
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||||
import apiPlace from "@/api/modules/place.js"
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: { portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
|
||||
@@ -343,6 +362,32 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
resonimg:[ ],
|
||||
swiperOption: {
|
||||
autoplay : {
|
||||
disableOnInteraction: false, //用户操作后是否禁止自动循环
|
||||
delay: 3000 //自自动循环时间
|
||||
}, //可选选项，自动滑动
|
||||
speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
|
||||
loop:true, //循环切换
|
||||
grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
|
||||
// setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
|
||||
autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
|
||||
scrollbar: '.swiper-scrollbar',
|
||||
mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
|
||||
observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
|
||||
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
// type : 'progressbar', //分页器形状
|
||||
clickable :true, //点击分页器的指示点分页器会控制Swiper切换
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
},
|
||||
|
||||
couname:'',
|
||||
isNext: true,
|
||||
pageIndex: 1,
|
||||
@@ -376,8 +421,24 @@ export default {
|
||||
this.getCaseData();
|
||||
this.getArticleData();
|
||||
this.getQaData();
|
||||
this.couresreso();
|
||||
},
|
||||
computed: {
|
||||
swiper() {
|
||||
return this.$refs.mySwiper.swiper
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
couresreso(){
|
||||
let key = 'index';
|
||||
apiPlace.detail(key).then(res=>{
|
||||
console.log(res)
|
||||
let lmj = JSON.parse(res.result.content)
|
||||
console.log(lmj)
|
||||
this.resonimg = lmj
|
||||
// console.log(this.resonimg)
|
||||
})
|
||||
},
|
||||
jumUX(){
|
||||
window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
|
||||
},
|
||||
@@ -648,10 +709,23 @@ export default {
|
||||
this.$router.push({ path: '/qa/answer', query: { id: item.id } });
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#container{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.banner-img{
|
||||
width: 100%;
|
||||
height: 520px;
|
||||
}
|
||||
.course-banner{
|
||||
height: 520px;
|
||||
// background: url('/images/course-banner.png');
|
||||
}
|
||||
.case-orginfo{
|
||||
// line-height: 25px;
|
||||
height: 45px;
|
||||
|
||||
@@ -271,6 +271,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="course-resources">
|
||||
资源位
|
||||
<img :src="fileBaseUrl + resonimg.image" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -306,6 +310,7 @@ import apiUser from "@/api/system/user.js";
|
||||
import apiPraise from "@/api/modules/praises.js";
|
||||
import apiFavorites from "@/api/modules/favorites.js";
|
||||
import apiMessage from "@/api/system/message.js";
|
||||
import apiPlace from "@/api/modules/place.js"
|
||||
export default {
|
||||
name: "answer",
|
||||
components: {
|
||||
@@ -324,6 +329,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
resonimg:{},
|
||||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||||
noData: true,
|
||||
qaFormCheckedShow: false,
|
||||
checked: false,
|
||||
@@ -376,11 +383,21 @@ export default {
|
||||
this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
this.getAnkingData();
|
||||
this.couresreso();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
couresreso(){
|
||||
let key = 'qa';
|
||||
apiPlace.detail(key).then(res=>{
|
||||
console.log(res)
|
||||
let lmj = JSON.parse(res.result.content)
|
||||
this.resonimg = lmj[0]
|
||||
console.log(this.resonimg.image)
|
||||
})
|
||||
},
|
||||
handleScroll() {
|
||||
let innerHeight = document.querySelector("#answer-detail").clientHeight;
|
||||
let outerHeight = document.documentElement.clientHeight;
|
||||
@@ -811,6 +828,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.course-resources{
|
||||
width: 410px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep .checked-show {
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
|
||||
@@ -184,34 +184,13 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="course-resources">
|
||||
资源位
|
||||
<img :src="fileBaseUrl + resonimg.image" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- <div style="margin-bottom:15px;padding: 0">
|
||||
<el-button style="height: 100%;height: 37px;border-radius: 0; width: 100%;" @click="$refs.addQuestion.askQuestionDialog = true" type="primary">提问题</el-button>
|
||||
</div>
|
||||
<div :span="24" style="padding:0">
|
||||
<el-card class="ranking-card">
|
||||
<div slot="header" >
|
||||
<span style="font-size: 14px;font-weight: 600;color: #333333;">贡献排行榜</span>
|
||||
</div>
|
||||
<div style="padding-bottom:10px">
|
||||
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" >
|
||||
<el-col :span="6" style="height:34px;" >
|
||||
<img style="margin-top: 5px;" v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||||
<img style="margin-top: 5px;" v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||||
<img style="margin-top: 5px;" v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||||
</el-col>
|
||||
<el-col :span="18" class="one-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- </el-row> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<addQuestion ref="addQuestion" @sure="toDetail"></addQuestion>
|
||||
|
||||
Reference in New Issue
Block a user