feat: add some comps

demo/components/homeDemo.vue

@@ -1,7 +1,26 @@
 <template>
   <div>
     <div class="service-container">
-      <nv-home />
+      <nv-home-layout>
+        <nv-with-padding
+          :padding-top="16"
+          :padding-bottom="23"
+        >
+          <nv-gradient-header :font-size="18">
+            All Services
+          </nv-gradient-header>
+        </nv-with-padding>
+        <nv-masonry-group>
+          <nv-service-card
+            v-for="service in services"
+            :key="service.title"
+            :title="service.title"
+            :items="service.items"
+            class="grid-item"
+            style="width: 271.5px"
+          />
+        </nv-masonry-group>
+      </nv-home-layout>
     </div>
     <div class="nav-container">
       <nv-navbar />
@@ -10,18 +29,66 @@
 </template>
 
 <script>
-export default {
+const services = [
+  {
+    title: 'Compute',
+    items: ['Lambda2', 'Importer & Debrief']
+  },
+  {
+    title: 'Data',
+    items: ['VTS', 'Dataset', 'Rancher']
+  },
+  {
+    title: 'Storage',
+    items: ['Lambda', 'Tsflow', 'Tuyaco', 'Truenas']
+  },
+  {
+    title: 'HR',
+    items: ['Moka', 'Greenhouse', 'Online Interview Tool']
+  },
+  {
+    title: 'Cloud',
+    items: ['Aliyun', 'Rancher', 'Jenkins', 'Xray', 'MissionControl']
+  },
+  {
+    title: 'Workspace',
+    items: ['DingdingWeb', 'Exmail', 'GSuite', 'Moka', 'Jira']
+  },
+  {
+    title: 'Monitoring',
+    items: ['Guardian', 'Prometheus Server']
+  },
+  {
+    title: 'Identity & Secunit',
+    items: ['IDM', 'IAM']
+  },
+  {
+    title: 'Network',
+    items: ['CloudWAN']
+  }
+]
 
+export default {
+  data () {
+    return {
+      services
+    }
+  }
 }
 </script>
 
 <style scoped>
+.body {
+  min-width: 1280px;
+  background: #1a2033;
+}
 .nav-container {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
   height: 50px;
+  min-width: 1280px;
   background-color: #1f263e;
 }
 .service-container {
@@ -29,7 +96,9 @@ export default {
   top: 50px;
   left: 0;
   right: 0;
-  bottom: 0;
-  background-color: #1f263e;
+  width: 100%;
+  min-width: 1280px;
+  background-color: #171D33;
+  overflow: scroll;
 }
 </style>

demo/components/sideMenuDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="service-container">
-      <nv-layout />
+      <nv-service-layout />
     </div>
     <div class="nav-container">
       <nv-navbar />
@@ -30,6 +30,6 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #1f263e;
+  background-color: #171D33;
 }
 </style>

demo/index.js

@@ -5,10 +5,15 @@ import '../styles/index.scss'
 import Card from 'packages/common/Card'
 import Icon from 'packages/common/Icon'
 import Loader from 'packages/common/Loader'
-import SideMenu from 'packages/nimbus/SideMenu'
-import Layout from 'packages/nimbus/Layout'
-import Home from 'packages/nimbus/Home'
+import GradientHeader from 'packages/common/GradientHeader'
+import ColumnGroup from 'packages/common/ColumnGroup'
+import WithPadding from 'packages/common/WithPadding'
+import MasonryGroup from 'packages/common/MasonryGroup'
+
+import ServiceCard from 'packages/nimbus/ServiceCard'
+import HomeLayout from 'packages/nimbus/HomeLayout'
 import Navbar from 'packages/nimbus/Navbar'
+import ServiceLayout from 'packages/nimbus/ServiceLayout'
 
 import sideMenuDemo from './components/sideMenuDemo'
 import homeDemo from './components/homeDemo'
@@ -17,11 +22,15 @@ Vue.use(VueRouter)
 
 Card.install(Vue)
 Icon.install(Vue)
-SideMenu.install(Vue)
-Layout.install(Vue)
+ServiceLayout.install(Vue)
 Navbar.install(Vue)
 Loader.install(Vue)
-Home.install(Vue)
+HomeLayout.install(Vue)
+GradientHeader.install(Vue)
+ColumnGroup.install(Vue)
+WithPadding.install(Vue)
+ServiceCard.install(Vue)
+MasonryGroup.install(Vue)
 
 const routes = [
   { path: '/sidemenu', component: sideMenuDemo },

package.json

@@ -43,6 +43,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "^3.0.5",
+    "masonry-layout": "^4.2.2",
     "mocha": "^6.1.4",
     "node-sass": "^4.12.0",
     "progress-bar-webpack-plugin": "^1.12.1",

packages/common/Card/src/main.vue

@@ -49,7 +49,8 @@ export default {
     },
     width: {
       type: Number,
-      required: false
+      required: false,
+      default: 14
     }
   },
   data () {

packages/common/ColumnGroup/index.js

@@ -0,0 +1,7 @@
+import Scaffold from './src/main.vue'
+
+Scaffold.install = function (Vue) {
+  Vue.component(Scaffold.name, Scaffold)
+}
+
+export default Scaffold

packages/common/ColumnGroup/src/main.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="nv-column-group">
+    <div class="columns">
+      <div
+        v-for="index in cols"
+        :key="index"
+        class="column"
+      >
+        <slot :name="`col(${index})`" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NvColumnGroup',
+  props: {
+    col: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    cols () {
+      const colIndexes = []
+      for (let i = 0; i < this.col; ++i) {
+        colIndexes.push(i + 1)
+      }
+      return colIndexes
+    }
+  }
+}
+</script>

packages/common/GradientHeader/index.js

@@ -0,0 +1,7 @@
+import GradientHeader from './src/main.vue'
+
+GradientHeader.install = function (Vue) {
+  Vue.component(GradientHeader.name, GradientHeader)
+}
+
+export default GradientHeader

packages/common/GradientHeader/src/main.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="nv-gradient-header">
+    <div
+      class="header"
+      :style="style"
+    >
+      <div class="content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NvGradientHeader',
+  props: {
+    'fontSize': {
+      type: Number,
+      default: 16
+    }
+  },
+  computed: {
+    style () {
+      return {
+        fontSize: this.fontSize + 'px'
+      }
+    }
+  }
+}
+</script>

packages/common/Icon/src/main.vue

@@ -13,8 +13,14 @@ export default {
       type: String,
       default: ''
     },
-    size: [Number, String],
-    color: String,
+    size: {
+      type: [Number, String],
+      default: 14
+    },
+    color: {
+      type: String,
+      default: '#fff'
+    },
     custom: {
       type: String,
       default: ''

packages/common/MasonryGroup/index.js

@@ -0,0 +1,7 @@
+import MasonryGroup from './src/main.vue'
+
+MasonryGroup.install = function (Vue) {
+  Vue.component(MasonryGroup.name, MasonryGroup)
+}
+
+export default MasonryGroup

packages/common/MasonryGroup/src/main.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    ref="nv-masonry-group"
+    class="nv-masonry-group"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import Masonry from 'masonry-layout'
+
+export default {
+  name: 'NvMasonryGroup',
+  mounted () {
+    const msry = new Masonry(this.$refs['nv-masonry-group'], {
+      itemSelector: '.grid-item',
+      gutter: 18,
+      columnWidth: 299.5
+    })
+    msry.layout()
+  }
+}
+</script>

packages/common/WithPadding/index.js

@@ -0,0 +1,7 @@
+import WithPadding from './src/main.vue'
+
+WithPadding.install = function (Vue) {
+  Vue.component(WithPadding.name, WithPadding)
+}
+
+export default WithPadding

packages/common/WithPadding/src/main.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="nv-with-padding"
+    :style="style"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NvWithPadding',
+  props: {
+    paddingTop: {
+      type: Number,
+      default: 0
+    },
+    paddingRight: {
+      type: Number,
+      default: 0
+    },
+    paddingBottom: {
+      type: Number,
+      default: 0
+    },
+    paddingLeft: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    style () {
+      const paddingStyle = {}
+      if (this.paddingTop) paddingStyle.paddingTop = this.paddingTop + 'px'
+      if (this.paddingRight) paddingStyle.paddingRight = this.paddingRight + 'px'
+      if (this.paddingBottom) paddingStyle.paddingBottom = this.paddingBottom + 'px'
+      if (this.paddingLeft) paddingStyle.paddingLeft = this.paddingLeft + 'px'
+      return paddingStyle
+    }
+  }
+}
+</script>

packages/nimbus/Home/index.js

@@ -1,7 +0,0 @@
-import Home from './src/main.vue'
-
-Home.install = function (Vue) {
-  Vue.component(Home.name, Home)
-}
-
-export default Home

packages/nimbus/HomeLayout/index.js

@@ -0,0 +1,7 @@
+import HomeLayout from './src/main.vue'
+
+HomeLayout.install = function (Vue) {
+  Vue.component(HomeLayout.name, HomeLayout)
+}
+
+export default HomeLayout

packages/nimbus/HomeLayout/src/main.vue

@@ -1,17 +1,12 @@
 <template>
   <div class="home">
-    <div class="columns">
-      <div class="column" />
-      <div class="column" />
-      <div class="column" />
-      <div class="column" />
-    </div>
+    <slot />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'NvHome',
+  name: 'NvHomeLayout',
   props: {},
   data () {
     return {
@@ -43,24 +38,7 @@ export default {
 
 <style lang="scss" scoped>
 .home {
-  width: 100%;
-  padding-top: 14px;
-  .columns {
-    margin: auto;
-    display: flex;
-    margin-left: 272px;
-    margin-right: 272px;
-    justify-content: space-between;
-    .column {
-      margin-right: 14px;
-      &:last-child {
-        margin-right: 0;
-      }
-      background-color: white;
-      flex-grow: 1;
-      height: 100px;
-
-    }
-  }
+  width: 1252px;
+  margin: auto;
 }
 </style>

packages/nimbus/Layout/index.js

@@ -1,7 +0,0 @@
-import Layout from './src/main.vue'
-
-Layout.install = function (Vue) {
-  Vue.component(Layout.name, Layout)
-}
-
-export default Layout

packages/nimbus/Navbar/src/main.vue

@@ -39,16 +39,17 @@ export default {
 
 <style lang="scss" scoped>
 .nav {
-  position: fixed;
+  position: absolute;
   top: 0;
   height: 50px;
   left: 0;
-  right: 0;
+  width: 100%;
   background-color: #1f263e;
   box-shadow: 0 2px 6px 1px rgba(0, 0, 0, .1);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-width: 1280px;
   .left {
     display: flex;
     align-items: center;

packages/nimbus/Scaffold/index.js

@@ -0,0 +1,7 @@
+import Scaffold from './src/main.vue'
+
+Scaffold.install = function (Vue) {
+  Vue.component(Scaffold.name, Scaffold)
+}
+
+export default Scaffold

packages/nimbus/Scaffold/src/main.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>example</div>
+</template>
+
+<script>
+export default {
+  name: 'NvScaffold'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

packages/nimbus/ServiceCard/index.js

@@ -0,0 +1,7 @@
+import ServiceCard from './src/main.vue'
+
+ServiceCard.install = function (Vue) {
+  Vue.component(ServiceCard.name, ServiceCard)
+}
+
+export default ServiceCard

packages/nimbus/ServiceCard/src/main.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="nv-service-card">
+    <div class="title">
+      {{ title }}
+    </div>
+    <div class="divider" />
+    <div class="items">
+      <div
+        v-for="item in items"
+        :key="item"
+        class="item"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NvServiceCard',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

packages/nimbus/ServiceLayout/index.js

@@ -0,0 +1,7 @@
+import ServiceLayout from './src/main.vue'
+
+ServiceLayout.install = function (Vue) {
+  Vue.component(ServiceLayout.name, ServiceLayout)
+}
+
+export default ServiceLayout

packages/nimbus/ServiceLayout/src/main.vue

@@ -47,7 +47,7 @@
 
 <script>
 export default {
-  name: 'NvLayout',
+  name: 'NvServiceLayout',
   props: {},
   data () {
     return {
@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
 .layout {
-  background: #1f263e;
+  background: #171D33;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -112,6 +112,7 @@ export default {
     font-size: 16px;
     .content {
       background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+      background-clip: text;
       -webkit-background-clip: text;
       color: transparent;
     }

packages/nimbus/SideMenu/index.js

@@ -1,7 +0,0 @@
-import SideMenu from './src/main.vue'
-
-SideMenu.install = function (Vue) {
-  Vue.component(SideMenu.name, SideMenu)
-}
-
-export default SideMenu

packages/nimbus/SideMenu/src/main.vue

@@ -1,93 +0,0 @@
-<template>
-  <div
-    class="menu-container"
-    :class="{ collapse: collapse, active: !collapse }"
-  >
-    <div
-      class="menu"
-      :class="{ collapse: collapse, active: !collapse }"
-    >
-      <div class="header">
-        Good Service<button @click="toggle">
-          &lt;
-        </button>
-      </div>
-      <div class="item">
-        Service Management
-      </div>
-      <div class="item">
-        Service Management
-      </div>
-      <div class="item">
-        Service Management
-      </div>
-      <div class="toggle-button" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NvSidemenu',
-  props: {},
-  data () {
-    return {
-      collapse: false
-    }
-  },
-  methods: {
-    toggle () {
-      console.log('hello')
-      this.collapse = !this.collapse
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.menu-container {
-  display: inline-block;
-  position: relative;
-  margin-right: 14px;
-  top: 0;
-  bottom: 0;
-  width: 256px;
-  &.active {
-    max-width: 256px;
-    transition: max-width .3s cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-  &.collapse {
-    max-width: 32px;
-    transition: max-width .25s cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-}
-.menu {
-  & {
-    background-color: #efefef;
-    width: 256px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  &.active {
-    transform: translateX(0);
-    transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-  &.collapse {
-    transform: translateX(-224px);
-    transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-  .header {
-    font-weight: 700;
-    padding: 14px 4px 14px 21px;
-    font-size: 16px;
-    button {
-      float: right;
-    }
-  }
-  .item {
-    padding: 14px 21px;
-    font-size: 16px;
-  }
-}
-</style>

src/Amazing.vue

@@ -5,7 +5,12 @@
 <script>
 export default {
   name: 'Amazing',
-  props: ['title'],
+  props: {
+    title: {
+      type: String,
+      default: 'Amazing'
+    }
+  },
   methods: {
     hello () {
       console.log('amazing')

styles/ColumnGroup.scss

@@ -0,0 +1,15 @@
+@import './mixins/mixins.scss';
+
+@include b(column-group) {
+  & > .columns {
+    display: flex;
+    justify-content: space-between;
+    & >.column {
+      margin-right: 18px;
+      &:last-child {
+        margin-right: 0;
+      }
+      flex-grow: 1;
+    }
+  }
+}

styles/GradientHeader.scss

@@ -0,0 +1,17 @@
+@import './mixins/mixins.scss';
+
+@include b(gradient-header) {
+  & > .header {
+    display: inline-block;
+    position: relative;
+    color: #fff;
+    font-weight: 700;
+    font-size: 16px;
+    & > .content {
+      background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      color: transparent;
+    }
+  }
+}

styles/MasonryGroup.scss

@@ -0,0 +1,4 @@
+@import './mixins/mixins.scss';
+
+@include b(masonry-group) {
+}

styles/Scaffold.scss

@@ -0,0 +1 @@
+@import './mixins/mixins.scss';

styles/ServiceCard.scss

@@ -0,0 +1,38 @@
+@import './mixins/mixins.scss';
+
+@include b(service-card) {
+  & {
+    background:rgba(58,64,85,1);
+    box-shadow:0px 2px 20px 0px rgba(0,0,0,0.23),0px 1px 10px 0px rgba(0,0,0,0.04);
+    border-radius:10px;
+    padding: 15px 14px 18px 14px;
+    margin-bottom: 16px;
+  }
+  & > .title {
+    font-size: 14px;
+    color: rgba(212, 216, 231, .5);
+  }
+  & > .divider {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    height: 1px;
+    background-color: rgba(255, 255, 255, .09)
+  }
+  & > .items {
+    display: flex;
+    flex-direction: column;
+    & > .item {
+      font-size: 14px;
+      padding: 10px 16px;
+      color: #fff;
+      background-color: rgba(255,255,255,0.23);
+      border-radius: 6px;
+    }
+    & > .item:not(:last-child) {
+      margin-bottom: 10px;
+    }
+    & > .item.disabled {
+      background-color: rgba(255,255,255,0.23);
+    }
+  }
+}

styles/WithPadding.scss

@@ -0,0 +1,5 @@
+@import './mixins/mixins.scss';
+
+@include b(with-padding) {
+  width: 100%;
+}

styles/index.scss

@@ -1,4 +1,8 @@
 @import './base.scss';
 
 @import './Card.scss';
-@import './Icon.scss';
+@import './Icon.scss';
+@import './GradientHeader.scss';
+@import './ColumnGroup.scss';
+@import './WithPadding.scss';
+@import './ServiceCard.scss';