feat: new demo

demo/components/gradientTextDemo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="doc">
+    <h1>渐变文字 n-gradient-text</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-gradient-text>轻轻闭上眼睛，此刻我觉得清醒。</n-gradient-text>
+    <br>
+    <textarea rows="5"><n-gradient-text>轻轻闭上眼睛，此刻我觉得清醒。</n-gradient-text></textarea>
+    <hr>
+    <h2>调整字号</h2>
+    <n-gradient-text font-size="24">
+      轻轻闭上眼睛，此刻我觉得清醒。
+    </n-gradient-text>
+    <br>
+    <textarea rows="5"><n-gradient-text font-size="24">轻轻闭上眼睛，此刻我觉得清醒。</n-gradient-text></textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/components/homeDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="main-container">
-      <n-home-layout>
+      <n-nimbus-home-layout>
         <n-with-padding
           :padding-top="16"
           :padding-bottom="23"
@@ -20,7 +20,7 @@
             style="width: 271.5px"
           />
         </n-masonry-group>
-      </n-home-layout>
+      </n-nimbus-home-layout>
     </div>
     <div class="nav-container">
       <n-navbar />

demo/components/sideMenuDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="service-container">
-      <n-service-layout>
+      <n-nimbus-service-layout>
         <n-with-padding
           :padding-left="48"
           :padding-right="48"
@@ -40,7 +40,7 @@
             </n-tbody>
           </n-table>
         </n-with-padding>
-      </n-service-layout>
+      </n-nimbus-service-layout>
     </div>
     <div class="nav-container">
       <n-navbar />

demo/demo.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="demo">
     <div class="section">
-      <router-link to="/home">
-        home
+      <router-link to="/n-nimbus-home-layout">
+        home / n-nimbus-home-layout
       </router-link>
       <br>
-      <router-link to="/sidemenu">
-        service
+      <router-link to="/n-nimbus-service-layout">
+        service / n-nimbus-service-layout
+      </router-link>
+      <br>
+      <router-link to="/n-gradient-text">
+        渐变文字 / n-gradient-text
       </router-link>
     </div>
   </div>
@@ -20,10 +24,13 @@ export default {
 <style lang="scss" scoped>
 .demo {
   width: 1080px;
+  height: 100vh;
   margin: auto;
+  display: flex;
+  align-items: center;
 }
 
-.section.title {
-  margin: 14px 0;
+.section {
+
 }
 </style>

demo/index.js

@@ -5,7 +5,7 @@ import '../styles/index.scss'
 import Card from 'packages/common/Card'
 import Icon from 'packages/common/Icon'
 import Loader from 'packages/common/Loader'
-import GradientHeader from 'packages/common/GradientHeader'
+import GradientText from 'packages/common/GradientText'
 import ColumnGroup from 'packages/common/ColumnGroup'
 import WithPadding from 'packages/common/WithPadding'
 import WithMargin from 'packages/common/WithMargin'
@@ -19,6 +19,7 @@ import ServiceLayout from 'packages/nimbus/ServiceLayout'
 
 import sideMenuDemo from './components/sideMenuDemo'
 import homeDemo from './components/homeDemo'
+import gradientTextDemo from './components/gradientTextDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -29,7 +30,7 @@ ServiceLayout.install(Vue)
 Navbar.install(Vue)
 Loader.install(Vue)
 HomeLayout.install(Vue)
-GradientHeader.install(Vue)
+GradientText.install(Vue)
 ColumnGroup.install(Vue)
 WithPadding.install(Vue)
 ServiceCard.install(Vue)
@@ -39,8 +40,9 @@ WithMargin.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
-  { path: '/sidemenu', component: sideMenuDemo },
-  { path: '/home', component: homeDemo }
+  { path: '/n-nimbus-service-layout', component: sideMenuDemo },
+  { path: '/n-nimbus-home-layout', component: homeDemo },
+  { path: '/n-gradient-text', component: gradientTextDemo }
 ]
 
 const router = new VueRouter({

index.js

@@ -1,7 +1,7 @@
 import Card from './packages/common/Card'
 import Icon from './packages/common/Icon'
 import Loader from './packages/common/Loader'
-import GradientHeader from './packages/common/GradientHeader'
+import GradientText from './packages/common/GradientText'
 import ColumnGroup from './packages/common/ColumnGroup'
 import WithPadding from './packages/common/WithPadding'
 import WithMargin from './packages/common/WithMargin'
@@ -20,7 +20,7 @@ function installUiToVue (Vue) {
   Navbar.install(Vue)
   Loader.install(Vue)
   HomeLayout.install(Vue)
-  GradientHeader.install(Vue)
+  GradientText.install(Vue)
   ColumnGroup.install(Vue)
   WithPadding.install(Vue)
   ServiceCard.install(Vue)

packages/common/GradientHeader/index.js

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

packages/common/GradientText/index.js

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

packages/common/GradientText/src/main.vue

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'NGradientHeader',
+  name: 'NGradientText',
   props: {
     'fontSize': {
       type: Number,

packages/nimbus/HomeLayout/index.js

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

packages/nimbus/HomeLayout/src/main.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'NHomeLayout',
+  name: 'NNimbusHomeLayout',
   props: {},
   data () {
     return {

packages/nimbus/ServiceLayout/index.js

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

packages/nimbus/ServiceLayout/src/main.vue

@@ -83,7 +83,7 @@
 
 <script>
 export default {
-  name: 'NServiceLayout',
+  name: 'NNimbusServiceLayout',
   props: {},
   data () {
     return {

styles/index.scss

@@ -2,7 +2,7 @@
 
 @import './Card.scss';
 @import './Icon.scss';
-@import './GradientHeader.scss';
+@import './GradientText.scss';
 @import './ColumnGroup.scss';
 @import './WithPadding.scss';
 @import './ServiceCard.scss';