放大缩小

src/components/Portal/interactBar.vue

@@ -497,11 +497,11 @@ export default {
            }
            apiShares.save(postData).then(rs=>{
              $this.shareShow=false;
-             $this.data.shares++;
              if(rs.status!=200){
                this.$message.error("分享失败")
              }else{
                if(rs.result){
+                 $this.data.shares++;
                  this.$message.success("分享成功")
                  if(this.type!=3){
                    if(this.type==1){

src/views/portal/case/Detail.vue

@@ -50,11 +50,21 @@
           </el-card>
           <div class="postfixt-bot">
             <div class="postfixt-bot-box" id="pdfTopBox">
-              <div style="display:inline-block;">
+              <div style="display: flex;justify-content: space-between;">
-                <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
+                <div style="margin-left:20px">
-              </div>
+                   <div>
-              <div style="display:inline-block;margin: 0 20px;">
+                     <i style="font-size:20px" v-show="zoomShow" @click="zoomBox()" class="el-icon-zoom-in"></i>
-                <el-button type="primary" @click="goTop()">返回顶部</el-button>
+                     <i style="font-size:20px" v-show="!zoomShow" @click="zoomBox()" class="el-icon-zoom-out"></i>
+                  </div>
+                </div>
+                <div>
+                   <div style="display:inline-block;">
+                      <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
+                    </div>
+                    <div style="display:inline-block;margin: 0 20px;">
+                      <el-button type="primary" @click="goTop()">返回顶部</el-button>
+                    </div>
+                </div>
               </div>
             </div>
           </div>
@@ -65,7 +75,7 @@
         </el-col>
       </el-row>
           </div>
-          <div style="width: 245px;margin-left: 5px;">
+          <div style="width: 245px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
         <div>
            <div id="fixd-box">
              <el-card class="ranking-card" >
@@ -153,7 +163,6 @@ import { mapGetters } from 'vuex';
 import portalHeader from '@/components/PortalHeader.vue';
 import portalFooter from '@/components/PortalFooter.vue';
 import pdfPreview from '@/components/PdfPreview/view.vue';
-
 import interactBar from '@/components/Portal/interactBar.vue';
 import comments from '@/components/Portal/comments.vue';
 import apiCase from '@/api/modules/cases.js';
@@ -172,6 +181,7 @@ export default {
   },
   data() {
     return {
+      zoomShow:true,
       isTopBoxShow:true,
       toUsers:[],
       ankingList:[],
@@ -204,6 +214,9 @@ export default {
     );
   },
   methods: {
+    zoomBox(){
+      this.zoomShow = !this.zoomShow;
+    },
     jumpRouter(item) {
       //   console.log(item)
         location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
@@ -238,7 +251,7 @@ export default {
           }
         }
         if(pdfPreview.getBoundingClientRect().top < 0) {
-          document.querySelector('#pdfTopBox').style.cssText = `position: fixed;bottom:0;width:${contentDiv-9}px`;
+          document.querySelector('#pdfTopBox').style.cssText = `position: fixed;bottom:0;box-shadow: -3px 3px 10px 10px rgba(90, 119, 186, .2);width:${contentDiv-9}px;`;
         } else {
           document.querySelector('#pdfTopBox').style.cssText = "position:static";
         }
@@ -325,6 +338,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.fixd-box-show{
+  display: none;
+}
 ::v-deep .interact-bar .interact-bar-btns {
   justify-content: flex-start!important;
 
@@ -341,7 +357,7 @@ export default {
   // border: 1px solid #eee;
   // z-index: 999;
   .postfixt-bot-box{
-    text-align: right;
+    // text-align: right;
     background-color: #fff;
     // border: 1px solid #eee;
   }