每个模块首页更新

Former-commit-id: d459515f384d47ea5a84671050246eb5fe658304 [formerly d459515f384d47ea5a84671050246eb5fe658304 [formerly d459515f384d47ea5a84671050246eb5fe658304 [formerly d459515f384d47ea5a84671050246eb5fe658304 [formerly 1d08416010fed1f2f67f487d4c93ced2334e5bd9 [formerly a2250bf183540eb016a76fe6891d4930f7aeaec3]]]]]
Former-commit-id: 9a5f6e3a97a23ad6734a87e93284351eff9cfa9a
Former-commit-id: 48e636d6f3a252a6c3c89ecbbdc36b4b969d78e9
Former-commit-id: 0aa75a50770886d77d4f4660e11c9874819c3d01 [formerly 66c909149fc309b1715821d6512cc3288c3e0ac6]
Former-commit-id: de834b5ea328ac1aa664371f6d5c7044b96e8d4d
Former-commit-id: a049a32d41ac698119dafdde87842963097357a8
Former-commit-id: b17192706355ac212cd0224006f76c1ba47d50ea
Former-commit-id: d70f7c1eb4ac0b5941003faabfab4bd1342035c8
Former-commit-id: 3f00dfc99f25c34d7033fabcf98a0f8784b7f4ae

src/components/d2-module-index/components/banner/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="banner"
+    :class="{
+      'with-link': link
+    }"
+    flex="dir:top main:center cross:top">
+    <p class="banner--title">{{title}}</p>
+    <p class="banner--sub-title">{{subTitle}}</p>
+    <p v-if="link" class="banner--link" @click="handleLinkClick">
+      <span class="banner--link-button">
+        <d2-icon name="link"/>
+        {{link}}
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    link: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleLinkClick () {
+      this.$open(this.link)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  .banner--title {
+    margin: 0px;
+    padding: 0px;
+    margin-left: -8px;
+    font-size: 120px;
+    line-height: 120px;
+    font-weight: bold;
+    color: #FFF;
+  }
+  .banner--sub-title {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    color: #FFF;
+  }
+  .banner--link {
+    margin: 0px;
+    padding: 0px;
+    margin-top: 10px;
+    .banner--link-button {
+      font-size: 12px;
+      color: #FFF;
+      padding: 4px 6px;
+      border-radius: 2px;
+      background-color: rgba(#000, .5);
+      transition: all .3s;
+      &:hover {
+        background-color: rgba(#000, 1);
+      }
+    }
+  }
+  &.with-link {
+    height: 220px;
+  }
+  @extend %unable-select;
+  height: 180px;
+  padding-left: 20px;
+  border: 1px solid #0054b5;
+  border-radius: 2px;
+  background-color: #0077ff;
+  background-size: 60px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cef0ff' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+</style>

src/components/d2-module-index/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <d2-module-index-banner v-bind="banner"/>
+  </div>
+</template>
+
+<script>
+import d2ModuleIndexBanner from './components/banner'
+export default {
+  components: {
+    d2ModuleIndexBanner
+  },
+  props: {
+    banner: {
+      type: Object,
+      default: () => ({
+        title: '',
+        subTitle: '',
+        link: ''
+      })
+    }
+  }
+}
+</script>

src/components/index.js

@@ -16,5 +16,6 @@ Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
+Vue.component('d2-module-index', () => import('./d2-module-index'))
 Vue.component('d2-quill', () => import('./d2-quill'))
 Vue.component('d2-ueditor', () => import('./d2-ueditor'))