调整了卡片在PC和Mobile的弹出位置；修复了Mobile端通过地图点击触发的附属信息不能正确隐藏的BUG

src/components/card-xiugai0916.vue

@@ -1,377 +0,0 @@
-<template>
-  <div id="el-card-div" class="el-card-div">
-    <el-card id="el-card" class="el-card" :body-style="{ padding: '0px'}" bottomShadowHeight="5px">
-      <div class="button-close-div" id="button-close-div">
-        <img id="close-button" class="close-button" src="../../static/img/close.svg" alt="" @click="closeCard()">
-      </div>
-      <el-carousel trigger="click" id="el-carousel">
-        <el-carousel-item v-for="imgUrl in imgArr" :key="imgUrl">
-          <img v-bind:src="imgUrl" class="image" id="img">
-        </el-carousel-item>
-      </el-carousel>
-      <div class="background">
-        <div class="title" id="title">{{ title | ellipsis_title}}</div>
-<!--        <div class="bottom clearfix">-->
-          <div class="info" id="info">{{ info | ellipsis_info}}</div>
-<!--        </div>-->
-        <!-- <button id="button-show-all" class="button-show-all" onclick="">{{ '阅读全文' }}</button> -->
-      <a
-         :href="url"
-         target='_blank'
-       >
-         <button
-           v-show="url !== null"
-           id="button-show-all"
-           class="button-show-all"
-         >
-           {{ '阅读全文' }}
-         </button>
-      </a>
-      </div>
-    </el-card>
-  </div>
-</template>
-<script>
-import bus from '../../static/js/eventBus'
-
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '我是标题我是标题我是标题我是标题我是标题我是标题'
-    },
-    info: {
-      type: String,
-      default: '我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息'
-    },
-    url: {
-      type: String,
-      default: null
-    },
-    isMobile: {
-      type: Boolean,
-      default: false
-    },
-    // 图片链接
-    img: {
-      type: String,
-      default: '../../static/img/card-img.png'
-    }
-  },
-  name: 'phoneCard',
-  data () {
-    return {
-      button: '',
-      flag: '',
-      imgArr: ['../../static/img/card-img.png'],
-      showMore: false,
-      screenSize: window.screen.width
-    }
-  },
-  mounted () {
-    /**
-     * @description: 当页面为pc端时就切换成pc端的样式
-     */
-    if (window.screen.width < 480) {
-      this.setCardSize()
-    }
-    console.log(this.info.length)
-  },
-  methods: {
-    /**
-     * @description: 隐藏 卡片（本组件）
-     */
-    closeCard () {
-      bus.$emit('closePopup')
-      // let card = document.getElementById('el-card-div')
-      // card.style.display = 'none'
-    },
-    /**
-     * @description:根据设备动态设置内部尺寸
-     */
-    setCardSize () {
-      let card = document.getElementById('el-card')
-      let cardDiv = document.getElementById('el-card-div')
-
-      let title = document.getElementById('title')
-      let elcarousel = document.getElementById('el-carousel')
-      let info = document.getElementById('info')
-      let buttonshowall = document.getElementById('button-show-all')
-      let buttonclose = document.getElementById('button-close-div')
-      let buttoncloseImg = document.getElementById('close-button')
-
-      var cardWidth = window.screen.width - 64
-      var cardHeight = parseInt(cardWidth * 1.414)
-      card.style.width = cardWidth + 'px'
-      card.style.height = cardHeight + 'px'
-      cardDiv.style.marginLeft = '-' + cardWidth / 2 + 'px'
-      cardDiv.style.marginTop = '-' + cardHeight / 2 + 'px'
-
-      elcarousel.style.height = cardHeight * 0.43 + 'px'
-      elcarousel.style.width = cardWidth + 'px'
-
-      title.style.height = cardHeight * 0.15 + 'px'
-      title.style.width = cardWidth * 0.9 + 'px'
-      title.style.marginTop = cardHeight * 0.0119 + 'px'
-      title.style.marginRight = cardWidth * 0.05 + 'px'
-      title.style.marginLeft = cardWidth * 0.05 + 'px'
-      title.style.fontSize = cardWidth * 0.075 + 'px'
-
-      info.style.width = cardWidth * 0.9 + 'px'
-      info.style.height = cardHeight * 0.196 + 'px'
-      info.style.fontSize = cardWidth * 0.045 + 'px'
-      info.style.marginRight = cardWidth * 0.05 + 'px'
-      info.style.marginLeft = cardWidth * 0.05 + 'px'
-      info.style.marginTop = cardHeight * 0.0119 + 'px'
-
-      buttonshowall.style.width = cardWidth * 0.73 + 'px'
-      buttonshowall.style.height = cardHeight * 0.089 + 'px'
-      buttonshowall.style.marginTop = cardHeight * 0.0476 + 'px'
-      buttonshowall.style.marginBottom = cardHeight * 0.0476 + 'px'
-      buttonshowall.style.fontSize = cardWidth * 0.045 + 'px'
-
-      buttonclose.style.height = cardWidth * 0.05 + 'px'
-      buttonclose.style.width = cardWidth * 0.05 + 'px'
-      buttonclose.style.right = cardWidth * 0.05 + 'px'
-      buttonclose.style.marginTop = cardWidth * 0.05 + 'px'
-      // buttonclose.style.marginTop = cardHeight * 0.0357 + 'px'
-
-      buttoncloseImg.style.height = cardWidth * 0.05 + 'px'
-      buttoncloseImg.style.width = cardWidth * 0.05 + 'px'
-    }
-  },
-  watch: {
-    screenSize: function () {
-      this.setCardSize()
-    },
-
-    img (val) {
-      if (val !== null) {
-        val = val.replace(/\s+/g, '')
-      }
-
-      if (val !== null && val !== '') {
-        this.imgArr = [val]
-        // console.log(val)
-      } else {
-        // this.imgURL = '../../static/img/card-img.png'
-        this.imgArr = ['../../static/img/card-img.png']
-      }
-    }
-  },
-  filters: {
-    /**
-     * @description:标题过滤器
-     */
-    ellipsis_title: function (value) {
-      if (!value) return ''
-      if (value.length > 22) {
-        return value.slice(0, 22) + '......'
-      }
-      return value
-    },
-
-    /**
-     * @description:内容过滤器
-     */
-    ellipsis_info: function (value) {
-      if (!value) return ''
-      if (value.length > 60) {
-        return value.slice(0, 60) + '......'
-      }
-      return value
-    }
-  }
-}
-</script>
-
-<style>
-@media all {
-  /deep/ .el-card__body {
-    margin-left: 16px !important;
-    margin-right: 16px;
-  }
-
-  #el-carousel {
-    overflow: hidden;
-  }
-
-  .el-card-div {
-    border-radius: 24px;
-    text-align: center;
-    /*margin-left: 32px;*/
-    /*margin-right: 32px;*/
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    /*-webkit-transform: translate(-50%, -50%);*/
-    /*-moz-transform: translate(-50%, -50%);*/
-    /*-ms-transform: translate(-50%, -50%);*/
-    /*-o-transform: translate(-50%, -50%);*/
-    /*transform: translate(-50%, -50%);*/
-
-  }
-  /*卡片设置*/
-  .el-card {
-    border-radius: 24px;
-    border: none;
-    filter: drop-shadow(0px 16px 16px #475837);
-    position: center;
-    background: url("../../static/img/card-background.png");
-    background-size: cover;
-
-  }
-
-  .image {
-    width: inherit;
-    position: center;
-  }
-
-  .title {
-    line-height: 150%;
-    text-align: left;
-    font-family: "Noto Sans SC";
-    font-weight: 500;
-    color: black;
-    vertical-align: top;
-    z-index: 70;
-    overflow: hidden;
-  }
-
-  /*.bottom {*/
-  /*  line-height: 12px;*/
-  /*}*/
-
-  .info {
-    line-height: 150%;
-    text-align: left;
-    font-family: "Noto Sans SC";
-    font-weight: 300;
-    color: black;
-    vertical-align: top;
-    overflow: hidden;
-    text-indent: 30px;
-  }
-
-  .button-close-div {
-    cursor: pointer;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .button-show-all {
-    position: center;
-    background-color: #87BF96;
-    color: black;
-    border-radius: 30px;
-    filter: drop-shadow(0px 10px 10px #797979);
-    font-family: "Noto Sans SC";
-    border: none;
-    padding: 0;
-  }
-
-  .el-card-div {
-    position: relative;
-    z-index: 70;
-    /*top: 32px;*/
-  }
-
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-
-  .clearfix:after {
-    clear: both
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .el-card-div {
-    top: 50%;
-    left: 50%;
-    margin-left: -120px;
-    margin-top: -168px;
-    /*-webkit-transform: translate(-50%, -50%);*/
-    /*-moz-transform: translate(-50%, -50%);*/
-    /*-ms-transform: translate(-50%, -50%);*/
-    /*-o-transform: translate(-50%, -50%);*/
-    /*transform: translate(-50%, -50%);*/
-    position: absolute
-  }
-  .el-card {
-    width:240px;
-    height:336px;
-    filter: drop-shadow(0px 8px 8px #475837);
-
-  }
-  .el-card__body {
-    width:240px;
-    height:336px;
-    padding:0
-  }
-  .el-carousel__arrow{
-    height:18px !important;
-    width:18px !important;
-    top:38%;
-    font-size: 6px;
-  }
-  .el-icon-arrow-left:before,.el-icon-arrow-right:before{
-    height:6px !important;
-    width:6px !important;
-  }
-  .el-carousel__arrow--left{
-    left:16px;
-  }
-  .el-carousel__arrow--right{
-    right:16px;
-  }
-  .el-carousel__button{
-    width: 15px;
-    height: 1px;
-  }
-  #el-carousel {
-    overflow: hidden;
-    height:146px;
-  }
-  .title{
-    font-size: 18px;
-    width: 216px;
-    height: 52px;
-    margin-top: 4px;
-    margin-right: 12px;
-    margin-left: 12px;
-  }
-  .info {
-    margin-top: 4px;
-    margin-right: 12px;
-    margin-left: 12px;
-    text-indent: 15px;
-    width: 216px;
-    height: 68px;
-    font-size: 11px;
-  }
-  .button-close-div {
-    height: 12px;
-    width: 12px;
-    margin-top: 12px;
-    right: 12px;
-  }
-  .close-button {
-    height: 12px;
-    width: 12px;
-  }
-  .button-show-all {
-    width: 176px;
-    height: 30px;
-    font-size: 11px;
-    margin-top: 16px;
-    margin-bottom: 16px;
-    filter: drop-shadow(0px 5px 5px #797979);
-
-  }
-}
-
-</style>

src/components/card.vue

@@ -4,31 +4,29 @@
       <div class="button-close-div" id="button-close-div">
         <img id="close-button" class="close-button" src="../../static/img/close.svg" alt="" @click="closeCard()">
       </div>
-
-      <!-- <el-carousel trigger="click" id="el-carousel">
-        <el-carousel-item v-for="imgUrl in imgArr" :key="imgUrl"> -->
-        <div id="el-carousel">
-          <img v-bind:src="imgURL" class="image" id="img">
-        </div>
-        <!-- </el-carousel-item>
-      </el-carousel> -->
+      <el-carousel trigger="click" id="el-carousel">
+        <el-carousel-item v-for="imgUrl in imgArr" :key="imgUrl">
+          <img v-bind:src="imgUrl" class="image" id="img">
+        </el-carousel-item>
+      </el-carousel>
       <div class="background">
         <div class="title" id="title">{{ title | ellipsis_title}}</div>
-        <div class="bottom clearfix">
+<!--        <div class="bottom clearfix">-->
           <div class="info" id="info">{{ info | ellipsis_info}}</div>
-        </div>
-        <a
-          :href="url"
-          target='_blank'
-        >
-          <button
-            v-show="url !== null"
-            id="button-show-all"
-            class="button-show-all"
-          >
-            {{ '阅读全文' }}
-          </button>
-        </a>
+<!--        </div>-->
+        <!-- <button id="button-show-all" class="button-show-all" onclick="">{{ '阅读全文' }}</button> -->
+      <a
+         :href="url"
+         target='_blank'
+       >
+         <button
+           v-show="url !== null"
+           id="button-show-all"
+           class="button-show-all"
+         >
+           {{ '阅读全文' }}
+         </button>
+      </a>
       </div>
     </el-card>
   </div>
@@ -40,27 +38,24 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'This is title'
-    },
-    time: {
-      type: String,
-      default: '2021-01-21'
+      default: '我是标题我是标题我是标题我是标题我是标题我是标题'
     },
     info: {
       type: String,
-      default: 'This is info.'
+      default: '我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息'
     },
     url: {
       type: String,
       default: null
     },
-    img: {
-      type: String,
-      default: '../../static/img/card-img.png'
-    },
     isMobile: {
       type: Boolean,
       default: false
+    },
+    // 图片链接
+    img: {
+      type: String,
+      default: '../../static/img/card-img.png'
     }
   },
   name: 'phoneCard',
@@ -68,36 +63,19 @@ export default {
     return {
       button: '',
       flag: '',
-      imgURL: '../../static/img/card-img.png',
+      imgArr: ['../../static/img/card-img.png'],
       showMore: false,
       screenSize: window.screen.width
     }
   },
-  created () {
-    // this.sliceText()
-  },
   mounted () {
     /**
      * @description: 当页面为pc端时就切换成pc端的样式
      */
-    if (window.screen.width < 480) {
-      this.setCardSize()
+    if (this.isMobile) {
+      this.setMobileCardSize()
     } else {
-      let card = document.getElementById('el-card-div')
-      let elCard = document.getElementById('el-card')
-      let cardBody = document.getElementsByClassName('el-card__body')
-      card.style.cssText = ' -webkit-transform: translate(-50%, -50%);\n' +
-          '-moz-transform: translate(-50%, -50%);\n' +
-          '-ms-transform: translate(-50%, -50%);\n' +
-          '-o-transform: translate(-50%, -50%);\n' +
-          'transform: translate(-50%, -50%);\n' +
-          'top: 50%;\n' +
-          'left: 50%;\n' +
-          'position: absolute'
-      elCard.style.cssText = 'width:240px;height:336px;'
-      cardBody[0].style.cssText = 'width:240px;height:336px;padding:0'
-      // 240, 336
-      this.setCardSize()
+      this.setPcCardSize()
     }
   },
   methods: {
@@ -106,14 +84,17 @@ export default {
      */
     closeCard () {
       bus.$emit('closePopup')
+      // let card = document.getElementById('el-card-div')
+      // card.style.display = 'none'
     },
 
     /**
-     * @description:根据设备动态设置内部尺寸
-     */
-    setCardSize () {
-      let div = document.getElementById('el-card-div')
-      let cardDiv = document.getElementById('el-card')
+     * @description:根据设备动态设置内部尺寸(移动端)
+    */
+    setMobileCardSize () {
+      let card = document.getElementById('el-card')
+      // let cardDiv = document.getElementById('el-card-div')
+
       let title = document.getElementById('title')
       let elcarousel = document.getElementById('el-carousel')
       let info = document.getElementById('info')
@@ -121,22 +102,16 @@ export default {
       let buttonclose = document.getElementById('button-close-div')
       let buttoncloseImg = document.getElementById('close-button')
 
-      var cardWidth, cardHeight
-      cardWidth = window.screen.width - 64
-      cardHeight = parseInt(cardWidth * 1.414)
-      if (this.isMobile === true) {
-        cardWidth = window.screen.width - 64
-        cardHeight = parseInt(cardWidth * 1.414)
-      } else {
-        cardWidth = 240
-        cardHeight = 350
-      }
-      div.style.top = '50%'
-      div.style.transform = 'translateY(-50%)'
+      var cardWidth = window.screen.width - 64
+      var cardHeight = parseInt(cardWidth * 1.414)
 
+      card.style.width = cardWidth + 'px'
+      card.style.height = cardHeight + 'px'
+      // cardDiv.style.marginLeft = '-' + cardWidth / 2 + 'px'
+      // cardDiv.style.marginTop = '-' + cardHeight / 2 + 'px'
       // cardDiv.style.top = '50%'
-      cardDiv.style.width = cardWidth + 'px'
-      cardDiv.style.height = cardHeight + 'px'
+      // cardDiv.style.transform = 'translate(-50%, -50%)'
+
       elcarousel.style.height = cardHeight * 0.43 + 'px'
       elcarousel.style.width = cardWidth + 'px'
 
@@ -164,30 +139,29 @@ export default {
       buttonclose.style.width = cardWidth * 0.05 + 'px'
       buttonclose.style.right = cardWidth * 0.05 + 'px'
       buttonclose.style.marginTop = cardWidth * 0.05 + 'px'
-      // buttonclose.style.marginTop = cardHeight * 0.0357 + 'px'
 
       buttoncloseImg.style.height = cardWidth * 0.05 + 'px'
       buttoncloseImg.style.width = cardWidth * 0.05 + 'px'
-    }
+    },
+
     /**
-     * @description:修改显示的info和title的字数
-     */
-    // sliceText () {
-    //   if (this.title) {
-    //     if (this.title.length > 22) {
-    //       this.title = this.title.slice(0, 22) + '......'
-    //     }
-    //   }
-    //   if (this.info) {
-    //     if (this.info.length > 60) {
-    //       this.info = this.info.slice(0, 60) + '......'
-    //     }
-    //   }
-    // }
+     * @description:根据设备动态设置内部尺寸(PC端)
+    */
+    setPcCardSize () {
+      let card = document.getElementById('el-card-div')
+      card.style.cssText = ' -webkit-transform: translate(60%);\n' +
+        '-moz-transform: translate(60%);\n' +
+        '-ms-transform: translate(60%);\n' +
+        '-o-transform: translate(60%);\n' +
+        'transform: translate(60%);\n' +
+        'top: 50%;\n' +
+        'left: 50%;\n' +
+        'position: absolute'
+    }
   },
   watch: {
     screenSize: function () {
-      this.setCardSize()
+      this.Mobile()
     },
 
     img (val) {
@@ -196,10 +170,9 @@ export default {
       }
 
       if (val !== null && val !== '') {
-        this.imgURL = val
-        console.log(val)
+        this.imgArr = [val]
       } else {
-        this.imgURL = '../../static/img/card-img.png'
+        this.imgArr = ['../../static/img/card-img.png']
       }
     }
   },
@@ -230,129 +203,184 @@ export default {
 </script>
 
 <style>
-/deep/ .el-card__body {
-  margin-left: 32px !important;
-  margin-right: 32px;
-}
-
-#el-carousel {
-  overflow: hidden;
-  height:292px;
-
-}
-
-.el-card-div {
-  border-radius: 24px;
-  text-align: center;
-  margin-left: 32px;
-  margin-right: 32px;
-  position: absolute;
-}
+@media all {
+  /deep/ .el-card__body {
+    margin-left: 16px !important;
+    margin-right: 16px;
+  }
 
-/*卡片设置*/
-.el-card {
-  border-radius: 24px;
-  border: none;
-  filter: drop-shadow(0px 16px 16px #475837);
-  position: center;
-  right: 32px;
-  left: 32px;
-  background: url("../../static/img/card-background.png");
-  background-size: cover;
+  #el-carousel {
+    overflow: hidden;
+  }
 
-}
+  .el-card-div {
+    border-radius: 24px;
+    text-align: center;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    z-index: 70;
+  }
+  /*卡片设置*/
+  .el-card {
+    border-radius: 24px;
+    border: none;
+    filter: drop-shadow(0px 16px 16px #475837);
+    position: center;
+    background: url("../../static/img/card-background.png");
+    background-size: cover;
 
-.image {
-  width: inherit;
-  position: center;
-}
+  }
 
-.title {
-  font-size: 36px;
-  line-height: 150%;
-  text-align: left;
-  margin-top: 8px;
-  margin-right: 24px;
-  margin-left: 24px;
-  font-family: "Noto Sans SC";
-  font-weight: 500;
-  color: black;
-  vertical-align: top;
-  z-index: 70;
-  width: 432px;
-  height: 104px;
-  overflow: hidden;
-}
+  .image {
+    width: inherit;
+    position: center;
+  }
 
-.bottom {
-  line-height: 12px;
-}
+  .title {
+    line-height: 150%;
+    text-align: left;
+    font-family: "Noto Sans SC";
+    font-weight: 500;
+    color: black;
+    vertical-align: top;
+    z-index: 70;
+    overflow: hidden;
+  }
 
-.info {
-  font-size: 22px;
-  line-height: 150%;
-  margin-top: 8px;
-  margin-right: 24px;
-  margin-left: 24px;
-  text-indent: 30px;
-  text-align: left;
-  /* font-family: "Source Han Sans CN" !important; */
-  font-family: 'Noto Sans SC' !important;
-  font-weight: 300;
-  color: black;
-  width: 432px;
-  height: 132px;
-  vertical-align: top;
-  overflow: hidden;
+  /*.bottom {*/
+  /*  line-height: 12px;*/
+  /*}*/
+
+  .info {
+    line-height: 150%;
+    text-align: left;
+    font-family: "Noto Sans SC";
+    font-weight: 300;
+    color: black;
+    vertical-align: top;
+    overflow: hidden;
+    text-indent: 30px;
+  }
 
-}
+  .button-close-div {
+    cursor: pointer;
+    position: absolute;
+    z-index: 999;
+  }
 
-.button-close-div {
-  height: 24px;
-  width: 24px;
-  margin-top: 24px;
-  right: 24px;
-  cursor: pointer;
-  position: absolute;
-  z-index: 71;
-}
+  .button-show-all {
+    position: center;
+    background-color: #87BF96;
+    color: black;
+    border-radius: 30px;
+    filter: drop-shadow(0px 10px 10px #797979);
+    font-family: "Noto Sans SC";
+    border: none;
+    padding: 0;
+  }
 
-.close-button {
-  height: 24px;
-  width: 24px;
-}
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
 
-.button-show-all {
-  font-size: 22px;
-  position: center;
-  background-color: #87BF96;
-  color: black;
-  width: 352px;
-  height: 60px;
-  margin-top: 32px;
-  margin-bottom: 32px;
-  border-radius: 30px;
-  filter: drop-shadow(0px 10px 10px #797979);
-  /* font-family: "Source Han Sans CN"; */
-  font-family: 'Noto Sans SC';
-  border: none;
+  .clearfix:after {
+    clear: both
+  }
 }
 
-/* .el-card-div {
-  position: relative;
-  z-index: 70;
-  top: 32px;
-
-} */
+@media screen and (min-width: 480px) {
+  .el-card-div {
+    top: 50%;
+    left: 50%;
+    margin-left: -120px;
+    margin-top: -168px;
+    /*-webkit-transform: translate(-50%, -50%);*/
+    /*-moz-transform: translate(-50%, -50%);*/
+    /*-ms-transform: translate(-50%, -50%);*/
+    /*-o-transform: translate(-50%, -50%);*/
+    /*transform: translate(-50%, -50%);*/
+    position: absolute
+  }
+  .el-card {
+    width:240px;
+    height:336px;
+    filter: drop-shadow(0px 8px 8px #475837);
 
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
+  }
+  .el-card__body {
+    width:240px;
+    height:336px;
+    padding:0
+  }
+  .el-carousel__arrow{
+    height:18px !important;
+    width:18px !important;
+    top:38%;
+    font-size: 6px;
+  }
+  .el-icon-arrow-left:before,.el-icon-arrow-right:before{
+    height:6px !important;
+    width:6px !important;
+  }
+  .el-carousel__arrow--left{
+    left:16px;
+  }
+  .el-carousel__arrow--right{
+    right:16px;
+  }
+  .el-carousel__button{
+    width: 15px;
+    height: 1px;
+  }
+  #el-carousel {
+    overflow: hidden;
+    height:146px;
+  }
+  .title{
+    font-size: 18px;
+    width: 216px;
+    height: 52px;
+    margin-top: 4px;
+    margin-right: 12px;
+    margin-left: 12px;
+  }
+  .info {
+    margin-top: 4px;
+    margin-right: 12px;
+    margin-left: 12px;
+    text-indent: 15px;
+    width: 216px;
+    height: 68px;
+    font-size: 11px;
+  }
+  .button-close-div {
+    height: 12px;
+    width: 12px;
+    margin-top: 12px;
+    right: 12px;
+  }
+  .close-button {
+    height: 12px;
+    width: 12px;
+  }
+  .button-show-all {
+    width: 176px;
+    height: 30px;
+    font-size: 11px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    filter: drop-shadow(0px 5px 5px #797979);
 
-.clearfix:after {
-  clear: both
+  }
 }
 
 </style>

src/components/map.vue

@@ -43,67 +43,8 @@
          :isMobile = "false"
          >
          </PhoneCard>
-        <!-- <div id="popup-content">
-          <b-table-simple>
-            <b-thead head-variant="light">
-              <tr>
-                <b-th colspan="2">
-                  {{popupData.type}}
-                  <span class="float-right" id="popup-closer" @click="closePopup($event.srcElement)"><i class="fa fa-times fa-lg" aria-hidden="true"></i></span>
-                </b-th>
-              </tr>
-            </b-thead>
-            <b-tbody>
-              <tr>
-                <b-td>
-                  <strong>名称:</strong>
-                  <code>{{popupData.info.title}}</code>
-                </b-td>
-              </tr>
-              <tr v-show="popupData.type !== '文化设施'">
-              </tr>
-              <tr>
-                <b-td>
-                  <strong>概要:</strong>
-                  <code>{{popupData.info.time}}</code>,{{popupData.info.content|ellipsis}}
-                  <br>
-                  <b-link class="float-right" v-if="popupData.info.url && popupData.info.unit" :href="popupData.info.url" target='_blank'>
-                    >>>由 <strong>{{popupData.info.unit}}</strong> 发布>>>
-                  </b-link>
-                </b-td>
-              </tr>
-            </b-tbody>
-          </b-table-simple>
-        </div> -->
       </div>
 
-      <!-- Mobile端popup -->
-      <!-- <div id="mobilePopup" v-else v-show="isShow">
-         <div class="mobilePop-header">
-              <strong>{{popupData.type}}</strong>
-               <span class="float-right" id="popup-closer" @click="closePopup($event.srcElement)"><i class="fa fa-times fa-lg" aria-hidden="true" id="popup-closer"></i></span>
-          </div>
-        <div class="mobilePop-body">
-          <b-table-simple>
-             <b-tbody>
-              <tr>
-                <b-td><strong>名称:</strong> <code>{{popupData.info.title}}</code></b-td>
-              </tr>
-              <tr v-show="popupData.type !== '文化设施'">
-                <b-td><strong>时间:</strong> {{popupData.info.time}}</b-td>
-              </tr>
-              <tr>
-                <b-td><strong>概要:</strong> {{popupData.info.content}}</b-td>
-              </tr>
-            </b-tbody>
-          </b-table-simple>
-        </div>
-        <div class="mobilePop-footer">
-          <b-button  v-if="popupData.info.url" class="mr-4  mb-4" variant="info" size="sm" :href="popupData.info.url" target='_blank'>详情
-            <i class="fa fa-arrow-right" aria-hidden="true"></i>
-          </b-button>
-        </div>
-      </div> -->
       <!-- Mobile端popup -->
       <div id="mobilePopup" v-else v-show="isShow">
         <PhoneCard
@@ -158,12 +99,12 @@ import more from '../assets/icon/more.svg'
 import DrawShape from '../../static/js/startDrawShape'
 
 // card
-import phoneCard from './card-xiugai0916.vue'
-// import phoneCard from './card.vue'
+import phoneCard from './card.vue'
 
 // slogan
 import slogan from './slogan.vue'
 
+// cluster
 import cluster from '../../static/js/clusterDisplay'
 
 // 地图对象
@@ -662,24 +603,26 @@ export default {
       var clickFun = this.$store.state.isMobile ? mobileClickFun : pcClickFun
       map.on('singleclick', clickFun)
 
-      function mobileClickFun (e) {
+      async function mobileClickFun (e) {
         var feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
           return feature
         })
         if (feature) {
           var id = feature.get('id')
-          switch (feature.get('type')) {
+          let type = feature.get('type')
+          let data = null
+          switch (type) {
             case 'notice':
-              that.loadNoticeByID(id)
+              data = await that.loadNoticeByID(id)
               break
             case 'report':
-              that.loadReportByID(id)
+              data = await that.loadReportByID(id)
               break
             case 'culture':
-              that.loadCultureByID(id)
+              data = await that.loadCultureByID(id)
               break
           }
-          that.locateAtFeature(feature)
+          that.printFeature('markLayer', data, type, true, true, true)
           that.isShow = true
         } else {
           that.closePopup()
@@ -692,21 +635,6 @@ export default {
           return feature
         })
         if (feature) {
-          // that.setPopupPosition(coordinate)
-          //  根据id获取要素信息
-          // var id = feature.get('id')
-          // let msg = null
-          // switch (feature.get('type')) {
-          //   case 'notice':
-          //     msg = await that.loadNoticeByID(id)
-          //     break
-          //   case 'report':
-          //     msg = await that.loadReportByID(id)
-          //     break
-          //   case 'culture':
-          //     msg = await that.loadCultureByID(id)
-          //     break
-          // }
           bus.$emit('printMapMark', {
             type: feature.get('type'),
             id: feature.get('id')
@@ -1045,7 +973,7 @@ export default {
     this.busOnAction()
     this.loadRecentReports(7)
     this.loadRecentNotices(7)
-    this.loadOthers()
+    // this.loadOthers()
     this.loadCulture()
     this.openCluster()
     this.mapClick()
@@ -1154,48 +1082,4 @@ export default {
   cursor: pointer;
   position: absolute;
 }
-
-/* .change-container-div {
-  height:20px;
-  width: 55px;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 3px;
-  bottom: 5px;
-  right: 0;
-}
-
-.change-div {
-  background-color: white;
-  width:65px;
-  height: 35px;
-  z-index: 999;
-  position: absolute;
-  right: 10px;
-  border-radius: 5px;
-  margin-top: 10px
-}
-
-.info-content {
-  position: absolute;
-  font-size: 12px;
-  z-index: 100;
-  background: rgba(255, 255, 255, 0.7);
-  opacity: 0.95;
-  right: 0px;
-  margin-top: 40px;
-  height: 130px;
-  width:100px;
-  align-content: center;
-}
-/deep/ .el-checkbox {
-   left:10px;
-   top:8px;
- }
-
-/deep/ .el-checkbox__label {
-  font-family: "Source Han Sans CN";
-  color: #212529;
-} */
 </style>

src/components/mobileBar.vue

@@ -199,7 +199,6 @@ export default {
      */
     showReportDetail: function (id) {
       bus.$emit('showReportDetail', id)
-      // this.isExpand = false
       this.resetListener = false
       this.expandClass = 0
     },
@@ -236,11 +235,6 @@ export default {
      * @description:底部栏显示、拉伸控制
      */
     expandClass () {
-      // if (this.isExpand) {
-      //   this.detailHeight = this.max
-      // } else {
-      //   this.detailHeight = this.min
-      // }
       switch (this.expandClass) {
         case 0:
           this.detailHeight = this.min