修改自定义页面

src/layout/index.vue

@@ -3,17 +3,36 @@
     <div class="top">
       <Menu class="menu"/>
       <img :src="logo" alt="" class="logo" @click="toIndex">
-<!--      <div class="experience">体验云平台</div>-->
     </div>
     <div class="shadow">
     </div>
     <div class="content">
       <router-view></router-view>
     </div>
+    <div class="FloatingWindow">
+      <div class="item mailAn">
+        <i class="el-icon-message" style="color:#fff;font-size: 20px"></i>
+        <div class="mail">hwwlxxxxxxxx@xxxx.con</div>
+      </div>
+      <div class="item">
+        <img :src="qrcode" alt="" width="30px" height="30px" style="vertical-align: middle;">
+        <div class="qrcode">
+          <img :src="qrcode" alt="" width="100px" height="100px" style="vertical-align: middle;">
+        </div>
+      </div>
+      <div class="item" @click="toService" style="cursor: pointer;">
+        <i class="el-icon-chat-dot-square" style="color:#fff;font-size: 20px"></i>
+      </div>
+      <div class="item" @click="toTop" style="line-height: 20px">
+        <i class="el-icon-caret-top" style="color:#fff;font-size: 20px"></i>
+        <div style=" color: #fff">top</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import qrcode from '@/assets/icon/QRCode.png'
 import Menu from '@/components/menu/index'
 import logo from '@/assets/logo.png'
 
@@ -22,14 +41,21 @@ export default {
   components: {
     Menu
   },
-  methods:{
+  methods: {
     toIndex(){
       this.$router.push('/index')
+    },
+    toTop() {
+      window.scrollTo({top: 0, behavior: 'smooth'});
+    },
+    toService() {
+      this.$router.push('/serviceSupport')
     }
   },
   data() {
     return {
       logo,
+      qrcode
     }
   }
 }
@@ -100,4 +126,61 @@ export default {
   height: calc(100vh - @top-height);
   z-index: 1;
 }
+
+.FloatingWindow {
+  z-index: 999;
+  position: fixed;
+  bottom: 25%;
+  right: 0;
+  transform: translateY(-50%);
+
+  .item {
+    margin-bottom: 1px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    width: 50px;
+    height: 50px;
+    background-color: #41B5EA;
+    text-align: center;
+    line-height: 50px;
+    position: relative;
+
+    .mail {
+      position: absolute;
+      top: 0;
+      left: 50px;
+      height: 50px;
+      line-height: 50px;
+      width: 150px;
+      color: #fff;
+      background-color: #41B5EA;
+      font-size: 12px;
+    }
+
+    &:hover {
+      .qrcode {
+        display: block;
+      }
+    }
+
+    .qrcode {
+      position: absolute;
+      top: -30px;
+      right: 60px;
+      height: 120px;
+      line-height: 120px;
+      width: 120px;
+      background-color: #41B5EA;
+      display: none;
+    }
+  }
+
+  .mailAn {
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      transform: translateX(-150px);
+    }
+  }
+}
 </style>