首页完成

src/views/ProductIntroduction/Single.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { gotoNewTab } from "@/utils/menu";
+
 export default {
   name: "Single",
   props: {
@@ -49,16 +51,7 @@ export default {
     }
   },
   methods: {
-    /**
-     * 跳转新页面
-     * @param url 跳转地址
-     */
-    gotoNewTab(url) {
-      if (url)
-        window.open(url, "_blank");
-      else
-        this.$Message.error('缺少地址信息')
-    }
+    gotoNewTab
   }
 };
 </script>

src/views/index/index.vue

 <template>
   <div class="index">
-    <h1>Index</h1>
-    <p>
-      This is the index page. You can find the source code for this page in
-      <code>src/views/index/index.vue</code>
-    </p>
+    <div class="head">
+      <div class="head__item"
+           v-for="({meta: {title, exclude, backgroundImage}, children}, index) in menuItemList"
+           :key="index"
+           v-if="!exclude && children && children.length">
+        <div class="head__item__title">{{ title }}</div>
+        <div class="head__item__separator"></div>
+        <div class="head__item__count">
+          <div class="head__item__count__text">共计</div>
+          <div class="head__item__count__number">{{ children.length }}</div>
+          <div>个</div>
+        </div>
+        <el-image class="head__item__background" :src="backgroundImage" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="content__item"
+           v-for="({meta: {title, englishTitle, titleColor, englishTitleColor, exclude}, children}, index) in menuItemList"
+           :key="index"
+           v-if="!exclude && children && children.length">
+        <div class="title">
+          <div class="title__symbol" :style="{color: titleColor, background: titleColor}"></div>
+          <div class="title__text" :style="{color: titleColor}">{{ title }}</div>
+          <div class="title__text-english" :style="{color: englishTitleColor}">{{ englishTitle }}</div>
+        </div>
+        <div class="content__item__list">
+          <div class="content__item__list__item"
+               v-for="({meta: {title, subTitle, prefixIcon, url, exclude}}, index) in children"
+               :key="index"
+               @click="gotoNewTab(url)"
+               v-if="!exclude">
+            <div class="content__item__list__item__icon">
+              <el-image :src="prefixIcon" />
+            </div>
+            <div class="content__item__list__item__text">
+              <div class="content__item__list__item__text__title">{{ title }}</div>
+              <div class="content__item__list__item__text__sub-title">{{ subTitle }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { gotoNewTab, menuItemList } from "@/utils/menu";
+
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      menuItemList
+    };
+  },
+  methods: {
+    gotoNewTab
+  }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.index {
+  padding: 40px;
+  background: #F1F1F1;
+
+  .head {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(3, 1fr);
+    background: white;
+    padding: 30px;
+
+    &__item {
+      width: auto;
+      height: 152px;
+      padding: 20px 30px;
+      position: relative;
+
+      div {
+        position: relative;
+        z-index: 2;
+      }
+
+      .head__item__background {
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        display: block;
+        max-width: 500px;
+        height: 152px;
+      }
+
+      &__title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+
+      &__separator {
+        height: 1px;
+        margin: 20px 0;
+        background: #FFFFFF;
+      }
+
+      &__count {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-weight: 400;
+        color: #FFFFFF;
+
+        div {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .head__item__count__number {
+          height: 36px;
+          line-height: 36px;
+          font-size: 36px;
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 30px;
+    background: white;
+    padding: 20px 30px 0;
+
+    &__item {
+      padding: 10px 0 40px;
+      cursor: pointer;
+
+      .title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 28px;
+
+        &__symbol {
+          width: 4px;
+          height: 40px;
+          margin-right: 20px;
+        }
+
+        &__text, &__text-english {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        &__text-english {
+          font-weight: 400;
+          margin-left: 10px;
+        }
+      }
+
+      &__list {
+        display: grid;
+        grid-gap: 20px;
+        grid-template-columns: repeat(4, 1fr);
+
+        &__item {
+          display: flex;
+          align-items: center;
+          padding: 16px 0 17px 20px;
+          border-radius: 6px;
+          border: 1px solid #E4E4E4;
+
+          &__icon {
+            margin-right: 16px;
+
+            .el-image {
+              width: 30px;
+              height: 30px;
+            }
+          }
+
+          &__text {
+            &__title {
+              margin-bottom: 12px;
+              font-size: 15px;
+              font-weight: bold;
+              color: #333333;
+            }
+
+            &__sub-title {
+              font-size: 14px;
+              font-weight: 400;
+              color: #7D7D7D;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>
\ No newline at end of file