补充website的细节优化&移动端适配&图表显示

Author: 潘卓然Y7000P

website/src/components/Card/PluginCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="plugins-group-card">
+    <div v-for="(g,i) in Object.keys(list)" :key="i" class="group">
+      <el-row>
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+          v-for="(l,index) in list[g].list"
+          :key="index"
+        >
+          <el-card v-bind:style="list[g].styleObject" class="little-card">
+            <h2 class="info-title">{{l.name}}</h2>
+            <p>{{l.info}}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: Object
+  }
+}
+</script>
+
+<style lang="scss">
+.plugins-group-card {
+  .group {
+    .el-card {
+      width: 90%;
+      height: 200px;
+      // display: inline-block;
+      margin: 12px;
+      border-radius: 20px;
+    }
+  }
+}
+</style>

website/src/components/CardView/index.vue

@@ -10,10 +10,23 @@
           slot="header"
           class="box-card-header"
         >
-          <img lazy
+          <img
+            lazy
             :src="imgUrl"
             class="card-image"
           />
+           <!-- <el-image
+            lazy
+            :src="imgUrl"
+            class="card-image"
+          >
+            <div
+              slot="error"
+              class="card-image"
+            >
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image> -->
         </div>
         <div style="position:relative;">
           <span class="title">{{ name }}</span>
@@ -115,6 +128,8 @@ export default {
   .card-image {
     height: 256px;
     width: 256px;
+    /* min-height: 256px;
+    min-width: 256px; */
   }
   .el-card__header {
     padding: 0px 0px;

website/src/main.js

@@ -11,6 +11,11 @@ import ElementUI from 'element-ui';
 import IconFont from './components/IconFont/iconfont'
 import VueLazyload from 'vue-lazyload'
 
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+Vue.component('v-chart', ECharts)
+
 Vue.use(ElementUI);
 Vue.use(VueLazyload);
 

website/src/router/index.js

@@ -61,6 +61,21 @@ export const routes = [
         name: "download",
         component: () => import("@/views/total/Download"),
       },
+      {
+        path: "detailChart",
+        name: "detailChart",
+        component: () => import("@/views/total/DetailChart"),
+      },
+      {
+        path: "pluginTags",
+        name: "pluginTags",
+        component: () => import("@/views/total/PluginTags"),
+      },
+      {
+        path: "bugCommit",
+        name: "bugCommit",
+        component: () => import("@/views/total/BugCommit"),
+      }
     ],
   },
   {

website/src/views/demo/ShowCase.vue

@@ -1,8 +1,9 @@
 <template>
-  <el-container class="webclient-showcase-main">
+  <el-container :class="{'webclient-showcase-main': true, 'webclient-showcase-main-mobile' : mobile}">
     <el-header
       v-if="!fullScreen"
-      style="height:72px;padding:0px;"
+      style="height:72px;"
+      :class="{'mapgis-header': !mobile, 'mapgis-header-mobile': mobile}"
     >
       <transition name="bounce">
         <Header></Header>
@@ -93,7 +94,7 @@ export default {
   components: {
     Header,
     MainFooter,
-    SidebarDemo,
+    SidebarDemo,  //边栏展示
     IconFont,
     ShowGallery
   },
@@ -127,6 +128,12 @@ export default {
   methods: {
     handleFullscreen (fullscreen) {
       this.fullScreen = fullscreen;
+      if (fullscreen && this.mobile) {
+        var mobileContent = document.getElementsByClassName("main-demo-wrapper");
+        if (mobileContent.length > 0) {
+          mobileContent[0].style.height = window.innerHeight - 20 + 'px';
+        }
+      }
     },
     handleDrawer () {
       this.drawerShow = !this.drawerShow;
@@ -192,7 +199,25 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.webclient-showcase-main-mobile {
+  .main-demo-wrapper {
+    margin-left: 0px !important;
+    height: calc(100vh - 155px) !important;
+  }
+  .main-scroll-content {
+    overflow-y: hidden;
+    padding: 6px !important;
+  }
+  .mapgis-header-mobile {
+    padding: 0px !important;
+    height: 48px !important;
+  }
+}
 .webclient-showcase-main {
+/*   .mapgis-header {
+    padding: 0px;
+    height: 72px;
+  } */
   .el-footer {
     padding: 0 0px;
   }

website/src/views/demo/ShowGallery.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gallery-image-col">
+  <div :class="{'gallery-image-col':true, 'gallery-image-col-mobile':mobile}">
     <div
       v-for="(item, i) in list"
       :key="i"
@@ -124,6 +124,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.gallery-image-col-mobile {
+  margin: 6px 0px !important;
+  .image {
+    height: 64px !important;
+    width: 64px !important;
+  }
+}
 .gallery-image-col {
   display: flex;
   margin: 10px 0px;

website/src/views/demo/index.vue

@@ -1,12 +1,12 @@
 <template>
   <splitpanes
     :horizontal="mobile"
-    class="default-theme webclient-showcase"
+    :class="{'default-theme': true, 'webclient-showcase': true, 'webclient-showcase-mobile': mobile}"
   >
-    <pane size="60">
+    <pane :size="mobile ? 60 :60">
       <el-row
         v-loading="loading"
-        class="webclient-showcase-content"
+        :class="{'webclient-showcase-content':true}"
       >
         <!-- <el-button
           v-show="full"
@@ -30,12 +30,13 @@
     </pane>
     <pane
       min-size="0"
-      size="40"
+      :size="mobile ? 40 :40"
     >
       <el-button-group class="toolbar-showcase-group">
         <el-tooltip
           class="item"
           effect="dark"
+          v-show="!mobile"
           :content="fullscreen ? '关闭全屏': '开启全屏'"
           placement="top"
         >
@@ -343,7 +344,10 @@ export default {
         markdownContent[markdownContent.length - 1].style.height = window.innerHeight - 92 + "px";
       } else {
         if (this.mobile) {
+          window.console.log('scoll', demoContent, markdownContent);
           codeContent[0].style.height = window.innerHeight / 2 - 162 + "px";
+          // demoContent[0].style.height = window.innerHeight - 102 + "px";
+          // markdownContent[markdownContent.length - 1].style.height = window.innerHeight - 242 + "px";
         } else {
           codeContent[0].style.height = window.innerHeight - 295 + "px";
           demoContent[0].style.height = window.innerHeight - 230 + "px";
@@ -474,6 +478,12 @@ export default {
 .splitpanes__pane {
   background-color: #ffffff !important;
 }
+.webclient-showcase-mobile {
+  .element-scroll-content {
+    height: calc(100vh - 45vh - 150px) !important;
+    overflow-x: hidden;
+  }
+}
 .webclient-showcase {
   .showcase-exit-fullscreen {
     position: absolute;
@@ -508,7 +518,7 @@ export default {
   }
 
   .iframemobile {
-    height: calc(50vh - 80px);
+    height: 100%;
   }
 
   .editer-codemirror-content {