feat: swiper avatar resource

package-lock.json

@@ -2043,6 +2043,54 @@
         "tslint": "^5.20.1",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-6.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-6.0.0.tgz",
+          "integrity": "sha1-2k/uhTxS9rHmk19BwaL8UL1KmYI=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "fork-ts-checker-webpack-plugin-v5": {
+          "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+          "resolved": "https://registry.npm.taobao.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz?cache=0&sync_timestamp=1605637586677&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffork-ts-checker-webpack-plugin%2Fdownload%2Ffork-ts-checker-webpack-plugin-5.2.1.tgz",
+          "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@types/json-schema": "^7.0.5",
+            "chalk": "^4.1.0",
+            "cosmiconfig": "^6.0.0",
+            "deepmerge": "^4.2.2",
+            "fs-extra": "^9.0.0",
+            "memfs": "^3.1.2",
+            "minimatch": "^3.0.4",
+            "schema-utils": "2.7.0",
+            "semver": "^7.3.2",
+            "tapable": "^1.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&sync_timestamp=1601922251376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
+          "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
       }
     },
     "@vue/cli-plugin-vuex": {
@@ -2297,9 +2345,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-rc.1",
-          "resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-16.0.0-rc.1.tgz",
-          "integrity": "sha1-nB8WhOLQHIpyIW+dTbEZ4VxiJkU=",
+          "version": "npm:vue-loader@16.0.0-rc.2",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-rc.2.tgz?cache=0&sync_timestamp=1605670788198&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-rc.2.tgz",
+          "integrity": "sha1-tqfn8w0o81ZZqD3kH0oYMaQjKgQ=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2310,7 +2358,7 @@
           "dependencies": {
             "json5": {
               "version": "2.1.3",
-              "resolved": "http://r.cnpmjs.org/json5/download/json5-2.1.3.tgz",
+              "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz",
               "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=",
               "dev": true,
               "optional": true,
@@ -2320,7 +2368,7 @@
             },
             "loader-utils": {
               "version": "2.0.0",
-              "resolved": "http://r.cnpmjs.org/loader-utils/download/loader-utils-2.0.0.tgz",
+              "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
               "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
               "dev": true,
               "optional": true,
@@ -5452,11 +5500,11 @@
       }
     },
     "dom7": {
-      "version": "3.0.0",
-      "resolved": "https://r.cnpmjs.org/dom7/download/dom7-3.0.0.tgz",
-      "integrity": "sha1-uGHOXWemvs16qjrQKUL/FLEkAzE=",
+      "version": "2.1.5",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1604920902564&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz",
+      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
       "requires": {
-        "ssr-window": "^3.0.0-alpha.1"
+        "ssr-window": "^2.0.0"
       }
     },
     "domain-browser": {
@@ -6681,54 +6729,6 @@
         }
       }
     },
-    "fork-ts-checker-webpack-plugin-v5": {
-      "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-      "resolved": "https://r.cnpmjs.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz",
-      "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://r.cnpmjs.org/cosmiconfig/download/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha1-2k/uhTxS9rHmk19BwaL8UL1KmYI=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://r.cnpmjs.org/schema-utils/download/schema-utils-2.7.0.tgz",
-          "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-          }
-        }
-      }
-    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -12340,9 +12340,9 @@
       }
     },
     "ssr-window": {
-      "version": "3.0.0",
-      "resolved": "https://r.cnpmjs.org/ssr-window/download/ssr-window-3.0.0.tgz",
-      "integrity": "sha1-/VuCgBY4lD4MxwTEaRgBQ1r3rDc="
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz?cache=0&sync_timestamp=1604919709590&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssr-window%2Fdownload%2Fssr-window-2.0.0.tgz",
+      "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
     },
     "ssri": {
       "version": "6.0.1",
@@ -12701,12 +12701,11 @@
       }
     },
     "swiper": {
-      "version": "6.3.5",
-      "resolved": "https://r.cnpmjs.org/swiper/download/swiper-6.3.5.tgz",
-      "integrity": "sha1-dES2gND9r+hIWYJaw1WbWwG9GRY=",
+      "version": "4.0.2",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-4.0.2.tgz?cache=0&sync_timestamp=1604063070897&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fswiper%2Fdownload%2Fswiper-4.0.2.tgz",
+      "integrity": "sha1-EFlHMW4lOXFJb3Qg0/VssUanxkg=",
       "requires": {
-        "dom7": "^3.0.0-alpha.7",
-        "ssr-window": "^3.0.0-alpha.4"
+        "dom7": "^2.0.1"
       }
     },
     "table": {

package.json

@@ -43,7 +43,7 @@
     "core-js": "^3.6.5",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
-    "swiper": "^6.3.5",
+    "swiper": "^4.0.2",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-rc.1"
   },

src/config.ts

@@ -162,6 +162,24 @@ export const nav = [
         show: true,
         desc: '复选按钮',
         author: 'Ymm0008'
+      },
+      {
+        name: 'Swiper',
+        sort: 6,
+        cName: '轮播',
+        type: 'component',
+        show: true,
+        desc: '轮播',
+        author: 'ailululu'
+      },
+      {
+        name: 'Avatar',
+        sort: 7,
+        cName: '头像',
+        type: 'component',
+        show: true,
+        desc: '头像',
+        author: 'ailululu'
       }
     ]
   },

src/packages/avatar/demo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="demo">
+    <h2>默认用法</h2>
+    <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
+    <nut-cell>
+      <nut-avatar size="80"></nut-avatar>
+      <nut-avatar size="large"></nut-avatar>
+      <nut-avatar size="normal"></nut-avatar>
+      <nut-avatar size="small"></nut-avatar>
+    </nut-cell>
+    <h2>修改形状类型</h2>
+    <nut-cell>
+      <nut-avatar size="large" shape="square"></nut-avatar>
+      <nut-avatar size="normal" shape="square"></nut-avatar>
+      <nut-avatar size="small" shape="square"></nut-avatar>
+    </nut-cell>
+    <h2>修改背景色</h2>
+    <nut-cell>
+      <nut-avatar bg-color="#FA2C19"></nut-avatar>
+    </nut-cell>
+    <h2>修改背景图片</h2>
+    <nut-cell>
+      <nut-avatar bg-icon bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+    </nut-cell>
+    <h2>可以修改头像的内容</h2>
+    <nut-cell>
+      <nut-avatar bg-icon>N</nut-avatar>
+    </nut-cell>
+    <h2>点击头像有触发事件</h2>
+    <nut-cell>
+      <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
+    </nut-cell>
+  </div>
+</template>
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('avatar');
+export default createDemo({
+  props: {},
+  methods: {
+    activeAvatar(event) {
+      console.log('点击了头像', event);
+    }
+  }
+});
+</script>
+<style lang="scss" scoped>
+.nut-cell {
+  align-items: flex-end;
+}
+</style>

src/packages/avatar/doc.md

@@ -0,0 +1,87 @@
+# Avatar 头像
+
+### 介绍
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Price } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Price);
+
+```
+
+## 代码示例
+
+### 基本用法
+
+内置 smal / normal / large 三种尺寸规格
+
+``` html
+<nut-avatar size="large"></nut-avatar>
+<nut-avatar size="normal"></nut-avatar>
+<nut-avatar size="small"></nut-avatar>
+```
+
+### 修改形状类型
+
+``` html
+<nut-avatar size="large" shape="square"></nut-avatar>
+<nut-avatar size="normal" shape="square"></nut-avatar>
+<nut-avatar size="small" shape="square"></nut-avatar>
+```
+
+### 修改背景色
+
+``` html
+<nut-avatar bg-color="#f0250f"></nut-avatar>
+```
+
+### 设置头像的文本内容
+
+``` html
+<nut-avatar size="large" bg-icon>U</nut-avatar>
+```
+
+### 设置背景图片
+
+``` html
+<nut-avatar
+  bg-icon
+  bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+></nut-avatar>
+```
+
+### 设置头像ICON图标
+
+``` html
+<nut-avatar
+  bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
+></nut-avatar>
+```
+
+### 点击头像有触发事件
+
+``` html
+<nut-avatar @active-avatar="activeAvatar"></nut-avatar>
+```
+
+### Prop
+
+| 字段 |说明|类型|默认值|
+|--|--|--|--|
+|bg-color|设置头像背景色|String|#eee
+size|设置头像的大小，提供三种：large/normal/small|String|normal
+shape|设置头像的形状，默认是圆形，可以设置为square方形|String|round
+bg-image|设置头像的背景图片|String|--
+bg-icon|设置头像的icon图标|String|默认based64格式的头像图片
+
+### Events
+
+|字段|说明|类型|默认值|
+|--|--|--|--|
+|active-avatar|点击头像触发事件|Function|--|

src/packages/avatar/index.scss

@@ -0,0 +1,45 @@
+.nut-avatar {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  margin-right: 24px;
+  .icon {
+    width: 50%;
+    height: 50%;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .text {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+  }
+}
+.avatar-large {
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+}
+.avatar-small {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+.avatar-normal {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.avatar-round {
+  border-radius: 50%;
+}
+.avatar-square {
+  border-radius: 5px;
+}

src/packages/price/demo.vue

@@ -2,15 +2,15 @@
   <div class="demo">
     <h2>基本用法</h2>
     <nut-cell>
-      <nut-price :price="1010" :needSymbol="false" :thousands="true" />
+      <nut-price :price="1010" :need-symbol="false" :thousands="true" />
     </nut-cell>
     <h2>无人民币符号，有千位分隔</h2>
     <nut-cell>
-      <nut-price :price="10010.01" :needSymbol="true" :thousands="false" />
+      <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
     </nut-cell>
     <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimalDigits="3" :needSymbol="true" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
     </nut-cell>
   </div>
 </template>

src/packages/price/doc.md

@@ -48,6 +48,8 @@ app.use(Price);
 />
 ```
 
+### Prop
+
 |字段|说明|类型|默认值|
 |--|--|--|--|
 |price|价格数量|Number|0|

src/packages/swiper/demo.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <view class="demo-box">
+      <nut-swiper class="swiper1" swipeid="swiper1" ref="swiper1" pagination="true" paginationClass="swiper1-pagination">
+        <template v-slot:swiper-con>
+          <view v-for="(item, index) in swiperData1" :key="index" class="swiper-slide">
+            <img :src="item.image" />
+          </view>
+        </template>
+      </nut-swiper>
+    </view>
+    <h2>直播轮播样式</h2>
+    <view class="demo-box">
+      <nut-swiper
+        class="swiper2"
+        swipeid="swiper2"
+        ref="swiper2"
+        loop="true"
+        pagination="true"
+        paginationClass="swiper2-pagination"
+        slidesPerView="auto"
+        paginationPosiiton="outside"
+      >
+        <template v-slot:swiper-con>
+          <view v-for="(item, index) in swiperData2" :key="index" class="swiper-slide">
+            <img :src="item.image" />
+          </view>
+        </template>
+      </nut-swiper>
+    </view>
+    <h2>商品轮播样式</h2>
+    <view class="demo-box">
+      <nut-swiper class="swiper3" swipeid="swiper3" ref="swiper3" pagination="true" paginationClass="swiper3-pagination" paginationType="fraction">
+        <template v-slot:swiper-con>
+          <view v-for="(item, index) in swiperData3" :key="index" class="swiper-slide">
+            <img :src="item.image" />
+          </view>
+        </template>
+      </nut-swiper>
+    </view>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('swiper');
+// import mSwipe from "./components/HelloWorld";
+export default createDemo({
+  props: {},
+  setup() {
+    const data = reactive({
+      swiperData1: [
+        {
+          title: '第1个',
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/152371/17/7059/268929/5fbcb34cE2276dc0d/bb22de1b6f838ae4.png'
+        },
+        {
+          title: '第2个',
+          image: 'https://img11.360buyimg.com/imagetools/jfs/t1/152491/29/7102/178474/5fbcb34cE0713a25c/4cb9bbf205a4fca0.png'
+        },
+        {
+          title: '第3个',
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/152371/17/7059/268929/5fbcb34cE2276dc0d/bb22de1b6f838ae4.png'
+        },
+        {
+          title: '第4个',
+          image: 'https://img11.360buyimg.com/imagetools/jfs/t1/152491/29/7102/178474/5fbcb34cE0713a25c/4cb9bbf205a4fca0.png'
+        }
+      ],
+      swiperData2: [
+        {
+          image: 'https://img14.360buyimg.com/imagetools/jfs/t1/136318/2/17914/253972/5fbcb355E73dd171e/7afebc86dec494e4.png'
+        },
+        {
+          image: 'https://img14.360buyimg.com/imagetools/jfs/t1/136318/2/17914/253972/5fbcb355E73dd171e/7afebc86dec494e4.png'
+        },
+        {
+          image: 'https://img14.360buyimg.com/imagetools/jfs/t1/136318/2/17914/253972/5fbcb355E73dd171e/7afebc86dec494e4.png'
+        }
+      ],
+      swiperData3: [
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        },
+        {
+          image: 'https://img10.360buyimg.com/imagetools/jfs/t1/145583/3/15916/517992/5fbf4eebEc3f84d1d/060f933b48cec59f.png'
+        }
+      ]
+    });
+    return {
+      ...toRefs(data)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.demo-box {
+  position: relative;
+  border-radius: 7px;
+  img {
+    width: 100%;
+  }
+}
+/* demo2 */
+.swiper2 {
+  .swiper-slide {
+    width: 210px !important;
+    transform: scale(0.8);
+  }
+  .swiper-slide-active,
+  .swiper-slide-duplicate-active {
+    transform: scale(1);
+  }
+}
+/* demo3 */
+.swiper3 {
+}
+</style>
+<style>
+.swiper-container /deep/ .swiper-pagination-bullet-active {
+  background: linear-gradient(90deg, rgba(250, 32, 12, 1) 0%, rgba(250, 32, 12, 0.65) 100%);
+}
+/* demo1 */
+.swiper1 .swiper-pagination-bullet {
+  width: 8px !important;
+  height: 3px !important;
+  background: rgba(255, 255, 255, 0.51) !important;
+  border-radius: 2px !important;
+}
+.swiper1 /deep/ .swiper-pagination-bullet-active {
+  background: rgba(255, 255, 255, 1) !important;
+}
+/* demo2 */
+.swiper-pagination {
+  width: 100%;
+  left: 0;
+  position: relative;
+}
+.swiper-pagination-bullet {
+  margin: 0 4px;
+}
+.swiper2-pagination {
+  position: relative !important;
+}
+/* demo3 */
+.swiper3 .swiper-pagination {
+  display: inline-block;
+  width: auto !important;
+  left: auto !important;
+  right: 0;
+  height: 22px;
+  line-height: 22px;
+  padding: 0 15px;
+  color: #fff;
+  font-size: 12px;
+  letter-spacing: -2px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 11px;
+}
+.swiper-pagination-current {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/packages/swiper/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <view :class="swipeid" class="nut-swiper-container swiper-container">
+    <view class="swiper-wrapper">
+      <!-- 存放具体的轮播内容 -->
+      <slot name="swiper-con"></slot>
+    </view>
+    <!-- 分页器 -->
+    <div v-if="pagination && paginationPosiiton === 'inside'" :class="paginationClass" class="swiper-pagination"></div>
+  </view>
+  <div v-if="pagination && paginationPosiiton === 'outside'" :class="paginationClass" class="swiper-pagination"></div>
+</template>
+
+<script lang="ts">
+import Swiper from 'swiper';
+import { createComponent } from '@/utils/create';
+const { create } = createComponent('swiper');
+// import 'swiper/dist/css/swiper.min.css';
+// import { reactive, onMounted } from 'vue';
+import { onMounted } from 'vue';
+export default create({
+  props: {
+    variableClass: {
+      type: String,
+      default: ''
+    },
+    swipeid: {
+      type: String,
+      default: ''
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    slidesPerView: {
+      type: [Number, String],
+      default: 1
+    },
+    spaceBetween: {
+      type: [Number, String],
+      default: 0
+    },
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    paginationPosiiton: {
+      type: String,
+      default: 'inside'
+    },
+    paginationClass: {
+      type: String,
+      default: ''
+    },
+    paginationType: {
+      type: String,
+      default: 'bullets'
+    }
+  },
+  data() {
+    return {};
+  },
+  setup(props) {
+    // console.log('props', props);
+    // let mySwiper: any = reactive({});
+    // const { swipeid, loop: boolean, direction } = toRefs(props);
+    // mounted
+    function initSwiper() {
+      console.log('swipeid', props.swipeid);
+      // new Swiper(
+      // "." + (props.variableClass ? props.variableClass : "swiper-container"),
+      //   {
+      //     pagination: {
+      //     el: '.swiper-pagination'
+      //   },
+      //     observer: true   //当修改swiper的样式或者子元素时,swiper自动刷新
+      //   }
+      // );
+      new Swiper('.' + props.swipeid, {
+        loop: props.loop,
+        slidesPerView: props.slidesPerView,
+        spaceBetween: props.spaceBetween,
+        //分页器
+        pagination: {
+          el: '.' + props.paginationClass,
+          type: props.paginationType
+        },
+        // 分页类型
+        // paginationType: paginationType,
+        // //自动播放
+        // autoPlay: prop.autoPlay,
+        // 用户操作swiper之后，不禁止autoplay
+        observer: true,
+        observeParents: true
+      });
+    }
+    onMounted(() => {
+      initSwiper();
+      // new Swiper("."+ props.swipeid ,this.variableData);
+      // new Swiper(
+      // "." + (props.variableClass ? props.variableClass : "swiper-container"),
+      //   {
+      //     pagination: {
+      //       el: '.swiper-pagination'
+      //     },
+      //     observer: true   //当修改swiper的样式或者子元素时,swiper自动刷新
+      //   }
+      // );
+    });
+    return {
+      // mySwiper
+      // swiper
+    };
+  }
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import 'index.scss';
+</style>
+<style>
+.swiper-pagination .swiper-pagination-bullet {
+  width: 4px;
+  height: 4px;
+  opacity: 1;
+  background: linear-gradient(90deg, rgba(250, 32, 12, 1) 0%, rgba(250, 32, 12, 0.65) 100%);
+}
+.swiper-pagination /deep/ .swiper-pagination-bullet-active {
+  width: 10px;
+  border-radius: 3px;
+}
+</style>

src/packages/tab/index.vue

@@ -26,7 +26,8 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('tab');
 import TabTitle from './tabTitle';
 import Swiper from 'swiper';
-import 'swiper/swiper-bundle.css';
+// import 'swiper/swiper-bundle.css';
+import 'swiper/dist/css/swiper.min.css';
 type TabDirection = 'horizontal' | 'vertical';
 
 export default create({

src/sites/doc/components/Header.vue

@@ -17,10 +17,16 @@
       </div>
       <div class="nav-box">
         <ul class="nav-list">
-          <li class="nav-item nav-item-actie">指南</li>
-          <li class="nav-item">组件</li>
-          <li class="nav-item"><a href="http://localhost:8080/demo.html#/" style="color:#fff">示例</a></li>
-          <li class="nav-item">资源</li>
+          <li class="nav-item nav-item-actie">{{ header[0].cName }}</li>
+          <li class="nav-item">
+            <router-link :to="header[1].name">{{ header[1].cName }}</router-link>
+          </li>
+          <li class="nav-item"
+            ><a href="http://localhost:8080/demo.html#/" style="color:#fff">{{ header[2].cName }}</a></li
+          >
+          <li class="nav-item">
+            <router-link :to="header[3].name">{{ header[3].cName }}</router-link>
+          </li>
           <li class="nav-item">
             <div
               class="header-select-box"
@@ -42,7 +48,7 @@
             </div>
           </li>
           <li class="nav-item">
-            <a class="user-link" href="#"> </a>
+            <a class="user-link" href="#"></a>
           </li>
         </ul>
       </div>
@@ -51,6 +57,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import { header } from '@/config';
 export default defineComponent({
   name: 'doc-header',
   setup() {
@@ -79,6 +86,7 @@ export default defineComponent({
       data.verson = item.name;
     };
     return {
+      header,
       data,
       checkTheme
     };
@@ -255,11 +263,17 @@ export default defineComponent({
         .nav-box {
           .nav-item {
             color: $theme-red-word;
+            a {
+              color: $theme-red-word;
+            }
             &.nav-item-actie {
               color: $theme-red-actice;
               &:after {
                 background-position: 0 0;
               }
+              a {
+                color: $theme-red-actice;
+              }
             }
           }
           .user-link {
@@ -321,11 +335,17 @@ export default defineComponent({
         .nav-box {
           .nav-item {
             color: $theme-white-word;
+            a {
+              color: $theme-white-word;
+            }
             &.nav-item-actie {
               color: $theme-white-actice;
               &:after {
                 background-position: 0 -13px;
               }
+              a {
+                color: $theme-white-actice;
+              }
             }
           }
           .user-link {
@@ -387,11 +407,17 @@ export default defineComponent({
         .nav-box {
           .nav-item {
             color: $theme-black-word;
+            a {
+              color: $theme-black-word;
+            }
             &.nav-item-actie {
               color: $theme-black-actice;
               &:after {
                 background-position: 0 -13px;
               }
+              a {
+                color: $theme-black-actice;
+              }
             }
           }
           .user-link {

src/sites/doc/router.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Index from './views/Index.vue';
+import Resource from './views/Resource.vue';
 
 const pagesRouter: Array<RouteRecordRaw> = [];
 const files = require.context('@/packages', true, /doc\.md$/);
@@ -29,6 +30,11 @@ const routes: Array<RouteRecordRaw> = [
     name: '/',
     component: Index,
     children: pagesRouter
+  },
+  {
+    path: '/resource',
+    name: '/resource',
+    component: Resource
   }
 ];
 const router = createRouter({

src/sites/doc/views/Resource.vue

@@ -0,0 +1,298 @@
+<template>
+  <doc-header></doc-header>
+  <div class="resource-main">
+    <div class="resource-main-content">
+      <h3 class="sub-title">资源</h3>
+      <p class="sub-desc">这里汇总了Nut UI 相关的所有的资源</p>
+    </div>
+  </div>
+  <div class="resource-content">
+    <div class="resource-block">
+      <h4 class="sub-title">设计资源</h4>
+      <p class="sub-desc"
+        >这里提供 NUT UI 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。你可以在这个<span class="sub-red">地址</span>中反馈对新版本
+        Sketch Symbols 组件的意见。</p
+      >
+      <div class="no-data">
+        <img class="nodata-img-joy" src="../../assets/images/img-joy.png" />
+        <p class="nodata-desc">敬请期待</p>
+      </div>
+    </div>
+    <div class="resource-block">
+      <h4 class="sub-title">设计资源</h4>
+      <p class="sub-desc"
+        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
+        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
+      >
+      <div class="tab-box">
+        <div class="tab-hd">
+          <div
+            class="tab-hd-item"
+            :class="{ active: data.activeIndex === index }"
+            v-for="(item, index) in data.tabData"
+            :key="index"
+            @click="clickTab(index)"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+        <div class="tab-bd" v-show="data.activeIndex === 0">
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">Webpack那些你不知道的事</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务Webpack那些你不知道那些你不知道那些你不知道</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+        </div>
+        <div class="tab-bd" v-show="data.activeIndex === 1">
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+          <div class="design-item">
+            <img class="img-design" src="../../assets/images/img-article.jpg" />
+            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="resource-block">
+      <h4 class="sub-title">社区文章</h4>
+      <p class="sub-desc"
+        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Nut Ui？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
+        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
+      >
+      <ul class="article-box">
+        <li class="article-item">
+          <a class="article-link">
+            NutUI - 由京东出品，适合快速开发商城类h5、小程序的移动端 UI 组件库
+          </a>
+        </li>
+        <li class="article-item">
+          <a class="article-link">
+            NutUI - 由京东出品，适合快速开发商城类h5、小程序的移动端 UI 组件库
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <doc-footer></doc-footer>
+</template>
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import Header from '@/sites/doc/components/Header.vue';
+import Footer from '@/sites/doc/components/Footer.vue';
+export default defineComponent({
+  name: 'doc',
+  components: {
+    [Header.name]: Header,
+    [Footer.name]: Footer
+  },
+  setup() {
+    const data = reactive({
+      tabData: [
+        {
+          title: '全部文章'
+        },
+        {
+          title: '性能体验'
+        },
+        {
+          title: '性能体验'
+        },
+        {
+          title: '性能体验'
+        },
+        {
+          title: '性能体验'
+        }
+      ],
+      activeIndex: 0
+    });
+    const clickTab = (index: number) => {
+      console.log('22', index);
+      data.activeIndex = index;
+      console.log('33', data.activeIndex);
+    };
+    return {
+      data,
+      clickTab
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+$mainRed: #fa685d;
+.resource {
+  &-main {
+    background-color: #1d1d1d;
+    &-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding-top: 48px;
+      padding-bottom: 53px;
+      background: url('../../assets/images/bg-article.png') no-repeat;
+      background-size: 307px 200px;
+      background-position: right 280px top 0;
+      .sub-title {
+        margin-left: 8px;
+        margin-bottom: 40px;
+        line-height: 36px;
+        font-size: 30px;
+        color: $white;
+      }
+      .sub-desc {
+        line-height: 22px;
+        font-size: 16px;
+        color: $white;
+      }
+    }
+  }
+  &-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 50px 0;
+  }
+  &-block {
+    margin-bottom: 50px;
+    text-align: left;
+    .sub-title {
+      margin-bottom: 15px;
+      line-height: 42px;
+      font-size: 30px;
+      color: #1a1a1a;
+    }
+    .sub-desc {
+      margin-bottom: 40px;
+      line-height: 22px;
+      font-size: 16px;
+      color: #959fb1;
+    }
+    .sub-red {
+      color: #fa2c19;
+    }
+  }
+}
+.no-data {
+  text-align: center;
+  .nodata-img-joy {
+    width: 269px;
+    height: 153px;
+    margin-bottom: 30px;
+  }
+  .nodata-desc {
+    font-size: 16px;
+    color: #959fb1;
+  }
+}
+.tab {
+  &-box {
+  }
+  &-hd {
+    display: flex;
+    margin-bottom: 30px;
+  }
+  &-bd {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  &-hd-item {
+    margin-right: 40px;
+    line-height: 25px;
+    font-size: 18px;
+    color: #808080;
+    cursor: pointer;
+    &:first-child {
+      color: #1a1a1a;
+    }
+    &.active {
+      color: #e32c36;
+    }
+  }
+}
+.design {
+  &-item {
+    width: 280px;
+    margin-bottom: 45px;
+    .img-design {
+      width: 280px;
+      height: 170px;
+      margin-bottom: 20px;
+      border-radius: 5px;
+    }
+  }
+  &-title {
+    width: 280px;
+    height: 44px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #1d1d21;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+.article {
+  &-item {
+    position: relative;
+    padding-left: 34px;
+    margin-bottom: 20px;
+    color: $mainRed;
+    &:before {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      margin-top: -8px;
+      width: 12px;
+      height: 12px;
+      border: 2px solid #fa2c19;
+      border-radius: 50%;
+    }
+  }
+  &-link {
+    line-height: 22px;
+    font-size: 14px;
+    color: $mainRed;
+    cursor: pointer;
+  }
+}
+</style>