首页增加抽屉页打开新页面功能

public/static/config/config.js

@@ -24,6 +24,8 @@ let systemConfig = {
     modelIds: [1667, 1690, 1677, 1673],
     columnIds: [1657, 1659, 1666, 1676, 1665, 1651, 1662],
 
+    iframeUrl: "https://aixq.shqp.gov.cn/kdyjs/",
+
     // baseServicerPath: "/oneMap",
     baseServicerPath: "http://121.43.55.7:13901/qpyzt",
     // oauth和DMS环境

src/views/HomePage.vue

@@ -14,6 +14,20 @@
         </div>
       </el-affix>
     </div> -->
+
+    <div :class="isOpen ?'isOpenLeftShow':'isOpenRightShow'" @click="isOpen = !isOpen">
+      <div>
+        <el-icon :size="20" class="btn_color">
+          <DArrowLeft v-if="isOpen == false"/>
+          <DArrowRight v-else/>
+        </el-icon>
+      </div>
+    </div>
+
+    <el-drawer v-model="isOpen" :with-header="false" size="100%">
+      <iframe :src="iframeUrl" class="win-iframe"></iframe>
+    </el-drawer>
+
     <div class="part1" id="top">
       <div style="margin-left: 10%;">
         <div class="super-title">青浦区“一张图”区级节点</div>
@@ -643,7 +657,7 @@ export default {
       ],
       userTop: [
       ],
-
+      iframeUrl:systemConfig.iframeUrl,
       examplelist:systemConfig.examplelist,
 
       useCase: {
@@ -731,6 +745,7 @@ export default {
       chartMluUnitName: null,
       chartMluAppName: null,
       chartMluTimeRange: null,
+      isOpen:false,
 
     };
   },
@@ -2289,4 +2304,48 @@ export default {
     }
   }
 }
+.isOpenRightShow{
+    position: fixed;
+    top: 45%;
+    right: 10px;
+    z-index: 2020;
+    cursor: pointer;
+}
+.isOpenLeftShow{
+    position: fixed;
+    top: 45%;
+    left: 10px;
+    z-index: 2020;
+    cursor: pointer;
+    
+}
+.btn_color{
+    color:#fff;
+    background: #1a2a6075;
+    padding: 10px;
+    border-radius: 20px;
+    &:hover {
+      background: #29558f;
+      color:rgb(0, 247, 255)
+    }
+}
+.win-iframe {
+    width: 100%; /* 使iframe宽度适应父容器 */
+    height: 100%; /* 固定高度 */
+    border: none; /* 移除默认边框 */
+}
+/deep/.el-drawer__body{
+  padding: 0;
+}
+/deep/.el-overlay{
+  // height: calc(100vh - 44px);
+  // top: 44px;
+}
+/deep/.el-drawer {
+  transition: transform 1.5s ease; 
+}
+/deep/.el-modal-drawer {
+  transition: transform 1.5s ease; 
+}
 </style>
+

src/views/Wgn.vue

@@ -58,7 +58,7 @@
                   size="small"
                   class="visit-button"
                   @click="handleOnlineDemo(item)"
-                  >在线演示</el-button
+                  >在线体验</el-button
                 >
                 <el-button
                   type="primary"

src/views/skmh/index.vue

@@ -45,7 +45,7 @@
                 class="server_list_box_table_item_content_button_box_item"
                 @click.stop="handleOpenPage(item)"
               >
-                在线演示
+                进入系统
               </div>
               <div v-else
                 class="server_list_box_table_item_content_button_box_expect"