'normal'

src/components/icon/FloatBall.vue

@@ -0,0 +1,134 @@
+<template>
+    <transition>
+        <div ref="dragIcon"
+            class="dragIcon"
+            @touchstart.stop="handleTouchStart"
+            @touchmove.prevent.stop="handleTouchMove($event)"
+            @touchend.stop="handleTouchEnd"
+            :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}"
+            v-text="text"
+            v-if="isShow">
+                {{text}}
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    props: {
+       text: {
+           type: String,
+           default: '球'
+       },
+       itemWidth: {
+           type: Number,
+           default: 40
+       },
+       itemHeight: {
+           type: Number,
+           default: 40
+       }
+    },
+    data(){
+        return{
+            left: 0,
+            top: 0,
+            startToMove: false,
+            isShow: true,
+            timer: null,
+            currentTop: null,
+            clientW: document.documentElement.clientWidth,//视口宽
+            clientH: document.documentElement.clientHeight,//视口高
+        }
+    },
+    created () {
+       this.left = (this.clientW - this.itemWidth - 30)
+       this.top = (this.clientH/2 - this.itemHeight/2)
+    },
+    mounted() {
+        this.bindScrollEvent()
+    },
+    beforeDestroy() {
+        // 记得销毁一些全局的的事件
+        this.removeScrollEvent()
+    },
+    methods: {
+        handleTouchStart() {
+            this.startToMove = true
+            this.$refs.dragIcon.style.transition = "none"
+        },
+        handleTouchMove(e) {
+            const clientX = e.targetTouches[0].clientX;//手指相对视口的x
+            const clientY = e.targetTouches[0].clientY;//手指相对视口的y
+            const isInScreen = clientX <= this.clientW && clientX >= 0 && clientY <= this.clientH && clientY >=0
+            if(this.startToMove && e.targetTouches.length === 1) {
+                if(isInScreen) {
+                    this.left = clientX - this.itemWidth/2
+                    this.top = clientY - this.itemHeight/2
+                }
+            }
+        },
+        handleTouchEnd() {
+            if(this.left < (this.clientW / 2)) {
+                this.left = 30;//不让贴边 所以设置30没设置0
+                this.handleIconY()
+            } else {
+                this.left = this.clientW - this.itemWidth - 30;//不让贴边 所以减30
+                this.handleIconY()
+            }
+            this.$refs.dragIcon.style.transition = "all .3s"
+        },
+        handleIconY() {
+            if (this.top < 0) {
+                this.top = 30;//不上帖上边所以设置为30 没设置0
+            } else if(this.top + this.itemHeight > this.clientH) {
+                this.top = this.clientH - this.itemHeight - 30;//不让帖下边所以减30
+            }
+        },
+        bindScrollEvent() {
+            window.addEventListener('scroll', this.handleScrollStart)
+        },
+        removeScrollEvent() {
+            window.removeEventListener('scroll',this.handleScrollStart)
+        },
+        handleScrollStart() {
+            this.isShow = false
+            this.timer && clearTimeout(this.timer)
+            this.timer = setTimeout(() => {
+                this.handleScrollEnd()
+            },300)
+            this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
+        },
+        handleScrollEnd() {
+            this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+            // 判断是否停止滚动的条件
+            if(this.scrollTop == this.currentTop) {
+                this.isShow = true
+            }
+        }
+    },
+}
+</script>
+
+<style scoped>
+.dragIcon {
+    position: fixed;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: orange;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+}
+.v-enter {
+  opacity: 1;
+}
+.v-leave-to {
+  opacity: 0;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s;
+}
+</style>

src/containers/login/login.vue

@@ -3,11 +3,11 @@
     <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
     <div class="banner-box">
       <div class="p-wrap-full clear pt30">
-        <el-card class="training-category opacity-bg fl" style="border-radius: 20px;" >
-          <!-- <img alt="" class="mimg" src="/static/swiper/1.jpg"/> -->
-          <h1 align="center" style="background-color: white; color: #000000; padding-top: 10px;">文件通知</h1>
-          <el-table :data="postList"  highlight-current-row   :show-header="false" max-height="300px" >
-            <el-table-column  label="Id" min-width="600px">
+        <el-card class="training-category opacity-bg fl" style="border-radius: 20px;padding-top: -5px;" >
+          <h2 align="center" style="background-color: white; color: #000000;padding-top:5px;">文件通知</h2>
+          <el-table :data="postList"  highlight-current-row
+          :show-header="false" max-height="290px" >
+            <el-table-column min-width="600px">
               <template slot-scope="{row, $index}">
                 <span @click="gotoDetail(row.postId)">{{$index+1}}、{{ row.title }}</span>
               </template>
@@ -36,7 +36,7 @@
         <el-col :span="+item.span" class="nopad"  v-for="(item, index) in typeList" :key="index">
           <el-card shadow="hover" class="grid-content nopad "  >
             <div class="mt10 typelist" @click="gotoCourse(item)">
-              <i class="p-ico"  :class="item.icon" style="color:#69c0ff "></i>
+              <i class="p-ico"  :class="item.icon" style="color:#69c0ff"></i>
               <p style="font-size: 13px;">{{ item.name }}</p>
               <p class="mt10" style="font-size: 16px;" v-if="!item.isOpen">(暂未开放)</p>
               <p class="mt10" style="font-size: 16px;" v-else>{{ item.content }}</p>
@@ -46,6 +46,7 @@
       </el-row>
     </div>
 
+
     <div class="p-wrap-full ng-scope">
       <div class="title-box mt5 clear">
         <h2 class="title">友情链接</h2>
@@ -72,16 +73,20 @@
       :visible.sync="postDialog"
       :fullscreen="true"
       style="padding:0px;"
-      @close="closeDialog"
+      @close="postDialog= false"
     >
         <div class="postDialog">
-          <p class="tc" style="font-size: 50px;">{{postInfo.title}}</p>
-          <p class="tc mt20" style="font-size: 30px;">
+          <h1 class="tc" style="font-size: 50px; color: #000000;">{{postInfo.title}}</h1>
+          <h2 class="tc mt20" style="font-size: 30px;">
             发布时间：{{postInfo.publishTime}}
             <span class="ml30 ng-binding">来源：{{postInfo.author}}</span>
             <span class="ml30 ng-binding">阅读数：{{postInfo.viewCount}}</span>
-          </p>
-          <span v-html="postInfo.content" style="padding-top: -50px;"></span>
+          </h2>
+          <el-button @click="postDialog= false" class="floatbox" type="warning">
+            返回主页
+          </el-button>
+
+          <span v-html="postInfo.content" class="mt30"></span>
         </div>
     </el-dialog>
 
@@ -103,7 +108,7 @@ export default {
     isLogin,
     unLogin,
     Friendlink,
-    navbar,
+    navbar
   },
   data() {
     return {
@@ -153,7 +158,7 @@ export default {
     },
     getPostList(){
       httpServer("course.getPostList", {page:1,type:'操作指南'}).then( res=>{
-        this.postList = res.data.list.splice(0,5)
+        this.postList = res.data.list
       })
     },
     gotoDetail(postId){
@@ -189,4 +194,17 @@ export default {
 
 <style>
 @import url("login.css");
+.floatbox{
+  position: fixed;
+  width: 160px;
+  height: 60px;
+  right: 100px;
+  top: 90px;
+  border-radius: 1.25rem;
+  font-size: 30px;
+  background-color: orange;
+  line-height: 40px;
+  text-align: center;
+  color: #fff;
+}
 </style>