首页轮播

package.json

@@ -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",

public/index.html

@@ -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;
       }

src/main.js

@@ -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

src/views/Index.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
-    <portal-header current="index" ></portal-header>
+     <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;

src/views/portal/qa/Answer.vue

@@ -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;

src/views/portal/qa/Detail.vue

@@ -184,34 +184,13 @@
                    </li>
                         </ul>
                     </div>
-                     <div class="course-resources">
+                    
+               <div class="course-resources">
                         资源位
-                        <img :src="fileBaseUrl + resonimg.image" alt="">
+               <img :src="fileBaseUrl + resonimg.image" alt="">
-                      </div>
+              </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>