保存

src/components/CustomFooter.vue

@@ -2,7 +2,7 @@
   <div class="footer">
     <el-row :gutter="30" type="flex" justify="space-between">
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-company">
-        <div class="flex">
+        <div class="flex" style="padding-left: 110px;">
           <img src="@/assets/images/antail.png" alt="" />
           <p class="show-name">安泰乐（厦门）集团有限公司</p>
         </div>
@@ -10,11 +10,11 @@
         <p class="show-intro">
           安泰乐集团成立于2012年，中国总部位于厦门是一家专注于中国生命关怀产业，为生命纪念馆提供设计、装修、管理、服务，一站式解决方案的专业化管理服务公司。
         </p>
-        <p class="show-tip">©️2021ATL Group.All rights reserved</p>
-        <p class="show-tip">闽ICP备16020886号-3</p>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-memorials">
+        <div class="flex">
           <p class="show-name">安泰乐生命纪念馆</p>
+        </div>
         <el-row :gutter="10" class="show-list">
           <el-col :span="12" v-for="(item, index) in memorials" :key="index">
             <div class="show-item">
@@ -28,6 +28,10 @@
         </el-row>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-app">
+        <div class="flex">
+          <p class="show-name">安泰乐生命纪念馆</p>
+        </div>
+        <div class="show-er">
           <div>
             <img
               src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/whcbqhn.png"
@@ -48,17 +52,25 @@
               安泰乐app下载
             </p>
           </div>
+        </div>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-address">
         <div class="address">
           <img src="@/assets/images/clouds.png" alt="" />
           <div>
             <p class="show-name">云中祠信息科技</p>
-            <p>地址：中国福建省厦门市湖里区同安 商务大厦1号楼9层</p>
+            <p>地址：中国福建省厦门市湖里区同安商务大厦1号楼9层</p>
             <p>电话：0592-5539618</p>
             <p>邮件：mail@atlgroup-asia.com</p>
           </div>
         </div>
+      </el-col>
+    </el-row>
+    <div class="row">
+      <div>
+        <p class="show-tip">©️2021ATL Group.All rights reserved</p>
+        <p class="show-tip">闽ICP备16020886号-3</p>
+      </div>
       <div class="show-num">
         <img src="@/assets/images/embassy.png" alt="" />
         <div>
@@ -66,8 +78,7 @@
           <p class="show-tip">已建馆人数</p>
         </div>
       </div>
-      </el-col>
-    </el-row>
+    </div>
   </div>
 </template>
 
@@ -134,14 +145,17 @@ export default {
 .footer {
   background: #fff;
   text-align: left;
-  padding: 20px 30px 20px;
+  padding: 45px 30px 20px;
   color: #999;
   font-size: 14px;
   .flex {
     justify-content: flex-start;
     align-items: flex-end;
+    position: relative;
     img {
-      margin-right: 15px;
+      position: absolute;
+      left: 0;
+      width: 92px;
     }
   }
   > div {
@@ -164,15 +178,14 @@ export default {
 }
 
 .show-memorials {
-  margin-top: 28px;
   flex: 1;
   .show-list {
-    margin-top: 17px;
+    margin-top: 10px;
   }
   .show-item {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     p:last-child {
       color: #caa774;
       font-size: 14px;
@@ -186,11 +199,12 @@ export default {
   }
 }
 .show-app {
-  margin-top: 20px;
-  margin-bottom: 30px;
+  .show-name{
+    color: transparent;
+  }
+  .show-er {
     display: flex;
     align-items: center;
-  // justify-content: space-between;
     > div {
       margin-right: 40px;
     }
@@ -211,18 +225,36 @@ export default {
         object-fit: contain;
       }
     }
+  }
 }
 .show-address {
   .address {
     display: flex;
     line-height: 30px;
-    padding-top: 15px;
     img {
       width: 134px;
       height: 102px;
       margin-right: 15px;
     }
   }
+}
+.show-name {
+  color: #333;
+  font-size: 18px;
+  margin: 5px 0 10px 0;
+  // font-weight: bold;
+}
+.show-tip {
+  font-size: 14px;
+  color: #999;
+  // line-height: 30px;
+  padding-bottom: 5px;
+  letter-spacing: 2px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .show-num {
     // margin-top: 30px;
     display: flex;
@@ -230,8 +262,7 @@ export default {
     align-items: center;
     color: #333;
     font-size: 18px;
-    padding-left: 35px;
-    padding-top: 70px;
+    padding-right: 115px;
     img {
       width: 80px;
       height: 58px;
@@ -239,16 +270,4 @@ export default {
     }
   }
 }
-.show-name {
-  color: #333;
-  font-size: 18px;
-  margin: 5px 0 10px 0;
-  // font-weight: bold;
-}
-.show-tip {
-  font-size: 14px;
-  color: #999;
-  line-height: 30px;
-  letter-spacing: 2px;
-}
 </style>

src/components/PreviewModal/index.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="title" center width="75%" append-to-body>
+  <el-dialog
+    :visible.sync="visible"
+    :title="title"
+    center
+    width="75%"
+    append-to-body
+  >
     <div class="container">
       <div class="show-flex">
         <div class="show-preview">
@@ -98,6 +104,7 @@ export default {
         colorLight: "#fff",
         text: this.webUrl, // 设置二维码内容或跳转地址
       });
+      console.log("ddd");
     },
     addReadCount() {
       addReadCount({ id: this.id, type: 1 }).then(() => {});
@@ -138,7 +145,7 @@ export default {
     },
     showPreviewModal(item) {
       this.$refs.previewModal.show(item.id);
-      this.visible = false
+      this.visible = false;
       // if (item.device == 1) {
       //   this.$refs.previewModal.show(item.id);
       // } else {

src/components/viwModal.vue

@@ -6,8 +6,14 @@
     position="bottom"
     :zIndex="3000"
   > -->
-  <div class="announcement-mobile">
-    <iframe v-if="content" style="border: none" :width="300" height="500" v-bind:src="content"></iframe>
+  <div class="announcement-mobile" ref="iframeDiv">
+    <iframe
+      id="bdIframe"
+      style="width: 100%; height: 100%; border: none"
+      :src="content"
+      frameborder="0"
+      scrolling="auto"
+    ></iframe>
   </div>
   <!-- </Drawer> -->
 </template>
@@ -35,6 +41,18 @@ export default {
   data() {
     return {};
   },
+  mounted() {
+    const oIframe = document.getElementById("bdIframe");
+      const deviceWidth = this.$refs.iframeDiv.offsetWidth;
+      const deviceHeight = this.$refs.iframeDiv.offsetHight;
+      console.log("oIframe", oIframe);
+      oIframe.style.width = deviceWidth - 40 + "px";
+      oIframe.style.height = deviceHeight - 40 + "px";
+      console.log("oIframe", oIframe, deviceWidth, deviceHeight);
+  },
+  methods: {
+   
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -43,12 +61,13 @@ export default {
   margin: 0 auto;
 }
 .announcement-mobile {
-  width: 300px;
+  width: 345px;
   height: 500px;
   // padding: 80px 20px;
   background: url("~@/assets/images/Mobilephonebox.png") no-repeat;
   background-size: 100% 100%;
   padding: 20px;
+  box-sizing: border-box;
 }
 </style>
 

src/views/TimePeriod/index.vue

@@ -85,7 +85,6 @@ export default {
   },
   destroyed() {
     this.Example.destroy();
-    document.body.style.overflow = "none";
   },
 };
 </script>