左右折叠面板

src/components/NavigationBar/index.vue

@@ -115,10 +115,10 @@ export default {
   position: fixed;
   top: 0;
   z-index: 100;
-  height: 125px;
+  height: 110px;
   width: 100%;
   background: url("~@/assets/images/ui/navigation.png");
-  background-size: 100% 100%;
+  background-size: cover;
   display: flex;
   justify-content: center;
   & > div {

src/views/components/foldpanelLeft/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="fold-panel">
+    <div class="panel-container">
+      <div
+        class="panel-main"
+        :class="['panel-main', { collapsed: isCollapsed }]"
+      >
+        <div class="panel-box">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="fold-btn" @click="togglePanel()">
+        <img
+          :src="
+            isCollapsed
+              ? require('@/assets/images/ui/arrow_left.jpg')
+              : require('@/assets/images/ui/arrow_right.jpg')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapsed: false,
+    };
+  },
+  methods: {
+    togglePanel() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fold-panel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 110px;
+  background: url("~@/assets/images/ui/panel_left.png");
+  background-size: 100% 100%;
+  .panel-container {
+    position: relative;
+    height: 100%;
+    .fold-btn {
+      position: absolute;
+      right: -21px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 40px;
+      width: 20px;
+      img {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .panel-main {
+      position: relative;
+      width: 390px;
+      height: 100%;
+      overflow: hidden;
+      transition: width 0.3s ease;
+      .panel-box {
+        position: absolute;
+        left: 25px;
+        right: 25px;
+        height: 100%;
+        width: calc(100% - 50px);
+      }
+    }
+    .collapsed {
+      width: 0;
+    }
+  }
+}
+</style>

src/views/components/foldpanelRight/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="fold-panel">
+    <div class="panel-container">
+      <div
+        class="panel-main"
+        :class="['panel-main', { collapsed: isCollapsed }]"
+      >
+        <div class="panel-box">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="fold-btn" @click="togglePanel()">
+        <img
+          :src="
+            isCollapsed
+              ? require('@/assets/images/ui/arrow_right.jpg')
+              : require('@/assets/images/ui/arrow_left.jpg')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapsed: false,
+    };
+  },
+  methods: {
+    togglePanel() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fold-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 80px;
+  background: url("~@/assets/images/ui/panel_right.png");
+  background-size: 100% 100%;
+  .panel-container {
+    position: relative;
+    height: 100%;
+    .fold-btn {
+      position: absolute;
+      left: -21px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 40px;
+      width: 20px;
+      img {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .panel-main {
+      position: relative;
+      width: 390px;
+      height: 100%;
+      overflow: hidden;
+      transition: width 0.3s ease;
+      .panel-box {
+        position: absolute;
+        left: 25px;
+        right: 25px;
+        height: 100%;
+        width: calc(100% - 50px);
+      }
+    }
+    .collapsed {
+      width: 0;
+    }
+  }
+}
+</style>

src/views/components/index.js

@@ -0,0 +1,3 @@
+export { default as foldpanelLeft } from "./foldpanelLeft";
+export { default as foldpanelRight } from "./foldpanelRight";
+export { default as introduceTitle } from "./introduceTitle";

src/views/components/introduceTitle/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="introduce-title">
+    <span class="sub-title"> {{ subTitle }}</span>
+    <span class="main-title">{{ title }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "标题",
+    },
+    subTitle: {
+      type: String,
+      default: "标题",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.introduce-title {
+  height: 40px;
+  background: url("~@/assets/images/ui/introduce-title.png");
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  overflow: hidden;
+  .main-title {
+    padding: 4px 0;
+    font-size: 20px;
+    color: #ffffff;
+    font-family: "Alibaba-PuHuiTi-Medium.otf";
+  }
+  .sub-title {
+    padding: 6px 0;
+    margin-left: 15px;
+    font-size: 16px;
+    color: #518fd4;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+</style>

src/views/index.vue

@@ -1,24 +1,40 @@
 <template>
-  
-
-
   <div class="pc-container">
     <NavigationBar></NavigationBar>
+    <foldpanelLeft>
+      <introduceTitle
+        title="娄东街道简介"
+        subTitle="INTRODUCTION"
+      ></introduceTitle>
+    </foldpanelLeft>
+    <foldpanelRight>
+      <introduceTitle
+        title="统计分析"
+        subTitle="STATISTICAL ANALYSIS"
+      ></introduceTitle>
+    </foldpanelRight>
     <LeafletMap />
   </div>
-
 </template>
 
 <script>
 import NavigationBar from "@/components/NavigationBar/index.vue";
+
+import {
+  foldpanelLeft,
+  foldpanelRight,
+  introduceTitle,
+} from "@/views/components/index.js";
 import LeafletMap from "@/components/LeafletMap";
 
 export default {
   name: "Index",
   components: {
     NavigationBar,
+    foldpanelLeft,
+    foldpanelRight,
+    introduceTitle,
     LeafletMap,
-   
   },
   data() {
     return {
@@ -32,9 +48,11 @@ export default {
 
 <style scoped lang="scss">
 .pc-container {
+  position: relative;
   height: 100%;
   box-sizing: border-box;
   background: url("~@/assets/images/ui/index_bg.jpg");
   background-size: 100% 100%;
+  overflow: hidden;
 }
 </style>