添加跳转小程序方法

zyylgNew/src/phone/views/layout/components/layoutLive.vue

@@ -7,8 +7,8 @@
           <img class="center_img" src="@/assets/img/phoneImg/logo-zhu.png" alt=""/>
           <div class="main_text ellipsis2">南岸区，有大江东去。在涛涛江畔，高楼林立，街区井然， 现代的摩天都市间，有历史的痕迹隐现。</div>
         </div>
-        <div class="panel">
-          <collapse class="el-collapse el-collapse-border-t">
+        <el-collapse accordion class="panel">
+          <el-collapse-item>
             <template #title>
               <div class="header__collapse" @click="tolive">
                 <img class="imgs" src="@/assets/img/pcImg/矩形1238.png" alt=""/>
@@ -16,11 +16,11 @@
               </div>
             </template>
             <div class="body__collapse">
-              <span> 不动产综合服务 </span>
-              <span> 个人不动产信息查询 </span>
+              <span> 公积金个人账户查询 </span>
+              <span> 离职提取公积金 </span>
             </div>
-          </collapse>
-          <collapse class="el-collapse">
+          </el-collapse-item>
+          <el-collapse-item>
             <template #title>
               <div class="header__collapse">
                 <img class="imgs" src="@/assets/img/pcImg/矩形1238(1).png" alt=""/>
@@ -31,8 +31,8 @@
               <span> 公租房申请结果查询 </span>
               <span> 出租房屋自助登记 </span>
             </div>
-          </collapse>
-          <collapse class="el-collapse">
+          </el-collapse-item>
+          <el-collapse-item>
             <template #title>
               <div class="header__collapse">
                 <img class="imgs" src="@/assets/img/pcImg/矩形1238(2).png" alt=""/>
@@ -43,8 +43,8 @@
               <span> 公积金个人账户查询 </span>
               <span> 离职提取公积金 </span>
             </div>
-          </collapse>
-          <collapse class="el-collapse el-collapse-border-b">
+          </el-collapse-item>
+          <el-collapse-item>
             <template #title>
               <div class="header__collapse">
                 <img class="imgs" src="@/assets/img/pcImg/矩形1238(3).png" alt=""/>
@@ -55,8 +55,8 @@
               <span> 社会保障卡挂失 </span>
               <span> 个人社保参保证明查询打印 </span>
             </div>
-          </collapse>
-        </div>
+          </el-collapse-item>
+        </el-collapse>
         <div class="main_bottom">
           <div class="list">
             <span>公积金中心</span>
@@ -89,9 +89,17 @@ export default {
     layoutHeader,
     collapse
   },
+  mounted(){
+    let script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js";
+    document.body.appendChild(script);
+  },
   methods: {
     tolive() {
-      this.$router.push("/phoneLive");
+      // this.$router.push("/phoneLive");
+      wx.miniProgram.navigateBack();
+      wx.miniProgram.postMessage({data:{from: '跳其他小程序'}})
     }
   }
 };
@@ -152,41 +160,82 @@ export default {
 .panel {
   width: 480px;
   margin: auto;
+  height: auto !important;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.34);
+  border-top: none;
+  border-bottom: none;
+  border-radius: 17px;
 }
 
-.el-collapse-border-t {
+/deep/ .el-collapse-item {
+  margin: 20px 20px;
+  border-bottom: 1px solid rgba(250, 236, 235, 0.3);
+}
+
+/deep/ .el-collapse-item:first-child .el-collapse-item__header {
   border-radius: 17px 17px 0 0;
 }
 
-.el-collapse-border-b {
+/deep/ .el-collapse-item:last-child {
+  border: none !important;
+}
+
+/deep/ .el-collapse-item:last-child .el-collapse-item__header {
   border-radius: 0 0 17px 17px;
 }
 
+/deep/ .el-collapse-item__arrow {
+  color: #fff !important;
+}
 
 .el-collapse {
+  border-top: none !important;
+}
+
+/deep/ .el-collapse-item__header {
+  height: auto !important;
   overflow: hidden;
-  background: #000000;
-  background-color: rgba(0, 0, 0, 0.34);
+  background-color: rgba(0, 0, 0, 0);
   border-top: none;
   border-bottom: none;
+  margin-bottom: 10px !important;
+}
 
-  .header__collapse {
-    display: flex;
-    font-family: Microsoft YaHei;
-    font-size: 22px;
-    font-weight: 400;
-    line-height: 15px;
-    color: #ffffff;
-    align-items: center;
-  }
+/deep/ .el-collapse-item__wrap {
+  height: auto !important;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+  border-top: none;
+  border-bottom: none;
+}
 
-  .body__collapse {
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    display: flex;
-    justify-content: space-between;
-    color: #ffffff;
-  }
+.header__collapse {
+  display: flex;
+  font-family: Microsoft YaHei;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 15px;
+  color: #ffffff;
+  align-items: center;
+}
+
+.body__collapse {
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  color: #ffffff;
+}
+.body__collapse span{
+  margin-right: 10px;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.body__collapse span:last-child{
+  margin-right: 0;
 }
 
 .imgs {

zyylgNew/src/phone/views/layout/components/layoutPlay.vue

@@ -47,9 +47,9 @@ export default {
       swiperOption: {
         loop: true,
         speed: 2500,
-        slidesPerView: 3,
-        spaceBetween: 30,
-        centeredSlides: true,
+        slidesPerView: 2.5,
+        spaceBetween: 10,
+        // centeredSlides: true,
         watchSlidesProgress: true,
         on: {
           setTransition: function (transition) {
@@ -71,9 +71,17 @@ export default {
       title:"畅游南岸"
     };
   },
+  mounted(){
+    let script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js";
+    document.body.appendChild(script);
+  },
   methods:{
     toPlay(){
-      this.$router.push("/phonePlay");
+      // this.$router.push("/phonePlay");
+      wx.miniProgram.navigateBack();
+      wx.miniProgram.postMessage({data:{from: '跳其他小程序'}})
     },
     leftTile(){
       this.title="城市公园"
@@ -121,6 +129,7 @@ export default {
   -webkit-align-items: center;
   align-items: center;
   transition-property: all;
+  margin-left: 10px;
 }
 
 .swiper-slide img {

zyylgNew/src/phone/views/layout/components/layoutRecreation.vue

@@ -1,59 +1,68 @@
 <template>
-    <div>
-        <div class="container" :style="{ height: bodyHeight }">
-            <layoutHeader style="height: 10%"></layoutHeader>
-          <div class="main">
-            <div class="footer_text">
-              <img class="text_img" src="@/assets/img/phoneImg/logo-le.png" alt="" />
-              <span class="text_first"
-              >以城之名，诠释优雅文艺的当代生活面貌， 南岸，充满了文艺和休闲的气候，人们的生活面貌也处处是惊喜。
+  <div>
+    <div class="container" :style="{ height: bodyHeight }">
+      <layoutHeader style="height: 10%"></layoutHeader>
+      <div class="main">
+        <div class="footer_text">
+          <img class="text_img" src="@/assets/img/phoneImg/logo-le.png" alt=""/>
+          <span class="text_first"
+          >以城之名，诠释优雅文艺的当代生活面貌， 南岸，充满了文艺和休闲的气候，人们的生活面貌也处处是惊喜。
                 </span>
+        </div>
+        <div class="bottom_img">
+          <div class="bottom_once">
+            <div class="img_ons" @click="toRecreation">
+              <img class="img_move" src="@/assets/img/phoneImg/组46.png" alt=""/>
+              <span class="img_text">展演信息</span>
+            </div>
+            <div class="img_ons">
+              <img class="img_move" src="@/assets/img/phoneImg/组46(1).png" alt=""/>
+              <span class="img_text">运动健身</span>
+            </div>
+            <div class="img_ons">
+              <span class="img_text"></span>
+            </div>
+          </div>
+          <div class="bottom_once">
+            <div class="img_ons">
+              <img class="img_move" src="@/assets/img/pcImg/组46(2).png" alt=""/>
+              <span class="img_text">文化场馆</span>
+            </div>
+            <div class="img_ons">
+              <img class="img_move" src="@/assets/img/pcImg/组46(3).png" alt=""/>
+              <span class="img_text">温泉之都</span>
             </div>
-            <div class="bottom_img">
-              <div class="bottom_once">
-                <div class="img_ons" @click="toRecreation">
-                  <img class="img_move" src="@/assets/img/phoneImg/组46.png" alt="" />
-                  <span class="img_text">展演信息</span>
-                </div>
-                <div class="img_ons">
-                  <img class="img_move" src="@/assets/img/phoneImg/组46(1).png" alt="" />
-                  <span class="img_text">运动健身</span>
-                </div>
-                <div class="img_ons">
-                  <span class="img_text"></span>
-                </div>
-              </div>
-              <div class="bottom_once">
-                <div class="img_ons">
-                  <img class="img_move" src="@/assets/img/pcImg/组46(2).png" alt="" />
-                  <span class="img_text">文化场馆</span>
-                </div>
-                <div class="img_ons">
-                  <img class="img_move" src="@/assets/img/pcImg/组46(3).png" alt="" />
-                  <span class="img_text">温泉之都</span>
-                </div>
-                <div class="img_ons">
-                  <img class="img_move" src="@/assets/img/pcImg/组46(4).png" alt="" />
-                  <span class="img_text">主题乐园</span>
-                </div>
-              </div>
+            <div class="img_ons">
+              <img class="img_move" src="@/assets/img/pcImg/组46(4).png" alt=""/>
+              <span class="img_text">主题乐园</span>
             </div>
           </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import layoutHeader from '@/phone/components/layoutHeader.vue';
 import bodyHeightMixins from '@/mixins/bodyHeight';
+
 export default {
-    mixins: [bodyHeightMixins],
-    components: {
-        layoutHeader
-    },
+  mixins: [bodyHeightMixins],
+  components: {
+    layoutHeader
+  },
+  mounted() {
+    let script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js";
+    document.body.appendChild(script);
+  },
   methods: {
     toRecreation() {
-      this.$router.push("/phoneRecreation");
+      // this.$router.push("/phoneRecreation");
+      wx.miniProgram.navigateBack();
+      wx.miniProgram.postMessage({data: {from: '跳其他小程序'}})
     }
   }
 };
@@ -70,84 +79,88 @@ export default {
 //  top: 410% !important;
 //}
 .container {
-    position: relative;
+  position: relative;
+  width: 100%;
+  background-image: url('~@/assets/img/pcImg/矩形5拷贝11.png');
+  background-size: cover;
+
+  .main {
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .footer_text {
+    display: flex;
+    width: 100%;
+    height: 25%;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding-right: 55px;
+    box-sizing: border-box;
+
+    .text_img {
+      width: 414px;
+      height: 123px;
+    }
+
+    .text_first {
+      width: 80vw;
+      height: 90px;
+      padding: 16px 18px;
+      margin-top: 24px;
+      font-size: 18px;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.14);
+      border-radius: 5px;
+      text-align: right;
+      text-overflow: ellipsis; // 溢出用省略号显示
+      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .bottom_img {
+    display: flex;
     width: 100%;
-    background-image: url('~@/assets/img/pcImg/矩形5拷贝11.png');
+    height: 40%;
+    padding-bottom: 40px;
+    box-sizing: border-box;
+    background-image: url('~@/assets/img/pcImg/矩形1507.png');
     background-size: cover;
-    .main{
-      height: 90%;
+    border-top: 1px dotted rgb(243 236 236 / 25%);
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    .bottom_once {
       display: flex;
-      flex-direction: column;
+      width: 90%;
       justify-content: space-between;
     }
-    .footer_text {
-      display: flex;
-      width: 100%;
-      height: 25%;
-      flex-direction: column;
-      justify-content: flex-end;
-      align-items: flex-end;
-      padding-right: 55px;
-      box-sizing: border-box;
-
-        .text_img {
-            width: 414px;
-            height: 123px;
-        }
+  }
 
-        .text_first {
-          width: 80vw;
-          height: 90px;
-          padding: 16px 18px;
-          margin-top: 24px;
-          font-size: 18px;
-          color: #fff;
-          background-color: rgba(0, 0, 0, 0.14);
-          border-radius: 5px;
-          text-align: right;
-            text-overflow: ellipsis; // 溢出用省略号显示
-            -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-            -webkit-line-clamp: 2;
-        }
-    }
+  .img_ons {
+    display: flex;
+    width: 20vw;
+    color: #fff;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 40px;
+    margin-bottom: 40px;
 
-    .bottom_img {
-        display: flex;
-        width: 100%;
-        height: 40%;
-        padding-bottom: 40px;
-        box-sizing: border-box;
-        background-image: url('~@/assets/img/pcImg/矩形1507.png');
-        background-size: cover;
-        border-top: 1px dotted rgb(243 236 236 / 25%);
-        flex-direction: column;
-        justify-content: flex-end;
-        align-items: center;
-        .bottom_once {
-            display: flex;
-            width: 90%;
-            justify-content: space-between;
-        }
+    .img_move {
+      width: 100px;
+      height: 100px;
     }
 
-    .img_ons {
-        display: flex;
-        width: 20vw;
-        color: #fff;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 40px;
-        margin-bottom: 40px;
-
-        .img_move {
-            width: 100px;
-            height: 100px;
-        }
-        .img_text {
-            margin-top: 24px;
-            font-size: 30px;
-        }
+    .img_text {
+      margin-top: 24px;
+      font-size: 30px;
     }
+  }
 }
 </style>

zyylgNew/src/phone/views/layout/components/layoutShop.vue

@@ -75,7 +75,6 @@ export default {
       swiperOption: {
         slidesPerView: 2.3,
         // spaceBetween: 30,
-        centeredSlides: true,
         loop: true,
         // noSwiping: false,
         // watchSlidesProgress: true,
@@ -87,9 +86,17 @@ export default {
       },
     };
   },
+  mounted() {
+    let script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js";
+    document.body.appendChild(script);
+  },
   methods: {
     toShop() {
-      this.$router.push("/phoneShop")
+      // this.$router.push("/phoneShop")
+      wx.miniProgram.navigateBack();
+      wx.miniProgram.postMessage({data: {from: '跳其他小程序'}})
     },
   },
 };

zyylgNew/src/views/layout/components/layoutHome.vue

@@ -55,7 +55,6 @@ export default {
     // background-image: url('~@/assets/img/pcImg/矩形1拷贝3.png');
     background-size: 100% 100%;
 
-    border-top: 1px dotted rgba(200, 200, 200, 0.25);
     flex-direction: column;
     z-index: -10;
     object-fit: fill;
@@ -76,7 +75,6 @@ export default {
     .center_img {
         width: 870px;
         height: 119px;
-        border: 1px dashed rgba(200,200,200,0.25);
     }
 
     .main_text {

zyylgNew/src/views/layout/components/layoutLive.vue

@@ -109,7 +109,6 @@ export default {
     .center_img {
         width: 423px;
         height: 137px;
-        border: 1px dashed rgba(200,200,200,0.25);
     }
 
     .main_text {

zyylgNew/src/views/layout/components/layoutPlay.vue

@@ -139,7 +139,6 @@ export default {
         .text_img {
             width: 414px;
             height: 123px;
-            border: 1px dashed rgba(200,200,200,0.25);
         }
 
         .text_first {

zyylgNew/vue.config.js

@@ -5,7 +5,7 @@
 // }
   module.exports = {
     transpileDependencies: ['sockjs-client'],
-    publicPath: '/zyylgNew/',
+    publicPath: '',
 
     configureWebpack: {
         resolve: {