提交

src/api/phase2/guide.js

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

src/components/Portal/guideBox.vue

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

src/layout/components/TopNav/Index.vue

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