修改产品页代码

package.json

@@ -14,6 +14,7 @@
     "script-ext-html-webpack-plugin": "^2.1.4",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.12",
+    "vue-clipboard2": "^0.3.1",
     "vue-pdf": "^4.1.0",
     "vue-router": "^3.2.0",
     "vue-video-player": "^5.0.2",

src/main.js

@@ -4,6 +4,7 @@ import router from "./router";
 import store from "./store";
 import ElementUI from "element-ui";
 import VueVideoPlayer from "vue-video-player";
+import VueClipboard from "vue-clipboard2";
 
 import "./permission";
 import "element-ui/lib/theme-chalk/index.css";
@@ -20,6 +21,7 @@ window.router = router;
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(VueVideoPlayer);
+Vue.use(VueClipboard);
 
 new Vue({
   router,

src/views/Exhibition/eCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <el-card shadow="never">
-    <div slot="header" class="header clearfix">
-      <el-image style="width: 80px;height: auto;" :src="node.image" />
-      <h3>{{ node.name }}</h3>
-    </div>
-    <div class="container">
-      <slot :node="node" />
-    </div>
-  </el-card>
-</template>
-<script>
-export default {
-  props: {
-    node: {
-      type: Object,
-      required: true
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.el-card {
-  .header {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    min-height: 100px;
-    h3 {
-      padding: 0 20px;
-      color: #111;
-    }
-  }
-}
-</style>

src/views/Exhibition/eList.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="list" :style="{ height: height + 'px' }">
-    <div class="container">
-      <div v-for="(el, i) in options" :key="i">
-        <e-card :node="el">
-          <template slot-scope="{ node }">
-            <slot :node="node" />
-          </template>
-        </e-card>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import eCard from "./eCard";
-
-export default {
-  components: {
-    eCard
-  },
-  props: {
-    options: {
-      type: Array,
-      required: true
-    },
-    height: {
-      type: [String, Number],
-      default: 600
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.list {
-  position: relative;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-  &::-webkit-scrollbar-track {
-    background: rgb(239, 239, 239);
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #bfbfbf;
-    border-radius: 10px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: #666;
-  }
-  &::-webkit-scrollbar-corner {
-    background: #fff;
-  }
-
-  .container {
-    height: 100%;
-    .el-card {
-      margin: 0 20px 10px 20px;
-    }
-  }
-}
-</style>

src/views/Exhibition/index.vue

@@ -1,170 +1,84 @@
 <template>
   <div class="main">
     <div class="container">
-      <el-tabs v-model="active" type="border-card">
+      <el-card shadow="never">
-        <el-tab-pane label="轨道交通" name="first">
+        <el-table
-          <e-list :options="metroList">
+          :data="tableData"
-            <template slot-scope="{ node }">
+          :span-method="objectSpanMethod"
-              <div class="flex">
+          border
-                <a
+          style="width: 100%;"
-                  target="_blank"
+        >
-                  :href="`https://joylink.club/login?project=${node.type}`"
+          <el-table-column prop="platform" label="平台" width="200" />
-                >
+          <el-table-column prop="name" label="系统名称" />
-                  <strong>实训平台</strong>
+          <el-table-column prop="href" label="系统入口">
-                  <span>{{
+            <template slot-scope="{ row }">
-                    `https://joylink.club/login?project=${node.type}`
+              <i
-                  }}</span>
+                v-clipboard:copy="row.href"
-                </a>
+                v-clipboard:success="onCopy"
-                <a
+                v-clipboard:error="onError"
-                  target="_blank"
+                class="el-icon-document-copy"
-                  :href="
+              />
-                    `https://joylink.club/design/login?project=${node.type}`
+              <a style="margin-left: 10px" target="_blank" :href="row.href">
-                  "
+                {{ row.href }}
-                >
+              </a>
-                  <strong>设计平台</strong>
-                  <span>{{
-                    `https://joylink.club/design/login?project=${node.type}`
-                  }}</span>
-                </a>
-              </div>
             </template>
-          </e-list>
+          </el-table-column>
-        </el-tab-pane>
+        </el-table>
-        <el-tab-pane label="化学化工" name="second">
+      </el-card>
-          <e-list :options="chemistryList">
-            <template slot-scope="{ node }">
-              <div class="flex">
-                <a
-                  v-for="(el, i) in node.address"
-                  :key="i"
-                  target="_blank"
-                  :href="el.href"
-                >
-                  <strong>{{ el.name }}</strong>
-                  <span>{{ el.href }}</span>
-                </a>
-              </div>
-            </template>
-          </e-list>
-        </el-tab-pane>
-        <el-tab-pane label="电力电厂" name="third">
-          <e-list :options="powerList">
-            <template slot-scope="{ node }">
-              <div class="flex">
-                <a
-                  v-for="(el, i) in node.address"
-                  :key="i"
-                  target="_blank"
-                  :href="el.href"
-                >
-                  <strong>{{ el.name }}</strong>
-                  <span>{{ el.href }}</span>
-                </a>
-              </div>
-            </template>
-          </e-list>
-        </el-tab-pane>
-      </el-tabs>
     </div>
   </div>
 </template>
 <script>
-import eList from "./eList";
-
 export default {
-  components: {
-    eList
-  },
   data() {
-    return {
+    return {};
-      active: "first"
-    };
   },
   computed: {
-    metroList() {
+    tableData() {
       return [
         {
-          name: "哈尔滨项目",
+          platform: "交通轨道",
-          type: "heb",
+          name: "实训平台系统入口",
-          image: require("@/assets/logo/heb.png")
+          href: "https://test.joylink.club/tpsq/dashboard/home"
         },
         {
-          name: "贵州装备",
+          platform: "",
-          type: "gzb",
+          name: "设计平台系统入口",
-          image: require("@/assets/logo/gzb.png")
+          href: "https://test.joylink.club/tpsq/dashboard/home"
         },
         {
-          name: "西铁院",
+          platform: "电厂电力",
-          type: "xty",
+          name: "东电云系统入口",
-          image: require("@/assets/logo/xty.png")
+          href: "https://test.joylink.club/tpsq/dashboard/home"
         },
         {
-          name: "西安地铁调度一部",
+          platform: "化学化工",
-          type: "xadt",
+          name: "系统入口",
-          image: require("@/assets/logo/xadt.png")
+          href: "https://joylink.club/ddy/login"
-        },
-        {
-          name: "竞业达",
-          type: "jyd",
-          image: require("@/assets/logo/jyd.png")
-        },
-        {
-          name: "铁科院",
-          type: "tky",
-          image: require("@/assets/logo/tky.png")
-        },
-        {
-          name: "北信坤成",
-          type: "bxkc",
-          image: require("@/assets/logo/bxkc.png")
         }
       ];
-    },
-    powerList() {
-      return [
-        {
-          name: "电厂DCS仿真控制系统",
-          type: "ddy",
-          image: require("@/assets/logo/ddy.png"),
-          address: [
-            {
-              name: "系统入口",
-              href: "https://test.joylink.club/tpsq/home"
-            },
-            {
-              // name: "绘图入口",
-              // href: "https://test.joylink.club/tpsq/dashboard/home"
-            }
-          ]
-        }
-      ];
-    },
-    chemistryList() {
-      return [
-        {
-          name: "东电云",
-          type: "ddy",
-          image: require("@/assets/logo/ddy.png"),
-          address: [
-            {
-              name: "系统入口",
-              href: "https://joylink.club/ddy/login"
-            }
-          ]
-        }
-      ];
-    },
-    name() {
-      return this.$route.query.name;
     }
   },
-  watch: {
+  methods: {
-    $route() {
+    objectSpanMethod({ rowIndex, columnIndex }) {
-      this.active = this.name || "first";
+      if (columnIndex === 0) {
+        if (rowIndex < 2) {
+          if (rowIndex % 2 == 0) {
+            return { rowspan: 2, colspan: 1 };
+          } else {
+            return { rowspan: 0, colspan: 0 };
+          }
+        } else {
+          return { rowspan: 1, colspan: 1 };
+        }
+      }
+    },
+    onCopy() {
+      this.$message.success("复制成功");
+    },
+    onError() {
+      this.$message.info("复制失败");
     }
-  },
-  mounted() {
-    this.active = this.name || "first";
   }
 };
 </script>
@@ -172,39 +86,30 @@ export default {
 .main {
   background: #f7f7f9;
   .container {
-    background: #f7f7f9;
+    padding: 80px;
     width: 70%;
     max-width: 1430.016px;
     margin: auto;
     text-align: left;
 
-    .el-tabs {
+    /deep/ {
-      height: calc(100% - 80px);
+      .el-card__body {
+        padding: 80px;
+      }
+
+      tr {
+        pointer-events: none;
+      }
     }
 
+    i,
     a {
       display: inline-block;
       line-height: 32px;
       color: #373737;
-    }
+      pointer-events: auto;
-
+      &:hover {
-    .grid {
+        font-weight: bold;
-      display: grid;
-      grid-template-columns: repeat(5, 33.33%);
-    }
-
-    .flex {
-      display: flex;
-      flex-direction: column;
-      strong {
-        padding-right: 30px;
-        color: #409eff;
-      }
-      span {
-        &:hover {
-          font-weight: bold;
-          color: #111;
-        }
       }
     }
   }

src/views/Home/main/eProduct.vue

@@ -57,7 +57,7 @@ export default {
         {
           type: "green",
           src: product2,
-          href: "/exhibition?name=first",
+          href: "/exhibition",
           name: "轨道交通",
           describe:
             "轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。"
@@ -65,7 +65,7 @@ export default {
         {
           type: "red",
           src: product1,
-          href: "/exhibition?name=second",
+          href: "/exhibition",
           name: "化学化工",
           describe:
             "化学工业（chemical industry）又称化学加工工业，泛指生产过程中化学方法占主要地位的过程工业。"
@@ -73,10 +73,10 @@ export default {
         {
           type: "blue",
           src: product3,
-          href: "/exhibition?name=third",
+          href: "/exhibition",
           name: "电力电厂",
           describe:
-            "电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
+            "电力电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
         }
       ];
     },

src/views/Layout/eFooter/eCustom.vue

@@ -83,15 +83,15 @@ export default {
           children: [
             {
               name: "轨道交通产品",
-              href: "/exhibition?name=first"
+              href: "/exhibition"
             },
             {
               name: "化学化工产品",
-              href: "/exhibition?name=second"
+              href: "/exhibition"
             },
             {
               name: "电力电厂产品",
-              href: "/exhibition?name=third"
+              href: "/exhibition"
             }
           ]
         },
@@ -135,11 +135,6 @@ export default {
     images() {
       return Object.values(images);
     }
-  },
-  methods: {
-    goSearch() {
-      //
-    }
   }
 };
 </script>

src/views/Layout/eHeader/index.vue

@@ -38,20 +38,7 @@ export default {
         },
         {
           name: "我们的产品",
-          children: [
+          href: "/exhibition"
-            {
-              name: "轨道交通",
-              href: "/exhibition?name=first"
-            },
-            {
-              name: "化学化工",
-              href: "/exhibition?name=second"
-            },
-            {
-              name: "电力电厂",
-              href: "/exhibition?name=third"
-            }
-          ]
         },
         {
           name: "经典案例",
@@ -113,7 +100,6 @@ export default {
 
       this.scrollT = scrollT;
     },
-    goSearch() {},
     goLinkPage() {}
   }
 };