From f710c148795073b07c0d82dff67283d28924a413 Mon Sep 17 00:00:00 2001
From: 7small7 <1005349393@qq.com>
Date: Sat, 8 Jul 2023 20:44:19 +0800
Subject: [PATCH] update

---
 .DS_Store                                     |  Bin 6148 -> 10244 bytes
 App.vue                                       |   91 +
 basicPage/avatar/avatar.vue                   |  145 +
 basicPage/badge/badge.vue                     |  105 +
 basicPage/border/border.vue                   |  141 +
 basicPage/button/button.vue                   |  109 +
 basicPage/color/color.vue                     |  759 +++++
 basicPage/flex-layout/flex-layout.vue         |  456 +++
 basicPage/grid-layout/grid-layout.vue         |  169 +
 basicPage/icon/icon.vue                       |  231 ++
 basicPage/icon/iconfont.js                    |    3 +
 basicPage/shadow/shadow.vue                   |   79 +
 basicPage/tag/tag.vue                         |  141 +
 basicPage/test/test.vue                       |  261 ++
 basicPage/utils/color/index.vue               |  105 +
 basicPage/utils/message/index.vue             |  176 +
 basicPage/utils/number/index.vue              |  159 +
 basicPage/utils/string/index.vue              |   89 +
 common/config.js                              |    3 +
 componentsPage/action-sheet/action-sheet.vue  |  139 +
 componentsPage/calendar/calendar.vue          |  213 ++
 componentsPage/check-box/check-box.vue        |   95 +
 componentsPage/collapse/collapse.vue          |  119 +
 componentsPage/count-down/count-down.vue      |   78 +
 componentsPage/count-scroll/count-scroll.vue  |   68 +
 componentsPage/count-to/count-to.vue          |   68 +
 componentsPage/empty/empty.vue                |  101 +
 componentsPage/fab/fab.vue                    |  196 ++
 componentsPage/form/form.vue                  |  523 +++
 componentsPage/goods-nav/goods-nav.vue        |  126 +
 componentsPage/image-upload/image-upload.vue  |  273 ++
 .../index-list/avatar/index-list.vue          |   70 +
 componentsPage/index-list/base/index-list.vue |   63 +
 componentsPage/index-list/index-list.vue      |   40 +
 componentsPage/input/input.vue                |  231 ++
 componentsPage/keyboard/keyboard.vue          |  317 ++
 componentsPage/landscape/landscape.vue        |  185 +
 componentsPage/lazy-load/lazy-load.vue        |  102 +
 componentsPage/list/list.vue                  |  365 ++
 componentsPage/load-more/load-more.vue        |   81 +
 componentsPage/loading/loading.vue            |   86 +
 componentsPage/mock/index.list.js             |  585 ++++
 componentsPage/modal/modal.vue                |  277 ++
 componentsPage/nav-bar/nav-bar.vue            |  188 ++
 componentsPage/notice-bar/notice-bar.vue      |   93 +
 componentsPage/number-box/number-box.vue      |   80 +
 componentsPage/picker/picker.vue              |  303 ++
 componentsPage/popup/popup.vue                |  240 ++
 componentsPage/progress/progress.vue          |   97 +
 componentsPage/radio/radio.vue                |   89 +
 componentsPage/rate/rate.vue                  |   84 +
 componentsPage/read-more/read-more.vue        |   84 +
 componentsPage/scroll-list/scroll-list.vue    |  135 +
 componentsPage/select/select.vue              |  381 +++
 componentsPage/sign-board/sign-board.vue      |  134 +
 componentsPage/skeleton/skeleton.vue          |  236 ++
 componentsPage/slider/slider.vue              |   97 +
 componentsPage/static/images/empty/cart.jpg   |  Bin 0 -> 20320 bytes
 .../static/images/empty/comment.jpg           |  Bin 0 -> 19323 bytes
 componentsPage/static/images/empty/data.jpg   |  Bin 0 -> 19574 bytes
 .../static/images/empty/network.jpg           |  Bin 0 -> 21328 bytes
 componentsPage/static/images/empty/page.jpg   |  Bin 0 -> 21070 bytes
 .../static/images/empty/permission.jpg        |  Bin 0 -> 18967 bytes
 componentsPage/static/images/empty/search.jpg |  Bin 0 -> 20234 bytes
 componentsPage/steps/steps.vue                |  105 +
 componentsPage/sticky/sticky.vue              |   67 +
 componentsPage/subsection/subsection.vue      |   68 +
 componentsPage/swipe-action/swipe-action.vue  |  244 ++
 componentsPage/swiper/swiper.vue              |   73 +
 componentsPage/switch/switch.vue              |   96 +
 componentsPage/tabs/tabs.vue                  |   94 +
 componentsPage/time-line/time-line.vue        |  223 ++
 componentsPage/tips/tips.vue                  |  133 +
 componentsPage/toast/toast.vue                |  139 +
 .../verification-code-input.vue               |   91 +
 .../verification-code/verification-code.vue   |  158 +
 index.html                                    |   14 +
 libs/components/demo-title.vue                |   94 +
 libs/components/dynamic-demo-template.vue     |  689 ++++
 libs/components/multiple-options-demo.vue     |  147 +
 libs/components/nav-index-button.vue          |  169 +
 libs/mixin/dynamic_demo_mixin.js              |   52 +
 libs/mixin/template_page_mixin.js             |   60 +
 main.js                                       |   28 +
 manifest.json                                 |  133 +
 mock/basic_page.js                            |   88 +
 mock/components_page.js                       |  266 ++
 mock/template_page.js                         |  247 ++
 mock/vip_page.js                              |  299 ++
 pages.json                                    |  667 ++++
 pages/basic/basic.vue                         |  170 +
 pages/components/components.vue               |  167 +
 pages/index/index.vue                         |  146 +
 pages/template/template.vue                   |  194 ++
 pages/tuniao/tuniao.vue                       |  563 ++++
 pages/vip/vip.vue                             |  508 +++
 static/css/components/demo_page_common.scss   |  193 ++
 static/css/templatePage/custom_nav_bar.scss   |   38 +
 static/favicon.ico                            |  Bin 0 -> 67646 bytes
 store/$tn.mixin.js                            |   28 +
 store/index.js                                |   75 +
 takeOutPage/static/images/location.png        |  Bin 0 -> 5631 bytes
 takeOutPage/static/images/take_out_car.png    |  Bin 0 -> 9455 bytes
 takeOutPage/walking-route/walking-route.vue   |  226 ++
 template.h5.html                              |   38 +
 templatePage/animate/bubble/bubble.vue        |  226 ++
 templatePage/animate/hollow/hollow.vue        |  147 +
 templatePage/animate/loading/loading.vue      |  265 ++
 templatePage/animate/particle/particle.vue    |  149 +
 templatePage/animate/photo/photo.vue          |  264 ++
 templatePage/animate/suspended/suspended.vue  |  214 ++
 templatePage/animate/wave/wave.vue            |  122 +
 templatePage/article/demo1/demo1.vue          |  739 ++++
 templatePage/article/demo2/demo2.vue          |  739 ++++
 templatePage/health/qrcode/qrcode.vue         |  621 ++++
 templatePage/home/course/course.vue           |  732 ++++
 templatePage/home/design/design.vue           |  527 +++
 templatePage/home/job/job.vue                 |  558 ++++
 templatePage/home/music/music.vue             |  704 ++++
 templatePage/home/screen/screen.vue           |  704 ++++
 templatePage/home/wallpaper/wallpaper.vue     |  614 ++++
 templatePage/life/about/about.vue             |  267 ++
 templatePage/life/browser/browser.vue         |   37 +
 templatePage/life/candle/candle.vue           |  625 ++++
 templatePage/life/cover/cover.vue             |   22 +
 templatePage/life/cube/cube.vue               |   22 +
 templatePage/life/fullpage/fullpage.vue       |  159 +
 templatePage/life/outset/outset.vue           |  477 +++
 templatePage/life/pano/pano.vue               |   24 +
 templatePage/life/plus/plus.vue               |  303 ++
 templatePage/life/share/share.vue             |   54 +
 templatePage/login/demo1/demo1.vue            |  414 +++
 templatePage/login/demo2/demo2.vue            |  495 +++
 templatePage/login/demo3/demo3.vue            |  401 +++
 templatePage/login/demo4/demo4.vue            |  420 +++
 templatePage/my/demo1/demo1.vue               |  430 +++
 templatePage/my/demo2/demo2.vue               |  803 +++++
 templatePage/my/demo3/demo3.vue               |  957 ++++++
 templatePage/my/demo4/demo4.vue               | 1089 ++++++
 templatePage/time/clock/clock.vue             |  874 +++++
 thirdPage/short-video/short-video.vue         |  456 +++
 tuniao-ui/README.md                           |    4 +
 .../tn-action-sheet/tn-action-sheet.vue       |  202 ++
 .../tn-avatar-group/tn-avatar-group.vue       |  103 +
 tuniao-ui/components/tn-avatar/tn-avatar.vue  |  298 ++
 tuniao-ui/components/tn-badge/tn-badge.vue    |  173 +
 tuniao-ui/components/tn-button/tn-button.vue  |  302 ++
 .../components/tn-calendar/tn-calendar.vue    |  707 ++++
 .../tn-car-keyboard/tn-car-keyboard.vue       |  320 ++
 .../tn-cascade-selection.vue                  |  654 ++++
 .../tn-checkbox-group/tn-checkbox-group.vue   |  134 +
 .../components/tn-checkbox/tn-checkbox.vue    |  328 ++
 .../tn-circle-progress/tn-circle-progress.vue |  223 ++
 .../tn-collapse-item/tn-collapse-item.vue     |  236 ++
 .../components/tn-collapse/tn-collapse.vue    |   98 +
 .../tn-color-icon/tn-color-icon.vue           |  318 ++
 .../tn-column-notice/tn-column-notice.vue     |  251 ++
 .../tn-count-down/tn-count-down.vue           |  314 ++
 .../tn-count-scroll/tn-count-scroll.vue       |  171 +
 .../components/tn-count-to/tn-count-to.vue    |  231 ++
 tuniao-ui/components/tn-cropper/index.wxs     |  332 ++
 .../components/tn-cropper/tn-cropper.vue      |  574 ++++
 .../tn-custom-swiper-item/index.wxs           |  288 ++
 .../tn-custom-swiper-item.vue                 |  277 ++
 .../tn-custom-swiper/tn-custom-swiper.vue     |  535 +++
 tuniao-ui/components/tn-drag/index.wxs        |  265 ++
 tuniao-ui/components/tn-drag/tn-drag.vue      |  278 ++
 tuniao-ui/components/tn-empty/tn-empty.vue    |  190 ++
 tuniao-ui/components/tn-fab/tn-fab.vue        |  523 +++
 .../components/tn-form-item/tn-form-item.vue  |  457 +++
 tuniao-ui/components/tn-form/tn-form.vue      |  139 +
 .../components/tn-goods-nav/tn-goods-nav.vue  |  382 +++
 .../components/tn-grid-item/tn-grid-item.vue  |  114 +
 tuniao-ui/components/tn-grid/tn-grid.vue      |  111 +
 .../tn-image-upload-drag.vue                  |  995 ++++++
 .../tn-image-upload/tn-image-upload.vue       |  695 ++++
 .../tn-index-anchor/tn-index-anchor.vue       |   90 +
 .../tn-index-list/tn-index-list.vue           |  361 ++
 tuniao-ui/components/tn-input/tn-input.vue    |  427 +++
 .../components/tn-keyboard/tn-keyboard.vue    |  220 ++
 .../components/tn-landscape/tn-landscape.vue  |  225 ++
 .../components/tn-lazy-load/tn-lazy-load.vue  |  254 ++
 .../tn-line-progress/tn-line-progress.vue     |  143 +
 .../components/tn-list-cell/tn-list-cell.vue  |  209 ++
 .../components/tn-list-view/tn-list-view.vue  |  184 +
 .../components/tn-load-more/tn-load-more.vue  |  188 ++
 .../components/tn-loading/tn-loading.vue      |  114 +
 tuniao-ui/components/tn-modal/tn-modal.vue    |  246 ++
 .../components/tn-nav-bar/tn-nav-bar.vue      |  355 ++
 .../tn-notice-bar/tn-notice-bar.vue           |  209 ++
 .../tn-number-box/tn-number-box.vue           |  401 +++
 .../tn-number-keyboard/tn-number-keyboard.vue |  182 +
 tuniao-ui/components/tn-picker/tn-picker.vue  |  723 ++++
 tuniao-ui/components/tn-popup/tn-popup.vue    |  491 +++
 .../tn-radio-group/tn-radio-group.vue         |  124 +
 tuniao-ui/components/tn-radio/tn-radio.vue    |  276 ++
 tuniao-ui/components/tn-rate/tn-rate.vue      |  325 ++
 .../components/tn-read-more/tn-read-more.vue  |  222 ++
 .../tn-row-notice/tn-row-notice.vue           |  301 ++
 .../tn-scroll-list/tn-scroll-list.vue         |  177 +
 .../tn-scroll-view/tn-scroll-view.vue         |  401 +++
 tuniao-ui/components/tn-select/tn-select.vue  |  442 +++
 .../tn-sign-board/tn-sign-board.vue           |  690 ++++
 .../components/tn-skeleton/tn-skeleton.vue    |  254 ++
 tuniao-ui/components/tn-slider/tn-slider.vue  |  255 ++
 .../components/tn-stack-swiper/index-h5.wxs   |  657 ++++
 .../components/tn-stack-swiper/index.wxs      |  657 ++++
 .../tn-stack-swiper/tn-stack-swiper.vue       |  284 ++
 tuniao-ui/components/tn-steps/tn-steps.vue    |  346 ++
 tuniao-ui/components/tn-sticky/tn-sticky.vue  |  186 ++
 .../tn-subsection/tn-subsection.vue           |  410 +++
 .../components/tn-swipe-action-item/index.wxs |  230 ++
 .../tn-swipe-action-item.vue                  |  237 ++
 .../tn-swipe-action/tn-swipe-action.vue       |   61 +
 tuniao-ui/components/tn-swiper/tn-swiper.vue  |  364 ++
 tuniao-ui/components/tn-switch/tn-switch.vue  |  241 ++
 tuniao-ui/components/tn-tabbar/tn-tabbar.vue  |  576 ++++
 tuniao-ui/components/tn-table/tn-table.vue    |  100 +
 .../tn-tabs-swiper/tn-tabs-swiper.vue         |  444 +++
 tuniao-ui/components/tn-tabs/tn-tabs.vue      |  340 ++
 tuniao-ui/components/tn-tag/tn-tag.vue        |  223 ++
 tuniao-ui/components/tn-td/tn-td.vue          |  307 ++
 .../tn-time-line-item/tn-time-line-item.vue   |   71 +
 .../tn-time-line-item.vue_bk                  |   71 +
 .../components/tn-time-line/tn-time-line.vue  |   39 +
 .../tn-time-line/tn-time-line.vue_bk          |   39 +
 tuniao-ui/components/tn-tips/tn-tips.vue      |  240 ++
 tuniao-ui/components/tn-toast/tn-toast.vue    |  227 ++
 tuniao-ui/components/tn-tr/tn-tr.vue          |  210 ++
 .../components/tn-tree-node/tn-tree-node.vue  |  143 +
 .../components/tn-tree-view/tn-tree-view.vue  |   50 +
 .../tn-verification-code-input.vue            |  324 ++
 .../tn-verification-code.vue                  |  149 +
 .../components/tn-waterfall/tn-waterfall.vue  |  165 +
 tuniao-ui/iconfont.css                        | 2969 +++++++++++++++++
 tuniao-ui/index.js                            |   73 +
 tuniao-ui/index.scss                          |   13 +
 tuniao-ui/libs/config/color.js                |   15 +
 tuniao-ui/libs/config/zIndex.js               |   17 +
 tuniao-ui/libs/css/color.scss                 |  563 ++++
 tuniao-ui/libs/css/main.scss                  |  722 ++++
 tuniao-ui/libs/css/style.h5.scss              |   35 +
 tuniao-ui/libs/css/style.mp.scss              |   52 +
 tuniao-ui/libs/function/$parent.js            |   18 +
 tuniao-ui/libs/function/array.js              |   22 +
 tuniao-ui/libs/function/color.js              |  270 ++
 tuniao-ui/libs/function/deepClone.js          |   29 +
 tuniao-ui/libs/function/message.js            |   74 +
 tuniao-ui/libs/function/number.js             |  128 +
 tuniao-ui/libs/function/string.js             |   69 +
 tuniao-ui/libs/function/test.js               |  232 ++
 .../libs/function/updateCustomBarInfo.js      |   44 +
 tuniao-ui/libs/function/uuid.js               |   41 +
 tuniao-ui/libs/luch-request/adapters/index.js |   99 +
 .../luch-request/core/InterceptorManager.js   |   51 +
 tuniao-ui/libs/luch-request/core/Request.js   |  200 ++
 .../libs/luch-request/core/buildFullPath.js   |   20 +
 tuniao-ui/libs/luch-request/core/defaults.js  |   30 +
 .../libs/luch-request/core/dispatchRequest.js |    6 +
 .../libs/luch-request/core/mergeConfig.js     |  103 +
 tuniao-ui/libs/luch-request/core/settle.js    |   16 +
 .../libs/luch-request/helpers/buildURL.js     |   69 +
 .../libs/luch-request/helpers/combineURLs.js  |   14 +
 .../luch-request/helpers/isAbsoluteURL.js     |   14 +
 tuniao-ui/libs/luch-request/index.d.ts        |  116 +
 tuniao-ui/libs/luch-request/index.js          |    2 +
 tuniao-ui/libs/luch-request/utils.js          |  135 +
 tuniao-ui/libs/luch-request/utils/clone.js    |  264 ++
 tuniao-ui/libs/mixin/components_color.js      |   47 +
 tuniao-ui/libs/mixin/mixin.js                 |   68 +
 tuniao-ui/libs/mixin/mpShare.js               |   30 +
 tuniao-ui/libs/mixin/touch.js                 |   61 +
 tuniao-ui/libs/utils/area.js                  |    1 +
 tuniao-ui/libs/utils/async-validator.js       | 1356 ++++++++
 tuniao-ui/libs/utils/calendar.js              |  546 +++
 tuniao-ui/libs/utils/city.js                  |    1 +
 tuniao-ui/libs/utils/emitter.js               |   55 +
 tuniao-ui/libs/utils/province.js              |    1 +
 tuniao-ui/theme.scss                          |  183 +
 uni.scss                                      |    7 +
 util/request/index.js                         |   13 +
 util/request/requestInterceptors.js           |   15 +
 util/request/responseInterceptors.js          |   28 +
 283 files changed, 68347 insertions(+)
 create mode 100644 App.vue
 create mode 100644 basicPage/avatar/avatar.vue
 create mode 100644 basicPage/badge/badge.vue
 create mode 100644 basicPage/border/border.vue
 create mode 100644 basicPage/button/button.vue
 create mode 100644 basicPage/color/color.vue
 create mode 100644 basicPage/flex-layout/flex-layout.vue
 create mode 100644 basicPage/grid-layout/grid-layout.vue
 create mode 100644 basicPage/icon/icon.vue
 create mode 100644 basicPage/icon/iconfont.js
 create mode 100644 basicPage/shadow/shadow.vue
 create mode 100644 basicPage/tag/tag.vue
 create mode 100644 basicPage/test/test.vue
 create mode 100644 basicPage/utils/color/index.vue
 create mode 100644 basicPage/utils/message/index.vue
 create mode 100644 basicPage/utils/number/index.vue
 create mode 100644 basicPage/utils/string/index.vue
 create mode 100644 common/config.js
 create mode 100644 componentsPage/action-sheet/action-sheet.vue
 create mode 100644 componentsPage/calendar/calendar.vue
 create mode 100644 componentsPage/check-box/check-box.vue
 create mode 100644 componentsPage/collapse/collapse.vue
 create mode 100644 componentsPage/count-down/count-down.vue
 create mode 100644 componentsPage/count-scroll/count-scroll.vue
 create mode 100644 componentsPage/count-to/count-to.vue
 create mode 100644 componentsPage/empty/empty.vue
 create mode 100644 componentsPage/fab/fab.vue
 create mode 100644 componentsPage/form/form.vue
 create mode 100644 componentsPage/goods-nav/goods-nav.vue
 create mode 100644 componentsPage/image-upload/image-upload.vue
 create mode 100644 componentsPage/index-list/avatar/index-list.vue
 create mode 100644 componentsPage/index-list/base/index-list.vue
 create mode 100644 componentsPage/index-list/index-list.vue
 create mode 100644 componentsPage/input/input.vue
 create mode 100644 componentsPage/keyboard/keyboard.vue
 create mode 100644 componentsPage/landscape/landscape.vue
 create mode 100644 componentsPage/lazy-load/lazy-load.vue
 create mode 100644 componentsPage/list/list.vue
 create mode 100644 componentsPage/load-more/load-more.vue
 create mode 100644 componentsPage/loading/loading.vue
 create mode 100644 componentsPage/mock/index.list.js
 create mode 100644 componentsPage/modal/modal.vue
 create mode 100644 componentsPage/nav-bar/nav-bar.vue
 create mode 100644 componentsPage/notice-bar/notice-bar.vue
 create mode 100644 componentsPage/number-box/number-box.vue
 create mode 100644 componentsPage/picker/picker.vue
 create mode 100644 componentsPage/popup/popup.vue
 create mode 100644 componentsPage/progress/progress.vue
 create mode 100644 componentsPage/radio/radio.vue
 create mode 100644 componentsPage/rate/rate.vue
 create mode 100644 componentsPage/read-more/read-more.vue
 create mode 100644 componentsPage/scroll-list/scroll-list.vue
 create mode 100644 componentsPage/select/select.vue
 create mode 100644 componentsPage/sign-board/sign-board.vue
 create mode 100644 componentsPage/skeleton/skeleton.vue
 create mode 100644 componentsPage/slider/slider.vue
 create mode 100644 componentsPage/static/images/empty/cart.jpg
 create mode 100644 componentsPage/static/images/empty/comment.jpg
 create mode 100644 componentsPage/static/images/empty/data.jpg
 create mode 100644 componentsPage/static/images/empty/network.jpg
 create mode 100644 componentsPage/static/images/empty/page.jpg
 create mode 100644 componentsPage/static/images/empty/permission.jpg
 create mode 100644 componentsPage/static/images/empty/search.jpg
 create mode 100644 componentsPage/steps/steps.vue
 create mode 100644 componentsPage/sticky/sticky.vue
 create mode 100644 componentsPage/subsection/subsection.vue
 create mode 100644 componentsPage/swipe-action/swipe-action.vue
 create mode 100644 componentsPage/swiper/swiper.vue
 create mode 100644 componentsPage/switch/switch.vue
 create mode 100644 componentsPage/tabs/tabs.vue
 create mode 100644 componentsPage/time-line/time-line.vue
 create mode 100644 componentsPage/tips/tips.vue
 create mode 100644 componentsPage/toast/toast.vue
 create mode 100644 componentsPage/verification-code-input/verification-code-input.vue
 create mode 100644 componentsPage/verification-code/verification-code.vue
 create mode 100644 index.html
 create mode 100644 libs/components/demo-title.vue
 create mode 100644 libs/components/dynamic-demo-template.vue
 create mode 100644 libs/components/multiple-options-demo.vue
 create mode 100644 libs/components/nav-index-button.vue
 create mode 100644 libs/mixin/dynamic_demo_mixin.js
 create mode 100644 libs/mixin/template_page_mixin.js
 create mode 100644 main.js
 create mode 100644 manifest.json
 create mode 100644 mock/basic_page.js
 create mode 100644 mock/components_page.js
 create mode 100644 mock/template_page.js
 create mode 100644 mock/vip_page.js
 create mode 100644 pages.json
 create mode 100644 pages/basic/basic.vue
 create mode 100644 pages/components/components.vue
 create mode 100644 pages/index/index.vue
 create mode 100644 pages/template/template.vue
 create mode 100644 pages/tuniao/tuniao.vue
 create mode 100644 pages/vip/vip.vue
 create mode 100644 static/css/components/demo_page_common.scss
 create mode 100644 static/css/templatePage/custom_nav_bar.scss
 create mode 100644 static/favicon.ico
 create mode 100644 store/$tn.mixin.js
 create mode 100644 store/index.js
 create mode 100644 takeOutPage/static/images/location.png
 create mode 100644 takeOutPage/static/images/take_out_car.png
 create mode 100644 takeOutPage/walking-route/walking-route.vue
 create mode 100644 template.h5.html
 create mode 100644 templatePage/animate/bubble/bubble.vue
 create mode 100644 templatePage/animate/hollow/hollow.vue
 create mode 100644 templatePage/animate/loading/loading.vue
 create mode 100644 templatePage/animate/particle/particle.vue
 create mode 100644 templatePage/animate/photo/photo.vue
 create mode 100644 templatePage/animate/suspended/suspended.vue
 create mode 100644 templatePage/animate/wave/wave.vue
 create mode 100644 templatePage/article/demo1/demo1.vue
 create mode 100644 templatePage/article/demo2/demo2.vue
 create mode 100644 templatePage/health/qrcode/qrcode.vue
 create mode 100644 templatePage/home/course/course.vue
 create mode 100644 templatePage/home/design/design.vue
 create mode 100644 templatePage/home/job/job.vue
 create mode 100644 templatePage/home/music/music.vue
 create mode 100644 templatePage/home/screen/screen.vue
 create mode 100644 templatePage/home/wallpaper/wallpaper.vue
 create mode 100644 templatePage/life/about/about.vue
 create mode 100644 templatePage/life/browser/browser.vue
 create mode 100644 templatePage/life/candle/candle.vue
 create mode 100644 templatePage/life/cover/cover.vue
 create mode 100644 templatePage/life/cube/cube.vue
 create mode 100644 templatePage/life/fullpage/fullpage.vue
 create mode 100644 templatePage/life/outset/outset.vue
 create mode 100644 templatePage/life/pano/pano.vue
 create mode 100644 templatePage/life/plus/plus.vue
 create mode 100644 templatePage/life/share/share.vue
 create mode 100644 templatePage/login/demo1/demo1.vue
 create mode 100644 templatePage/login/demo2/demo2.vue
 create mode 100644 templatePage/login/demo3/demo3.vue
 create mode 100644 templatePage/login/demo4/demo4.vue
 create mode 100644 templatePage/my/demo1/demo1.vue
 create mode 100644 templatePage/my/demo2/demo2.vue
 create mode 100644 templatePage/my/demo3/demo3.vue
 create mode 100644 templatePage/my/demo4/demo4.vue
 create mode 100644 templatePage/time/clock/clock.vue
 create mode 100644 thirdPage/short-video/short-video.vue
 create mode 100644 tuniao-ui/README.md
 create mode 100644 tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
 create mode 100644 tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
 create mode 100644 tuniao-ui/components/tn-avatar/tn-avatar.vue
 create mode 100644 tuniao-ui/components/tn-badge/tn-badge.vue
 create mode 100644 tuniao-ui/components/tn-button/tn-button.vue
 create mode 100644 tuniao-ui/components/tn-calendar/tn-calendar.vue
 create mode 100644 tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
 create mode 100644 tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue
 create mode 100644 tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue
 create mode 100644 tuniao-ui/components/tn-checkbox/tn-checkbox.vue
 create mode 100644 tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
 create mode 100644 tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
 create mode 100644 tuniao-ui/components/tn-collapse/tn-collapse.vue
 create mode 100644 tuniao-ui/components/tn-color-icon/tn-color-icon.vue
 create mode 100644 tuniao-ui/components/tn-column-notice/tn-column-notice.vue
 create mode 100644 tuniao-ui/components/tn-count-down/tn-count-down.vue
 create mode 100644 tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
 create mode 100644 tuniao-ui/components/tn-count-to/tn-count-to.vue
 create mode 100644 tuniao-ui/components/tn-cropper/index.wxs
 create mode 100644 tuniao-ui/components/tn-cropper/tn-cropper.vue
 create mode 100644 tuniao-ui/components/tn-custom-swiper-item/index.wxs
 create mode 100644 tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue
 create mode 100644 tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
 create mode 100644 tuniao-ui/components/tn-drag/index.wxs
 create mode 100644 tuniao-ui/components/tn-drag/tn-drag.vue
 create mode 100644 tuniao-ui/components/tn-empty/tn-empty.vue
 create mode 100644 tuniao-ui/components/tn-fab/tn-fab.vue
 create mode 100644 tuniao-ui/components/tn-form-item/tn-form-item.vue
 create mode 100644 tuniao-ui/components/tn-form/tn-form.vue
 create mode 100644 tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
 create mode 100644 tuniao-ui/components/tn-grid-item/tn-grid-item.vue
 create mode 100644 tuniao-ui/components/tn-grid/tn-grid.vue
 create mode 100644 tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue
 create mode 100644 tuniao-ui/components/tn-image-upload/tn-image-upload.vue
 create mode 100644 tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
 create mode 100644 tuniao-ui/components/tn-index-list/tn-index-list.vue
 create mode 100644 tuniao-ui/components/tn-input/tn-input.vue
 create mode 100644 tuniao-ui/components/tn-keyboard/tn-keyboard.vue
 create mode 100644 tuniao-ui/components/tn-landscape/tn-landscape.vue
 create mode 100644 tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
 create mode 100644 tuniao-ui/components/tn-line-progress/tn-line-progress.vue
 create mode 100644 tuniao-ui/components/tn-list-cell/tn-list-cell.vue
 create mode 100644 tuniao-ui/components/tn-list-view/tn-list-view.vue
 create mode 100644 tuniao-ui/components/tn-load-more/tn-load-more.vue
 create mode 100644 tuniao-ui/components/tn-loading/tn-loading.vue
 create mode 100644 tuniao-ui/components/tn-modal/tn-modal.vue
 create mode 100644 tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
 create mode 100644 tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
 create mode 100644 tuniao-ui/components/tn-number-box/tn-number-box.vue
 create mode 100644 tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
 create mode 100644 tuniao-ui/components/tn-picker/tn-picker.vue
 create mode 100644 tuniao-ui/components/tn-popup/tn-popup.vue
 create mode 100644 tuniao-ui/components/tn-radio-group/tn-radio-group.vue
 create mode 100644 tuniao-ui/components/tn-radio/tn-radio.vue
 create mode 100644 tuniao-ui/components/tn-rate/tn-rate.vue
 create mode 100644 tuniao-ui/components/tn-read-more/tn-read-more.vue
 create mode 100644 tuniao-ui/components/tn-row-notice/tn-row-notice.vue
 create mode 100644 tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
 create mode 100644 tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
 create mode 100644 tuniao-ui/components/tn-select/tn-select.vue
 create mode 100644 tuniao-ui/components/tn-sign-board/tn-sign-board.vue
 create mode 100644 tuniao-ui/components/tn-skeleton/tn-skeleton.vue
 create mode 100644 tuniao-ui/components/tn-slider/tn-slider.vue
 create mode 100644 tuniao-ui/components/tn-stack-swiper/index-h5.wxs
 create mode 100644 tuniao-ui/components/tn-stack-swiper/index.wxs
 create mode 100644 tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
 create mode 100644 tuniao-ui/components/tn-steps/tn-steps.vue
 create mode 100644 tuniao-ui/components/tn-sticky/tn-sticky.vue
 create mode 100644 tuniao-ui/components/tn-subsection/tn-subsection.vue
 create mode 100644 tuniao-ui/components/tn-swipe-action-item/index.wxs
 create mode 100644 tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
 create mode 100644 tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
 create mode 100644 tuniao-ui/components/tn-swiper/tn-swiper.vue
 create mode 100644 tuniao-ui/components/tn-switch/tn-switch.vue
 create mode 100644 tuniao-ui/components/tn-tabbar/tn-tabbar.vue
 create mode 100644 tuniao-ui/components/tn-table/tn-table.vue
 create mode 100644 tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
 create mode 100644 tuniao-ui/components/tn-tabs/tn-tabs.vue
 create mode 100644 tuniao-ui/components/tn-tag/tn-tag.vue
 create mode 100644 tuniao-ui/components/tn-td/tn-td.vue
 create mode 100644 tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
 create mode 100644 tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
 create mode 100644 tuniao-ui/components/tn-time-line/tn-time-line.vue
 create mode 100644 tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
 create mode 100644 tuniao-ui/components/tn-tips/tn-tips.vue
 create mode 100644 tuniao-ui/components/tn-toast/tn-toast.vue
 create mode 100644 tuniao-ui/components/tn-tr/tn-tr.vue
 create mode 100644 tuniao-ui/components/tn-tree-node/tn-tree-node.vue
 create mode 100644 tuniao-ui/components/tn-tree-view/tn-tree-view.vue
 create mode 100644 tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
 create mode 100644 tuniao-ui/components/tn-verification-code/tn-verification-code.vue
 create mode 100644 tuniao-ui/components/tn-waterfall/tn-waterfall.vue
 create mode 100644 tuniao-ui/iconfont.css
 create mode 100644 tuniao-ui/index.js
 create mode 100644 tuniao-ui/index.scss
 create mode 100644 tuniao-ui/libs/config/color.js
 create mode 100644 tuniao-ui/libs/config/zIndex.js
 create mode 100644 tuniao-ui/libs/css/color.scss
 create mode 100644 tuniao-ui/libs/css/main.scss
 create mode 100644 tuniao-ui/libs/css/style.h5.scss
 create mode 100644 tuniao-ui/libs/css/style.mp.scss
 create mode 100644 tuniao-ui/libs/function/$parent.js
 create mode 100644 tuniao-ui/libs/function/array.js
 create mode 100644 tuniao-ui/libs/function/color.js
 create mode 100644 tuniao-ui/libs/function/deepClone.js
 create mode 100644 tuniao-ui/libs/function/message.js
 create mode 100644 tuniao-ui/libs/function/number.js
 create mode 100644 tuniao-ui/libs/function/string.js
 create mode 100644 tuniao-ui/libs/function/test.js
 create mode 100644 tuniao-ui/libs/function/updateCustomBarInfo.js
 create mode 100644 tuniao-ui/libs/function/uuid.js
 create mode 100644 tuniao-ui/libs/luch-request/adapters/index.js
 create mode 100644 tuniao-ui/libs/luch-request/core/InterceptorManager.js
 create mode 100644 tuniao-ui/libs/luch-request/core/Request.js
 create mode 100644 tuniao-ui/libs/luch-request/core/buildFullPath.js
 create mode 100644 tuniao-ui/libs/luch-request/core/defaults.js
 create mode 100644 tuniao-ui/libs/luch-request/core/dispatchRequest.js
 create mode 100644 tuniao-ui/libs/luch-request/core/mergeConfig.js
 create mode 100644 tuniao-ui/libs/luch-request/core/settle.js
 create mode 100644 tuniao-ui/libs/luch-request/helpers/buildURL.js
 create mode 100644 tuniao-ui/libs/luch-request/helpers/combineURLs.js
 create mode 100644 tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js
 create mode 100644 tuniao-ui/libs/luch-request/index.d.ts
 create mode 100644 tuniao-ui/libs/luch-request/index.js
 create mode 100644 tuniao-ui/libs/luch-request/utils.js
 create mode 100644 tuniao-ui/libs/luch-request/utils/clone.js
 create mode 100644 tuniao-ui/libs/mixin/components_color.js
 create mode 100644 tuniao-ui/libs/mixin/mixin.js
 create mode 100644 tuniao-ui/libs/mixin/mpShare.js
 create mode 100644 tuniao-ui/libs/mixin/touch.js
 create mode 100644 tuniao-ui/libs/utils/area.js
 create mode 100644 tuniao-ui/libs/utils/async-validator.js
 create mode 100644 tuniao-ui/libs/utils/calendar.js
 create mode 100644 tuniao-ui/libs/utils/city.js
 create mode 100644 tuniao-ui/libs/utils/emitter.js
 create mode 100644 tuniao-ui/libs/utils/province.js
 create mode 100644 tuniao-ui/theme.scss
 create mode 100644 uni.scss
 create mode 100644 util/request/index.js
 create mode 100644 util/request/requestInterceptors.js
 create mode 100644 util/request/responseInterceptors.js

diff --git a/.DS_Store b/.DS_Store
index cbdd17749f8460f9ead097eca88be5fbbcc001c5..c0bd868f229f63d44e49293dacdfb873fd80a06e 100644
GIT binary patch
literal 10244
zcmeHMJ7^S96uq<AWH%<ns6|ZWfQ^L_Qz$A5V_3mXA-00<W=%qNGfT27A{Gl4rc5g)
zAgCaiB8_Mv7!Way7B;q)f~AEJ@N?d0X5QU>GYLc_#hWm5H}9T1_sn^p+547=youJ-
zIFV08MV!J858`4ugkPLpM^3k#hxHIowdwK6N?31nAzg!0z$xGqa0)mDoC14A0lc%t
zQ5;a#U7Z3>0jEH$fLI@VoWcg$ww0Aj2QIP%fX$;>9{4;gKEV3g2HLijg$IYHLSa>?
zr%Mb^g`?fqxIo*svMQWBU3_>tv!^Q*PiDvceF-NoP}W_Y0#1Q$1w`$hrxP?yv(#ku
z`^ec<(^n5mrE)DSqpi5K_GW$a`1_08Kb7fk%ouwEqjHw+L*5xGQwzCkG(}ZfpgW8M
z<xU}o6=(8!`sLG#=97X=xNV1JJk?^<4~{o!5iBco6`!W5%2?*wuffuSGC7{Pw)#SI
zv?3FR*+|B($46r71Fw+k_zP*CF(W$H={Gr54r~p5Q2og6Q4bR~X&A;s=`^HyGz1Uy
z<~%i_noY63ktOiT#G5=HzFUd3+a@OAz0(->9EA<g!hEQqugkQ^wS4y6^qKtbuf=^E
z$C?`2{46hhRe41ZR%njry)O3U^0If~GxNTD@GI&+!=Gqi^YgrNtFD(CYE*YV@%Jal
zY<SJwx4u1!`h+2p>~;jpuinmm7$r?GXo?xep4}V$2nNh=a@aibJ9_>OOu`}!!+D$(
z`u9p6Ayy$iziDucdrc1hg_wg8Z}z?&!SbswI|EXMIn10ZSQDGpnM2_Za7jU$yzXwr
zV=@(;sI)zr^IaBt4T578<FbMIB6_cCWn5?-%)*+SZ;w8X##HLPO=Wk2XS|CWf_Fc-
z&S0!9;GJVzo#=GIjxxE9|D^qT?X=v_WSNa*{3wX{wXk~5Le-GQ#QTxWibJo~G`|j%
z$?wnGSWCgL3z_tNHj?o>ye|0V<><sao3Wz8Wz%PJx%c^Kq*WYiDrEDsyd>wR$n6fN
zfK$LJ;1qBQI0bg6K#vOd#s2@L^xyw?m&8Ro1)KtVS^+O#nk-F#qTXBYBAY{tkMjmj
zaR^*nSs8+hfQWXv9gly+cKk8j7Jqq%KhSM$Wo0<xWH{`9`Y{0e46MHJBt@fs=ar4C
j|EbFKqGi#2sWm!N&(;5#I|W?VK<H|z*O{XKr2hX4aLTv2

delta 214
zcmZn(XfcprU|?W$DortDU=RQ@Ie-{MGjUE#6q~50$jGrVU^gQp$7CJ>skjUlpbQIx
z9z!}qCPPVXzKcszPJR+d*KEi8b57_Sbwrg<!7E>oVHlj8pIZRb!@wYMfMN0)0g1_T
z1SW4xy}`1Wor6P=87#vfzzw8bK~CD3_?>w&zltNs%?yknrvL#H#L-}}&G9^Qm;vMV
BD*FHc

diff --git a/App.vue b/App.vue
new file mode 100644
index 0000000..1329aa4
--- /dev/null
+++ b/App.vue
@@ -0,0 +1,91 @@
+<script>
+  import Vue from 'vue'
+  import store from './store/index.js'
+  import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
+  
+	export default {
+		onLaunch: function() {
+			uni.getSystemInfo({
+			  success: function(e) {
+			    // #ifndef H5
+			    // 获取手机系统版本
+			    const system = e.system.toLowerCase()
+			    const platform = e.platform.toLowerCase()
+			    // 判断是否为ios设备
+			    if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
+			      Vue.prototype.SystemPlatform = 'apple'
+			    } else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
+			      Vue.prototype.SystemPlatform = 'android'
+			    } else {
+			      Vue.prototype.SystemPlatform = 'devtools'
+			    }
+			    // #endif
+			  }
+			})
+      
+      // 获取设备的状态栏信息和自定义顶栏信息
+      // store.dispatch('updateCustomBarInfo')
+      updateCustomBarInfo().then((res) => {
+        store.commit('$tStore', {
+          name: 'vuex_status_bar_height',
+          value: res.statusBarHeight
+        })
+        store.commit('$tStore', {
+          name: 'vuex_custom_bar_height',
+          value: res.customBarHeight
+        })
+      })
+			
+			// #ifdef MP-WEIXIN
+			//更新检测
+			if (wx.canIUse('getUpdateManager')) {
+			  const updateManager = wx.getUpdateManager();
+			  updateManager && updateManager.onCheckForUpdate((res) => {
+			    if (res.hasUpdate) {
+			      updateManager.onUpdateReady(() => {
+			        uni.showModal({
+			          title: '更新提示',
+			          content: '新版本已经准备就绪，是否需要重新启动应用？',
+			          success: (res) => {
+			            if (res.confirm) {
+			              uni.clearStorageSync() // 更新完成后刷新storage的数据
+			              updateManager.applyUpdate()
+			            }
+			          }
+			        })
+			      })
+			
+			      updateManager.onUpdateFailed(() => {
+			        uni.showModal({
+			          title: '已有新版本上线',
+			          content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
+                showCancel: false
+			        })
+			      })
+			    } else {
+			      //没有更新
+			    }
+			  })
+			} else {
+			  uni.showModal({
+			    title: '提示',
+			    content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
+          showCancel: false
+			  })
+			}
+      // #endif
+		},
+		onShow: function() {
+			// console.log('App Show')
+		},
+		onHide: function() {
+			// console.log('App Hide')
+		}
+	}
+</script>
+
+<style lang="scss">
+  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+  @import './tuniao-ui/index.scss';
+  @import './tuniao-ui/iconfont.css';
+</style>
diff --git a/basicPage/avatar/avatar.vue b/basicPage/avatar/avatar.vue
new file mode 100644
index 0000000..89b2502
--- /dev/null
+++ b/basicPage/avatar/avatar.vue
@@ -0,0 +1,145 @@
+<template>
+
+  <view class="basic-avatar tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>头像</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :shadow="true" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar size="sm" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar size="lg" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar size="xl" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar size="160rpx" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar shape="circle" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar shape="square" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="角标">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
+          </view>
+          <view class="tn-margin-sm">
+            <tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="头像组">
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
+        </view>
+        <view class="tn-margin-sm">
+          <tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicAvatar',
+    components: {demoTitle},
+    data() {
+      return {
+        src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
+        groupList: [
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {text: 'TN'},
+          {icon: 'logo-tuniao'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+        ]
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-avatar {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/basicPage/badge/badge.vue b/basicPage/badge/badge.vue
new file mode 100644
index 0000000..b8f8e90
--- /dev/null
+++ b/basicPage/badge/badge.vue
@@ -0,0 +1,105 @@
+<template>
+
+  <view class="basic-badge tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>微标</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <tn-badge :dot="true" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
+          <tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <tn-badge :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge :radius="60" :fontSize="30" margin="10rpx 10rpx"><text>99</text></tn-badge>
+          <tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <tn-badge backgroundColor="#01BEFF" :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="#FFFFFF" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge backgroundColor="tn-bg-teal" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
+          <tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
+        </view>
+      </demo-title>
+      
+      <demo-title title="微标使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
+              <text>99+</text>
+            </tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
+              <text>99+</text>
+            </tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
+              <text>99+</text>
+            </tn-badge>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
+          </view>
+          <view class="badge-demo">
+            <tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicBadge',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-badge {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  .badge-demo {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    background-color: #FFFFFF;
+    margin: 18rpx 20rpx;
+  }
+</style>
diff --git a/basicPage/border/border.vue b/basicPage/border/border.vue
new file mode 100644
index 0000000..a3c9e82
--- /dev/null
+++ b/basicPage/border/border.vue
@@ -0,0 +1,141 @@
+<template>
+
+  <view class="basic-border tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>边框</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="普通边框">
+        <view class="border-content tn-border-solid">
+          <view>四周边框</view>
+        </view>
+        <view class="border-content tn-border-solid-top">
+          <view>顶部边框</view>
+        </view>
+        <view class="border-content tn-border-solid-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-solid-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-solid-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="加粗边框">
+        <view class="border-content tn-border-solids">
+          <view>四周边框</view>
+        </view>
+        <view class="border-content tn-border-solids-top">
+          <view>顶部边框</view>
+        </view>
+        <view class="border-content tn-border-solids-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-solids-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-solids-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="虚线边框">
+        <view class="border-content tn-border-dashed">
+          <view>四周边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-top">
+          <view>顶部边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-right">
+          <view>右边边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-bottom">
+          <view>下面边框</view>
+        </view>
+        <view class="border-content tn-border-dashed-left">
+          <view>左边边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="隐藏某一边框">
+        <view class="border-content tn-border-solid tn-none-border-top">
+          <view>隐藏上边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-right">
+          <view>隐藏右边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-bottom">
+          <view>隐藏下边框</view>
+        </view>
+        <view class="border-content tn-border-solid tn-none-border-left">
+          <view>隐藏左边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-top">
+          <view>隐藏上边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-right">
+          <view>隐藏右边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-bottom">
+          <view>隐藏下边框</view>
+        </view>
+        <view class="border-content tn-border-dashed tn-none-border-left">
+          <view>隐藏左边框</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view class="border-content tn-border-solid tn-border-indigo">
+          
+        </view>
+        <view class="border-content tn-border-solids tn-border-green">
+          
+        </view>
+        <view class="border-content tn-border-dashed tn-border-purplered">
+          
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicBorder',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-border {
+    min-height: 100vh;
+  }
+  
+  
+  .border-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    background-color: #FFFFFF;
+    margin: 30rpx 0rpx;
+  }
+</style>
diff --git a/basicPage/button/button.vue b/basicPage/button/button.vue
new file mode 100644
index 0000000..45a6e43
--- /dev/null
+++ b/basicPage/button/button.vue
@@ -0,0 +1,109 @@
+<template>
+  
+  <view class="basic-button tn-safe-area-inset-bottom">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>按钮</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-button>按钮</tn-button>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view>
+          <tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button width="100%">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <tn-button margin="10rpx 10rpx">按钮</tn-button>
+        <tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
+        <tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+        <tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view>
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+        <view class="tn-margin-top">
+          <tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框">
+        <view>
+          <tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
+          <tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
+        </view>
+      </demo-title>
+      
+      <demo-title title="阴影">
+        <tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
+        <tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
+      </demo-title>
+      
+      <demo-title title="加载中">
+        <tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+      
+      <demo-title title="禁止点击">
+        <tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  
+  </view>
+  
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicButton',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-button {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/basicPage/color/color.vue b/basicPage/color/color.vue
new file mode 100644
index 0000000..4ec0ced
--- /dev/null
+++ b/basicPage/color/color.vue
@@ -0,0 +1,759 @@
+<template>
+  <view class="basic-background">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>背景</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+
+      <view class="tn-flex tn-flex-nowrap background-container">
+        <view class="background__left-container">
+          <scroll-view :style="[scrollViewStyle]" scroll-y>
+            <view class="background__left__picker">
+              <view class="background__left__picker__item-wrapper" @click="pickerColorClick(0)">
+                <view
+                  class="background__left__picker__item background__left__picker__item--basic picker-color-item-0"
+                  :class="[{'tn-shadow-blur': currentColorIndex === 0}]" style="background-color: #01BEFF;">
+                    <text class="tn-icon-logo-tuniao"></text>
+                  </view>
+              </view>
+              <block v-for="(item, index) in colorList" :key="index">
+                <view class="background__left__picker__item-wrapper" @click="pickerColorClick(index + 1)">
+                  <view class="background__left__picker__item" :class="[`picker-color-item-${index + 1} tn-bg-${item.color}`, {'tn-shadow-blur': currentColorIndex === index + 1}]"></view>
+                </view>
+              </block>
+              
+              <!-- 选中后的边框 -->
+              <view class="background__left__picker__item__select-wrapper" :style="[colorSelectItemStyle]">
+                <view class="circle-wrapper right">
+                  <view class="circle-progress right-circle"
+                    :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
+                </view>
+                <view class="circle-wrapper left">
+                  <view class="circle-progress left-circle"
+                    :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="background__right-container">
+          <scroll-view
+            v-if="!isUpdateColorInfo"
+            :style="[scrollViewStyle]"
+            scroll-y
+            :refresher-enabled="true"
+            lower-threshold="20"
+            :refresher-triggered="containerRefreshFlag"
+            @scroll="containerScroll"
+            @scrolltolower="containerScrollLower"
+            @refresherrefresh="containerRefresh"
+          >
+            <view class="background__right__show">
+              <block v-if="currentColorIndex === 0">
+                <view class="background__right__show--title">图鸟基础配色</view>
+                <!-- 色盘 start-->
+                <view class="box" >
+                  <view v-for="(item,index) in 16" :key="index" :class="'colorwheel-box colorwheel-' + (index+1)"></view>
+                </view>
+                <!-- 色盘 end-->
+                <view class="background__right__show__content">
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #01BEFF;">
+                    <view class="background__right__show__content__item--title">主色蓝</view>
+                    <view class="background__right__show__content__item--value">#01BEFF</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FBBD12;">
+                    <view class="background__right__show__content__item--title">主色橙</view>
+                    <view class="background__right__show__content__item--value">#FBBD12</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #00FFC6;">
+                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀青</view>
+                    <view class="background__right__show__content__item--value">#00FFC6</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FFF00D;">
+                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀黄</view>
+                    <view class="background__right__show__content__item--value">#FFF00D</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FF71D2;">
+                    <view class="background__right__show__content__item--title">辅助粉</view>
+                    <view class="background__right__show__content__item--value">#FF71D2</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #82B2FF;">
+                    <view class="background__right__show__content__item--title">辅助蓝</view>
+                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#82B2FF</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #080808;">
+                    <view class="background__right__show__content__item--title">文字颜色</view>
+                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#080808</view>
+                  </view>
+                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #F4F4F4;">
+                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">背景灰</view>
+                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#F4F4F4</view>
+                  </view>
+                </view>
+              </block>
+              <block v-else>
+                <view class="background__right__show--title">{{ selectColorInfo.name }}-{{ selectColorInfo.color }}</view>
+                
+                <view class="background__right__show__content">
+                  <block v-for="(value, key, index) in selectColorInfo.value" :key="index">
+                    <view class="background__right__show__content__item tn-shadow-blur" :class="[key === 'normal' ? `tn-bg-${selectColorInfo.color}` : `tn-bg-${selectColorInfo.color}--${key}`]">
+                      <view class="background__right__show__content__item--title" :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--title--light' : '']">{{ key }}</view>
+                      <view class="background__right__show__content__item--value" 
+                        :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--value--light' : '',{'tn-color-white': selectColorInfo.color === 'gray' && key === 'normal'}]"
+                      >
+                      {{ value }}</view>
+                    </view>
+                  </block>
+                </view>
+                
+                <block v-if="!['brown','grey','gray'].includes(selectColorInfo.color)">
+                  <view class="background__right__show--title background__right__show--title--gradient" :class="[`tn-cool-bg-color-${currentColorIndex % 16 + 1}`]">渐变色</view>
+                  
+                  <view class="background__right__show__content">
+                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}`]">
+                      <view class="background__right__show__content__item--title"></view>
+                      <view class="background__right__show__content__item--value"></view>
+                    </view>
+                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--reverse`]">
+                      <view class="background__right__show__content__item--title"></view>
+                      <view class="background__right__show__content__item--value"></view>
+                    </view>
+                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light`]">
+                      <view class="background__right__show__content__item--title"></view>
+                      <view class="background__right__show__content__item--value"></view>
+                    </view>
+                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light--reverse`]">
+                      <view class="background__right__show__content__item--title"></view>
+                      <view class="background__right__show__content__item--value"></view>
+                    </view>
+                  </view>
+                </block>
+              </block>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+
+    </view>
+
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'basicBackground',
+    data() {
+      return {
+        colorList: [{
+            name: '红色',
+            color: 'red',
+            value: {
+              normal: '#E83A30',
+              dark: '#BA2E26',
+              disabled: '#F39C97',
+              light: '#FAD8D6'
+            }
+          },
+          {
+            name: '紫红色',
+            color: 'purplered',
+            value: {
+              normal: '#E72F8C',
+              dark: '#B9266F',
+              disabled: '#F397C5',
+              light: '#FAD5E8'
+            }
+          },
+          {
+            name: '紫色',
+            color: 'purple',
+            value: {
+              normal: '#892FE8',
+              dark: '#6E26BA',
+              disabled: '#C497F3',
+              light: '#E7D5FA'
+            }
+          },
+          {
+            name: '蓝紫色',
+            color: 'bluepurple',
+            value: {
+              normal: '#5F4FD9',
+              dark: '#4C3FAE',
+              disabled: '#AFA7EC',
+              light: '#DFDCF7'
+            }
+          },
+          {
+            name: '海蓝色',
+            color: 'aquablue',
+            value: {
+              normal: '#3646FF',
+              dark: '#2B38CC',
+              disabled: '#9AA2FF',
+              light: '#D7DAFF'
+            }
+          },
+          {
+            name: '蓝色',
+            color: 'blue',
+            value: {
+              normal: '#3D7EFF',
+              dark: '#3165CC',
+              disabled: '#9EBEFF',
+              light: '#D8E5FF'
+            }
+          },
+          {
+            name: '靛蓝色',
+            color: 'indigo',
+            value: {
+              normal: '#31C9E8',
+              dark: '#27A1BA',
+              disabled: '#98E4F3',
+              light: '#D6F4FA'
+            }
+          },
+          {
+            name: '青色',
+            color: 'cyan',
+            value: {
+              normal: '#2DE8BD',
+              dark: '#24BA97',
+              disabled: '#96F3DE',
+              light: '#D5FAF2'
+            }
+          },
+          {
+            name: '青绿色',
+            color: 'teal',
+            value: {
+              normal: '#24F083',
+              dark: '#1DC069',
+              disabled: '#91F7C1',
+              light: '#D3FCE6'
+            }
+          },
+          {
+            name: '绿色',
+            color: 'green',
+            value: {
+              normal: '#31E749',
+              dark: '#27B93A',
+              disabled: '#98F3A4',
+              light: '#D6FADB'
+            }
+          },
+          {
+            name: '黄绿色',
+            color: 'yellowgreen',
+            value: {
+              normal: '#A4E82F',
+              dark: '#82BA26',
+              disabled: '#D1F397',
+              light: '#EDFAD5'
+            }
+          },
+          {
+            name: '酸橙色',
+            color: 'lime',
+            value: {
+              normal: '#D5EB00',
+              dark: '#AABC00',
+              disabled: '#E9F57F',
+              light: '#F7FBCC'
+            }
+          },
+          {
+            name: '黄色',
+            color: 'yellow',
+            value: {
+              normal: '#FFF420',
+              dark: '#CCC21A',
+              disabled: '#FFF88F',
+              light: '#FFFDD2'
+            }
+          },
+          {
+            name: '橘黄色',
+            color: 'orangeyellow',
+            value: {
+              normal: '#FFCA28',
+              dark: '#CCA220',
+              disabled: '#FFE493',
+              light: '#FFF4D4'
+            }
+          },
+          {
+            name: '橙色',
+            color: 'orange',
+            value: {
+              normal: '#FFA726',
+              dark: '#CC851E',
+              disabled: '#FFD392',
+              light: '#FFEDD4'
+            }
+          },
+          {
+            name: '橘红色',
+            color: 'orangered',
+            value: {
+              normal: '#FF7043',
+              dark: '#CC5A36',
+              disabled: '#FFB7A1',
+              light: '#FFE2D9'
+            }
+          },
+          {
+            name: '棕色',
+            color: 'brown',
+            value: {
+              normal: '#914F2C',
+              dark: '#743F23',
+              disabled: '#C8A795',
+              light: '#E9DCD5'
+            }
+          },
+          {
+            name: '玄灰色',
+            color: 'grey',
+            value: {
+              normal: '#78909C',
+              dark: '#5F7E8B',
+              disabled: '#C6D1D8',
+              light: '#E4E9EC'
+            }
+          },
+          {
+            name: '灰色',
+            color: 'gray',
+            value: {
+              normal: '#AAAAAA',
+              dark: '#838383',
+              disabled: '#E6E6E6',
+              light: '#F8F7F8'
+            }
+          }
+        ],
+        // scrollView的样式
+        scrollViewStyle: {
+          height: 0
+        },
+        // picker列表颜色列表信息
+        pickerColorInfos: [],
+        // picker列表颜色选中框样式
+        colorSelectItemStyle: {
+          top: 0,
+          left: 0
+        },
+        // 当前选中的颜色序号
+        currentColorIndex: 0,
+        // 内容容器滚动容器滚动的位置
+        containerScrollTop: 0,
+        // 标记是否正在更新数据
+        isUpdateColorInfo: false,
+        // 内容区域刷新标志
+        containerRefreshFlag: false,
+        // 当前选中颜色的色值信息
+        selectColorInfo: {}
+      }
+    },
+    onLoad() {
+      
+    },
+    onReady() {
+      // 等待加载组件完成
+      setTimeout(() => {
+        this.initScrollViewHeight()
+      }, 10)
+    },
+    methods: {
+      // 计算scrollView的高度
+      initScrollViewHeight() {
+        // 获取当前屏幕的安全高度
+        uni.getSystemInfo({
+          success: (systemInfo) => {
+            this.scrollViewStyle.height = (systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight) + 'px'
+            this.getPickerColorItemInfo()
+          }
+        })
+      },
+      // 内容容器滚动事件
+      containerScroll(e) {
+        // console.log(e);
+        // this.containerScrollTop = e.detail.scrollTop
+      },
+      // 内容scroll-view下拉刷新事件
+      containerRefresh(e) {
+        // console.log(e);
+        if (this.containerRefreshFlag) return
+        this.containerRefreshFlag = true
+        setTimeout(() => {
+          this.containerRefreshFlag = false
+        }, 10)
+        if (this.currentColorIndex - 1 < 0 || this.isUpdateColorInfo) return
+        this.pickerColorClick(this.currentColorIndex - 1)
+        
+      },
+      // 内容scroll-view滚动到底部触发事件
+      containerScrollLower(e) {
+        // console.log(e);
+        if (e.detail.direction === 'bottom') {
+          // console.log(e.detail.direction);
+          // 触发底部
+          // if (this.currentColorIndex + 1 > this.colorList.length || this.isUpdateColorInfo) return
+          // console.log('update');
+          // this.pickerColorClick(this.currentColorIndex + 1)
+        }
+      },
+      // 获取色值列表的位置信息
+      getPickerColorItemInfo() {
+        // 获取picker容器的信息
+        this._tGetRect('.background__left__picker').then((pickerInfo) => {
+          let view = uni.createSelectorQuery().in(this)
+          for (let i = 0; i <= this.colorList.length; i++) {
+            view.select('.picker-color-item-' + i).boundingClientRect()
+          }
+          view.exec(res => {
+            // 如果没有获取到，则重新获取
+            if (!res.length) {
+              setTimeout(() => {
+                this.getPickerColorItemInfo()
+                return
+              }, 10)
+            }
+            // 将每个选择颜色值的宽高，位置信息存入列表中
+            res.map((item, index) => {
+              this.pickerColorInfos.push({
+                x: (item.top - pickerInfo.top) + (item.height / 2),
+                y: (item.left - pickerInfo.left) + (item.width / 2)
+              })
+              
+              // 初始化选中的圆环
+              this.updatePickerColorSelectItem()
+              this.updateSelectColorInfo()
+            })
+          })
+        })
+      },
+      // 色值选择
+      pickerColorClick(index) {
+        if (index === this.currentColorIndex) {
+          return
+        }
+        this.currentColorIndex = index
+        this.updatePickerColorSelectItem()
+        this.updateSelectColorInfo()
+      },
+      // 设置选中圆环信息
+      updatePickerColorSelectItem() {
+        const colorInfos = this.pickerColorInfos[this.currentColorIndex]
+        this.colorSelectItemStyle.top = colorInfos.x - uni.upx2px(40) + 'px'
+        this.colorSelectItemStyle.left = colorInfos.y - uni.upx2px(40) + 'px'
+      },
+      // 设置选中颜色的信息
+      updateSelectColorInfo() {
+        if (this.currentColorIndex === 0) {
+          return
+        }
+        this.isUpdateColorInfo = true
+        this.$tn.message.loading('加载中...')
+        // this.containerScrollTop = Math.random()
+        setTimeout(() => {
+          // this.containerScrollTop = 0
+          this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
+          this.$tn.message.closeLoading()
+          this.isUpdateColorInfo = false
+        }, 10)
+        // setTimeout(() => {
+          
+        // }, 1000)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 色盘 start*/
+  .box{
+      position: relative;
+      margin: auto;
+      display: block;
+      width: 550rpx;
+      height: 600rpx;
+      background: none;
+  }
+  .colorwheel-box{
+      position: absolute;
+      width: 80%;
+      height: 50%;
+      left: 10%;
+      bottom: 20%;
+      border-radius: 100% 10rpx;
+      opacity: 0.4;
+  }
+  .colorwheel-1{
+      background: #2DE8BD;
+      transform: rotate(-78.75deg);
+  }
+  .colorwheel-2{
+      background: #24F083;
+      transform: rotate(-90deg);
+  }
+  .colorwheel-3{
+      background: #31E749;
+      transform: rotate(-101.25deg);
+  }
+  .colorwheel-4{
+      background: #A4E82F;
+      transform: rotate(-112.5deg);
+  }
+  .colorwheel-5{
+      background: #D5EB00;
+      transform: rotate(-123.75deg);
+  }
+  .colorwheel-6{
+      background: #FFF420;
+      transform: rotate(-135deg);
+  }
+  .colorwheel-7{
+      background: #FFCA28;
+      transform: rotate(-146.25deg);
+  }
+  .colorwheel-8{
+      background: #FFA726;
+      transform: rotate(-157.5deg);
+  }
+  .colorwheel-9{
+      background: #FF7043;
+      transform: rotate(-168.75deg);
+  }
+  .colorwheel-10{
+      background: #E83A30;
+      transform: rotate(0deg);
+  }
+  .colorwheel-11{
+      background: #E72F8C;
+      transform: rotate(-11.25deg);
+  }
+  .colorwheel-12{
+      background: #892FE8;
+      transform: rotate(-22.5deg);
+  }
+  .colorwheel-13{
+      background: #5F4FD9;
+      transform: rotate(-33.75deg);
+  }
+  .colorwheel-14{
+      background: #3646FF;
+      transform: rotate(-45deg);
+  }
+  .colorwheel-15{
+      background: #3D7EFF;
+      transform: rotate(-56.25deg);
+  }
+  .colorwheel-16{
+      background: #31C9E8;
+      transform: rotate(-67.5deg);
+  }
+  /* 色盘 end*/
+  
+  
+  /* 背景颜色容器 start */
+  .background-container {
+    .background {
+
+      /* 左边容器 start */
+      &__left-container {
+        width: 16%;
+        height: 100%;
+        box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      }
+
+      &__left {
+        &__picker {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 20rpx;
+          position: relative;
+          
+          &__item-wrapper {
+            width: 100%;
+          }
+
+          &__item {
+            width: 50rpx;
+            height: 50rpx;
+            margin: 18rpx auto;
+            border-radius: 50%;
+            border: none;
+            
+            &--basic {
+              text-align: center;
+              color: #FFFFFF;
+              line-height: 50rpx;
+            }
+
+            &__select-wrapper {
+              width: 80rpx;
+              height: 80rpx;
+              position: absolute;
+              
+              .circle-wrapper {
+                width: 40rpx;
+                height: 80rpx;
+                position: absolute;
+                top: 0;
+                overflow: hidden;
+                
+                &.right {
+                  right: 0;
+                }
+                
+                &.left {
+                  left: 0;
+                }
+                
+                .circle-progress {
+                  display: inline-block;
+                  width: 80rpx;
+                  height: 80rpx;
+                  border: 6rpx solid transparent;
+                  border-radius: 50%;
+                  position: absolute;
+                  top: 0;
+                  // transform: rotate(225deg);
+                  transform: rotate(45deg);
+                  
+                  &.right-circle {
+                    right: 0;
+                    border-bottom-color: transparent !important;
+                    border-left-color: transparent !important;
+                    // transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
+                  }
+                  
+                  &.left-circle {
+                    left: 0;
+                    border-top-color: transparent !important;
+                    border-right-color: transparent !important;
+                    // transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
+                  }
+                  
+                  // &--active {
+                  //   transform: rotate(45deg);
+                  // }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      /* 左边容器 end */
+
+      /* 右边容器 start */
+      &__right-container {
+        width: 84%;
+        height: 100%;
+      }
+      
+      &__right {
+        &__show {
+          padding: 30rpx;
+          overflow: hidden;
+          transform-origin: 0 50%;
+          // opacity: 0;
+          // transition: opacity 0.2s ease;
+          // transform: scaleX(0) rotate(-90deg);
+          // transform: rotateY(-90deg);
+          // transform: scaleX(0);
+          // transition: all 0.2s linear;
+          
+          &--visible {
+            // transform: scaleX(1) rotate(0deg);
+            // transform: rotateY(0deg);
+            // transform: scaleX(1);
+            opacity: 1;
+          }
+          
+          &--title {
+            font-size: 46rpx;
+            text-transform: capitalize;
+            
+            &--gradient {
+              -webkit-background-clip: text;
+              color: transparent;
+            }
+          }
+          
+          &__content {
+            
+            margin-top: 40rpx;
+            
+            &__item {
+              width: 100%;
+              height: 160rpx;
+              border-radius: 10rpx;
+              margin-bottom: 40rpx;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: center;
+              flex-wrap: wrap;
+              padding-left: 40rpx;
+              
+              &--title {
+                width: 100%;
+                font-size: 1.4em;
+                line-height: 1.4em;
+                color: #FFFFFF;
+                text-transform: capitalize;
+                
+                &--light {
+                  color: #080808 !important;
+                }
+              }
+              
+              &--value {
+                width: 100%;
+                font-size: 0.8em;
+                color: #AAAAAA;
+                
+                &--light {
+                  color: #818181 !important;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      /* 右边容器 end */
+    }
+  }
+
+  /* 背景颜色容器 end */
+
+  @-webkit-keyframes circleProgressLoad_right {
+    0% {
+      transform: rotate(225deg);
+    }
+
+    100% {
+      transform: rotate(45deg);
+    }
+  }
+  
+  @-webkit-keyframes circleProgressLoad_left {
+    0% {
+      transform: rotate(225deg);
+    }
+  
+    100% {
+      transform: rotate(45deg);
+    }
+  }
+</style>
diff --git a/basicPage/flex-layout/flex-layout.vue b/basicPage/flex-layout/flex-layout.vue
new file mode 100644
index 0000000..1960b64
--- /dev/null
+++ b/basicPage/flex-layout/flex-layout.vue
@@ -0,0 +1,456 @@
+<template>
+  
+  <view class="basic-flex tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Flex布局</tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="固定尺寸 & 元素">
+        <view class="tn-flex tn-flex-wrap">
+          <view class="tn-flex-basic-xs tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xs(20%)</view>
+          <view class="tn-flex-basic-md"></view>
+          <view class="tn-flex-basic-sm tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">sm(40%)</view>
+          <view class="tn-flex-basic-md"></view>
+          <view class="tn-flex-basic-md tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">md(50%)</view>
+          <view class="tn-flex-basic-lg tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">lg(60%)</view>
+          <view class="tn-flex-basic-xl tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xl(80%)</view>
+          <view class="tn-flex-basic-full tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">full(100%)</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例1">
+        <view class="tn-flex tn-flex-wrap">
+          <view class="tn-flex-basic-md">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-md">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-xs">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-xs">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-xs">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-xs">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-basic-xs">
+            <view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="比例布局 & 元素">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
+          <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
+        </view>
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
+          <view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
+        </view>
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
+          <view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
+          <view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">3</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例1">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例2">
+        <view class="tn-flex">
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例3">
+        <view class="tn-flex">
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例4">
+        <view class="tn-flex">
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例5">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例6">
+        <view class="tn-flex">
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例7">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例8">
+        <view class="tn-flex">
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例9">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例10">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-2">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例11">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例12">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-3">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例13">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+          <view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例14">
+        <view class="tn-flex">
+          <view class="tn-flex-1">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="水平对齐 & justify">
+        <view class="tn-flex tn-flex-row-left">
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
+        </view>
+        <view class="tn-flex tn-flex-row-right tn-margin-top-sm">
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">end</view>
+        </view>
+        <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
+        </view>
+        <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">around</view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
+          <view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例1">
+        <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例2">
+        <view class="tn-flex tn-flex-row-center tn-margin-top-sm">
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例3">
+        <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例4">
+        <view class="tn-flex tn-flex-row-around tn-margin-top-sm">
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例5">
+        <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
+          <view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="应用示例6">
+        <view class="tn-flex tn-flex-row-between tn-margin-top-sm">
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+          <view class="justify-content-item">
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
+            </view>
+            <view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
+            </view>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="垂直对齐 & align">
+        <view class="tn-flex tn-flex-col-top">
+          <view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
+          <view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">top</view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-margin-top-sm">
+          <view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
+          <view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">center</view>
+        </view>
+        <view class="tn-flex tn-flex-col-bottom tn-margin-top-sm">
+          <view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
+          <view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">bottom</view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+  
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'BasicFlexLayout',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    },
+    onLoad() {
+      
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* 内容容器 start */
+  .bg-flex-shadow{
+    background-color: #00C3FF;
+    z-index: 9999;
+  }
+  /* 内容容器 end */
+  
+</style>
diff --git a/basicPage/grid-layout/grid-layout.vue b/basicPage/grid-layout/grid-layout.vue
new file mode 100644
index 0000000..b895307
--- /dev/null
+++ b/basicPage/grid-layout/grid-layout.vue
@@ -0,0 +1,169 @@
+<template>
+
+  <view class="basic-grid">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Grid布局</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+        <tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col">
+          <block v-for="(item, index) in icons" :key="index">
+            <!-- #ifndef MP-WEIXIN -->
+            <tn-grid-item>
+              <view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;">
+                <text class="" :class="['tn-icon-' + item]"></text>
+              </view>
+            </tn-grid-item>
+            <!-- #endif-->
+            <!-- #ifdef MP-WEIXIN -->
+            <tn-grid-item :style="{width: gridItemWidth}">
+              <view class="icon__item--icon tn-cool-color-icon" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                <view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
+              </view>
+            </tn-grid-item>
+            <!-- #endif-->
+          </block>
+        </tn-grid>
+      </dynamic-demo-template>
+      
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'BasicGridLayout',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        showGrid: true,
+        align: 'left',
+        hoverClass: 'tn-hover',
+        col: 3,
+        icons: [
+             'zodiac-shu',
+             'zodiac-niu',
+             'zodiac-hu',
+             'zodiac-tu',
+             'zodiac-long',
+             'zodiac-she',
+             'zodiac-ma',
+             'zodiac-yang',
+             'zodiac-hou',
+             'zodiac-ji',
+             'zodiac-gou',
+             'zodiac-zhu',
+             'logo-tuniao',
+             ],
+        
+        tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '对齐方式',
+                optional: ['左对齐','居中','右对齐'],
+                methods: 'alignChange'
+              },
+              {
+                title: '点击效果',
+                optional: ['开启','关闭'],
+                methods: 'hoverChange'
+              },
+              {
+                title: '列数',
+                optional: ['3','4'],
+                methods: 'colChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    computed: {
+      // 兼容小程序
+      // #ifdef MP-WEIXIN
+      gridItemWidth() {
+        return 100 / this.col + '%'
+      },
+      // #endif
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 对齐方式控制
+      alignChange(event) {
+        switch(event.index) {
+          case 0:
+            this.align = 'left'
+            break
+          case 1:
+            this.align = 'center'
+            break
+          case 2:
+            this.align = 'right'
+            break
+        }
+      },
+      // 点击效果控制
+      hoverChange(event) {
+        this.hoverClass = event.index === 0 ? 'tn-hover' : 'none'
+      },
+      // 列数修改
+      colChange(event) {
+        this.col = event.index === 0 ? 3 : 4
+        this.$refs.demoTemplate.updateSectionScrollView()
+      },
+      
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .icon {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      margin-top: 0;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin: 30rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+  }
+</style>
diff --git a/basicPage/icon/icon.vue b/basicPage/icon/icon.vue
new file mode 100644
index 0000000..0fbc92a
--- /dev/null
+++ b/basicPage/icon/icon.vue
@@ -0,0 +1,231 @@
+<template>
+
+	<view class="basic-icon">
+
+		<!-- 顶部自定义导航 -->
+		<tn-nav-bar fixed>图标</tn-nav-bar>
+
+		<!-- 页面内容 -->
+		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+
+			<view class="search-fixed">
+				<view class="search-content">
+					<input class="search-content__input" placeholder-class="search-content__input-placeholder tn-color-blue"
+						placeholder="搜索 中文名/英文名" @input="saerchInput" />
+				</view>
+			</view>
+
+
+			<view class="" :style="{marginTop: vuex_custom_bar_height + 'px'}">
+
+				<block v-for="(item, index) in resultIconList" :key="index">
+
+					<!-- 分类标题-->
+					<view class="tn-text-center tn-text-xl tn-text-bold tn-margin-lg">
+						<text class="tn-icon-font"></text>
+						<text class="tn-padding-left-sm tn-padding-right-sm">{{ item.title }}</text>
+						<text class="tn-icon-font"></text>
+					</view>
+
+					<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
+						<view v-for="(icons_item, icons_index) in item.icons" :key="icons_index"
+							class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
+							:class="[{'icon__item--active': icons_index === currentIconIndex}]"
+							@click="clickIcon(icons_index, icons_item.name, icons_item.icon)">
+							<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+								<view :class="[`tn-icon-${icons_item.icon}`]"></view>
+							</view>
+							<view class="icon__item--title tn-text-ellipsis tn-text-df tn-color-grey">{{ icons_item.icon }}</view>
+              <!-- <view class="icon__item--title tn-text-ellipsis tn-text-xs tn-color-grey">{{ icons_item.name }}</view> -->
+						</view>
+					</view>
+
+				</block>
+			</view>
+
+			<view class="tn-text-center tn-margin-bottom-xl">
+				<view>
+          icon目前700+，支持
+          <text class="tn-color-orange tn-text-lg tn-padding-xs">中文、英文</text>
+          搜索
+        </view>
+				<button class=" tn-button--clear-style" open-type="feedback">
+					<view class="tn-margin tn-text-center">
+						<text>里面缺少你想要的吗？UI期待你的需求</text>
+						<text class="tn-color-blue">留言</text>
+					</view>
+				</button>
+			</view>
+
+			<view class="tn-padding-bottom"></view>
+
+		</view>
+
+	</view>
+
+</template>
+
+<script>
+	import iconData from './iconfont.js'
+	export default {
+		name: 'basicIcon',
+		data() {
+			return {
+				// 图标列表
+				iconList: iconData.data,
+				// 用户输入的内容
+				searchValue: '',
+				// 当前点击的图标序号
+				currentIconIndex: -1,
+			}
+		},
+		computed: {
+			resultIconList() {
+				//filter会改变原数组，故使用深拷贝
+				var newArr = JSON.parse(JSON.stringify(iconData.data))
+				if (!this.searchValue) return iconData.data
+				return newArr.filter((item1) => {
+					item1.icons = item1.icons.filter((item2) => {
+						if (item2.name.includes(this.searchValue) || item2.icon.includes(this.searchValue)) {
+							return item2
+						}
+					})
+					if (item1.icons.length > 0) {
+						return item1
+					}
+				})
+
+
+			}
+		},
+		methods: {
+			// input输入的内容
+			saerchInput(e) {
+				//重新设置为-1，避免选中之前选中的图标
+				this.currentIconIndex=-1;
+				this.searchValue = e.target.value;
+				this.resultIconList
+			},
+			// 点击图标
+			clickIcon(index, name ,icon) {
+				this.currentIconIndex = index
+				// this.$tn.message.toast(name, false, null, 'none', 5000)
+				//这里点击后直接复制图标名称。
+				uni.setClipboardData({
+					data: icon,
+					showToast: false,
+					success: () => {
+						console.log('success'); //复制成功
+						this.$tn.message.toast('已复制：' + icon, false, null, 'none', 5000)
+					}
+				});
+				// const save = function (e) {
+				//         e.clipboardData.setData('text/plain', name)
+				//         e.preventDefault() // 阻止默认行为
+				// }
+				// const once = {
+				//     once: true
+				// }
+				// document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
+				// document.execCommand('copy') // 执行copy方法
+
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.search-fixed {
+		position: fixed;
+		width: 100%;
+		transition: all 0.25s ease-out;
+		z-index: 1;
+	}
+
+	/* 搜索框 start */
+	.search-content {
+		padding-top: 16rpx;
+		margin: 40rpx 40rpx;
+
+		&__input {
+			caret-color: $tn-main-color;
+			width: 100%;
+			height: 70rpx;
+			line-height: 60rpx;
+			border-radius: 100rpx;
+			text-align: center;
+			margin: 0 auto;
+			background-color: #FFFFFF;
+			color: #080808;
+			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
+		}
+
+		&__input-placeholder {
+			font-size: 24rpx;
+		}
+	}
+
+	/* 搜索框 end */
+
+	/* 图标容器 start */
+	.icon-shadow {
+		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
+	}
+
+	.icon {
+		&__container {
+			margin-bottom: 30rpx;
+		}
+
+		&__item {
+			width: 30.4%;
+			background-color: #FFFFFF;
+			border-radius: 10rpx;
+			padding: 30rpx;
+			margin: 20rpx 10rpx;
+			margin-top: 0;
+			transform: scale(1);
+			transition: transform 0.2s linear;
+			transform-origin: center center;
+
+			&--active {
+				transform: scale(0.95);
+				box-shadow:
+					inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04),
+					inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03);
+			}
+
+			&--icon {
+				width: 80rpx;
+				height: 80rpx;
+				font-size: 60rpx;
+				border-radius: 50%;
+				margin-bottom: 18rpx;
+				position: relative;
+				z-index: 1;
+
+				&::after {
+					content: " ";
+					position: absolute;
+					z-index: -1;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					bottom: 0;
+					border-radius: inherit;
+					opacity: 1;
+					transform: scale(1, 1);
+					background-size: 100% 100%;
+					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+				}
+			}
+
+			&--title {
+				width: 100%;
+				text-align: center;
+			}
+		}
+	}
+
+	/* 图标容器 end */
+</style>
diff --git a/basicPage/icon/iconfont.js b/basicPage/icon/iconfont.js
new file mode 100644
index 0000000..5b15cb1
--- /dev/null
+++ b/basicPage/icon/iconfont.js
@@ -0,0 +1,3 @@
+export default {
+  data: [{"id":26,"name":"basics","title":"基础图标","icons":[{"id":97,"icon":"font","name":"字体文字"},{"id":153,"icon":"search","name":"搜索"},{"id":204,"icon":"scan","name":"扫描扫码扫一扫"},{"id":202,"icon":"qr-code","name":"二维码扫码"},{"id":621,"icon":"qr-code-circle","name":"小程序码扫码"},{"id":203,"icon":"qr-barcode","name":"条形码条码扫码"},{"id":201,"icon":"qr-beibei","name":"微信码扫码北北"},{"id":319,"icon":"circle-lack","name":"刷新加载圆"},{"id":320,"icon":"circle-arrow","name":"刷新箭头圆"},{"id":712,"icon":"refresh-simple","name":"刷新箭头圆"},{"id":608,"icon":"refresh","name":"刷新圆加载"},{"id":609,"icon":"refresh-square","name":"刷新方加载"},{"id":490,"icon":"loading","name":"加载"},{"id":703,"icon":"history","name":"历史记录"},{"id":398,"icon":"title","name":"标题竖线"},{"id":399,"icon":"sort","name":"排序排列"},{"id":206,"icon":"filter","name":"筛选过滤"},{"id":392,"icon":"sequence-vertical","name":"排序排列纵向"},{"id":393,"icon":"sequence","name":"排序排列横向"},{"id":709,"icon":"totop-simple","name":"返回顶部"},{"id":740,"icon":"cloud","name":"云"},{"id":741,"icon":"cloud-fill","name":"云"},{"id":207,"icon":"upload","name":"云上传"},{"id":208,"icon":"download","name":"云下载"},{"id":644,"icon":"upload-simple","name":"上传"},{"id":643,"icon":"download-simple","name":"下载"},{"id":109,"icon":"my-add","name":"人员增加添加"},{"id":553,"icon":"my-reduce","name":"人员减少删除"},{"id":316,"icon":"sex","name":"性别两性男女"},{"id":317,"icon":"sex-female","name":"女性"},{"id":318,"icon":"sex-male","name":"男性"},{"id":322,"icon":"circle","name":"圆形单选"},{"id":321,"icon":"circle-fill","name":"圆形单选选中"},{"id":325,"icon":"square","name":"方形多选"},{"id":555,"icon":"square-fill","name":"方形多选选中"},{"id":467,"icon":"install","name":"安装设置"},{"id":466,"icon":"install-fill","name":"安装设置"},{"id":337,"icon":"send","name":"发送分享转发"},{"id":336,"icon":"send-fill","name":"发送分享转发"},{"id":332,"icon":"share-triangle","name":"发送分享转发"},{"id":335,"icon":"share","name":"发送分享转发"},{"id":334,"icon":"share-circle","name":"发送分享转发"},{"id":333,"icon":"share-square","name":"发送分享转发"},{"id":142,"icon":"all","name":"全部"}]},{"id":10,"name":"internet","title":"社交电商","icons":[{"id":225,"icon":"wechat","name":"微信"},{"id":226,"icon":"wechat-fill","name":"微信"},{"id":606,"icon":"bookmark","name":"书签标签"},{"id":607,"icon":"bookmark-fill","name":"书签标签"},{"id":343,"icon":"star","name":"星星收藏"},{"id":342,"icon":"star-fill","name":"星星收藏"},{"id":711,"icon":"praise-simple","name":"点赞赞扬认可"},{"id":705,"icon":"praise-simple-fill","name":"点赞赞扬认可"},{"id":713,"icon":"tread-simple","name":"踩不认可"},{"id":715,"icon":"tread-simple-fill","name":"踩不认可"},{"id":341,"icon":"praise","name":"点赞赞扬认可"},{"id":340,"icon":"praise-fill","name":"点赞赞扬认可"},{"id":612,"icon":"tread","name":"踩不认可"},{"id":610,"icon":"tread-fill","name":"踩不认可"},{"id":351,"icon":"like-break","name":"心碎不喜欢"},{"id":352,"icon":"like-lack","name":"爱心喜欢心动"},{"id":353,"icon":"like","name":"爱心喜欢心动"},{"id":354,"icon":"like-fill","name":"爱心喜欢心动凶姐"},{"id":362,"icon":"flower","name":"花朵美好赞美"},{"id":361,"icon":"flower-fill","name":"花朵美好赞美"},{"id":697,"icon":"floral","name":"花朵美好赞美"},{"id":700,"icon":"floral-fill","name":"花朵美好赞美"},{"id":293,"icon":"image","name":"图片照片"},{"id":294,"icon":"image-fill","name":"图片照片"},{"id":500,"icon":"theme","name":"主题色板"},{"id":642,"icon":"theme-fill","name":"主题色板"},{"id":224,"icon":"moments","name":"时刻朋友圈"},{"id":270,"icon":"commissary","name":"杂货店小卖部商店"},{"id":551,"icon":"commissary-fill","name":"杂货店小卖部商店"},{"id":268,"icon":"shop","name":"商店商城商铺"},{"id":269,"icon":"shop-fill","name":"商店商城商铺"},{"id":521,"icon":"paperbag","name":"购物袋购买买买"},{"id":522,"icon":"paperbag-fill","name":"购物袋购买买买"},{"id":274,"icon":"shopbag","name":"购物袋购买买买"},{"id":273,"icon":"shopbag-fill","name":"购物袋购买买买"},{"id":559,"icon":"buy","name":"购物袋购买买买"},{"id":560,"icon":"buy-fill","name":"购物袋购买买买"},{"id":276,"icon":"basket","name":"购物车购买买买"},{"id":275,"icon":"basket-fill","name":"购物车购买买买"},{"id":278,"icon":"cart","name":"购物车购买买买"},{"id":277,"icon":"cart-fill","name":"购物车购买买买"},{"id":272,"icon":"coupon","name":"优惠券折扣"},{"id":271,"icon":"coupon-fill","name":"优惠券折扣"},{"id":619,"icon":"inventory","name":"库存清单"},{"id":616,"icon":"inventory-fill","name":"库存清单"},{"id":260,"icon":"tag","name":"标签折扣"},{"id":259,"icon":"tag-fill","name":"标签折扣"},{"id":192,"icon":"lucky-money","name":"红包福利"},{"id":193,"icon":"lucky-money-fill","name":"红包福利"},{"id":279,"icon":"ticket","name":"票据小票"},{"id":280,"icon":"ticket-fill","name":"票据小票"},{"id":281,"icon":"receipt","name":"收据回执"},{"id":282,"icon":"receipt-fill","name":"收据回执"},{"id":470,"icon":"first","name":"排名第一"},{"id":472,"icon":"second","name":"排名第二"},{"id":471,"icon":"third","name":"排名第三"},{"id":256,"icon":"trophy","name":"奖杯奖项"},{"id":255,"icon":"trophy-fill","name":"奖杯奖项"},{"id":154,"icon":"brand","name":"品牌商标"},{"id":461,"icon":"brand-fill","name":"品牌商标"},{"id":93,"icon":"sword","name":"剑战斗"},{"id":7,"icon":"sword-fill","name":"剑战斗"},{"id":346,"icon":"fire","name":"火热门"},{"id":347,"icon":"fire-fill","name":"火热门"},{"id":120,"icon":"vip","name":"会员"},{"id":121,"icon":"vip-fill","name":"会员"},{"id":266,"icon":"baby","name":"奶瓶娃娃宝宝"},{"id":267,"icon":"baby-fill","name":"奶瓶娃娃宝宝"},{"id":227,"icon":"service","name":"客服"},{"id":228,"icon":"service-fill","name":"客服"},{"id":633,"icon":"service-simple","name":"客服"},{"id":632,"icon":"service-simple-fill","name":"客服"},{"id":738,"icon":"fireworks","name":"烟花礼花火花"},{"id":541,"icon":"birthday","name":"生日蛋糕"},{"id":194,"icon":"prize","name":"奖品礼品礼盒"},{"id":195,"icon":"gift","name":"礼物礼品礼盒"},{"id":39,"icon":"vip-text","name":"会员"},{"id":556,"icon":"allday","name":"24小时全天"},{"id":2,"icon":"text-zgs","name":"掌柜说"},{"id":626,"icon":"text-xzx","name":"心之选"},{"id":628,"icon":"text-sale","name":"销售促销"},{"id":625,"icon":"text-free","name":"免费"},{"id":624,"icon":"text-best","name":"最好的"},{"id":627,"icon":"text-like","name":"喜欢"},{"id":629,"icon":"text-hot","name":"热门"}]},{"id":25,"name":"safe","title":"账号安全","icons":[{"id":287,"icon":"identity","name":"身份证卡片名片"},{"id":288,"icon":"identity-fill","name":"身份证卡片名片"},{"id":286,"icon":"bankcard","name":"卡片会员卡银行卡"},{"id":285,"icon":"bankcard-fill","name":"卡片会员卡银行卡"},{"id":283,"icon":"cardbag","name":"卡包"},{"id":284,"icon":"cardbag-fill","name":"卡包"},{"id":196,"icon":"pay","name":"钱包支付"},{"id":554,"icon":"pay-fill","name":"钱包支付"},{"id":529,"icon":"payment-wechat","name":"微信支付"},{"id":533,"icon":"payment-alipay","name":"支付宝支付"},{"id":197,"icon":"refund","name":"付款收款退款支付钱包"},{"id":198,"icon":"money","name":"付款收款退款支付钱包"},{"id":506,"icon":"money-fill","name":"付款收款退款支付钱包"},{"id":116,"icon":"funds","name":"资金支付钱包"},{"id":117,"icon":"funds-fill","name":"资金支付钱包"},{"id":302,"icon":"trusty","name":"保证认证"},{"id":301,"icon":"trusty-fill","name":"保证认证"},{"id":304,"icon":"safe","name":"安全防护"},{"id":303,"icon":"safe-fill","name":"安全防护"},{"id":314,"icon":"unlock","name":"安全解锁"},{"id":315,"icon":"lock","name":"安全上锁"},{"id":310,"icon":"eye-hide","name":"闭眼不可见"},{"id":311,"icon":"eye-close","name":"闭眼不可见"},{"id":312,"icon":"eye","name":"眼睛可见"},{"id":313,"icon":"eye-fill","name":"眼睛可见"},{"id":13,"icon":"login","name":"登录登入"},{"id":12,"icon":"logout","name":"退出登出"},{"id":200,"icon":"fingerprint","name":"指纹解锁"},{"id":199,"icon":"power","name":"关机关闭"},{"id":653,"icon":"password","name":"手势密码"}]},{"id":19,"name":"message","title":"消息提示","icons":[{"id":360,"icon":"message","name":"消息评论"},{"id":359,"icon":"message-fill","name":"消息评论"},{"id":358,"icon":"comment","name":"消息评论"},{"id":357,"icon":"comment-fill","name":"消息评论"},{"id":349,"icon":"topics","name":"话题讨论"},{"id":350,"icon":"topics-fill","name":"话题讨论"},{"id":355,"icon":"reply","name":"消息回复"},{"id":356,"icon":"reply-fill","name":"消息回复"},{"id":496,"icon":"email","name":"邮件信息"},{"id":502,"icon":"email-fill","name":"邮件信息"},{"id":96,"icon":"notice","name":"通知提示"},{"id":95,"icon":"notice-fill","name":"通知提示"},{"id":94,"icon":"notice-no","name":"关闭通知提示"},{"id":552,"icon":"notice-no-fill","name":"关闭通知提示"},{"id":254,"icon":"creative","name":"订阅灵感创意"},{"id":253,"icon":"creative-fill","name":"订阅灵感创意"},{"id":251,"icon":"creative-stop","name":"无订阅灵感创意"},{"id":252,"icon":"creative-stop-fill","name":"无订阅灵感创意"},{"id":237,"icon":"clock","name":"闹钟提醒"},{"id":238,"icon":"clock-fill","name":"闹钟提醒"},{"id":240,"icon":"time","name":"时间时钟"},{"id":239,"icon":"time-fill","name":"时间时钟"},{"id":734,"icon":"tip","name":"提示提醒"},{"id":421,"icon":"tip-fill","name":"提示提醒"},{"id":420,"icon":"tips","name":"提示提醒"},{"id":735,"icon":"tips-fill","name":"提示提醒"},{"id":404,"icon":"warning","name":"警告警示"},{"id":405,"icon":"warning-fill","name":"警告警示"},{"id":418,"icon":"help","name":"帮助中心"},{"id":419,"icon":"help-fill","name":"帮助中心"}]},{"id":9,"name":"edit","title":"文档操作","icons":[{"id":586,"icon":"folder","name":"文档文件"},{"id":587,"icon":"folder-fill","name":"文档文件"},{"id":720,"icon":"folder-add","name":"增加文档文件"},{"id":724,"icon":"folder-add-fill","name":"增加文档文件"},{"id":726,"icon":"folder-reduce","name":"减少文档文件"},{"id":725,"icon":"folder-reduce-fill","name":"减少文档文件"},{"id":590,"icon":"folder-upload","name":"文档文件上传"},{"id":592,"icon":"folder-upload-fill","name":"文档文件上传"},{"id":591,"icon":"folder-download","name":"文档文件下载"},{"id":588,"icon":"folder-download-fill","name":"文档文件下载"},{"id":291,"icon":"order","name":"订单列表"},{"id":292,"icon":"order-fill","name":"订单列表"},{"id":289,"icon":"calendar","name":"日历日期日签"},{"id":290,"icon":"calendar-fill","name":"日历日期日签"},{"id":295,"icon":"image-text","name":"图文详情"},{"id":296,"icon":"image-text-fill","name":"图文详情"},{"id":305,"icon":"edit","name":"编辑编写"},{"id":306,"icon":"edit-form","name":"编辑编写"},{"id":307,"icon":"edit-write","name":"编辑编写"},{"id":18,"icon":"edit-write-fill","name":"编辑编写"},{"id":309,"icon":"write","name":"编辑编写"},{"id":308,"icon":"write-fill","name":"编辑编写"},{"id":730,"icon":"write-feather","name":"编辑编写"},{"id":736,"icon":"write-feather-fill","name":"编辑编写"},{"id":710,"icon":"pushpin","name":"书签图钉"},{"id":716,"icon":"pushpin-fill","name":"书签图钉"},{"id":45,"icon":"shears","name":"剪刀剪掉"},{"id":578,"icon":"tailor","name":"裁剪剪掉"},{"id":538,"icon":"pin","name":"别针回形针"},{"id":155,"icon":"link","name":"链接跳转"},{"id":573,"icon":"move","name":"移动操作"},{"id":562,"icon":"expend","name":"全屏"},{"id":561,"icon":"compress","name":"全屏"},{"id":526,"icon":"fullscreen","name":"全屏"},{"id":527,"icon":"narrow","name":"全屏"},{"id":563,"icon":"fullscreen-all","name":"全屏"},{"id":572,"icon":"narrow-all","name":"全屏"},{"id":672,"icon":"bigscreen","name":"全屏"},{"id":528,"icon":"smallscreen","name":"全屏"},{"id":324,"icon":"copy","name":"复制粘贴"},{"id":323,"icon":"copy-fill","name":"复制粘贴"},{"id":623,"icon":"task","name":"复制粘贴"},{"id":622,"icon":"task-fill","name":"复制粘贴"},{"id":205,"icon":"revoke","name":"返回取消"},{"id":414,"icon":"success","name":"成功对的"},{"id":416,"icon":"close","name":"关闭错的"},{"id":412,"icon":"success-circle","name":"成功"},{"id":411,"icon":"success-circle-fill","name":"成功"},{"id":417,"icon":"close-circle","name":"关闭"},{"id":415,"icon":"close-fill","name":"关闭"},{"id":410,"icon":"success-square","name":"成功多选"},{"id":413,"icon":"success-square-fill","name":"成功多选"},{"id":549,"icon":"close-square","name":"关闭删除"},{"id":550,"icon":"close-square-fill","name":"关闭删除"},{"id":382,"icon":"backspace","name":"回退删除"},{"id":383,"icon":"backspace-fill","name":"回退删除"},{"id":242,"icon":"delete","name":"删除垃圾桶"},{"id":243,"icon":"delete-fill","name":"删除垃圾桶"},{"id":244,"icon":"clear","name":"清除打扫"},{"id":462,"icon":"clear-fill","name":"清除打扫"},{"id":447,"icon":"add","name":"添加增加"},{"id":449,"icon":"reduce","name":"减少删除"},{"id":446,"icon":"add-circle","name":"添加增加"},{"id":448,"icon":"add-fill","name":"添加增加"},{"id":452,"icon":"reduce-circle","name":"减少删除"},{"id":453,"icon":"reduce-circle-fill","name":"减少删除"},{"id":547,"icon":"add-square","name":"添加增加"},{"id":548,"icon":"add-square-fill","name":"添加增加"},{"id":451,"icon":"reduce-square","name":"减少删除"},{"id":450,"icon":"reduce-square-fill","name":"减少删除"},{"id":605,"icon":"add-rhombus","name":"添加增加"},{"id":604,"icon":"add-rhombus-fill","name":"添加增加"},{"id":676,"icon":"reduce-rhombus","name":"减少删除"},{"id":678,"icon":"reduce-rhombus-fill","name":"减少删除"},{"id":409,"icon":"zoom-in","name":"放大"},{"id":408,"icon":"zoom-in-fill","name":"放大"},{"id":406,"icon":"zoom-out","name":"缩小"},{"id":407,"icon":"zoom-out-fill","name":"缩小"},{"id":688,"icon":"norm","name":"规则规范"},{"id":689,"icon":"norm-fill","name":"规则规范"},{"id":402,"icon":"more-circle","name":"更多"},{"id":403,"icon":"more-circle-fill","name":"更多"},{"id":476,"icon":"circle-more","name":"更多组"},{"id":330,"icon":"group-circle","name":"更多组"},{"id":331,"icon":"group-null","name":"更多组"},{"id":401,"icon":"more-horizontal","name":"更多组"},{"id":400,"icon":"more-vertical","name":"更多组"},{"id":329,"icon":"group-triangle","name":"更多组"},{"id":328,"icon":"group-square","name":"更多组"},{"id":327,"icon":"group-double","name":"更多组"},{"id":396,"icon":"align-left","name":"左对齐"},{"id":394,"icon":"align-center","name":"居中对齐"},{"id":395,"icon":"align-right","name":"右对齐"},{"id":397,"icon":"align","name":"两端对齐"}]},{"id":8,"name":"direction","title":"箭头方向","icons":[{"id":442,"icon":"up-circle","name":"向上往上上面"},{"id":445,"icon":"up-fill","name":"向上往上上面"},{"id":439,"icon":"right-circle","name":"向右往右右边"},{"id":435,"icon":"right-fill","name":"向右往右右边"},{"id":430,"icon":"down-circle","name":"向下往下下面"},{"id":432,"icon":"down-fill","name":"向下往下下面"},{"id":426,"icon":"left-circle","name":"向左往左左边"},{"id":424,"icon":"left-fill","name":"向左往左左边"},{"id":441,"icon":"up-arrow","name":"向上往上上面"},{"id":436,"icon":"right-arrow","name":"向右往右右边"},{"id":429,"icon":"down-arrow","name":"向下往下下面"},{"id":427,"icon":"left-arrow","name":"向左往左左边"},{"id":440,"icon":"up","name":"向上往上上面"},{"id":434,"icon":"right","name":"向右往右右边"},{"id":428,"icon":"down","name":"向下往下下面"},{"id":422,"icon":"left","name":"向左往左左边"},{"id":444,"icon":"up-double","name":"向上往上上面"},{"id":437,"icon":"right-double","name":"向右往右右边"},{"id":431,"icon":"down-double","name":"向下往下下面"},{"id":425,"icon":"left-double","name":"向左往左左边"},{"id":443,"icon":"up-triangle","name":"向上往上上面"},{"id":438,"icon":"right-triangle","name":"向右往右右边"},{"id":433,"icon":"down-triangle","name":"向下往下下面"},{"id":423,"icon":"left-triangle","name":"向左往左左边"},{"id":645,"icon":"on","name":"打开"},{"id":646,"icon":"off","name":"关上关闭"}]},{"id":18,"name":"media","title":"媒体音乐","icons":[{"id":371,"icon":"sing","name":"唱歌音乐"},{"id":372,"icon":"music-fill","name":"播放音乐"},{"id":373,"icon":"music-stop","name":"停止播放音乐"},{"id":377,"icon":"voice","name":"话筒语音"},{"id":376,"icon":"voice-fill","name":"话筒语音"},{"id":375,"icon":"video","name":"视频播放"},{"id":374,"icon":"video-fill","name":"视频播放"},{"id":614,"icon":"video-square","name":"视频播放"},{"id":615,"icon":"video-square-fill","name":"视频播放"},{"id":613,"icon":"play","name":"播放"},{"id":380,"icon":"play-fill","name":"播放"},{"id":381,"icon":"stop","name":"停止播放"},{"id":687,"icon":"previous-song","name":"上一首上一曲"},{"id":691,"icon":"previous-song-fill","name":"上一首上一曲"},{"id":679,"icon":"next-song","name":"下一首下一曲"},{"id":685,"icon":"next-song-fill","name":"下一首下一曲"},{"id":378,"icon":"previous-fill","name":"快退上一首"},{"id":379,"icon":"next-fill","name":"快进下一首"},{"id":390,"icon":"sound-add","name":"音量增加"},{"id":391,"icon":"sound-add-fill","name":"音量增加"},{"id":389,"icon":"sound-reduce","name":"音量减少"},{"id":388,"icon":"sound-reduce-fill","name":"音量减少"},{"id":385,"icon":"sound-close","name":"静音音量"},{"id":384,"icon":"sound-close-fill","name":"静音音量"},{"id":387,"icon":"sound","name":"声音音量"},{"id":386,"icon":"sound-fill","name":"声音音量"},{"id":611,"icon":"audio","name":"音频语音"}]},{"id":5,"name":"electronics","title":"设备程序","icons":[{"id":161,"icon":"phone","name":"手机"},{"id":162,"icon":"phone-fill","name":"手机"},{"id":159,"icon":"ipad","name":"平板"},{"id":160,"icon":"ipad-fill","name":"平板"},{"id":44,"icon":"headset","name":"耳机"},{"id":677,"icon":"headset-fill","name":"耳机"},{"id":42,"icon":"mouse","name":"鼠标"},{"id":463,"icon":"mouse-fill","name":"鼠标"},{"id":46,"icon":"notebook","name":"笔记本"},{"id":43,"icon":"notebook-fill","name":"笔记本"},{"id":28,"icon":"platform","name":"电脑显示屏数据"},{"id":27,"icon":"platform-fill","name":"电脑显示屏数据"},{"id":157,"icon":"computer","name":"电脑显示屏"},{"id":158,"icon":"computer-fill","name":"电脑显示屏"},{"id":258,"icon":"game","name":"游戏机"},{"id":257,"icon":"game-fill","name":"游戏机"},{"id":367,"icon":"camera","name":"相机拍照拍摄"},{"id":368,"icon":"camera-fill","name":"相机拍照拍摄"},{"id":369,"icon":"live-stream","name":"直播录像"},{"id":370,"icon":"live-stream-fill","name":"直播录像"},{"id":544,"icon":"monitor","name":"监控摄像头"},{"id":464,"icon":"monitor-fill","name":"监控摄像头"},{"id":102,"icon":"server","name":"服务器"},{"id":33,"icon":"server-fill","name":"服务器"},{"id":163,"icon":"tel","name":"电话"},{"id":165,"icon":"tel-circle","name":"电话"},{"id":164,"icon":"tel-circle-fill","name":"电话"},{"id":248,"icon":"keyboard","name":"键盘"},{"id":247,"icon":"keyboard-circle","name":"键盘"},{"id":460,"icon":"keyboard-circle-fill","name":"键盘"},{"id":530,"icon":"cursor","name":"鼠标箭头光标"},{"id":531,"icon":"cursor-fill","name":"鼠标箭头光标"},{"id":474,"icon":"program","name":"小程序"},{"id":475,"icon":"program-fill","name":"小程序"},{"id":543,"icon":"iot","name":"物联网"},{"id":545,"icon":"iot-fill","name":"物联网"},{"id":156,"icon":"code","name":"代码编程"},{"id":492,"icon":"bigbug","name":"漏洞虫子爬虫"},{"id":15,"icon":"bug","name":"漏洞"},{"id":16,"icon":"bug-fill","name":"漏洞"},{"id":209,"icon":"fork","name":"分支"},{"id":211,"icon":"master","name":"主分支"},{"id":210,"icon":"relation","name":"关系连接"},{"id":250,"icon":"wifi","name":"有wifi"},{"id":249,"icon":"wifi-no","name":"无wifi"},{"id":52,"icon":"bluetooth","name":"蓝牙"},{"id":593,"icon":"hotspot","name":"热点"},{"id":47,"icon":"battery-empty","name":"没电"},{"id":48,"icon":"battery-low","name":"低电量"},{"id":49,"icon":"battery-mid","name":"电量中"},{"id":50,"icon":"battery-high","name":"电量高"},{"id":51,"icon":"battery-full","name":"满电"}]},{"id":6,"name":"health","title":"运动健康","icons":[{"id":170,"icon":"sport-jog","name":"慢跑"},{"id":171,"icon":"sport-run","name":"跑步"},{"id":172,"icon":"sport-swim","name":"游泳"},{"id":173,"icon":"sport-cycle","name":"骑车"},{"id":520,"icon":"heartbeat","name":"心跳"},{"id":107,"icon":"medical","name":"医疗"},{"id":99,"icon":"biology","name":"生物"},{"id":98,"icon":"chemistry","name":"化学"},{"id":166,"icon":"watercup","name":"水杯"},{"id":106,"icon":"pharmacy","name":"药物"},{"id":495,"icon":"chain","name":"分子"},{"id":494,"icon":"dna","name":"基因"},{"id":489,"icon":"cell","name":"细胞"},{"id":493,"icon":"dinosaur","name":"恐龙"},{"id":169,"icon":"covid-19","name":"病毒"},{"id":465,"icon":"covid-19-fill","name":"病毒"}]},{"id":7,"name":"living","title":"生活居家","icons":[{"id":455,"icon":"bed","name":"床"},{"id":454,"icon":"bed-fill","name":"床"},{"id":574,"icon":"pillow","name":"枕头"},{"id":576,"icon":"pillow-fill","name":"枕头"},{"id":542,"icon":"sofa","name":"沙发"},{"id":525,"icon":"sofa-fill","name":"沙发"},{"id":558,"icon":"bathtub","name":"浴缸"},{"id":557,"icon":"bathtub-fill","name":"浴缸"},{"id":575,"icon":"plant","name":"植物"},{"id":577,"icon":"plant-fill","name":"植物"},{"id":168,"icon":"gloves","name":"手套"},{"id":167,"icon":"gloves-fill","name":"手套"},{"id":594,"icon":"router","name":"路由器"},{"id":595,"icon":"router-fill","name":"路由器"},{"id":727,"icon":"food","name":"食物美食"},{"id":728,"icon":"food-fill","name":"食物美食"},{"id":719,"icon":"eat","name":"吃饭食物美食"},{"id":718,"icon":"eat-fill","name":"吃饭食物美食"},{"id":721,"icon":"eat-west","name":"吃饭食物美食"},{"id":722,"icon":"eat-west-fill","name":"吃饭食物美食"},{"id":717,"icon":"eat-other","name":"吃饭食物美食"},{"id":723,"icon":"eat-other-fill","name":"吃饭食物美食"}]},{"id":12,"name":"travel","title":"交通出行","icons":[{"id":35,"icon":"errands","name":"步行"},{"id":36,"icon":"errands-fill","name":"步行"},{"id":38,"icon":"delivery","name":"骑车"},{"id":37,"icon":"delivery-fill","name":"骑车"},{"id":263,"icon":"taxi","name":"出租车"},{"id":262,"icon":"taxi-fill","name":"出租车"},{"id":261,"icon":"logistics","name":"物流"},{"id":458,"icon":"logistics-fill","name":"物流"},{"id":364,"icon":"location","name":"位置"},{"id":363,"icon":"location-fill","name":"位置"},{"id":366,"icon":"map","name":"地图地点"},{"id":365,"icon":"map-fill","name":"地图地点"},{"id":118,"icon":"signpost","name":"指示牌"},{"id":119,"icon":"signpost-fill","name":"指示牌"},{"id":663,"icon":"route","name":"路线"},{"id":664,"icon":"route-fill","name":"路线"},{"id":583,"icon":"suitcase","name":"行李箱"},{"id":584,"icon":"suitcase-fill","name":"行李箱"},{"id":241,"icon":"footprint","name":"足迹"},{"id":674,"icon":"footprint-fill","name":"足迹"},{"id":178,"icon":"balancecar","name":"平衡车"},{"id":179,"icon":"electromobile","name":"小电瓶"},{"id":177,"icon":"bus","name":"公交车"},{"id":176,"icon":"steamship","name":"轮船"},{"id":175,"icon":"train","name":"train"},{"id":174,"icon":"airplane","name":"飞机"},{"id":743,"icon":"departures","name":"飞机起飞"},{"id":739,"icon":"arrivals","name":"飞机降落"},{"id":658,"icon":"global","name":"地球"},{"id":108,"icon":"wheelchair","name":"轮椅残疾人"},{"id":582,"icon":"escalator","name":"扶梯电梯"},{"id":468,"icon":"restroom-female","name":"女卫生间女洗手间女厕所"},{"id":469,"icon":"restroom-male","name":"男卫生间女洗手间男厕所"}]},{"id":22,"name":"gesture","title":"手势动作","icons":[{"id":566,"icon":"gesture-one","name":"手势一"},{"id":569,"icon":"gesture-two","name":"手势二"},{"id":568,"icon":"gesture-three","name":"手势三"},{"id":567,"icon":"gesture-four","name":"手势四"},{"id":565,"icon":"gesture-five","name":"手势五"},{"id":564,"icon":"gesture-dropdown","name":"手势下滑下拉"},{"id":326,"icon":"open","name":"打开展开"}]},{"id":23,"name":"data","title":"数据图表","icons":[{"id":299,"icon":"statistics","name":"数据统计"},{"id":300,"icon":"statistics-fill","name":"数据统计"},{"id":297,"icon":"data","name":"数据分享"},{"id":298,"icon":"data-fill","name":"数据分享"}]},{"id":20,"name":"menu","title":"菜单分类","icons":[{"id":132,"icon":"home","name":"首页"},{"id":133,"icon":"home-fill","name":"首页"},{"id":134,"icon":"home-vertical","name":"首页"},{"id":135,"icon":"home-vertical-fill","name":"首页"},{"id":136,"icon":"home-smile","name":"首页"},{"id":137,"icon":"home-smile-fill","name":"首页"},{"id":570,"icon":"home-love","name":"首页"},{"id":571,"icon":"home-love-fill","name":"首页"},{"id":486,"icon":"home-in","name":"首页"},{"id":485,"icon":"home-in-fill","name":"首页"},{"id":487,"icon":"home-loading","name":"首页"},{"id":488,"icon":"home-loading-fill","name":"首页"},{"id":516,"icon":"home-totop","name":"首页"},{"id":515,"icon":"home-totop-fill","name":"首页"},{"id":630,"icon":"home-leaf","name":"首页"},{"id":631,"icon":"home-leaf-fill","name":"首页"},{"id":138,"icon":"home-capsule","name":"首页"},{"id":139,"icon":"home-capsule-fill","name":"首页"},{"id":100,"icon":"level","name":"等级列表"},{"id":20,"icon":"level-fill","name":"等级列表"},{"id":101,"icon":"deploy","name":"分类调试"},{"id":23,"icon":"deploy-fill","name":"分类调试"},{"id":512,"icon":"block","name":"分类菜单"},{"id":511,"icon":"block-fill","name":"分类菜单"},{"id":150,"icon":"menu-circle","name":"分类菜单"},{"id":19,"icon":"menu-circle-fill","name":"分类菜单"},{"id":680,"icon":"menu-grille","name":"分类菜单"},{"id":684,"icon":"menu-grille-fill","name":"分类菜单"},{"id":523,"icon":"menu-match","name":"分类菜单"},{"id":524,"icon":"menu-match-fill","name":"分类菜单"},{"id":144,"icon":"assort","name":"分类菜单"},{"id":143,"icon":"assort-fill","name":"分类菜单"},{"id":149,"icon":"menu","name":"分类菜单"},{"id":21,"icon":"menu-fill","name":"分类菜单"},{"id":145,"icon":"menu-list","name":"分类菜单"},{"id":34,"icon":"menu-list-fill","name":"分类菜单"},{"id":146,"icon":"menu-sorts","name":"分类菜单"},{"id":32,"icon":"menu-sorts-fill","name":"分类菜单"},{"id":147,"icon":"menu-sort","name":"分类菜单"},{"id":30,"icon":"menu-sort-fill","name":"分类菜单"},{"id":148,"icon":"menu-more","name":"分类菜单"},{"id":24,"icon":"menu-more-fill","name":"分类菜单"},{"id":457,"icon":"menu-flex","name":"分类菜单"},{"id":456,"icon":"menu-flex-fill","name":"分类菜单"},{"id":513,"icon":"menu-classify","name":"分类菜单"},{"id":514,"icon":"menu-classify-fill","name":"分类菜单"},{"id":507,"icon":"menu-alone","name":"分类菜单"},{"id":508,"icon":"menu-alone-fill","name":"分类菜单"},{"id":596,"icon":"menu-rhombus","name":"分类菜单"},{"id":597,"icon":"menu-rhombus-fill","name":"分类菜单"},{"id":151,"icon":"search-menu","name":"菜单搜索"},{"id":25,"icon":"search-menu-fill","name":"菜单搜索"},{"id":152,"icon":"search-list","name":"搜索列表"},{"id":29,"icon":"search-list-fill","name":"搜索列表"},{"id":599,"icon":"plane","name":"菜单飞机"},{"id":598,"icon":"plane-fill","name":"菜单飞机"},{"id":659,"icon":"reload-home","name":"首页重载"},{"id":661,"icon":"reload-home-fill","name":"首页重载"},{"id":660,"icon":"reload-planet","name":"星球重载"},{"id":662,"icon":"reload-planet-fill","name":"星球重载"},{"id":635,"icon":"meteor","name":"流星"},{"id":634,"icon":"meteor-fill","name":"流星"},{"id":92,"icon":"rocket","name":"火箭"},{"id":9,"icon":"rocket-fill","name":"火箭"},{"id":10,"icon":"totop","name":"火箭返回顶部"},{"id":11,"icon":"totop-fill","name":"火箭返回顶部"},{"id":91,"icon":"job","name":"工作领带"},{"id":8,"icon":"job-fill","name":"工作领带"},{"id":53,"icon":"science","name":"科学"},{"id":22,"icon":"science-fill","name":"科学"},{"id":126,"icon":"count","name":"运算计算"},{"id":127,"icon":"count-fill","name":"运算计算"},{"id":696,"icon":"assign","name":"分配指派"},{"id":698,"icon":"assign-fill","name":"分配指派"},{"id":124,"icon":"honor","name":"荣誉证书"},{"id":125,"icon":"honor-fill","name":"荣誉证书"},{"id":128,"icon":"discover-planet","name":"行星发现"},{"id":129,"icon":"discover-planet-fill","name":"行星发现"},{"id":130,"icon":"discover","name":"发现"},{"id":131,"icon":"discover-fill","name":"发现"},{"id":535,"icon":"module","name":"模块"},{"id":539,"icon":"module-fill","name":"模块"},{"id":344,"icon":"caring","name":"关心"},{"id":345,"icon":"caring-fill","name":"关心"},{"id":682,"icon":"ai","name":"人工智能"},{"id":681,"icon":"ai-fill","name":"人工智能"},{"id":505,"icon":"ghost","name":"幽灵"},{"id":459,"icon":"ghost-fill","name":"幽灵"},{"id":110,"icon":"my","name":"我的个人中心"},{"id":111,"icon":"my-fill","name":"我的个人中心"},{"id":671,"icon":"my-lack","name":"我的个人中心"},{"id":670,"icon":"my-lack-fill","name":"我的个人中心"},{"id":647,"icon":"my-circle","name":"我的个人中心"},{"id":648,"icon":"my-circle-fill","name":"我的个人中心"},{"id":666,"icon":"my-simple","name":"我的个人中心"},{"id":665,"icon":"my-simple-fill","name":"我的个人中心"},{"id":707,"icon":"my-formal","name":"我的个人中心商务"},{"id":706,"icon":"my-formal-fill","name":"我的个人中心商务"},{"id":704,"icon":"my-job","name":"我的个人中心商务"},{"id":708,"icon":"my-job-fill","name":"我的个人中心商务"}]},{"id":14,"name":"system","title":"管理系统","icons":[{"id":702,"icon":"fold","name":"收起折叠"},{"id":714,"icon":"unfold","name":"展开展示"},{"id":534,"icon":"dashboard","name":"仪表盘"},{"id":540,"icon":"dashboard-fill","name":"仪表盘"},{"id":229,"icon":"team","name":"员工团队"},{"id":230,"icon":"team-fill","name":"员工团队"},{"id":104,"icon":"organizatio","name":"组织架构"},{"id":26,"icon":"organizatio-fill","name":"组织架构"},{"id":105,"icon":"company","name":"公司企业"},{"id":17,"icon":"company-fill","name":"公司企业"},{"id":264,"icon":"flag","name":"目标旗帜"},{"id":265,"icon":"flag-fill","name":"目标旗帜"},{"id":122,"icon":"hardware","name":"电子硬件"},{"id":123,"icon":"hardware-fill","name":"电子硬件"},{"id":112,"icon":"trust","name":"合作伙伴"},{"id":113,"icon":"trust-fill","name":"合作伙伴"},{"id":245,"icon":"set","name":"系统设置"},{"id":246,"icon":"set-fill","name":"系统设置"},{"id":14,"icon":"expand","name":"子菜单"}]},{"id":2,"name":"brand","title":"知名品牌","icons":[{"id":1,"icon":"nintendo-switch","name":"任天堂"},{"id":216,"icon":"logo-tuniao","name":"图鸟"},{"id":4,"icon":"huawei","name":"华为"},{"id":5,"icon":"iphone","name":"苹果"},{"id":222,"icon":"alipay","name":"支付宝"},{"id":218,"icon":"taobao","name":"淘宝"},{"id":223,"icon":"qq","name":"企鹅"},{"id":221,"icon":"dingtalk","name":"钉钉"},{"id":217,"icon":"sina","name":"新浪"},{"id":6,"icon":"tiktok","name":"抖音"},{"id":41,"icon":"logo-shangpu","name":"上铺"},{"id":692,"icon":"seafox","name":"海狐"},{"id":580,"icon":"windows","name":"微软"},{"id":732,"icon":"vscode","name":"代码编辑器"},{"id":219,"icon":"gitee","name":"码云"},{"id":220,"icon":"github","name":"章鱼猫"},{"id":214,"icon":"linkedin","name":"领英"},{"id":215,"icon":"twitter","name":"推特"},{"id":212,"icon":"facebook","name":"脸书"},{"id":213,"icon":"google","name":"谷歌"}]},{"id":24,"name":"idea","title":"创意logo","icons":[{"id":40,"icon":"panda","name":"熊猫"},{"id":695,"icon":"fish","name":"鱼"},{"id":484,"icon":"dragon","name":"龙"},{"id":510,"icon":"rabbit","name":"兔子"},{"id":478,"icon":"mammoth","name":"猛犸象"},{"id":483,"icon":"whale","name":"蓝鲸"},{"id":477,"icon":"windmill","name":"风车"},{"id":509,"icon":"tree","name":"树"},{"id":491,"icon":"orange","name":"橙子"},{"id":479,"icon":"alien","name":"外星人"}]},{"id":27,"name":"symbol","title":"表情符号","icons":[{"id":235,"icon":"emoji-good","name":"微笑好评"},{"id":236,"icon":"emoji-good-fill","name":"微笑好评"},{"id":233,"icon":"emoji-general","name":"平静中评"},{"id":234,"icon":"emoji-general-fill","name":"平静中评"},{"id":231,"icon":"emoji-sad","name":"悲伤差评"},{"id":232,"icon":"emoji-sad-fill","name":"悲伤差评"},{"id":694,"icon":"skull","name":"骨头骷髅"},{"id":693,"icon":"skull-fill","name":"骨头骷髅"},{"id":536,"icon":"at-sign","name":"圈人"},{"id":537,"icon":"copyright","name":"版权"},{"id":579,"icon":"trademark","name":"商标"},{"id":600,"icon":"spiral","name":"螺旋"},{"id":737,"icon":"prohibit","name":"禁止禁用"},{"id":141,"icon":"focus","name":"瞄准"},{"id":742,"icon":"parking","name":"停车停止"},{"id":618,"icon":"percent","name":"百分比"},{"id":617,"icon":"percent-fill","name":"百分比"},{"id":699,"icon":"equal","name":"等于相等"},{"id":701,"icon":"equal-fill","name":"等于相等"},{"id":348,"icon":"topic","name":"指令话题"},{"id":546,"icon":"cute","name":"可爱"}]},{"id":17,"name":"geometry","title":"抽象几何","icons":[{"id":589,"icon":"pyramid","name":"锥体金字塔"},{"id":504,"icon":"molecule","name":"分子"},{"id":67,"icon":"constellation","name":"星座星系"},{"id":620,"icon":"activity","name":"活动"},{"id":103,"icon":"cube","name":"立方体"},{"id":31,"icon":"cube-fill","name":"立方体"},{"id":729,"icon":"honeycomb","name":"honeycomb"},{"id":731,"icon":"honeycomb-fill","name":"honeycomb-fill"},{"id":668,"icon":"around","name":"围绕"},{"id":667,"icon":"around-fill","name":"围绕"},{"id":656,"icon":"unite","name":"团结"},{"id":657,"icon":"unite-fill","name":"团结"}]},{"id":28,"name":"culture","title":"文化元素","icons":[{"id":481,"icon":"knot","name":"中国结绳结"},{"id":473,"icon":"ninja","name":"忍者"},{"id":601,"icon":"lotus","name":"莲花"},{"id":517,"icon":"petal","name":"花瓣"},{"id":480,"icon":"taichi","name":"太极"},{"id":602,"icon":"koi","name":"锦鲤"},{"id":603,"icon":"koi-fill","name":"锦鲤"},{"id":519,"icon":"clover","name":"幸运草"},{"id":518,"icon":"clover-fill","name":"幸运草"},{"id":690,"icon":"piggy-bank","name":"存钱罐猪"},{"id":686,"icon":"piggy-bank-fill","name":"存钱罐猪"},{"id":637,"icon":"dice-one","name":"色子一"},{"id":641,"icon":"dice-two","name":"色子二"},{"id":638,"icon":"dice-three","name":"色子三"},{"id":640,"icon":"dice-four","name":"色子四"},{"id":636,"icon":"dice-five","name":"色子五"},{"id":639,"icon":"dice-six","name":"色子六"}]},{"id":4,"name":"zodiac","title":"生肖星座","icons":[{"id":191,"icon":"zodiac-shu","name":"生肖鼠"},{"id":190,"icon":"zodiac-niu","name":"生肖牛"},{"id":189,"icon":"zodiac-hu","name":"生肖虎"},{"id":188,"icon":"zodiac-tu","name":"生肖兔"},{"id":187,"icon":"zodiac-long","name":"生肖龙"},{"id":186,"icon":"zodiac-she","name":"生肖蛇"},{"id":185,"icon":"zodiac-ma","name":"生肖马"},{"id":184,"icon":"zodiac-yang","name":"生肖羊"},{"id":183,"icon":"zodiac-hou","name":"生肖猴"},{"id":182,"icon":"zodiac-ji","name":"生肖鸡"},{"id":181,"icon":"zodiac-gou","name":"生肖狗"},{"id":180,"icon":"zodiac-zhu","name":"生肖猪"},{"id":55,"icon":"con-aquarius","name":"星座水瓶座"},{"id":56,"icon":"con-pisces","name":"星座双鱼座"},{"id":57,"icon":"con-aries","name":"星座白羊座"},{"id":58,"icon":"con-taurus","name":"星座金牛座"},{"id":59,"icon":"con-gemini","name":"星座双子座"},{"id":60,"icon":"con-cancer","name":"星座巨蟹座"},{"id":61,"icon":"con-leo","name":"星座狮子座"},{"id":62,"icon":"con-virgo","name":"星座处女座"},{"id":63,"icon":"con-libra","name":"星座天秤座"},{"id":64,"icon":"con-scorpio","name":"星座天蝎座"},{"id":65,"icon":"con-sagittarius","name":"星座射手座"},{"id":66,"icon":"con-apricorn","name":"星座摩羯座"}]},{"id":3,"name":"weather","title":"气象天气","icons":[{"id":655,"icon":"umbrella","name":"雨伞"},{"id":675,"icon":"umbrella-fill","name":"雨伞"},{"id":114,"icon":"moon","name":"月亮黑夜"},{"id":115,"icon":"moon-fill","name":"月亮黑夜"},{"id":339,"icon":"light","name":"闪电雷电"},{"id":338,"icon":"light-fill","name":"闪电雷电"},{"id":482,"icon":"snowflake","name":"雪花"},{"id":733,"icon":"starry","name":"繁星流星"},{"id":69,"icon":"wea-cloud","name":"云"},{"id":68,"icon":"wea-cloud-more","name":"多云"},{"id":70,"icon":"wea-cloud-sun","name":"多云转晴"},{"id":71,"icon":"wea-rain","name":"小雨"},{"id":72,"icon":"wea-rain-middle","name":"中雨"},{"id":73,"icon":"wea-rain-heavy","name":"大雨"},{"id":74,"icon":"wea-snow","name":"下雪"},{"id":75,"icon":"wea-wind","name":"微风吹风"},{"id":76,"icon":"wea-sun","name":"太阳晴天"},{"id":651,"icon":"sunrise","name":"日出"},{"id":652,"icon":"sunset","name":"日落"},{"id":649,"icon":"temperature-f","name":"华氏度温度"},{"id":650,"icon":"temperature-c","name":"摄氏度温度"}]},{"id":13,"name":"blank","title":"空白缺省","icons":[{"id":84,"icon":"empty-search","name":"搜索空白缺省"},{"id":90,"icon":"empty-page","name":"内容空白缺省"},{"id":79,"icon":"empty-cart","name":"购物车空白缺省"},{"id":88,"icon":"empty-address","name":"地址空白缺省"},{"id":89,"icon":"empty-permission","name":"权限空白缺省"},{"id":80,"icon":"empty-history","name":"记录空白缺省"},{"id":78,"icon":"empty-message","name":"消息空白缺省"},{"id":86,"icon":"empty-comment","name":"评论空白缺省"},{"id":77,"icon":"empty-data","name":"数据空白缺省"},{"id":82,"icon":"empty-list","name":"列表空白缺省"},{"id":85,"icon":"empty-order","name":"订单空白缺省"},{"id":87,"icon":"empty-coupon","name":"优惠券空白缺省"},{"id":81,"icon":"empty-favor","name":"收藏空白缺省"},{"id":83,"icon":"empty-network","name":"网络空白缺省断网"}]},{"id":1,"name":"tuniao","title":"其他类别","icons":[{"id":54,"icon":"clip","name":"爱心碰撞"},{"id":501,"icon":"book","name":"书本教育学习"},{"id":497,"icon":"education","name":"教育毕业大学"},{"id":503,"icon":"maths","name":"数学几何"},{"id":498,"icon":"english","name":"英语翻译"},{"id":140,"icon":"cross-fill","name":"交叉"},{"id":499,"icon":"seal","name":"公章盖章印章"},{"id":532,"icon":"check","name":"勾选支付"},{"id":683,"icon":"cargoship","name":"货轮"},{"id":3,"icon":"tabs-smile","name":"微笑选中"}]}]
+};
\ No newline at end of file
diff --git a/basicPage/shadow/shadow.vue b/basicPage/shadow/shadow.vue
new file mode 100644
index 0000000..0952b0e
--- /dev/null
+++ b/basicPage/shadow/shadow.vue
@@ -0,0 +1,79 @@
+<template>
+
+  <view class="basic-shadow tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>阴影</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="普通阴影">
+        <view class="shadow-content tn-shadow"></view>
+        <view class="shadow-content tn-shadow-warp"></view>
+      </demo-title>
+      
+      <demo-title title="有色阴影">
+        <view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
+        <view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
+      </demo-title>
+      
+      <demo-title title="背景图片阴影">
+        <view class="shadow-content shadow-content__image tn-shadow-blur"></view>
+      </demo-title>
+      
+      <demo-title title="文字阴影">
+        <view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
+          图鸟UI，专注UI开发
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicShadow',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .basic-shadow {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  .shadow-content {
+    height: 80rpx;
+    background-color: #FFFFFF;
+    margin: 30rpx 0;
+    
+    &__image {
+      z-index: 1;
+      background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
+      background-size: cover;
+      background-position: top;
+      background-repeat: no-repeat;
+    }
+    
+    &__text {
+      font-size: 60rpx;
+      text-align: center;
+    }
+  }
+</style>
diff --git a/basicPage/tag/tag.vue b/basicPage/tag/tag.vue
new file mode 100644
index 0000000..f34797a
--- /dev/null
+++ b/basicPage/tag/tag.vue
@@ -0,0 +1,141 @@
+<template>
+
+  <view class="basic-tag tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>标签</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-tag>标签</tn-tag>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view>
+          <tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+        <view class="tn-margin-top">
+          <tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="形状">
+        <view>
+          <tn-tag margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view>
+          <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+        <view>
+          <tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="镂空">
+        <view>
+          <tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
+          <tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
+        </view>
+      </demo-title>
+      
+      <demo-title title="标签使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="origin-demo">
+            <view class="origin-demo__tag">
+              <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
+            </view>
+          </view>
+          
+          <!-- #ifdef H5 -->
+          <view class="capsule">
+            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
+              <text class="tn-icon-add"></text>
+            </tn-tag>
+            <tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
+              2
+            </tn-tag>
+          </view>
+          <!-- #endif -->
+          <!-- #ifdef MP-WEIXIN -->
+          <view class="capsule">
+            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
+              <text class="tn-icon-add"></text>
+            </tn-tag>
+            <tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
+              2
+            </tn-tag>
+          </view>
+          <!-- #endif -->
+          
+          <tn-tag :plain="true" backgroundColor="#01BEFF" width="auto" margin="0px 30rpx">
+            <view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
+              <view>带关闭按钮</view>
+              <view class="tn-icon-close tn-margin-left-xs"></view>
+            </view>
+          </tn-tag>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicTag',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-tag {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  .origin-demo {
+    width: 180rpx;
+    height: 180rpx;
+    background-color: #FFFFFF;
+    margin: 20rpx;
+    margin-right: 70rpx;
+    position: relative;
+    
+    &__tag {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+</style>
diff --git a/basicPage/test/test.vue b/basicPage/test/test.vue
new file mode 100644
index 0000000..12868f8
--- /dev/null
+++ b/basicPage/test/test.vue
@@ -0,0 +1,261 @@
+<template>
+  <view class="basic-test">
+    <swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
+      <swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
+        <view class="swiper__item__content" :class="[swiperContentClass(index)]">
+          <image :src="item" mode="scaleToFill"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <swiper class="phone-swiper" :circular="true"
+      :current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange"> 
+      <swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
+        
+        <view class="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+              
+              <view class="demo-image">
+                <image :src="item.url" mode="aspectFill"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+        
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'TestPage',
+    data() {
+      return {
+        swiperList: [
+          'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
+          'https://tnuiimage.tnkjapp.com/swiper/winter.jpg'
+        ],
+        phoneSwiperList: [{
+          id: 0,
+          type: 'image',
+          name: '总有你想不到的创意',
+          text: '海量分享',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          name: '寻找一起成长的小伙伴',
+          text: '愉快玩耍',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
+        }, {
+          id: 2,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/test.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+        }, {
+          id: 3,
+          type: 'image',
+          name: '更多彩蛋等你探索',
+          text: '酷炫多彩',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/banner-animate.png',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
+        }],
+        currentSwiperIndex: 0,
+        phoneCurrentSwiperIndex: 0
+      }
+    },
+    computed: {
+      // 计算当前对应轮播前后的item对应的类
+      swiperItemClass() {
+        return (index) => {
+          if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
+            return 'swiper__item--prev'
+          }
+          if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
+            return 'swiper__item--next'
+          }
+          if (this.currentSwiperIndex === index) {
+            return 'swiper__item--current'
+          }
+        }
+      },
+      // 计算轮播内容对应的类
+      swiperContentClass() {
+        return (index) => {
+          if (this.currentSwiperIndex === index) {
+            return 'swiper__item__content--current'
+          }
+          if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
+            return 'swiper__item__content--prev'
+          }
+          if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
+            return 'swiper__item__content--next'
+          }
+        }
+      },
+      // 计算轮播内容对应的类
+      phoneSwiperContentClass() {
+        return (index) => {
+          if (this.phoneCurrentSwiperIndex === index) {
+            return 'phone-swiper__item__content--current'
+          }
+          if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
+            return 'phone-swiper__item__content--prev'
+          }
+          if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
+            return 'phone-swiper__item__content--next'
+          }
+        }
+      }
+    },
+    onReady() {
+      
+    },
+    methods: {
+      // 轮播图切换
+      swiperChange(e) {
+        // console.log(e.detail.current);
+        this.currentSwiperIndex = e.detail.current
+      },
+      phoneSwiperChange(e) {
+        this.phoneCurrentSwiperIndex = e.detail.current
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-test {
+    min-height: 100vh;
+  }
+  
+  .swiper {
+    width: 100%;
+    height: 400rpx;
+    
+    /deep/ .uni-swiper-slides {
+      inset: 0 260rpx;
+    }
+    
+    &__item {
+      
+      &--prev {
+        left: -10rpx;
+      }
+      
+      &--next {
+        left: 10rpx;
+      }
+      
+      &--current {
+        left: 0px;
+      }
+      
+      &__content {
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        border-radius: 30rpx;
+        overflow: hidden;
+        transition: transform 0.25s ease;
+        transform: scale(0.8);
+        
+        &--prev {
+          transform: scale(0.8) perspective(200rpx) rotateY(10deg);
+        }
+        
+        &--next {
+          transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
+        }
+        
+        &--current {
+          transform: scale(1);
+        }
+        
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  
+  .phone-swiper {
+    margin-top: 180rpx;
+    height: 900rpx;
+    
+    /deep/ .uni-swiper-slides {
+      inset: 0 190rpx;
+    }
+    
+    &__item {
+      
+      &__content {
+        transition: transform 0.25s ease;
+        transform: scale(0.8);
+        
+        &--prev {
+          transform: scale(0.8) perspective(200rpx) rotateY(10deg);
+        }
+        
+        &--next {
+          transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
+        }
+        
+        &--current {
+          transform: scale(1);
+        }
+      }
+      
+      .demo-image {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        image {
+          width: 100%;
+          height: 730rpx;
+        }
+      }
+    }
+  }
+  
+  
+  /* tnphone-black-min 细边框 start */
+  .tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; cursor: default; position: relative}
+  .tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
+  .tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
+  .tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
+  .tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+  /* tnphone-black-min 细边框 end */
+</style>
diff --git a/basicPage/utils/color/index.vue b/basicPage/utils/color/index.vue
new file mode 100644
index 0000000..be26836
--- /dev/null
+++ b/basicPage/utils/color/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <view class="basic-utils__color tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Color工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="获取内置随机颜色">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomColorClass">文字颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="hex与rgb互转">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <view class="tn-margin-left">
+              <tn-input v-model="hexRGBValue"></tn-input>
+            </view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsColor',
+    components: {demoTitle},
+    data() {
+      return {
+        randomBgColorClass: '',
+        randomColorClass: '',
+        randomCoolBgColorClass: '',
+        hexRGBValue: '#01BEFF',
+        rgbFlag: false
+      }
+    },
+    methods: {
+      // 获取随机背景颜色
+      getRandomBgColor() {
+        this.randomBgColorClass = this.$tn.color.getRandomColorClass()
+      },
+      // 获取随机颜色
+      getRandomColor() {
+        this.randomColorClass = this.$tn.color.getRandomColorClass('color')
+      },
+      // 获取随机酷炫背景颜色
+      getRandomCoolColor() {
+        this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
+      },
+      // 将hex与rgb互转
+      convertToRGBOrHex() {
+        if (this.rgbFlag) {
+          this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
+        } else {
+          this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
+        }
+        this.rgbFlag = !this.rgbFlag
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__color {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+    
+    .bg-color-item {
+      height: 100%;
+      width: auto;
+      padding: 10rpx 20rpx;
+    }
+  }
+</style>
diff --git a/basicPage/utils/message/index.vue b/basicPage/utils/message/index.vue
new file mode 100644
index 0000000..6d62578
--- /dev/null
+++ b/basicPage/utils/message/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <view class="basic-utils__message tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Message工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="uni内置toast框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>默认toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带图标 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带透明mask toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>设置时间 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>设置回调 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>关闭 toast框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="uni内置loading框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>弹出loading框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>关闭loading框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="uni内置modal框">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>默认modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>隐藏取消按钮 modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>修改文字 modal框</view>
+              <view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsMessage',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 弹出toast
+      openToast_1() {
+        this.$tn.message.toast('弹出toast')
+      },
+      openToast_2() {
+        this.$tn.message.toast('弹出toast icon', false, null, 'success')
+      },
+      openToast_3() {
+        this.$tn.message.toast('弹出toast mask', true)
+      },
+      openToast_4() {
+        this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
+      },
+      openToast_5() {
+        this.$tn.message.toast('弹出toast cb', true, () => {
+          setTimeout(() => {
+            this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
+          }, 500)
+        })
+      },
+      // 关闭Toast
+      closeToast() {
+        this.$tn.message.closeToast()
+      },
+      
+      
+      // 弹出loading
+      openLoading() {
+        this.$tn.message.loading('弹出loading')
+        setTimeout(() => {
+          this.closeLoading()
+        }, 3000)
+      },
+      // 关闭loading
+      closeLoading() {
+        this.$tn.message.closeLoading()
+      },
+      
+      
+      // 弹出modal
+      openModal_1() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了确认按钮')
+        }, true, () => {
+          this.$tn.message.toast('点击了取消按钮')
+        })
+      },
+      openModal_2() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了确认按钮')
+        }, false, null)
+      },
+      openModal_3() {
+        this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
+          this.$tn.message.toast('点击了跳转按钮')
+        }, true, () => {
+          this.$tn.message.toast('点击了拒绝按钮')
+        }, "跳转登录", "拒绝登录")
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__message {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/basicPage/utils/number/index.vue b/basicPage/utils/number/index.vue
new file mode 100644
index 0000000..d9d77eb
--- /dev/null
+++ b/basicPage/utils/number/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <view class="basic-utils__number tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Number工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="超过指定长度自动添加'+'号">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过2位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(56) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过2位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(100) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过3位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(899, 3) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过3位自动添加'+'号</view>
+              <view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="往数字前添加'0'">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>只有一位时会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(6) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过两位时不会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(16) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>超过两位时不会往前面添加'0'</view>
+              <view>{{ $tn.number.formatNumberAddZero(106) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="数值转换为带单位金额">
+        <tn-list-view backgroundColor="tn-bg-white">
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>不带单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>不带单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带K单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带K单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带W单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view>带W单位</view>
+              <view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <demo-title title="获取随机值">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+          <tn-form-item>
+            <view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsNumber',
+    components: {demoTitle},
+    data() {
+      return {
+        randomValue: '',
+        intRandomValue: '',
+      }
+    },
+    methods: {
+      // 获取随机值
+      getRandomValue() {
+        this.randomValue = this.$tn.number.random(0, 100.99)
+      },
+      // 获取整数随机值
+      getIntRandomValue() {
+        this.intRandomValue = this.$tn.number.randomInt(0, 100)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__number {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/basicPage/utils/string/index.vue b/basicPage/utils/string/index.vue
new file mode 100644
index 0000000..6ecc657
--- /dev/null
+++ b/basicPage/utils/string/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <view class="basic-utils__string tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>String工具</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="去除空格">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="trimValue" :trim="false"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大写转指定连接符">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="humpCharValue"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <demo-title title="将自定的连接符转为大写">
+        <view class="tn-bg-white">
+          <tn-form-item>
+            <tn-input v-model="charHumpValue"></tn-input>
+            <template slot="right">
+              <view class="tn-margin-right-sm">
+                <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
+              </view>
+            </template>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'basicUtilsString',
+    components: {demoTitle},
+    data() {
+      return {
+        trimValue: '      前后都有空格啊       ',
+        humpCharValue: 'TuniaoUI',
+        charHumpValue: 'Tuniao_u_i'
+      }
+    },
+    methods: {
+      // 处理去除空格
+      handlerTrim() {
+        this.trimValue = this.$tn.string.trim(this.trimValue)
+      },
+      // 处理将大写字符串转换为指定的连接符连接的字符串
+      handlerHumpChar() {
+        this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
+      },
+      // 处理将指定的连接字符连接的字符串转换为大写的字符串
+      handlerCharHump() {
+        this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-utils__string {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/common/config.js b/common/config.js
new file mode 100644
index 0000000..ffcb1fb
--- /dev/null
+++ b/common/config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  baseUrl: 'http://api.youzixy.com'
+}
\ No newline at end of file
diff --git a/componentsPage/action-sheet/action-sheet.vue b/componentsPage/action-sheet/action-sheet.vue
new file mode 100644
index 0000000..1e96cba
--- /dev/null
+++ b/componentsPage/action-sheet/action-sheet.vue
@@ -0,0 +1,139 @@
+<template>
+
+  <view class="components-action_sheet">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>操作菜单</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click">
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- actionSheet -->
+    <tn-action-sheet
+      v-model="show"
+      :tips="tips"
+      :list="list"
+      :borderRadius="borderRadius"
+      :cancelBtn="cancelBtn"
+      :maskCloseable="maskCloseable"
+      @click="clickActionSheetItem"
+      @close="closedActionSheet"
+    >
+    </tn-action-sheet>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsActionSheet',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        tips: {
+          text: '请选择正确的答案',
+          fontSize: 26
+        },
+        list: [
+          {
+            text: 'A'
+          },
+          {
+            text: 'B',
+            subText: '这是正确答案'
+          },
+          {
+            text: 'C',
+            disabled: true
+          },
+          {
+            text: 'D'
+          }
+        ],
+        borderRadius: 0,
+        cancelBtn: true,
+        maskCloseable: true,
+        
+        demoTips: ['无需依赖额外的样式文件','使用tn-action-sheet组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '显示取消按钮',
+                optional: ['是','否'],
+                methods: 'cancelBtnChange'
+              },
+              {
+                title: '设置圆角',
+                optional: ['0','23'],
+                methods: 'borderRadiusChange'
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['是','否'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出ActionSheet
+      showActionSheet() {
+        this.openActionSheet()
+      },
+      // 切换圆角
+      borderRadiusChange(event) {
+        this.borderRadius = Number(event.name)
+        this.openActionSheet()
+      },
+      // 切换关闭按钮
+      cancelBtnChange(event) {
+        this.cancelBtn = event.index === 0 ? true : false
+        this.openActionSheet()
+      },
+      // 切换点击遮罩关闭
+      maskCloseableChange(event) {
+        this.maskCloseable = event.index === 0 ? true : false
+        this.openActionSheet()
+      },
+      
+      // 点击了选项
+      clickActionSheetItem(index) {
+        if (index === 1) {
+          this.$tn.message.toast('选择正确')
+        }
+        this.closedActionSheet()
+      },
+      
+      // 打开actionSheet
+      openActionSheet() {
+        this.show = true
+      },
+      // 关闭actionSheet
+      closedActionSheet() {
+        this.show = false
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/componentsPage/calendar/calendar.vue b/componentsPage/calendar/calendar.vue
new file mode 100644
index 0000000..f61e250
--- /dev/null
+++ b/componentsPage/calendar/calendar.vue
@@ -0,0 +1,213 @@
+<template>
+
+  <view class="components-calendar">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Calendar日历</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center">
+          <tn-button style="width: 100%;" width="100%" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
+          <view v-if="result !== ''" class="calendar-result tn-border-dashed">
+            {{ result }}
+          </view>
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- Calendar -->
+    <tn-calendar
+      v-if="show"
+      v-model="show"
+      :mode="mode"
+      :showLunar="showLunar"
+      :activeBgColor="activeBgColor"
+      :activeColor="activeColor"
+      :rangeBgColor="rangeBgColor"
+      :rangeColor="rangeColor"
+      :btnColor="btnColor"
+      :lunarColor="lunarColor"
+      :startText="startText"
+      :endText="endText"
+      :toolTips="toolTips"
+      :changeYear="changeYear"
+      :changeMonth="changeMonth"
+      @change="onChange"
+    ></tn-calendar>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsCalendar',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        mode: 'date',
+        showLunar: true,
+        activeBgColor: '#01BEFF',
+        activeColor: '#FFFFFF',
+        rangeBgColor: '#E6E6E655',
+        rangeColor: '#01BEFF',
+        btnColor: '#01BEFF',
+        lunarColor: '#AAAAAA',
+        startText: '开始',
+        endText: '结束',
+        toolTips: '请选择日期',
+        changeYear: true,
+        changeMonth: true,
+        result: '',
+        
+        tips: ['无需依赖额外的样式文件','使用tn-calendar组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '模式',
+                optional: ['单个日期','日期范围'],
+                methods: 'modeChange'
+              },
+              {
+                title: '农历显示',
+                optional: ['显示','隐藏'],
+                methods: 'showLunarChange'
+              },
+              {
+                title: '自定义颜色',
+                optional: ['默认','自定义'],
+                methods: 'colorChange'
+              },
+              {
+                title: '自定义文案',
+                optional: ['默认','自定义'],
+                methods: 'textChange'
+              },
+              {
+                title: '年月切换',
+                optional: ['年月切换','月切换'],
+                methods: 'yearMonthChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出日历
+      showCalendar() {
+        this.openCalendar()
+      },
+      // 切换模式
+      modeChange(event) {
+        switch (event.index) {
+          case 0:
+            this.mode = 'date'
+            break
+          case 1:
+            this.mode = 'range'
+        }
+        this.openCalendar()
+      },
+      // 切换农历显示
+      showLunarChange(event) {
+        this.showLunar = event.index === 0 ? true : false
+        this.openCalendar()
+      },
+      // 切换颜色
+      colorChange(event) {
+        switch (event.index) {
+          case 0:
+            this.activeBgColor = '#01BEFF'
+            this.activeColor = '#FFFFFF'
+            this.rangeBgColor = '#E6E6E655'
+            this.rangeColor = '#01BEFF'
+            this.btnColor = '#01BEFF'
+            this.lunarColor = '#AAAAAA'
+            break
+          case 1:
+            this.activeBgColor = '#E83A30'
+            this.activeColor = '#FFFFFF'
+            this.rangeBgColor = '#E6E6E680'
+            this.rangeColor = '#E72F8C'
+            this.btnColor = '#E83A30'
+            this.lunarColor = '#080808'
+            break
+        }
+        this.openCalendar()
+      },
+      // 切换文案
+      textChange(event) {
+        switch (event.index) {
+          case 0:
+            this.startText = '开始'
+            this.endText = '结束'
+            this.toolTips = '请选择日期'
+            break
+          case 1:
+            this.startText = '入住'
+            this.endText = '离店'
+            this.toolTips = '入住/离店日期'
+            break
+        }
+        this.openCalendar()
+      },
+      // 切换年月
+      yearMonthChange(event) {
+        switch (event.index) {
+          case 0:
+            this.changeYear = true
+            this.changeMonth = true
+            break
+          case 1:
+            this.changeYear = false
+            this.changeMonth = true
+            break
+        }
+        this.openCalendar()
+      },
+      
+      
+      // 打开日历
+      openCalendar() {
+        this.show = true
+      },
+      
+      // 日历日期有改变
+      onChange(event) {
+        if (this.mode === 'date') {
+          this.result = event.date
+        }
+        if (this.mode === 'range') {
+          this.result = `${event.startDate} 至 ${event.endDate}`
+        }
+        this.$refs.demoTemplate.updateSectionScrollView()
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .calendar-result {
+    width: 100%;
+    margin-top: 20rpx;
+    padding: 10rpx 30rpx;
+    background-color: $tn-font-holder-color;
+    text-align: center;
+  }
+</style>
diff --git a/componentsPage/check-box/check-box.vue b/componentsPage/check-box/check-box.vue
new file mode 100644
index 0000000..9525ecc
--- /dev/null
+++ b/componentsPage/check-box/check-box.vue
@@ -0,0 +1,95 @@
+<template>
+  <view class="components-check-box tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>按钮</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox>
+        <tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox>
+      </demo-title>
+      
+      <demo-title title="圆形选框">
+        <tn-checkbox-group shape="circle">
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="竖直排列">
+        <tn-checkbox-group width="100%" wrap>
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="禁止点击标签">
+        <tn-checkbox-group disabledLabel>
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <view>
+          <tn-checkbox-group :size="26" :iconSize="18">
+            <tn-checkbox name="选项1">选项1</tn-checkbox>
+            <tn-checkbox name="选项2">选项2</tn-checkbox>
+            <tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox>
+          </tn-checkbox-group>
+        </view>
+        <view class="tn-margin-top">
+          <tn-checkbox-group :size="46" :iconSize="40">
+            <tn-checkbox name="选项1">选项1</tn-checkbox>
+            <tn-checkbox name="选项2">选项2</tn-checkbox>
+            <tn-checkbox name="选项3">选项3</tn-checkbox>
+          </tn-checkbox-group>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-checkbox-group activeColor="#31E749">
+          <tn-checkbox name="选项1">选项1</tn-checkbox>
+          <tn-checkbox name="选项2">选项2</tn-checkbox>
+          <tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <tn-checkbox-group>
+          <tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox>
+          <tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox>
+          <tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox>
+        </tn-checkbox-group>
+      </demo-title>
+      
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsCheckBox',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: false,
+        value2: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/collapse/collapse.vue b/componentsPage/collapse/collapse.vue
new file mode 100644
index 0000000..2bf48d1
--- /dev/null
+++ b/componentsPage/collapse/collapse.vue
@@ -0,0 +1,119 @@
+<template>
+
+  <view class="components-collapse tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="手风琴模式">
+        <tn-collapse>
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="允许全部展开">
+        <tn-collapse :accordion="false">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="禁止第二项展开">
+        <tn-collapse>
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="index === 1">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="关闭点击效果">
+        <tn-collapse hoverClass="">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="隐藏箭头">
+        <tn-collapse :arrow="false">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <tn-collapse :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle">
+          <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" align="center">
+            <view class="tn-text-break-word">
+              {{ item.content }}
+            </view>
+          </tn-collapse-item>
+        </tn-collapse>
+      </demo-title>
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsCollapse',
+    components: {demoTitle},
+    data() {
+      return {
+        list: [
+          {
+            title: '关雎',
+            content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
+          },
+          {
+            title: '长歌行',
+            content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
+          },
+          {
+            title: '秋风辞',
+            content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！'
+          }
+        ],
+        headStyle: {
+          backgroundColor: '#EFEFEF'
+        },
+        bodyStyle: {
+          backgroundColor: '#EFEFEF'
+        },
+        itemStyle: {
+          backgroundColor: '#EFEFEF',
+          borderRadius: '20rpx',
+          overflow: 'hidden'
+        }
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-collapse {
+    background-color: $tn-bg-gray-color;
+  }
+</style>
diff --git a/componentsPage/count-down/count-down.vue b/componentsPage/count-down/count-down.vue
new file mode 100644
index 0000000..079c9d4
--- /dev/null
+++ b/componentsPage/count-down/count-down.vue
@@ -0,0 +1,78 @@
+<template>
+
+  <view class="components-count_down tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>countdown倒计时</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-count-down :timestamp="3600"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示边框">
+        <tn-count-down :timestamp="3600" :showBorder="true"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="中文分割时间">
+        <tn-count-down :timestamp="3600" separator="cn"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="天数为零时不隐藏">
+        <tn-count-down :timestamp="3600" :hideZeroDay="true"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="false" :showMinutes="false" :showSeconds="false"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天时">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="false" :showSeconds="false"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天时分">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="false"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="显示天时分秒">
+        <tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="true"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <tn-count-down :timestamp="3600" :fontSize="60" :separatorSize="60"></tn-count-down>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-count-down :timestamp="3600" backgroundColor="tn-main-gradient-indigo" fontColor="#FFFFFF"></tn-count-down>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsCountDown',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-count_down {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/count-scroll/count-scroll.vue b/componentsPage/count-scroll/count-scroll.vue
new file mode 100644
index 0000000..8a3ca84
--- /dev/null
+++ b/componentsPage/count-scroll/count-scroll.vue
@@ -0,0 +1,68 @@
+<template>
+
+  <view class="components-count_scroll tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-scroll :value="888.88"></tn-count-scroll>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-scroll :value="9999"></tn-count-scroll>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="加长持续时间">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-scroll :value="888.88" :duration="0.5"></tn-count-scroll>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-scroll :value="9999" :duration="3"></tn-count-scroll>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加大加粗">
+        <tn-count-scroll :value="888.88" :height="100" :fontSize="100" :bold="true"></tn-count-scroll>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-count-scroll :value="888.88" fontColor="#E88C30"></tn-count-scroll>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsCountTo',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-count_scroll {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/count-to/count-to.vue b/componentsPage/count-to/count-to.vue
new file mode 100644
index 0000000..dbfb106
--- /dev/null
+++ b/componentsPage/count-to/count-to.vue
@@ -0,0 +1,68 @@
+<template>
+
+  <view class="components-count_to tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>countTo数字跳转</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-to :startVal="0" :endVal="1000"></tn-count-to>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-to :startVal="100" :endVal="2000"></tn-count-to>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示小数">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-count-to :startVal="0" :endVal="1000.9" :decimals="1"></tn-count-to>
+          </view>
+          <view class="tn-margin-left">
+            <tn-count-to :startVal="0" :endVal="1000.99" :decimals="2"></tn-count-to>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加大加粗显示">
+        <tn-count-to :startVal="0" :endVal="1000" :bold="true" :fontSize="100"></tn-count-to>
+      </demo-title>
+      
+      <demo-title title="自定义字体颜色">
+        <tn-count-to :startVal="0" :endVal="1000" fontColor="#A4E82F"></tn-count-to>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsCountTo',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-count_to {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/empty/empty.vue b/componentsPage/empty/empty.vue
new file mode 100644
index 0000000..a1be569
--- /dev/null
+++ b/componentsPage/empty/empty.vue
@@ -0,0 +1,101 @@
+<template>
+  <view class="components-empty tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>空页面</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="内置图标">
+        <block v-for="(item, index) in inlineMode" :key="index">
+          <view class="empty__item">
+            <tn-empty :mode="item"></tn-empty>
+          </view>
+        </block>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静"></tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义图片">
+        <view class="empty__item">
+          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty>
+        </view>
+        <block v-for="(value, key, index) in imgEmpty" :key="index">
+          <view class="empty__item">
+            <tn-empty :icon="value" :mode="key"></tn-empty>
+          </view>
+        </block>
+      </demo-title>
+      
+      <demo-title title="隐藏文字">
+        <view class="empty__item">
+          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty>
+        </view>
+        <view class="empty__item tn-margin-top">
+          <tn-empty icon="help" mode=""></tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="带跳转按钮">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静">
+            <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button>
+          </tn-empty>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <view class="empty__item">
+          <tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
+        </view>
+        <view class="empty__item tn-margin-top">
+          <tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsEmpty',
+    components: { demoTitle },
+    data() {
+      return {
+        inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'],
+        imgEmpty: {
+          cart: '/componentsPage/static/images/empty/cart.jpg',
+          comment: '/componentsPage/static/images/empty/comment.jpg',
+          data: '/componentsPage/static/images/empty/data.jpg',
+          network: '/componentsPage/static/images/empty/network.jpg',
+          page: '/componentsPage/static/images/empty/page.jpg',
+          permission: '/componentsPage/static/images/empty/permission.jpg',
+          search: '/componentsPage/static/images/empty/search.jpg'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-empty {
+    background-color: $tn-bg-gray-color;
+  }
+  
+  .empty {
+    &__item {
+      background-color: #FFFFFF;
+      padding: 20rpx 0;
+    }
+  }
+</style>
diff --git a/componentsPage/fab/fab.vue b/componentsPage/fab/fab.vue
new file mode 100644
index 0000000..f7b4757
--- /dev/null
+++ b/componentsPage/fab/fab.vue
@@ -0,0 +1,196 @@
+<template>
+
+  <view class="components-fab">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>fab悬浮按钮</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view>请点击下边悬浮按钮</view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <tn-fab
+      :btnList="btnList"
+      :left="left"
+      :right="right"
+      :bottom="bottom"
+      :width="width"
+      :height="height"
+      :iconSize="iconSize"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :icon="icon"
+      :animationType="animationType"
+      :showMask="showMask"
+      @click="clickFabItem"
+    >
+    </tn-fab>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsFab',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        
+        left: 'auto',
+        right: 40,
+        bottom: 100,
+        width: 88,
+        height: 88,
+        iconSize: 64,
+        backgroundColor: '#01BEFF',
+        fontColor: '#FFFFFF',
+        icon: 'open',
+        animationType: 'up',
+        showMask: true,
+        btnList: [
+          {
+            icon: 'logo-tuniao',
+            text: '图鸟科技',
+            bgColor: '#E72F8C'
+          },
+          {
+            text: 'UI',
+            textSize: 32,
+            bgColor: '#FF7043'
+          },
+          {
+            icon: 'share-triangle',
+            iconSize: 32,
+            iconColor: '#AAAAAA',
+            bgColor: '#24F083',
+          }
+        ],
+        
+        
+        tips: ['无需依赖额外的样式文件','使用tn-fab组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '悬浮按钮位置',
+                optional: ['左侧','右侧'],
+                methods: 'positionChange',
+                current: 1
+              },
+              {
+                title: '自定义悬浮按钮信息',
+                optional: ['默认','自定义'],
+                methods: 'customFabChange'
+              },
+              {
+                title: '自定义尺寸',
+                optional: ['默认','自定义'],
+                methods: 'sizeChange'
+              },
+              {
+                title: '动画类型',
+                optional: ['向上弹出','圆环弹出'],
+                methods: 'animationChange'
+              },
+              {
+                title: '遮罩显示',
+                optional: ['显示','隐藏'],
+                methods: 'maskChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换按钮位置
+      positionChange(event) {
+        switch (event.index) {
+          case 0:
+            this.left = 40
+            this.right = 'auto'
+            this.bottom = 100
+            break
+          case 1:
+            this.left = 'auto'
+            this.right = 40
+            this.bottom = 100
+            break
+        }
+      },
+      // 切换悬浮按钮信息
+      customFabChange(event) {
+        switch (event.index) {
+          case 0:
+            this.backgroundColor = '#01BEFF'
+            this.fontColor = '#FFFFFF'
+            this.icon = 'open'
+            break
+          case 1:
+            this.backgroundColor = 'tn-cool-bg-color-1'
+            this.fontColor = '#FFFFFF'
+            this.icon = 'up'
+            break
+        }
+      },
+      // 切换尺寸信息
+      sizeChange(event) {
+        switch (event.index) {
+          case 0:
+            this.width = 88
+            this.height = 88
+            this.iconSize = 64
+            break
+          case 1:
+            this.width = 64
+            this.height = 64
+            this.iconSize = 48
+            break
+        }
+      },
+      // 切换遮罩信息
+      maskChange(event) {
+        switch (event.index) {
+          case 0:
+            this.showMask = true
+            break
+          case 1:
+            this.showMask = false
+            break
+        }
+      },
+      // 切换动画
+      animationChange(event) {
+        switch (event.index) {
+          case 0:
+            this.animationType = 'up'
+            break
+          case 1:
+            this.animationType = 'around'
+            break
+        }
+      },
+      
+      
+      // 点击悬浮按钮的内容
+      clickFabItem(e) {
+        this.$tn.message.toast(`点击了第 ${e.index} 个选项`)
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/componentsPage/form/form.vue b/componentsPage/form/form.vue
new file mode 100644
index 0000000..af41dc1
--- /dev/null
+++ b/componentsPage/form/form.vue
@@ -0,0 +1,523 @@
+<template>
+  <view class="components-form">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Form表单</tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
+        <tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
+          <tn-form-item label="姓名" prop="name" leftIcon="identity" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.name" type="text" placeholder="请输入姓名" :border="border"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="性别" prop="sex" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.sex" type="select" placeholder="请选择性别" :border="border" :selectOpen="actionSheetShow" @click="actionSheetShow = true"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="手机号码" prop="phone" rightIcon="phone" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.phone" type="number" placeholder="请输入手机号码" :border="border"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="介绍" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.desc" type="textarea" placeholder="请输入介绍" :border="border" inputAlign="center"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="密码" prop="password" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.password" type="password" placeholder="请输入密码" :border="border" :passwordIcon="true"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="确认密码" prop="rePassword" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.rePassword" type="password" placeholder="请再次输入密码" :border="border"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="水果" prop="fruit" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-checkbox-group v-model="model.fruit" :width="checkboxWidth" :wrap="checkboxWrap" @change="checkboxGroupChange">
+              <tn-checkbox v-for="(item, index) in checkboxList" :key="index" v-model="item.check" :name="item.name" :disabled="item.disabled">{{ item.name }}</tn-checkbox>
+            </tn-checkbox-group>
+          </tn-form-item>
+          <tn-form-item label="支付方式" prop="payType" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-radio-group v-model="model.payType" :width="radioWidth" :wrap="radioWrap" @change="radioGroupChange">
+              <tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</tn-radio>
+            </tn-radio-group>
+          </tn-form-item>
+          <tn-form-item label="所在地区" prop="region" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.region" type="select" placeholder="请选择所在地区" :border="border" :selectOpen="pickerShow" @click="pickerShow = true"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="商品类型" prop="goodsType" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.goodsType" type="select" placeholder="请选择商品类型" :border="border" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
+          </tn-form-item>
+          <tn-form-item label="验证码" prop="code" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-input v-model="model.code" type="text" placeholder="请输入验证码" :border="border"></tn-input>
+            <tn-button slot="right" size="sm" backgroundColor="tn-bg-green" fontColor="tn-color-white" @click="getCode">{{ codeTips }}</tn-button>
+          </tn-form-item>
+          <tn-form-item label="记住密码" prop="remember" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-switch v-model="model.remember" slot="right"></tn-switch>
+          </tn-form-item>
+          <tn-form-item label="上传图片" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
+            <tn-image-upload :fileList="model.photo" @on-list-change="imageUploadChange"></tn-image-upload>
+          </tn-form-item>
+        </tn-form>
+        <view class="agreement">
+          <tn-checkbox v-model="model.agreement" @change="agreementCheckChange"></tn-checkbox>
+          <view class="agreement-text">勾选同意当前协议</view>
+        </view>
+        <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
+      </dynamic-demo-template>
+      
+      <!-- 性别选项 -->
+      <tn-action-sheet
+        v-model="actionSheetShow"
+        :list="actionSheetList"
+        @click="actionSheetClick"
+      ></tn-action-sheet>
+      <!-- 地区picker -->
+      <tn-picker
+        v-model="pickerShow"
+        mode="region"
+        @confirm="regionPickerConfirm"
+      ></tn-picker>
+      <!-- 商品类型select -->
+      <tn-select
+        v-model="selectShow"
+        mode="single"
+        :list="selectList"
+        @confirm="goodsTypeSelectConfirm"
+      ></tn-select>
+      <!-- 验证码倒计时 -->
+      <tn-verification-code
+        ref="code"
+        :seconds="60"
+        @change="codeChange"
+      ></tn-verification-code>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsForm',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        errorType: ['message','border-bottom','toast'],
+        labelPosition: 'left',
+        labelAlign: 'right',
+        border: false,
+        actionSheetShow: false,
+        labelWidth: 140,
+        checkboxWidth: 'auto',
+        checkboxWrap: false,
+        radioWidth: 'auto',
+        radioWrap: false,
+        pickerShow: false,
+        selectShow: false,
+        codeTips: '获取验证码',
+        checkboxList:[
+          {
+            name: '苹果',
+            disabled: false
+          },
+          {
+            name: '橘子',
+            disabled: false
+          },
+          {
+            name: '香蕉',
+            disabled: false
+          },
+          {
+            name: '榴莲',
+            disabled: true
+          }
+        ],
+        radioList:[
+          {
+            name: '微信',
+            disabled: false
+          },
+          {
+            name: '支付宝',
+            disabled: true
+          },
+          {
+            name: '云闪付',
+            disabled: false
+          }
+        ],
+        actionSheetList:[
+          {
+            text: '男'
+          },
+          {
+            text: '女'
+          },
+          {
+            text: '保密'
+          }
+        ],
+        selectList: [
+          {
+            label: '手机',
+            value: 1101
+          },
+          {
+            label: '笔记本',
+            value: 1102
+          },
+          {
+            label: '手表',
+            value: 1103
+          }
+        ],
+        model: {
+          name: '',
+          sex: '',
+          phone: '',
+          desc: '',
+          password: '',
+          rePassword: '',
+          fruit: ['橘子'],
+          payType: '微信',
+          region: '',
+          goodsType: '',
+          code: '',
+          remember: false,
+          photo: [],
+          agreement: false
+        },
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输入用户名',
+              trigger: 'blur'
+            },
+            {
+            	min: 3,
+            	max: 5,
+            	message: '姓名长度在3到5个字符',
+            	trigger: ['change','blur'],
+            },
+            {
+            	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
+            	validator: (rule, value, callback) => {
+            		return this.$tn.test.chinese(value);
+            	},
+            	message: '姓名必须为中文',
+            	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
+            	trigger: ['change','blur'],
+            },
+            {
+            	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
+            	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
+            	asyncValidator: (rule, value, callback) => {
+                if (value === '图鸟') {
+                  callback(new Error('姓名重复'));
+                } else {
+                  // 没有错误，也要执行callback()回调
+                  callback();
+                }
+            	},
+              trigger: ['blur'],
+            }
+          ],
+          sex: [
+          	{
+          		required: true,
+          		message: '请选择性别',
+          		trigger: 'change'
+          	}
+          ],
+          phone: [
+          	{
+          		required: true,
+          		message: '请输入手机号码',
+          		trigger: 'change'
+          	}
+          ],
+          desc: [
+            {
+              min: 5,
+              message: '简介不能少于5个字',
+              trigger: 'change'
+            },
+            {
+              // 正则表达式验证演示
+              pattern: /^[\u4e00-\u9fa5]+$/gi,
+              message: '简介只能包含中文',
+              trigger: 'change'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              message: '请输入密码',
+              trigger: ['change','blur']
+            },
+            {
+              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
+              message: '需同时含有字母和数字，长度在6-12之间',
+              trigger: ['change','blur'] 
+            }
+          ],
+          rePassword: [
+            {
+              required: true,
+              message: '请再次输入密码',
+              trigger: ['change','blur']
+            },
+            {
+              validator: (rule, value, callback) => {
+              	return value === this.model.password;
+              },
+              message: '两次输入的密码不相等',
+              trigger: ['change','blur'],
+            }
+          ],
+          fruit: [
+            {
+              required: true,
+              message: '请选择水果',
+              trigger: 'change',
+              type: 'array'
+            }
+          ],
+          payType: [
+            {
+              required: true,
+              message: '请选择支付方式',
+              trigger: 'change'
+            }
+          ],
+          region: [
+            {
+              required: true,
+              message: '所在地区不能为空',
+              trigger: 'change'
+            }
+          ],
+          goodsType: [
+            {
+              required: true,
+              message: '商品类型不能为空',
+              trigger: 'change'
+            }
+          ],
+          code: [
+            {
+              required: true,
+              message: '验证码不能为空',
+              trigger: 'change'
+            }
+          ],
+          remember: [
+            {
+              required: true,
+              message: '记住密码不能为空',
+              trigger: 'change'
+            }
+          ],
+          photo: [
+            {
+              required: true,
+              message: '请选择图片',
+              trigger: 'change',
+              type: 'array'
+            }
+          ],
+        },
+        
+        tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: 'label显示位置',
+                optional: ['左边','上边'],
+                methods: 'labelPositionChange'
+              },
+              {
+                title: 'label对齐方式',
+                optional: ['左对齐','右对齐','居中'],
+                methods: 'labelAlignChange',
+                current: 1
+              },
+              {
+                title: '边框显示',
+                optional: ['显示','隐藏'],
+                methods: 'borderChange',
+                current: 1
+              },
+              {
+                title: '可选项排列方式',
+                optional: ['默认','宽度的50%','换行'],
+                methods: 'checkRadioStyleChange'
+              },
+              {
+                title: '错误提示方式',
+                optional: ['message','toast','下划线','输入框'],
+                methods: 'errorTypeChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    onReady() {
+      this.$refs.form.setRules(this.rules)
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换label显示位置
+      labelPositionChange(event) {
+        switch (event.index) {
+          case 0:
+            this.labelPosition = 'left'
+            break
+          case 1:
+            this.labelPosition = 'top'
+            break
+        }
+      },
+      // 切换label对其方式
+      labelAlignChange(event) {
+        switch (event.index) {
+          case 0:
+            this.labelAlign = 'left'
+            break
+          case 1:
+            this.labelAlign = 'right'
+            break
+          case 2:
+            this.labelAlign = 'center'
+            break
+        }
+      },
+      // 切换边框显示
+      borderChange(event) {
+        this.border = event.index === 0 ? true : false
+      },
+      // 切换可选项样式
+      checkRadioStyleChange(event) {
+        switch (event.index) {
+          case 0:
+            this.checkboxWidth = 'auto'
+            this.checkboxWrap = false
+            this.radioWidth = 'auto'
+            this.radioWrap = false
+            break
+          case 1:
+            this.checkboxWidth = '50%'
+            this.checkboxWrap = false
+            this.radioWidth = '50%'
+            this.radioWrap = false
+            break
+          case 2:
+            this.checkboxWidth = 'auto'
+            this.checkboxWrap = true
+            this.radioWidth = 'auto'
+            this.radioWrap = true
+            break
+        }
+      },
+      // 切换错误提示方式
+      errorTypeChange(event) {
+        switch (event.index) {
+          case 0:
+            this.errorType = ['message']
+            break
+          case 1:
+            this.errorType = ['toast']
+            break
+          case 2:
+            this.errorType = ['border-bottom']
+            break
+          case 3:
+            this.errorType = ['border']
+            break
+        }
+      },
+      
+      
+      // 表单提交
+      submit() {
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            // 验证通过
+            if (!this.model.agreement) {
+              this.$tn.message.toast('请勾选协议')
+              return
+            }
+          } else {
+            // 验证失败
+          }
+        })
+      },
+      // 点击actionSheet选择性别
+      actionSheetClick(index) {
+        uni.hideKeyboard()
+        this.model.sex = this.actionSheetList[index].text
+      },
+      // 点击地区选择器
+      regionPickerConfirm(event) {
+        this.model.region = event.province.label + '-' + event.city.label + '-' + event.area.label
+      },
+      // 点击商品类型列选择器
+      goodsTypeSelectConfirm(event) {
+        this.model.goodsType = `${event[0]['label']}`
+      },
+      // 多选项值改变事件
+      checkboxGroupChange(event) {
+        this.model.fruit = event
+      },
+      // 单选项值改变事件
+      radioGroupChange(event) {
+        this.model.payType = event
+      },
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      // 验证码倒计时时间改变
+      codeChange(text) {
+        this.codeTips = text
+      },
+      // 图片有修改
+      imageUploadChange(lists) {
+        this.model.photo = lists
+      },
+      // 同意协议状态修改
+      agreementCheckChange(event) {
+        this.model.agreement = event.value
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .agreement {
+    display: flex;
+    align-items: center;
+    margin: 40rpx 0;
+    
+    &-text {
+      padding-left: 8rpx;
+      color: $tn-font-sub-color;
+    }
+  }
+  
+</style>
diff --git a/componentsPage/goods-nav/goods-nav.vue b/componentsPage/goods-nav/goods-nav.vue
new file mode 100644
index 0000000..b8c42f5
--- /dev/null
+++ b/componentsPage/goods-nav/goods-nav.vue
@@ -0,0 +1,126 @@
+<template>
+  <view class="components-goods-nav tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>商品导航</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础" :contentPadding="false">
+        <tn-goods-nav></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="显示阴影" :contentPadding="false">
+        <tn-goods-nav :shadow="true"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="选项设置为头像" :contentPadding="false">
+        <tn-goods-nav :options="avatarOptions"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置角标" :contentPadding="false">
+        <tn-goods-nav :options="countOptions"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置边距按钮" :contentPadding="false">
+        <tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="设置圆角按钮" :contentPadding="false">
+        <tn-goods-nav buttonType="round"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="不设置选项" :contentPadding="false">
+        <tn-goods-nav :options="[]"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="自定义颜色" :contentPadding="false">
+        <tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
+      </demo-title>
+      
+      <demo-title title="固定在底部" :contentPadding="false">
+        <tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
+      </demo-title>
+      
+      <view style="padding-bottom: 88rpx;"></view>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsGoodsNav',
+    components: { demoTitle },
+    data() {
+      return {
+        avatarOptions: [{
+          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
+        },{
+          icon: 'service',
+          text: '客服'
+        },{
+          icon: 'star',
+          text: '收藏'
+        }],
+        countOptions: [{
+          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+          count: 10
+        },{
+          icon: 'service',
+          text: '客服',
+          count: 100
+        },{
+          icon: 'star',
+          text: '收藏'
+        }],
+        customOptions: [{
+          avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+          count: 10,
+          countBackgroundColor: '#E83A30'
+        },{
+          icon: 'service',
+          text: '客服',
+          count: 100,
+          countBackgroundColor: 'transparent',
+          countFontColor: '#E83A30'
+        },{
+          icon: 'star',
+          text: '收藏',
+          iconColor: '#838383',
+          fontColor: '#080808'
+        }],
+        customButtonGroups: [{
+          text: '加入购物车',
+          backgroundColor: 'tn-cool-bg-color-8',
+          color: '#FFFFFF'
+        },{
+          text: '结算',
+          backgroundColor: 'tn-cool-bg-color-8--reverse',
+          color: '#FFFFFF'
+        }]
+      }
+    },
+    methods: {
+      // 选项点击事件
+      onOptionClick(e) {
+        this.$tn.message.toast(`点击了第${e.index}个选项`)
+      },
+      // 按钮点击事件
+      onButtonClick(e) {
+        this.$tn.message.toast(`点击了第${e.index}个按钮`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-goods-nav {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/image-upload/image-upload.vue b/componentsPage/image-upload/image-upload.vue
new file mode 100644
index 0000000..d15e8e5
--- /dev/null
+++ b/componentsPage/image-upload/image-upload.vue
@@ -0,0 +1,273 @@
+<template>
+
+  <view class="components-image_upload">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>图片上传</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
+        <tn-image-upload
+          ref="imageUpload"
+          :action="action"
+          :formData="formData"
+          :fileList="fileList"
+          :disabled="disabled"
+          :autoUpload="autoUpload"
+          :maxCount="maxCount"
+          :showUploadList="showUploadList"
+          :showProgress="showProgress"
+          :deleteable="deleteable"
+          :customBtn="customBtn"
+          :beforeUpload="beforeUpload"
+          @on-list-change="listChange"
+          @on-oversize="oversize"
+          @on-exceed="exceed"
+          @on-choose-complete="chooseComplete"
+          @on-choose-fail="chooseFail"
+          @on-uploaded="uploaded"
+          @on-success="uploadSuccess"
+          @on-change="uploadChange"
+          @on-progress="uploadProgress"
+          @on-error="uploadError"
+          @on-remove="fileRemove"
+        >
+          <view v-if="!showUploadList" slot="file" style="width: 100%;">
+            <view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item">
+              <image
+                class="tn-image-upload__item__image"
+                :src="item.url || item.path"
+                mode="aspectFill"
+              ></image>
+            </view>
+          </view>
+          <!-- <template v-if="!showUploadList" v-slot:file="data">
+            <view v-for="(item,index) in data.file" :key="index" class="tn-image-upload__item">
+              <image
+                class="tn-image-upload__item__image"
+                :src="item.url || item.path"
+                mode="aspectFill"
+              ></image>
+            </view>
+          </template> -->
+          <view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn" hover-class="tn-hover-class" hover-stay-time="150">
+            <view>选择图片</view>
+          </view>
+        </tn-image-upload>
+        <view class="tn-flex tn-margin-top-xs tn-flex-row-center">
+          <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="upload">上传</tn-button>
+          <tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button>
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        action: 'https://www.hualigs.cn/api/upload',
+        // action: '',
+        formData: {
+          apiType: 'this,ali',
+          token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
+          image: null
+        },
+        // 预上传列表
+        // [{
+        //   url: 'http://127.0.0.1:8888/upload/tuniao.jpg'
+        // }]
+        fileList: [],
+        showUploadList: true,
+        customBtn: false,
+        autoUpload: true,
+        showProgress: true,
+        deleteable: true,
+        customStyle: false,
+        maxCount: 9,
+        disabled: false,
+        
+        lists: [],
+        
+        tips: ['无需依赖额外的样式文件','使用tn-image-upload组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '上传方式',
+                optional: ['自动上传','手动上传'],
+                methods: 'autoUploadChange'
+              },
+              {
+                title: '进度显示',
+                optional: ['是','否'],
+                methods: 'showProgressChange'
+              },
+              {
+                title: '删除按钮显示',
+                optional: ['是','否'],
+                methods: 'deleteableChange'
+              },
+              {
+                title: '最大上传数',
+                optional: ['2','6','9'],
+                methods: 'maxCountChange',
+                current: 2
+              },
+              {
+                title: '自定义列表和上传按钮样式',
+                optional: ['是','否'],
+                methods: 'customUploadListChange',
+                current: 1
+              },
+              {
+                title: '是否禁用',
+                optional: ['是','否'],
+                methods: 'disabledChange',
+                current: 1
+              }
+            ]
+          }
+        ],
+        fullWindowsScroll: false
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换上传方式
+      autoUploadChange(event) {
+        this.autoUpload = event.index === 0 ? true : false
+      },
+      // 切换进度显示
+      showProgressChange(event) {
+        this.showProgress = event.index === 0 ? true : false
+      },
+      // 切换删除按钮显示
+      deleteableChange(event) {
+        this.deleteable = event.index === 0 ? true : false
+      },
+      // 切换允许上传数
+      maxCountChange(event) {
+        this.maxCount = Number(event.name)
+      },
+      // 切换自定义列表样式
+      customUploadListChange(event) {
+        if (event.index === 0) {
+          this.customStyle = true
+          this.showUploadList = false
+          this.customBtn = true
+        } else if (event.index === 1) {
+          this.customStyle = false
+          this.showUploadList = true
+          this.customBtn = false
+        }
+        this.$refs.demoTemplate.updateSectionScrollView()
+      },
+      // 切换禁用
+      disabledChange(event) {
+        this.disabled = event.index === 0 ? true : false
+        this.$refs.demoTemplate.updateSectionScrollView()
+      },
+      
+      // 手动上传文件
+      upload() {
+        this.$refs.imageUpload.upload()
+      },
+      // 手动清空列表
+      clear() {
+        this.$refs.imageUpload.clear()
+      },
+      
+      // 文件上传前执行
+      beforeUpload(index, lists) {
+        console.log('文件上传前执行', lists, index);
+        console.log(this.formData);
+        this.formData.image = lists[index].file
+        return true
+      },
+      
+      
+      listChange(lists, index) {
+        console.log('上传文件列表发生改变', lists, index);
+        this.lists.splice(0, this.lists.length)
+        this.$nextTick(() => {
+          this.lists = this.$tn.deepClone(lists)
+          if (this.customStyle && lists.length > 4) {
+            this.fullWindowsScroll = true
+          } else {
+            this.$refs.demoTemplate.updateSectionScrollView()
+          }
+        })
+      },
+      oversize(val, lists, index) {
+        console.log('上传的文件超过大小', val, lists, index);
+      },
+      exceed(val, lists, index) {
+        console.log('上传的文件超过允许数量', val, lists, index);
+      },
+      chooseComplete(lists, index) {
+        console.log('文件选择成功', lists, index);
+      },
+      chooseFail(err) {
+        console.log('文件选择失败', err);
+      },
+      uploaded(lists, index) {
+        console.log('全部上传文件处理完成', lists, index);
+      },
+      uploadSuccess(data, currentIndex, lists, index) {
+        console.log('文件上传成功', data, currentIndex, lists, index);
+      },
+      uploadChange(res, currentIndex, lists, index) {
+        console.log('文件上传信息有变', res, currentIndex, lists, index);
+      },
+      uploadProgress(res, currentIndex, lists, index) {
+        console.log('文件上传进度', res, currentIndex, lists, index);
+      },
+      uploadError(err, currentIndex, lists, index) {
+        console.log('文件上传失败', err, currentIndex, lists, index);
+      },
+      fileRemove(currentIndex, lists, index) {
+        console.log('文件移除成功', currentIndex, lists, index);
+      },
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-image-upload__item {
+    width: 100%;
+    height: 180rpx;
+    border-radius: 30rpx;
+    margin-bottom: 20rpx;
+    
+    &__image {
+      width: 100%;
+      height: 180rpx;
+      border-radius: 30rpx;
+    }
+  }
+  
+  .tn-image-upload__custom-btn {
+    background-color: $tn-font-holder-color;
+    width: 100%;
+    height: 180rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30rpx;
+  }
+</style>
diff --git a/componentsPage/index-list/avatar/index-list.vue b/componentsPage/index-list/avatar/index-list.vue
new file mode 100644
index 0000000..994ef44
--- /dev/null
+++ b/componentsPage/index-list/avatar/index-list.vue
@@ -0,0 +1,70 @@
+<template>
+
+  <view class="components-index-list">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
+        <view v-for="(item, index) in list" :key="index">
+          <tn-index-anchor :index="item.letter"></tn-index-anchor>
+          <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
+            <image class="index-list-item__image" src="/static/favicon.ico"></image>
+            <view class="index-list-item__name">{{ data_item.name }}</view>
+          </view>
+        </view>
+      </tn-index-list>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import indexList from '../../mock/index.list.js'
+  const letterArr = indexList.list.map(val => {
+    return val.letter
+  })
+  export default {
+    name: 'componentsIndexListAvatar',
+    data() {
+      return {
+        // 滚动的距离
+        scrollTop: 0,
+        // 索引列表
+        indexList: letterArr,
+        list: indexList.list
+      }
+    },
+    onPageScroll(e) {
+      this.scrollTop = e.scrollTop
+    },
+    methods: {
+      
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .index-list-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    
+    &__image {
+      width: 100rpx;
+      height: 100rpx;
+      margin: 8rpx 8rpx;
+      margin-right: 10rpx;
+    }
+  }
+</style>
diff --git a/componentsPage/index-list/base/index-list.vue b/componentsPage/index-list/base/index-list.vue
new file mode 100644
index 0000000..dfde1f4
--- /dev/null
+++ b/componentsPage/index-list/base/index-list.vue
@@ -0,0 +1,63 @@
+<template>
+
+  <view class="components-index-list">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
+        <view v-for="(item, index) in list" :key="index">
+          <tn-index-anchor :index="item.letter"></tn-index-anchor>
+          <view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
+            {{ data_item.name }}
+          </view>
+        </view>
+      </tn-index-list>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import indexList from '../../mock/index.list.js'
+  const letterArr = indexList.list.map(val => {
+    return val.letter
+  })
+  export default {
+    name: 'componentsIndexListBase',
+    data() {
+      return {
+        // 滚动的距离
+        scrollTop: 0,
+        // 索引列表
+        indexList: letterArr,
+        list: indexList.list
+      }
+    },
+    onPageScroll(e) {
+      this.scrollTop = e.scrollTop
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .index-list-item {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 20rpx 24rpx;
+    overflow: hidden;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    line-height: 48rpx;
+    background-color: #FFFFFF;
+  }
+</style>
diff --git a/componentsPage/index-list/index-list.vue b/componentsPage/index-list/index-list.vue
new file mode 100644
index 0000000..099c5f0
--- /dev/null
+++ b/componentsPage/index-list/index-list.vue
@@ -0,0 +1,40 @@
+<template>
+
+  <view class="components-index-list">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <multiple-options-demo
+        :list="optionsList"
+      ></multiple-options-demo>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
+
+  export default {
+    name: 'componentsIndexList',
+    components: { multipleOptionsDemo },
+    data() {
+      return {
+        // 选项列表数据
+        optionsList: [
+          { title: '普通列表', desc: '传入列表数据即可使用', url: '/componentsPage/index-list/base/index-list' },
+          { title: '带头像列表', desc: '通过自定义列表来实现', url: '/componentsPage/index-list/avatar/index-list' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+</style>
diff --git a/componentsPage/input/input.vue b/componentsPage/input/input.vue
new file mode 100644
index 0000000..98dee7d
--- /dev/null
+++ b/componentsPage/input/input.vue
@@ -0,0 +1,231 @@
+<template>
+  <view class="components-input tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Input输入框</tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="禁止输入" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" disabled></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="对齐方式" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">居中对齐</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">右对齐</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="边框" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" border></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="右边显示图标" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="文本域" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">文本域</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="textarea" placeholder="请输入文本"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="内置类型" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">整数</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="number" placeholder="请输入整数"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">小数</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="digit" placeholder="请输入小数"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">身份证</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="idcard" placeholder="请输入身份证"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">电话号码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="密码输入框" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
+          <view class="content__title">密码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="password" placeholder="请输入密码"></tn-input>
+          </view>
+        </view>
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">密码</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="弹出选择" :contentPadding="false">
+        <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
+          <view class="content__title">业务</view>
+          <view class="content__data tn-flex-1">
+            <tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="配合formItem使用" :contentPadding="false">
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="姓名">
+            <tn-input type="text" placeholder="请输入姓名"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="姓名" labelPosition="top" required>
+            <tn-input type="text" placeholder="请输入姓名"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200" labelAlign="center">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="联系电话" :labelWidth="200" labelAlign="right">
+            <tn-input type="tel" placeholder="请输入电话号码"></tn-input>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="验证码" :labelWidth="200">
+            <tn-input type="text" placeholder="请输入验证码"></tn-input>
+            <tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button>
+          </tn-form-item>
+        </view>
+        <view class="content tn-padding-left tn-padding-right">
+          <tn-form-item label="身份证" :labelWidth="200" leftIcon="identity">
+            <tn-input type="idcard" placeholder="请输入身份证号码"></tn-input>
+          </tn-form-item>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+    <!-- 业务类型select -->
+    <tn-select
+      v-model="selectShow"
+      mode="single"
+      :list="selectList"
+      @confirm="businessSelectConfirm"
+    ></tn-select>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  
+  export default {
+    name: 'ComponentsInput',
+    components: { demoTitle },
+    data() {
+      return {
+        inputValue: '',
+        selectShow: false,
+        selectList: [
+          {
+            label: '免费',
+            value: 1101
+          },
+          {
+            label: '会员',
+            value: 1102
+          },
+          {
+            label: '全新开发',
+            value: 1103
+          }
+        ]
+      }
+    },
+    methods: {
+      businessSelectConfirm() {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-input {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+    
+    .content {
+      background-color: #FFFFFF;
+      
+      &__title {
+        padding: 30rpx;
+      }
+      &__data {
+        margin: 10rpx 0;
+        margin-right: 30rpx;
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/keyboard/keyboard.vue b/componentsPage/keyboard/keyboard.vue
new file mode 100644
index 0000000..c6328f5
--- /dev/null
+++ b/componentsPage/keyboard/keyboard.vue
@@ -0,0 +1,317 @@
+<template>
+
+	<view class="components-keyboard">
+
+		<!-- 顶部自定义导航 -->
+		<tn-nav-bar fixed>keyboard键盘</tn-nav-bar>
+
+		<!-- 页面内容 -->
+		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+
+			<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true"
+				@click="click">
+				<view v-if="mode === 'number' || mode === 'card'" class="number-value">
+					<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容"
+						@click="showKeyboard"></tn-input>
+					<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx"
+						height="70rpx" @click="clearInputValue">清空</tn-button>
+				</view>
+				<view v-else class="car-value">
+					<block v-for="(item, index) in 8" :key="index">
+						<view class="car-input" :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
+							@tap="chooseLicensePlateNumber(index)">
+							<block v-if="index === 7 && !licensePlateValue[index]">
+								<view class="new-energy-car">
+									<view class="icon tn-icon-add"></view>
+									<view class="text">新能源</view>
+								</view>
+							</block>
+							<block v-else>
+								<block v-if="licensePlateValue[index]===''">
+
+								</block>
+								<block v-else>
+									{{ licensePlateValue[index]}}
+								</block>
+							</block>
+						</view>
+						<view class="car-point" v-if="index === 1">
+							<view class="point"></view>
+						</view>
+					</block>
+				</view>
+			</dynamic-demo-template>
+
+		</view>
+
+		<!-- 键盘 -->
+		<tn-keyboard v-model="value" :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled"
+			:switchEnMode="switchEnMode" :tooltip="tooltip" :mask="mask" @change="onChange" @cancel="onCancel"
+			@confirm="onConfirm" @backspace="onBackspace"></tn-keyboard>
+
+	</view>
+
+</template>
+
+<script>
+	import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+	export default {
+		name: 'componentsKeyboard',
+		components: {
+			dynamicDemoTemplate
+		},
+		data() {
+			return {
+				value: false,
+				mode: 'number',
+				dotEnabled: true,
+				randomEnabled: false,
+				switchEnMode: false,
+				tooltip: true,
+				mask: true,
+
+				// 输入的值
+				inputValue: '',
+				// 输入的车牌
+				licensePlateValue: ['', '', '', '', '', '', '', ''],
+				// 当前选择输入的车牌号码位置
+				currentLicensePlateIndex: 0,
+
+				tips: ['无需依赖额外的样式文件', '使用tn-keyboard组件'],
+				sectionList: [{
+					name: '参数切换',
+					section: [{
+							title: '模式',
+							optional: ['数字', '身份证', '车牌'],
+							methods: 'modeChange'
+						},
+						{
+							title: '显示点',
+							optional: ['显示', '隐藏'],
+							methods: 'dotEnabledChange'
+						},
+						{
+							title: '打乱顺序',
+							optional: ['是', '否'],
+							methods: 'randomEnabledChange',
+							current: 1
+						},
+						{
+							title: '显示顶部工具栏',
+							optional: ['显示', '隐藏'],
+							methods: 'tooltipChange'
+						},
+						{
+							title: '遮罩显示',
+							optional: ['是', '否'],
+							methods: 'maskChange'
+						}
+					]
+				}]
+			}
+		},
+		watch: {
+			mode(value) {
+				switch (value) {
+					case 'number':
+						this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0)
+						break
+					case 'card':
+						this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1)
+						break
+					case 'car':
+						this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2)
+						break
+				}
+			},
+			currentLicensePlateIndex(value) {
+				if (value === 0) {
+					this.switchEnMode = false
+				} else {
+					this.switchEnMode = true
+				}
+			}
+		},
+		methods: {
+			click(event) {
+				this[event.methods] && this[event.methods](event)
+			},
+			// 弹出键盘
+			showKeyboard() {
+				this.value = true
+			},
+			// 切换模式
+			modeChange(event) {
+				switch (event.index) {
+					case 0:
+						this.mode = 'number'
+						this.dotEnabled = true
+						this.value = true
+						this.$refs.demoTemplate.updateSectionBtnsState(1, true)
+						break
+					case 1:
+						this.mode = 'card'
+						this.value = true
+						this.$refs.demoTemplate.updateSectionBtnsState(1, false)
+						break
+					case 2:
+						this.mode = 'car'
+						this.licensePlateValue = ['', '', '', '', '', '', '', '']
+						this.$refs.demoTemplate.updateSectionBtnsState(1, false)
+						break
+				}
+			},
+			// 切换点显示
+			dotEnabledChange(event) {
+				this.dotEnabled = event.index === 0 ? true : false
+				this.value = true
+			},
+			// 切换乱序显示
+			randomEnabledChange(event) {
+				this.randomEnabled = event.index === 0 ? true : false
+				this.value = true
+			},
+			// 切换顶部工具栏显示
+			tooltipChange(event) {
+				this.tooltip = event.index === 0 ? true : false
+				this.value = true
+			},
+			// 切换遮罩状态
+			maskChange(event) {
+				this.mask = event.index === 0 ? true : false
+				this.value = true
+			},
+
+			// 键盘输入值改变
+			onChange(e) {
+				if (this.mode === 'number' || this.mode === 'card') {
+					this.inputValue += e
+				} else if (this.mode === 'car') {
+					// 判断输入的值是否正确
+					if (this.currentLicensePlateIndex === 0 && !this.$tn.test.chinese(e)) {
+						this.$tn.message.toast('车牌归属地选择错误')
+						return
+					} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
+						this.$tn.message.toast('车牌归属地字母选择错误')
+						return
+					}
+					if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
+						this.$tn.message.toast('车牌号码选择错误')
+						return
+					}
+					// this.licensePlateValue[this.currentLicensePlateIndex] = e
+					this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
+					this.currentLicensePlateIndex++
+					// 判断车牌是否已经选择完成
+					if (this.currentLicensePlateIndex === 8) {
+						this.value = false
+					}
+				}
+			},
+			// 点击了取消按钮
+			onCancel() {
+				this.$tn.message.toast('点击了取消按钮')
+			},
+			// 点击了确认按钮
+			onConfirm() {
+				this.$tn.message.toast('点击了确认按钮')
+				this.value = false
+			},
+			// 点击了退格按钮
+			onBackspace() {
+				if (this.mode === 'number' || this.mode === 'card') {
+					if (!this.inputValue) {
+						return
+					}
+					this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
+				} else if (this.mode === 'car') {
+					let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex
+					if (this.licensePlateValue[licensePlateIndex] !== '') {
+						this.$set(this.licensePlateValue, licensePlateIndex, '')
+					} else {
+						licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex
+						this.$set(this.licensePlateValue, licensePlateIndex, '')
+					}
+					this.currentLicensePlateIndex = licensePlateIndex
+				}
+			},
+
+			// 点击车牌对于位置进行选择输入
+			chooseLicensePlateNumber(index) {
+				this.currentLicensePlateIndex = index
+				this.mode = 'car'
+				this.value = true
+			},
+
+			// 清空内容
+			clearInputValue() {
+				this.inputValue = ''
+			}
+
+		},
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.number-value {
+		display: flex;
+		align-items: center;
+
+		.clear-btn {
+			margin-left: 10rpx;
+		}
+	}
+
+	.car-value {
+		display: flex;
+
+		.car-input {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 74rpx;
+			width: 64rpx;
+			border: 1px solid $tn-border-solid-color;
+			border-radius: 18rpx;
+			text-align: center;
+			font-size: 38rpx;
+			line-height: 1;
+			margin-left: 10rpx;
+			background-color: #FFFFFF;
+
+			&.new-energy {
+				background: transparent;
+				border-style: dashed;
+			}
+		}
+
+		.car-point {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 74rpx;
+			width: 20rpx;
+			margin-left: 10rpx;
+
+			.point {
+				width: 20rpx;
+				height: 20rpx;
+				background-color: $tn-font-holder-color;
+				border-radius: 50%;
+			}
+		}
+
+		.new-energy-car {
+			display: flex;
+			flex-direction: column;
+			font-size: 16rpx;
+			color: $tn-font-sub-color;
+
+			.icon {
+				margin-bottom: 8rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/componentsPage/landscape/landscape.vue b/componentsPage/landscape/landscape.vue
new file mode 100644
index 0000000..6ec5b3c
--- /dev/null
+++ b/componentsPage/landscape/landscape.vue
@@ -0,0 +1,185 @@
+<template>
+
+  <view class="components-landscape">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>压屏窗</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- 压屏窗-->
+    <tn-landscape
+      :show="show"
+      :closeBtn="closeBtn"
+      :closeColor="closeColor"
+      :closeSize="closeSize"
+      :closePosition="closePosition"
+      :closeTop="closeTop"
+      :closeRight="closeRight"
+      :closeBottom="closeBottom"
+      :closeLeft="closeLeft"
+      :mask="mask"
+      :maskCloseable="maskCloseable"
+      @close="closeLandscape"
+    >
+      <image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image>
+    </tn-landscape>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    name: 'ComponentsLandscape',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        closeBtn: true,
+        closeColor: '',
+        closeSize: 0,
+        closePosition: 'rightTop',
+        closeTop: 0,
+        closeRight: 0,
+        closeBottom: 0,
+        closeLeft: 0,
+        mask: true,
+        maskCloseable: true,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-landscape组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '关闭按钮',
+                optional: ['显示','隐藏'],
+                methods: 'closeBtnChange'
+              },
+              {
+                title: '关闭按钮位置',
+                optional: ['左上','右上','底部'],
+                methods: 'closePositionChange',
+                current: 1
+              },
+              {
+                title: '自定义关闭按钮',
+                optional: ['默认','自定义'],
+                methods: 'customCloseChange'
+              },
+              {
+                title: '遮罩',
+                optional: ['显示','隐藏'],
+                methods: 'maskChange'
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['允许','不允许'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出压屏窗
+      showLandscape() {
+        this.openLandscape()
+      },
+      // 切换关闭按钮显示隐藏
+      closeBtnChange(event) {
+        switch (event.index) {
+          case 0:
+            this.closeBtn = true
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2], true)
+            break
+          case 1:
+            this.closeBtn = false
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2], false)
+            break
+        }
+        this.openLandscape()
+      },
+      // 切换关闭按钮位置
+      closePositionChange(event) {
+        switch (event.index) {
+          case 0:
+            this.closePosition = 'leftTop'
+            break
+          case 1:
+            this.closePosition = 'rightTop'
+            break
+          case 2:
+            this.closePosition = 'bottom'
+            break
+        }
+        this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0)
+        this.customCloseChange({index: 0})
+        this.openLandscape()
+      },
+      // 切换自定义关闭按钮样式
+      customCloseChange(event) {
+        if (event.index === 0) {
+          this.closeTop = 0
+          this.closeRight = 0
+          this.closeBottom = 0
+          this.closeLeft = 0
+          this.closeColor = ''
+          this.closeSize = 0
+        } else if (event.index === 1) {
+          if (this.closePosition === 'leftTop') {
+            this.closeTop = -40
+            this.closeLeft = 30
+          } else if (this.closePosition === 'rightTop') {
+            this.closeTop = -40
+            this.closeRight = 30
+          } else if (this.closePosition === 'bottom') {
+            this.closeBottom = -60
+          }
+          this.closeColor = '#E83A30'
+          this.closeSize = 60
+        }
+        this.openLandscape()
+      },
+      // 切换遮罩显示隐藏
+      maskChange(event) {
+        this.mask = event.index === 0 ? true : false
+        this.openLandscape()
+      },
+      // 切换遮罩关闭状态
+      maskCloseableChange(event) {
+        this.maskCloseable = event.index === 0 ? true : false
+        this.openLandscape()
+      },
+      
+      // 打开压屏窗
+      openLandscape() {
+        this.show = true
+      },
+      // 关闭压屏窗
+      closeLandscape() {
+        this.show = false
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/componentsPage/lazy-load/lazy-load.vue b/componentsPage/lazy-load/lazy-load.vue
new file mode 100644
index 0000000..ac55432
--- /dev/null
+++ b/componentsPage/lazy-load/lazy-load.vue
@@ -0,0 +1,102 @@
+<template>
+  <view class="components-lazy-load">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>懒加载</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="content">
+        <block v-for="(item, index) in list" :key="index">
+          <view class="item">
+            <tn-lazy-load
+              :index="index"
+              :image="item.src"
+              :threshold="-450"
+              :height="400"
+              imgMode="aspectFill"
+            ></tn-lazy-load>
+          </view>
+        </block>
+      </view>
+      
+      <tn-load-more :status="status" @loadmore="getData"></tn-load-more>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsLazyLoad',
+    data() {
+      return {
+        status: 'loadmore',
+        list: [],
+        data: [
+          { src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
+          { src: 'error.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
+          { src: 'error.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
+          { src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
+          { src: 'error.jpg' }
+        ]
+      }
+    },
+    onLoad() {
+      this.getData()
+    },
+    onReachBottom() {
+      uni.$emit('tOnLazyLoadReachBottom')
+      this.getData()
+    },
+    methods: {
+      getData() {
+        let index = 0
+        this.status = 'loading'
+        setTimeout(() => {
+          for (let i = 0; i < 10; i++) {
+            index = this.$tn.number.randomInt(0, this.data.length - 1)
+            this.list.push({
+              src: this.data[index].src
+            })
+          }
+          this.status = 'loadmore'
+        }, 1500)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 30rpx;
+    
+    .item {
+      flex: 0 0 335rpx;
+      height: 400rpx;
+      margin-bottom: 20rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+  }
+</style>
diff --git a/componentsPage/list/list.vue b/componentsPage/list/list.vue
new file mode 100644
index 0000000..66a4cab
--- /dev/null
+++ b/componentsPage/list/list.vue
@@ -0,0 +1,365 @@
+<template>
+
+  <view class="components-list tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>列表</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <view>
+          <tn-list-view
+            unlined="bottom"
+            :customTitle="true"
+          >
+            <template slot="title">
+              <view class="custom-title">
+                <tn-button shape="" backgroundColor="tn-main-gradient-indigo" @click="openOptions">设置</tn-button>
+              </view>
+            </template>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
+          </tn-list-view>
+        </view>
+        <view class="tn-margin-top">
+          <tn-list-view
+            :card="true"
+            title="卡片式列表"
+            backgroundColor="#EFEFEF"
+          >
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
+            <tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
+          </tn-list-view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="列表项单独使用">
+        <view>
+          <tn-list-cell>
+            普通列表
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell :radius="true">
+            圆角列表
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-discover tn-color-gray"></view>
+                <view class="list__left__text">图标 + 文字</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-image-text">
+              <view class="list__left">
+                <image src="/static/favicon.ico" class="list__left__image"></image>
+                <view class="list__left__text">图片 + 文字</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-order tn-color-indigo"></view>
+                <view class="list__left__text">文本</view>
+              </view>
+              <view class="list__right">
+                <view class="tn-text-sm tn-color-gray">定一个小目标吧</view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-upload tn-color-cyan"></view>
+                <view class="list__left__text">按钮</view>
+              </view>
+              <view class="list__right">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm">
+                  <text class="tn-icon-upload tn-margin-right-xs"></text>上传
+                </tn-button>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
+                <view class="list__left__text">标签</view>
+              </view>
+              <view class="list__right">
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">篮球</tn-tag>
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">足球</tn-tag>
+                <tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">小球</tn-tag>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <view class="tn-margin-top-sm">
+          <tn-list-cell>
+            <view class="list-icon-text">
+              <view class="list__left">
+                <view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view>
+                <view class="list__left__text">头像组</view>
+              </view>
+              <view class="list__right">
+                <tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group>
+              </view>
+            </view>
+          </tn-list-cell>
+        </view>
+      </demo-title>
+      
+      <demo-title title="聊天示例">
+        <tn-list-view title="消息列表" unlined="bottom">
+          <tn-list-cell :unlined="true">
+            <view class="message">
+              <view class="message__left">
+                <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg"></tn-avatar>
+              </view>
+              <view class="message__middle">
+                <view class="message__name">小图鸟</view>
+                <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
+              </view>
+              <view class="message__right">
+                <view class="message__time">13:14</view>
+                <view class="message__tips">
+                  <tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag>
+                </view>
+              </view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell :unlined="true">
+            <view class="message">
+              <view class="message__left">
+                <tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
+              </view>
+              <view class="message__middle">
+                <view class="message__name">小图鸟</view>
+                <view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
+              </view>
+              <view class="message__right">
+                <view class="message__time">13:14</view>
+                <view class="message__tips">
+                  <text class="message__tips__icon tn-icon-sound-close"></text>
+                </view>
+              </view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+      <tn-modal
+        v-model="showListOptions"
+        :custom="true"
+        padding="0"
+      >
+        <tn-list-view>
+          <tn-list-cell>
+            <view class="list__options">
+              <view class="list__options__title">下划线</view>
+              <view class="list__options__switch"><tn-switch v-model="cellShowBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell v-if="!cellUnlined">
+            <view class="list__options">
+              <view class="list__options__title">长下划线</view>
+              <view class="list__options__switch"><tn-switch v-model="cellLongBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell>
+            <view class="list__options">
+              <view class="list__options__title">箭头</view>
+              <view class="list__options__switch"><tn-switch v-model="cellArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell v-if="cellArrow">
+            <view class="list__options">
+              <view class="list__options__title">无边距箭头</view>
+              <view class="list__options__switch"><tn-switch v-model="cellNoPaddingArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
+            </view>
+          </tn-list-cell>
+        </tn-list-view>
+      </tn-modal>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsList',
+    components: {demoTitle},
+    data() {
+      return {
+        showListOptions: false,
+        cellShowBorderLine: true,
+        cellLongBorderLine: false,
+        cellNoPaddingArrow: false,
+        
+        cellArrow: false,
+        cellArrowRight: true,
+        cellUnlined: false,
+        cellLineLeft: true,
+        cellLineRight: true,
+        
+        avatarGroupList: [
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
+          {src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
+        ]
+      }
+    },
+    watch: {
+      cellShowBorderLine(val) {
+        if (val) {
+          this.cellUnlined = false
+        } else {
+          this.cellUnlined = true
+        }
+      },
+      cellLongBorderLine(val) {
+        if (val) {
+          this.cellLineLeft = false
+          this.cellLineRight = false
+        } else {
+          this.cellLineLeft = true
+          this.cellLineRight = true
+        }
+      },
+      cellNoPaddingArrow(val) {
+        if (val) {
+          this.cellArrowRight = false
+        } else {
+          this.cellArrowRight = true
+        }
+      }
+    },
+    methods: {
+      // 弹出设置弹框
+      openOptions() {
+        this.showListOptions = true
+      },
+      // 关闭设置弹框
+      closeOptions() {
+        this.showListOptions = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-list {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+  
+  .custom-title {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 10rpx 20rpx;
+  }
+  
+  .list__options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .list {
+    &__left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      
+      &__icon, &__image {
+        margin-right: 18rpx;
+      }
+    }
+    
+    &__right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+  
+  .list-icon-text, .list-image-text {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .list-image-text {
+    .list {
+      &__left {
+        &__image {
+          width: 20rpx;
+          height: 20rpx;
+        }
+      }
+    }
+  }
+  
+  .message {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    
+    &__left {
+      width: 10%;
+    }
+    &__middle {
+      width: 80%;
+      padding-left: 20rpx;
+      padding-right: 40rpx;
+    }
+    &__right {
+      width: 10%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    &__name {
+      font-size: 32rpx;
+      margin-bottom: 8rpx;
+    }
+    &__content {
+      font-size: 26rpx;
+      color: #838383;
+    }
+    &__tips {
+      &__icon {
+        font-size: 36rpx;
+        color: #AAAAAA;
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/load-more/load-more.vue b/componentsPage/load-more/load-more.vue
new file mode 100644
index 0000000..2a603a7
--- /dev/null
+++ b/componentsPage/load-more/load-more.vue
@@ -0,0 +1,81 @@
+<template>
+  <view class="components-load-more tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>加载更多</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="默认">
+        <tn-load-more></tn-load-more>
+      </demo-title>
+      
+      <demo-title title="加载中">
+        <tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="没有更多">
+        <tn-load-more status="nomore"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改提示语">
+        <tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改颜色">
+        <tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more>
+        </view>
+        <view class="tn-margin-top">
+          <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改字体尺寸">
+        <tn-load-more :fontSize="32"></tn-load-more>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsLoadMore',
+    components: { demoTitle },
+    data() {
+      return {
+        loadText: {
+          loadmore: '下拉加载',
+          loading: '快速加载中...',
+          nomore: '已经没有了啊'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/componentsPage/loading/loading.vue b/componentsPage/loading/loading.vue
new file mode 100644
index 0000000..80bea5a
--- /dev/null
+++ b/componentsPage/loading/loading.vue
@@ -0,0 +1,86 @@
+<template>
+
+  <view class="components-loading tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Loading加载动画</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="样式">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="tn-margin-right">
+            <tn-loading show="show"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower"></tn-loading>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="大小">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="tn-margin-right">
+            <tn-loading show="show"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" :size="50"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" :size="80"></tn-loading>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-margin-top">
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower" :size="50"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" mode="flower" :size="80"></tn-loading>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="颜色">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view class="tn-margin-right">
+            <tn-loading show="show"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" color="#01BEFF"></tn-loading>
+          </view>
+          <view class="tn-margin-right">
+            <tn-loading show="show" color="#E83A30"></tn-loading>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsLoading',
+    components: {demoTitle},
+    data() {
+      return {
+        show: true,
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/componentsPage/mock/index.list.js b/componentsPage/mock/index.list.js
new file mode 100644
index 0000000..7e0f5ed
--- /dev/null
+++ b/componentsPage/mock/index.list.js
@@ -0,0 +1,585 @@
+module.exports = {
+	list: [{
+			"letter": "A",
+			"data": [{
+					"name": "阿拉斯加",
+					"mobile": "13588889999",
+					"keyword": "阿拉斯加ABA13588889999"
+				},
+				{
+					"name": "阿克苏",
+					"mobile": "0551-4386721",
+					"keyword": "阿克苏AKESU0551-4386721"
+				},
+				{
+					"name": "阿拉善",
+					"mobile": "4008009100",
+					"keyword": "阿拉善ALASHAN4008009100"
+				},
+				{
+					"name": "阿勒泰",
+					"mobile": "13588889999",
+					"keyword": "阿勒泰ALETAI13588889999"
+				},
+				{
+					"name": "阿里",
+					"mobile": "13588889999",
+					"keyword": "阿里ALI13588889999"
+				},
+				{
+					"name": "安阳",
+					"mobile": "13588889999",
+					"keyword": "13588889999安阳ANYANG"
+				}
+			]
+		},
+		{
+			"letter": "B",
+			"data": [{
+					"name": "白城",
+					"mobile": "该主子没有留电话~",
+					"keyword": "白城BAICHENG"
+				},
+				{
+					"name": "白山",
+					"mobile": "13588889999",
+					"keyword": "白山BAISHAN13588889999"
+				},
+				{
+					"name": "白银",
+					"mobile": "13588889999",
+					"keyword": "白银BAIYIN13588889999"
+				},
+				{
+					"name": "保定",
+					"mobile": "13588889999",
+					"keyword": "保定BAODING13588889999"
+				}
+			]
+		},
+		{
+			"letter": "C",
+			"data": [{
+					"name": "沧州",
+					"mobile": "13588889999",
+					"keyword": "沧州CANGZHOU13588889999"
+				},
+				{
+					"name": "长春",
+					"mobile": "13588889999",
+					"keyword": "长春CHANGCHUN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "D",
+			"data": [{
+					"name": "大理",
+					"mobile": "13588889999",
+					"keyword": "大理DALI13588889999"
+				},
+				{
+					"name": "大连",
+					"mobile": "13588889999",
+					"keyword": "大连DALIAN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "E",
+			"data": [{
+					"name": "鄂尔多斯",
+					"mobile": "13588889999",
+					"keyword": "鄂尔多斯EERDUOSI13588889999"
+				},
+				{
+					"name": "恩施",
+					"mobile": "13588889999",
+					"keyword": "恩施ENSHI13588889999"
+				},
+				{
+					"name": "鄂州",
+					"mobile": "13588889999",
+					"keyword": "鄂州EZHOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "F",
+			"data": [{
+					"name": "防城港",
+					"mobile": "该主子没有留电话~",
+					"keyword": "防城港FANGCHENGGANG"
+				},
+				{
+					"name": "抚顺",
+					"mobile": "13588889999",
+					"keyword": "抚顺FUSHUN13588889999"
+				},
+				{
+					"name": "阜新",
+					"mobile": "13588889999",
+					"keyword": "阜新FUXIN13588889999"
+				},
+				{
+					"name": "阜阳",
+					"mobile": "13588889999",
+					"keyword": "阜阳FUYANG13588889999"
+				},
+				{
+					"name": "抚州",
+					"mobile": "13588889999",
+					"keyword": "抚州FUZHOU13588889999"
+				},
+				{
+					"name": "福州",
+					"mobile": "13588889999",
+					"keyword": "福州FUZHOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "G",
+			"data": [{
+					"name": "甘南",
+					"mobile": "13588889999",
+					"keyword": "甘南GANNAN13588889999"
+				},
+				{
+					"name": "赣州",
+					"mobile": "13588889999",
+					"keyword": "赣州GANZHOU13588889999"
+				},
+				{
+					"name": "甘孜",
+					"mobile": "13588889999",
+					"keyword": "甘孜GANZI13588889999"
+				}
+			]
+		},
+		{
+			"letter": "H",
+			"data": [{
+					"name": "哈尔滨",
+					"mobile": "13588889999",
+					"keyword": "哈尔滨HAERBIN13588889999"
+				},
+				{
+					"name": "海北",
+					"mobile": "13588889999",
+					"keyword": "海北HAIBEI13588889999"
+				},
+				{
+					"name": "海东",
+					"mobile": "13588889999",
+					"keyword": "海东HAIDONG13588889999"
+				},
+				{
+					"name": "海口",
+					"mobile": "13588889999",
+					"keyword": "海口HAIKOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "I",
+			"data": [{
+				"name": "ice",
+				"mobile": "13588889999",
+				"keyword": "佳木斯JIAMUSI13588889999"
+			}]
+		},
+		{
+			"letter": "J",
+			"data": [{
+					"name": "佳木斯",
+					"mobile": "13588889999",
+					"keyword": "佳木斯JIAMUSI13588889999"
+				},
+				{
+					"name": "吉安",
+					"mobile": "13588889999",
+					"keyword": "吉安JIAN13588889999"
+				},
+				{
+					"name": "江门",
+					"mobile": "13588889999",
+					"keyword": "江门JIANGMEN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "K",
+			"data": [{
+					"name": "开封",
+					"mobile": "13588889999",
+					"keyword": "开封KAIFENG13588889999"
+				},
+				{
+					"name": "喀什",
+					"mobile": "13588889999",
+					"keyword": "喀什KASHI13588889999"
+				},
+				{
+					"name": "克拉玛依",
+					"mobile": "13588889999",
+					"keyword": "克拉玛依KELAMAYI13588889999"
+				}
+			]
+		},
+		{
+			"letter": "L",
+			"data": [{
+					"name": "来宾",
+					"mobile": "13588889999",
+					"keyword": "来宾LAIBIN13588889999"
+				},
+				{
+					"name": "兰州",
+					"mobile": "13588889999",
+					"keyword": "兰州LANZHOU13588889999"
+				},
+				{
+					"name": "拉萨",
+					"mobile": "13588889999",
+					"keyword": "拉萨LASA13588889999"
+				},
+				{
+					"name": "乐山",
+					"mobile": "13588889999",
+					"keyword": "乐山LESHAN13588889999"
+				},
+				{
+					"name": "凉山",
+					"mobile": "13588889999",
+					"keyword": "凉山LIANGSHAN13588889999"
+				},
+				{
+					"name": "连云港",
+					"mobile": "13588889999",
+					"keyword": "连云港LIANYUNGANG13588889999"
+				},
+				{
+					"name": "聊城",
+					"mobile": "18322223333",
+					"keyword": "聊城LIAOCHENG18322223333"
+				},
+				{
+					"name": "辽阳",
+					"mobile": "18322223333",
+					"keyword": "辽阳LIAOYANG18322223333"
+				},
+				{
+					"name": "辽源",
+					"mobile": "18322223333",
+					"keyword": "辽源LIAOYUAN18322223333"
+				},
+				{
+					"name": "丽江",
+					"mobile": "18322223333",
+					"keyword": "丽江LIJIANG18322223333"
+				},
+				{
+					"name": "临沧",
+					"mobile": "18322223333",
+					"keyword": "临沧LINCANG18322223333"
+				},
+				{
+					"name": "临汾",
+					"mobile": "18322223333",
+					"keyword": "临汾LINFEN18322223333"
+				},
+				{
+					"name": "临夏",
+					"mobile": "18322223333",
+					"keyword": "临夏LINXIA18322223333"
+				},
+				{
+					"name": "临沂",
+					"mobile": "18322223333",
+					"keyword": "临沂LINYI18322223333"
+				},
+				{
+					"name": "林芝",
+					"mobile": "18322223333",
+					"keyword": "林芝LINZHI18322223333"
+				},
+				{
+					"name": "丽水",
+					"mobile": "18322223333",
+					"keyword": "丽水LISHUI18322223333"
+				}
+			]
+		},
+		{
+			"letter": "M",
+			"data": [{
+					"name": "眉山",
+					"mobile": "15544448888",
+					"keyword": "眉山MEISHAN15544448888"
+				},
+				{
+					"name": "梅州",
+					"mobile": "15544448888",
+					"keyword": "梅州MEIZHOU15544448888"
+				},
+				{
+					"name": "绵阳",
+					"mobile": "15544448888",
+					"keyword": "绵阳MIANYANG15544448888"
+				},
+				{
+					"name": "牡丹江",
+					"mobile": "15544448888",
+					"keyword": "牡丹江MUDANJIANG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "N",
+			"data": [{
+					"name": "南昌",
+					"mobile": "15544448888",
+					"keyword": "南昌NANCHANG15544448888"
+				},
+				{
+					"name": "南充",
+					"mobile": "15544448888",
+					"keyword": "南充NANCHONG15544448888"
+				},
+				{
+					"name": "南京",
+					"mobile": "15544448888",
+					"keyword": "南京NANJING15544448888"
+				},
+				{
+					"name": "南宁",
+					"mobile": "15544448888",
+					"keyword": "南宁NANNING15544448888"
+				},
+				{
+					"name": "南平",
+					"mobile": "15544448888",
+					"keyword": "南平NANPING15544448888"
+				}
+			]
+		},
+		{
+			"letter": "O",
+			"data": [{
+				"name": "欧阳",
+				"mobile": "15544448888",
+				"keyword": "欧阳ouyang15544448888"
+			}]
+		},
+		{
+			"letter": "P",
+			"data": [{
+					"name": "盘锦",
+					"mobile": "15544448888",
+					"keyword": "盘锦PANJIN15544448888"
+				},
+				{
+					"name": "攀枝花",
+					"mobile": "15544448888",
+					"keyword": "攀枝花PANZHIHUA15544448888"
+				},
+				{
+					"name": "平顶山",
+					"mobile": "15544448888",
+					"keyword": "平顶山PINGDINGSHAN15544448888"
+				},
+				{
+					"name": "平凉",
+					"mobile": "15544448888",
+					"keyword": "平凉PINGLIANG15544448888"
+				},
+				{
+					"name": "萍乡",
+					"mobile": "15544448888",
+					"keyword": "萍乡PINGXIANG15544448888"
+				},
+				{
+					"name": "普洱",
+					"mobile": "15544448888",
+					"keyword": "普洱PUER15544448888"
+				},
+				{
+					"name": "莆田",
+					"mobile": "15544448888",
+					"keyword": "莆田PUTIAN15544448888"
+				},
+				{
+					"name": "濮阳",
+					"mobile": "15544448888",
+					"keyword": "濮阳PUYANG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Q",
+			"data": [{
+					"name": "黔东南",
+					"mobile": "15544448888",
+					"keyword": "黔东南QIANDONGNAN15544448888"
+				},
+				{
+					"name": "黔南",
+					"mobile": "15544448888",
+					"keyword": "黔南QIANNAN15544448888"
+				},
+				{
+					"name": "黔西南",
+					"mobile": "15544448888",
+					"keyword": "黔西南QIANXINAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "R",
+			"data": [{
+					"name": "日喀则",
+					"mobile": "15544448888",
+					"keyword": "日喀则RIKAZE15544448888"
+				},
+				{
+					"name": "日照",
+					"mobile": "15544448888",
+					"keyword": "日照RIZHAO15544448888"
+				}
+			]
+		},
+		{
+			"letter": "S",
+			"data": [{
+					"name": "三门峡",
+					"mobile": "15544448888",
+					"keyword": "三门峡SANMENXIA15544448888"
+				},
+				{
+					"name": "三明",
+					"mobile": "15544448888",
+					"keyword": "三明SANMING15544448888"
+				},
+				{
+					"name": "三沙",
+					"mobile": "15544448888",
+					"keyword": "三沙SANSHA15544448888"
+				}
+			]
+		},
+		{
+			"letter": "T",
+			"data": [{
+					"name": "塔城",
+					"mobile": "15544448888",
+					"keyword": "塔城TACHENG15544448888"
+				},
+				{
+					"name": "漯河",
+					"mobile": "15544448888",
+					"keyword": "漯河TAHE15544448888"
+				},
+				{
+					"name": "泰安",
+					"mobile": "15544448888",
+					"keyword": "泰安TAIAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "W",
+			"data": [{
+					"name": "潍坊",
+					"mobile": "15544448888",
+					"keyword": "潍坊WEIFANG15544448888"
+				},
+				{
+					"name": "威海",
+					"mobile": "15544448888",
+					"keyword": "威海WEIHAI15544448888"
+				},
+				{
+					"name": "渭南",
+					"mobile": "15544448888",
+					"keyword": "渭南WEINAN15544448888"
+				},
+				{
+					"name": "文山",
+					"mobile": "15544448888",
+					"keyword": "文山WENSHAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "X",
+			"data": [{
+					"name": "厦门",
+					"mobile": "15544448888",
+					"keyword": "厦门XIAMEN15544448888"
+				},
+				{
+					"name": "西安",
+					"mobile": "15544448888",
+					"keyword": "西安XIAN15544448888"
+				},
+				{
+					"name": "湘潭",
+					"mobile": "15544448888",
+					"keyword": "湘潭XIANGTAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Y",
+			"data": [{
+					"name": "雅安",
+					"mobile": "15544448888",
+					"keyword": "雅安YAAN15544448888"
+				},
+				{
+					"name": "延安",
+					"mobile": "15544448888",
+					"keyword": "延安YANAN15544448888"
+				},
+				{
+					"name": "延边",
+					"mobile": "15544448888",
+					"keyword": "延边YANBIAN15544448888"
+				},
+				{
+					"name": "盐城",
+					"mobile": "15544448888",
+					"keyword": "盐城YANCHENG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Z",
+			"data": [{
+					"name": "枣庄",
+					"mobile": "15544448888",
+					"keyword": "枣庄ZAOZHUANG15544448888"
+				},
+				{
+					"name": "张家界",
+					"mobile": "15544448888",
+					"keyword": "张家界ZHANGJIAJIE15544448888"
+				},
+				{
+					"name": "张家口",
+					"mobile": "15544448888",
+					"keyword": "张家口ZHANGJIAKOU15544448888"
+				}
+			]
+		},
+		{
+			"letter": "#",
+			"data": [{
+				"name": "其他.",
+				"mobile": "16666666666",
+				"keyword": "echo16666666666"
+			}]
+		}
+	]
+}
diff --git a/componentsPage/modal/modal.vue b/componentsPage/modal/modal.vue
new file mode 100644
index 0000000..66fe440
--- /dev/null
+++ b/componentsPage/modal/modal.vue
@@ -0,0 +1,277 @@
+<template>
+
+  <view class="modal">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>模态框</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- 模态框 -->
+    <tn-modal
+      v-model="show"
+      :backgroundColor="backgroundColor"
+      :width="width"
+      :padding="padding"
+      :radius="radius"
+      :fontColor="fontColor"
+      :fontSize="fontSize"
+      :title="title"
+      :content="content"
+      :button="button"
+      :showCloseBtn="closeBtn || !maskCloseable"
+      :maskCloseable="maskCloseable"
+      :zoom="zoom"
+      :custom="custom"
+      @click="clickBtn"
+    >
+      <view v-if="custom">
+        <view class="custom-modal-content">
+          <tn-form :labelWidth="140">
+            <tn-form-item label="手机号码" :borderBottom="false">
+              <tn-input placeholder="请输入手机号码"></tn-input>
+            </tn-form-item>
+            <tn-form-item label="验证码" :borderBottom="false">
+              <tn-input placeholder="请输入验证码"></tn-input>
+              <view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
+                <tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button>
+              </view>
+            </tn-form-item>
+          </tn-form>
+        </view>
+      </view>
+    </tn-modal>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsModal',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        title: '使用提醒',
+        content: '确定不使用TuniaoUI',
+        show: false,
+        backgroundColor: '',
+        width: '84%',
+        padding: '',
+        radius: 12,
+        fontColor: '',
+        fontSize: 0,
+        button:[
+          {
+            text: '取消',
+            backgroundColor: '#A4E82F',
+            fontColor: '#FFFFFF'
+          },
+          {
+            text: '确定',
+            backgroundColor: 'tn-bg-indigo',
+            fontColor: '#FFFFFF'
+          }
+        ],
+        closeBtn: true,
+        maskCloseable: true,
+        zoom: true,
+        custom: false,
+
+        tips: ['无需依赖额外的样式文件','使用tn-modal组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '自定义颜色',
+                optional: ['默认','自定义'],
+                methods: 'colorChange'
+              },
+              {
+                title: '自定义大小',
+                optional: ['默认','自定义'],
+                methods: 'sizeChange'
+              },
+              {
+                title: '自定义内容',
+                optional: ['是','否'],
+                methods: 'customChange',
+                current: 1
+              },
+              {
+                title: '圆角',
+                optional: ['默认','60'],
+                methods: 'radiusChange'
+              },
+              {
+                title: '标题',
+                optional: ['显示','隐藏'],
+                methods: 'titleChange'
+              },
+              {
+                title: '按钮',
+                optional: ['显示','隐藏'],
+                methods: 'buttonChange'
+              },
+              {
+                title: '右上角关闭按钮',
+                optional: ['显示','隐藏'],
+                methods: 'closeBtnChange'
+              },
+              {
+                title: '点击mask关闭',
+                optional: ['是','否'],
+                methods: 'maskCloseableChange'
+              },
+              {
+                title: '动画',
+                optional: ['有','无'],
+                methods: 'zoomChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出模态框
+      showModal(event) {
+        this.openModal()
+      },
+      // 切换颜色
+      colorChange(event) {
+        if (event.index === 0) {
+          this.backgroundColor = ''
+          this.fontColor = ''
+        } else {
+          this.backgroundColor = '#E4E9EC'
+          this.fontColor = '#BA7027'
+        }
+        this.openModal()
+      },
+      // 切换大小
+      sizeChange(event) {
+        if (event.index === 0) {
+          // this.width = '84%'
+          this.padding = ''
+          this.fontSize = 0
+        } else {
+          // this.width = '480rpx'
+          this.padding = '30rpx 26rpx'
+          this.fontSize = 35
+        }
+        this.openModal()
+      },
+      // 切换自定义内容
+      customChange(event) {
+        if (event.index === 0) {
+          this.custom = true
+          this.$refs.demoTemplate.updateSectionBtnsState([4,5], false)
+        } else {
+          this.custom = false
+          this.$refs.demoTemplate.updateSectionBtnsState([4,5], true)
+        }
+        this.openModal()
+      },
+      // 切换圆角
+      radiusChange(event) {
+        this.radius = event.index === 0 ? 12 : Number(event.name)
+        this.openModal()
+      },
+      // 切换标题信息
+      titleChange(event) {
+        this.title = event.index === 0 ? '使用提醒' : ''
+        this.openModal()
+      },
+      // 切换按钮
+      buttonChange(event) {
+        this.button = event.index === 0 ? [
+          {
+            text: '取消',
+            backgroundColor: '#E6E6E6',
+            fontColor: '#FFFFFF'
+          },
+          {
+            text: '确定',
+            backgroundColor: 'tn-bg-indigo',
+            fontColor: '#FFFFFF'
+          }
+        ] : []
+        this.openModal()
+      },
+      // 切换关闭按钮显示隐藏
+      closeBtnChange(event) {
+        this.closeBtn = event.index === 0 ? true : false
+        this.openModal()
+      },
+      // 切换蒙版层关闭
+      maskCloseableChange(event) {
+        if (event.index === 0) {
+          this.maskCloseable = true
+        } else {
+          this.maskCloseable = false
+          this.closeBtn = true
+          this.$refs.demoTemplate.updateSectionBtnsValue(0, 6, 0)
+        }
+        this.openModal()
+      },
+      // 切换动画
+      zoomChange(event) {
+        this.zoom = event.index === 0 ? true : false
+        this.openModal()
+      },
+      
+      // 打开模态框
+      openModal() {
+        this.show = true
+      },
+      
+      // 点击按钮
+      clickBtn(event) {
+        this.show = false
+        this.$tn.message.toast('点击了第'+(event.index + 1)+'个按钮')
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+  .tn-modal-class {
+    .custom-modal-content {
+      width: 100%;
+      height: 100%;
+      padding: 40rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      
+      .icon {
+        font-size: 100rpx;
+        margin-bottom: 20rpx;
+        color: $tn-main-color;
+      }
+      
+      .text {
+        font-size: 40rpx;
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/nav-bar/nav-bar.vue b/componentsPage/nav-bar/nav-bar.vue
new file mode 100644
index 0000000..2862615
--- /dev/null
+++ b/componentsPage/nav-bar/nav-bar.vue
@@ -0,0 +1,188 @@
+<template>
+
+  <view class="components-nav_bar">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar
+      v-if="mode === 'normal'"
+      fixed
+      :height="height"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :alpha="alpha"
+      :bottomShadow="bottomShadow"
+    >navBar导航栏</tn-nav-bar>
+    
+    <tn-nav-bar
+      v-if="mode === 'customBack'"
+      fixed
+      :height="height"
+      :customBack="true"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :alpha="alpha"
+      :bottomShadow="bottomShadow"
+    >
+      <view slot="back" class='tn-custom-nav-bar__back'>
+        <view><text class='tn-icon-left'></text></view>
+        <view><text class='tn-icon-home-capsule-fill'></text></view>
+      </view>
+      <view class="custom-nav-content">
+        <view class="search-content">
+          <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <tn-nav-bar
+      v-if="mode === 'customNav'"
+      fixed
+      :height="height"
+      :isBack="false"
+      :backgroundColor="backgroundColor"
+      :fontColor="fontColor"
+      :alpha="alpha"
+      :bottomShadow="bottomShadow"
+    >
+      <view class="custom-nav-content">
+        <view class="search-content">
+          <tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
+        </view>
+      </view>
+    </tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click" :noDemo="true">
+      </dynamic-demo-template>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsNavbar',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        searchValue: '',
+        mode: 'normal',
+        height: 0,
+        backgroundColor: '#FFFFFF',
+        fontColor: '',
+        alpha: false,
+        bottomShadow: true,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '高度',
+                optional: ['默认','38','80'],
+                methods: 'heightChange'
+              },
+              {
+                title: '样式',
+                optional: ['默认','自定义返回按钮', '隐藏返回栏自定义内容'],
+                methods: 'modeChange'
+              },
+              {
+                title: '背景颜色',
+                optional: ['默认','#01BEFF','tn-bg-grey','tn-main-gradient-indigo','透明'],
+                methods: 'backgroundColorChange'
+              },
+              {
+                title: '底部阴影',
+                optional: ['默认','隐藏'],
+                methods: 'bottomShadowChange'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换高度
+      heightChange(event) {
+        this.height = event.index === 0 ? 0 : Number(event.name)
+      },
+      // 切换样式
+      modeChange(event) {
+        switch(event.index) {
+          case 0:
+            this.mode = 'normal'
+            break
+          case 1:
+            this.mode = 'customBack'
+            break
+          case 2:
+            this.mode = 'customNav'
+            break
+        }
+      },
+      // 切换背景颜色
+      backgroundColorChange(event) {
+        switch(event.index) {
+          case 0:
+            this.backgroundColor = '#FFFFFF'
+            this.fontColor = ''
+            this.alpha = false
+            break
+          case 1:
+          case 2:
+          case 3:
+            this.fontColor = '#FFFFFF'
+            this.backgroundColor = event.name
+            this.alpha = false
+            break
+          case 4:
+            this.backgroundColor = ''
+            this.fontColor = ''
+            this.alpha = true
+            break
+        }
+      },
+      // 切换底部阴影
+      bottomShadowChange(event) {
+        this.bottomShadow = event.index === 0 ? true : false
+      }
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .custom-nav-content {
+    width: 80%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-left: 20rpx;
+    
+    .search-content {
+      flex: 1;
+      
+      .search-input {
+        border-radius: 30rpx;
+        
+        /* #ifdef MP-WEIXIN */
+        /deep/ .tn-input-class {
+          border-radius: 30rpx;
+        }
+        /* #endif */
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/notice-bar/notice-bar.vue b/componentsPage/notice-bar/notice-bar.vue
new file mode 100644
index 0000000..580a666
--- /dev/null
+++ b/componentsPage/notice-bar/notice-bar.vue
@@ -0,0 +1,93 @@
+<template>
+
+  <view class="components-notice-bar tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="水平连续滚动">
+        <tn-notice-bar :list="list"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="水平不连续滚动">
+        <tn-notice-bar :list="list" :circular="false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="垂直滚动">
+        <tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="手动滚动">
+        <tn-notice-bar :list="list" mode="vertical" :autoplay="false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="停止滚动">
+        <tn-notice-bar :list="list" mode="vertical" playStatus="paused"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="慢速滚动">
+        <tn-notice-bar :list="list" :speed="100"></tn-notice-bar>
+        <view class="tn-margin-top">
+          <tn-notice-bar :list="list" mode="vertical" :duration="5000"></tn-notice-bar>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示关闭按钮">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="隐藏左右两侧图标">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="false" :leftIcon="false" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义左右两侧图标">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :leftIcon="true" rightIconName="set" leftIconName="all" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义大小">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :fontSize="34" :leftIconSize="40" :rightIconSize="40" @close="closeNoticeShow = false"></tn-notice-bar>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="#EFEFEF" @close="closeNoticeShow = false"></tn-notice-bar>
+        <view class="tn-margin-top">
+          <tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="tn-main-gradient-indigo" @close="closeNoticeShow = false"></tn-notice-bar>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsNoticeBar',
+    components: {demoTitle},
+    data() {
+      return {
+        list: [
+          'TuniaoUI现已发布V1.0.0',
+          '今天天气晴朗，适合处理bug',
+          'TuniaoUIV2.0.0即将发布',
+          '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
+        ],
+        closeNoticeShow: true,
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/number-box/number-box.vue b/componentsPage/number-box/number-box.vue
new file mode 100644
index 0000000..f65d6ae
--- /dev/null
+++ b/componentsPage/number-box/number-box.vue
@@ -0,0 +1,80 @@
+<template>
+
+  <view class="components-number_box tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>numberBox步进输入</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-number-box v-model="value1"></tn-number-box>
+          </view>
+          <view class="tn-margin-left">
+            <tn-number-box v-model="value1" :disabled="true"></tn-number-box>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="设置步进值">
+        <tn-number-box v-model="value2" :step="2"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="设置最小最大值">
+        <tn-number-box v-model="value3" :min="50" :max="1000"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="设置允许输入小数">
+        <tn-number-box v-model="value4" :positiveInteger="false" :step="0.5"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="禁止输入">
+        <tn-number-box v-model="value5" :disabledInput="true"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <tn-number-box v-model="value6" :inputWidth="140" :inputHeight="60" :fontSize="40"></tn-number-box>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-number-box v-model="value7" backgroundColor="#AAAAAA" fontColor="#838383"></tn-number-box>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsNumberBox',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: 0,
+        value2: 0,
+        value3: 0,
+        value4: 0,
+        value5: 0,
+        value6: 0,
+        value7: 0
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-number_box {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/picker/picker.vue b/componentsPage/picker/picker.vue
new file mode 100644
index 0000000..c1b0eeb
--- /dev/null
+++ b/componentsPage/picker/picker.vue
@@ -0,0 +1,303 @@
+<template>
+
+  <view class="components-picker">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Picker选择器</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view>
+        <view class="picker-result tn-border-dashed">
+          {{ result }}
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- picker -->
+    <tn-picker
+      v-model="show"
+      :mode="mode"
+      :params="params"
+      :range="range"
+      :rangeKey="rangeKey"
+      :defaultSelector="defaultSelector"
+      :showTimeTag="showTimeTag"
+      :startYear="startYear"
+      :endYear="endYear"
+      :defaultTime="defaultTime"
+      :defaultRegin="defaultRegion"
+      :areaCode="areaCode"
+      :maskCloseable="maskCloseable"
+      @cancel="cancelPicker"
+      @confirm="confirmPicker"
+    >
+    </tn-picker>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    name: 'componentsPicker',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        result: 'Picker结果',
+        show: false,
+        mode: 'selector',
+        params: {
+          year: true,
+          month: true,
+          day: true,
+          hour: false,
+          minute: false,
+          second: false,
+          province: true,
+          city: true,
+          area: true,
+          timestamp: true
+        },
+        showTimeTag: false,
+        startYear: 2000,
+        endYear: 2100,
+        defaultTime: '2021/10/01 12:00:00',
+        defaultRegion: ['广东省','广州市','天河区'],
+        areaCode: [],
+        maskCloseable: true,
+        range: ['哆啦A梦','大熊','小夫','静香','胖虎'],
+        rangeKey: '',
+        defaultSelector: [0],
+        
+        tips: ['无需依赖额外的样式文件','使用tn-picker组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '模式',
+                optional: ['单列','多列','时间','地区'],
+                methods: 'modeChange'
+              },
+              {
+                title: '显示时分秒',
+                optional: ['隐藏','显示'],
+                methods: 'timeSecondChange',
+                show: false
+              },
+              {
+                title: '显示时间单位',
+                optional: ['隐藏','显示'],
+                methods: 'showTimeTagChange',
+                show: false
+              },
+              {
+                title: '指定起始年份',
+                optional: ['2000-2100','2020-2030'],
+                methods: 'timeRangeChange',
+                show: false
+              },
+              {
+                title: '默认时间',
+                optional: ['2021/10/01 12:00:00','2021-10-01 17:00:00'],
+                methods: 'defaultTimeChange',
+                show: false
+              },
+              {
+                title: '默认地区',
+                optional: ['广东省-广州市-天河区','44-4401-440107'],
+                methods: 'defaultRegionChange',
+                show: false
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['是','否'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出Picker
+      showPicker(event) {
+        this.openPicker()
+      },
+      // 切换模式
+      modeChange(event) {
+        switch(event.index) {
+          case 0:
+            this.mode = 'selector'
+            this.range = ['哆啦A梦','大熊','小夫','静香','胖虎']
+            this.defaultSelector = [0]
+            this.rangeKey = ''
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
+            this.$refs.demoTemplate.updateSectionBtnsState(5, false)
+            break
+          case 1:
+            this.mode = 'multiSelector'
+            this.range = [
+              [
+                {
+                  id: 1,
+                  name: '哆啦A梦'
+                },
+                {
+                  id: 2,
+                  name: '大熊'
+                },
+                {
+                  id: 3,
+                  name: '小夫'
+                },
+                {
+                  id: 4,
+                  name: '静香'
+                },
+                {
+                  id: 5,
+                  name: '胖虎'
+                },
+              ],
+              [
+                {
+                  id: 1,
+                  name: '家'
+                },
+                {
+                  id: 2,
+                  name: '学校'
+                },
+                {
+                  id: 3,
+                  name: '操场'
+                }
+              ]
+            ]
+            this.defaultSelector = [0,0]
+            this.rangeKey = 'name'
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
+            this.$refs.demoTemplate.updateSectionBtnsState(5, false)
+            break
+          case 2:
+            this.mode = 'time'
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], true)
+            this.$refs.demoTemplate.updateSectionBtnsState(5, false)
+            break
+          case 3:
+            this.mode = 'region'
+            this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
+            this.$refs.demoTemplate.updateSectionBtnsState(5, true)
+            break
+        }
+        this.openPicker()
+      },
+      // 切换显示时分秒
+      timeSecondChange(event) {
+        this.params = {
+          year: true,
+          month: true,
+          day: true,
+          hour: true,
+          minute: true,
+          second: true,
+          province: true,
+          city: true,
+          area: true,
+          timestamp: true
+        }
+        this.openPicker()
+      },
+      // 切换显示时间单位
+      showTimeTagChange(event) {
+        this.showTimeTag = event.index === 0 ? false : true
+        this.openPicker()
+      },
+      // 切换起始年份
+      timeRangeChange(event) {
+        if (event.index === 0) {
+          this.startYear = 2000
+          this.endYear = 2100
+        } else if (event.index === 1) {
+          this.startYear = 2020
+          this.endYear = 2030
+        }
+        this.openPicker()
+      },
+      // 切换默认时间
+      defaultTimeChange(event) {
+        this.defaultTime = event.name
+        this.openPicker()
+      },
+      // 切换默认地区
+      defaultRegionChange(event) {
+        if (event.index === 0) {
+          this.defaultRegion = ['广东省','广州市','天河区']
+          this.areaCode = []
+        } else if (event.index === 1) {
+          this.defaultRegion = []
+          this.areaCode = ['44','4401','440111']
+        }
+        this.openPicker()
+      },
+      // 切换点击遮罩关闭
+      maskCloseableChange(event) {
+        this.maskCloseable = event.index === 0 ? true : false
+        this.openPicker()
+      },
+      
+      // 点击取消按钮
+      cancelPicker(event) {
+        this.$tn.message.toast('点击了取消按钮')
+      },
+      // 点击确认按钮
+      confirmPicker(event) {
+        switch (this.mode) {
+          case 'selector':
+            this.result = this.range[event[0]]
+            this.defaultSelector = event
+            break
+          case 'multiSelector':
+            this.result = `${this.range[0][event[0]][this.rangeKey]} - ${this.range[1][event[1]][this.rangeKey]}`
+            this.defaultSelector = event
+            break
+          case 'time':
+            this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
+            this.defaultTime = this.result
+            break
+          case 'region':
+            this.result = `${event.province.label}-${event.city.label}-${event.area.label}`
+            break
+        }
+      },
+      
+      // 打开Picker
+      openPicker() {
+        this.show = true
+      },
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .picker-result {
+    margin-top: 20rpx;
+    padding: 10rpx 30rpx;
+    background-color: $tn-font-holder-color;
+    text-align: center;
+  }
+</style>
diff --git a/componentsPage/popup/popup.vue b/componentsPage/popup/popup.vue
new file mode 100644
index 0000000..04cd8ee
--- /dev/null
+++ b/componentsPage/popup/popup.vue
@@ -0,0 +1,240 @@
+<template>
+
+  <view class="components-popup">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>弹框</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- popup -->
+    <tn-popup
+      v-model="show"
+      :marginTop="vuex_custom_bar_height"
+      length="50%"
+      :mode="mode"
+      :backgroundColor="backgroundColor"
+      :width="width"
+      :height="height"
+      :borderRadius="borderRadius"
+      :closeBtn="closeBtn"
+      :closeBtnIcon="closeBtnIcon"
+      :closeBtnPosition="closeBtnPosition"
+      :maskCloseable="maskCloseable"
+      @close="closedPopup"
+    >
+      <view class="popup-content" :class="{'popup-content--center': mode === 'center'}">
+        <tn-button shape="round" @click="closedPopup" width="220rpx" fontColor="#080808">关闭弹窗</tn-button>
+      </view>
+    </tn-popup>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsPopup',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        mode: 'left',
+        backgroundColor: '',
+        width: '',
+        height: '',
+        borderRadius: 0,
+        closeBtn: true,
+        closeBtnIcon: 'close',
+        closeBtnPosition: 'top-right',
+        maskCloseable: true,
+        
+        popupShowSubsectionIndex: 1,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-popup组件, 如果使用了自定义顶部，需要设置marginTop属性为自定义顶部的高度'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '背景颜色',
+                optional: ['默认','tn-bg-grey--light','#C6D1D8'],
+                methods: 'backgroundColorChange'
+              },
+              {
+                title: '宽高',
+                optional: ['默认','自定义'],
+                methods: 'widthHeightChange'
+              },
+              {
+                title: '圆角',
+                optional: ['0','23'],
+                methods: 'borderRadiusChange'
+              },
+              {
+                title: '弹出位置',
+                optional: ['上','下','中','左','右'],
+                methods: 'modeChange',
+                current: 3
+              },
+              {
+                title: '关闭按钮',
+                optional: ['显示','隐藏'],
+                methods: 'closeBtnChange'
+              },
+              {
+                title: '关闭按钮图标',
+                optional: ['close','cross-fill'],
+                methods: 'closeBtnIconChange'
+              },
+              {
+                title: '关闭按钮位置',
+                optional: ['左上','右上','左下','右下'],
+                methods: 'closeBtnPositionChange',
+                current: 1
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['是','否'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出弹框
+      showPopup() {
+        this.openPopup()
+      },
+      // 切换弹出位置
+      modeChange(event) {
+        switch(event.index) {
+          case 0:
+            this.mode = 'top'
+            break
+          case 1:
+            this.mode = 'bottom'
+            break
+          case 2:
+            this.mode = 'center'
+            break
+          case 3:
+            this.mode = 'left'
+            break
+          case 4:
+            this.mode = 'right'
+            break
+        }
+        this.openPopup()
+      },
+      // 切换背景颜色
+      backgroundColorChange(event) {
+        this.backgroundColor = event.index === 0 ? '' : event.name
+        this.openPopup()
+      },
+      // 切换宽高设置
+      widthHeightChange(event) {
+        if (event.index === 0) {
+          this.width = ''
+          this.height = ''
+        } else {
+          this.width = this.mode !== 'center' ? '30%' : '60%'
+          this.height = this.mode !== 'center' ? '30%' : '20%'
+        }
+        this.openPopup()
+      },
+      // 切换圆角
+      borderRadiusChange(event) {
+        this.borderRadius = Number(event.name)
+        this.openPopup()
+      },
+      // 切换关闭按钮
+      closeBtnChange(event) {
+        if (event.index === 0) {
+          this.closeBtn = true
+          this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
+        } else {
+          this.closeBtn = false
+          this.$refs.demoTemplate.updateSectionBtnsState([5,6], false)
+        }
+        this.openPopup()
+      },
+      // 切换关闭按钮图标
+      closeBtnIconChange(event) {
+        this.closeBtnIcon = event.name
+        this.openPopup()
+      },
+      // 切换关闭按钮的位置
+      closeBtnPositionChange(event) {
+        switch(event.index) {
+          case 0:
+            this.closeBtnPosition = 'top-left'
+            break
+          case 1:
+            this.closeBtnPosition = 'top-right'
+            break
+          case 2:
+            this.closeBtnPosition = 'bottom-left'
+            break
+          case 3:
+            this.closeBtnPosition = 'bottom-right'
+            break
+        }
+        this.openPopup()
+      },
+      // 切换点击遮罩关闭
+      maskCloseableChange(event) {
+        if (event.index === 0) {
+          this.maskCloseable = true
+        } else {
+          this.maskCloseable = false
+          this.closeBtn = true
+          this.$refs.demoTemplate.updateSectionBtnsValue(0, 4, 0)
+          this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
+        }
+        this.openPopup()
+      },
+      
+      
+      // 打开Popup
+      openPopup() {
+        this.show = true
+      },
+      // 关闭Popup
+      closedPopup() {
+        this.show = false
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .popup-content {
+    height: 100%;
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &--center {
+      padding: 150rpx 50rpx;
+    }
+  }
+</style>
diff --git a/componentsPage/progress/progress.vue b/componentsPage/progress/progress.vue
new file mode 100644
index 0000000..1622a74
--- /dev/null
+++ b/componentsPage/progress/progress.vue
@@ -0,0 +1,97 @@
+<template>
+
+  <view class="components-progress tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Progress进度条</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本进度条">
+        <tn-line-progress :percent="30"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50"></tn-line-progress>
+        </view>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="80"></tn-line-progress>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
+          <view>
+            <tn-circle-progress :percent="30"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="50"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="80"></tn-circle-progress>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改进度条颜色">
+        <tn-line-progress :percent="50" activeColor="#2DE88D"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50" activeColor="#31E749" inactiveColor="#FAD8D6"></tn-line-progress>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示条纹">
+        <tn-line-progress :percent="50" :striped="true"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50" :striped="true" :stripedAnimation="false"></tn-line-progress>
+        </view>
+      </demo-title>
+      
+      <demo-title title="显示进度信息">
+        <tn-line-progress :percent="50" :showPercent="true"></tn-line-progress>
+        <view class="tn-margin-top">
+          <tn-line-progress :percent="50">
+            <view class="tn-color-white">加载中</view>
+          </tn-line-progress>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
+          <view>
+            <tn-circle-progress :percent="50" :showPercent="true"></tn-circle-progress>
+          </view>
+          <view class="tn-margin-left">
+            <tn-circle-progress :percent="50">
+              <view class="tn-color-red">加载中</view>
+            </tn-circle-progress>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+
+  export default {
+    name: 'componentsProgress',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-progress {
+    min-height: 100vh;
+  }
+  
+  tn-line-progress, .tn-line-progress {
+    width: 100%;
+  }
+</style>
diff --git a/componentsPage/radio/radio.vue b/componentsPage/radio/radio.vue
new file mode 100644
index 0000000..092f43d
--- /dev/null
+++ b/componentsPage/radio/radio.vue
@@ -0,0 +1,89 @@
+<template>
+  <view class="components-radio tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Radio单选按钮</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-radio-group>
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="方形选框">
+        <tn-radio-group shape="square">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="竖直排列">
+        <tn-radio-group width="100%" wrap>
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="禁止点击标签">
+        <tn-radio-group :disabledLabel="true">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <demo-title title="自定义尺寸">
+        <view>
+          <tn-radio-group :size="20" :iconSize="14">
+            <tn-radio name="选项1">选项1</tn-radio>
+            <tn-radio name="选项2">选项2</tn-radio>
+            <tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio>
+          </tn-radio-group>
+        </view>
+        <view class="tn-margin-top">
+          <tn-radio-group :size="46" :iconSize="36">
+            <tn-radio name="选项1">选项1</tn-radio>
+            <tn-radio name="选项2">选项2</tn-radio>
+            <tn-radio name="选项3">选项3</tn-radio>
+          </tn-radio-group>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-radio-group activeColor="#31E749">
+          <tn-radio name="选项1">选项1</tn-radio>
+          <tn-radio name="选项2">选项2</tn-radio>
+          <tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio>
+        </tn-radio-group>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsRadio',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/rate/rate.vue b/componentsPage/rate/rate.vue
new file mode 100644
index 0000000..6eae1ff
--- /dev/null
+++ b/componentsPage/rate/rate.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <view class="components-rate tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>rate评分</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-rate v-model="value1"></tn-rate>
+        <view class="tn-margin-top">
+          <tn-rate v-model="value2" :count="8"></tn-rate>
+        </view>
+        <view class="tn-margin-top">
+          <tn-rate v-model="value2" :count="8" :disabled="true"></tn-rate>
+        </view>
+      </demo-title>
+      
+      <demo-title title="设置尺寸">
+        <tn-rate v-model="value3" :size="24"></tn-rate>
+        <view class="tn-margin-top">
+          <tn-rate v-model="value4"></tn-rate>
+        </view>
+        <view class="tn-margin-top">
+          <tn-rate v-model="value5" :size="68"></tn-rate>
+        </view>
+      </demo-title>
+      
+      <demo-title title="可以选择半星">
+        <tn-rate v-model="value6" :size="80" :allowHalf="true"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-rate v-model="value7" inactiveColor="#E83A30" activeColor="#31E749"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="自定义图标">
+        <tn-rate v-model="value8" inactiveIcon="emoji-sad" activeIcon="emoji-good-fill"></tn-rate>
+      </demo-title>
+      
+      <demo-title title="根据选择数量显示不同信息">
+        <tn-rate v-model="value9" :colors="colors" :icons="icons"></tn-rate>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsRate',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: 0,
+        value2: 0,
+        value3: 0,
+        value4: 0,
+        value5: 0,
+        value6: 0,
+        value7: 0,
+        value8: 0,
+        value9: 0,
+        colors: ['#01BEFF','#3D7EFF','#31C9E8'],
+        icons: ['star-fill','praise-fill','flower-fill']
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-rate {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/read-more/read-more.vue b/componentsPage/read-more/read-more.vue
new file mode 100644
index 0000000..c1c1f2c
--- /dev/null
+++ b/componentsPage/read-more/read-more.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <view class="components-read-more tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-read-more>
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <demo-title title="允许展开后收起">
+        <tn-read-more :closeBtn="true">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <demo-title title="修改显示内容的高度">
+        <tn-read-more :closeBtn="true" :showHeight="200">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <demo-title title="自定义展开收起文本和图标">
+        <tn-read-more :closeBtn="true" openText="付费查看剩余内容" openIcon="lucky-money" closeText="下次再看" closeIcon="close">
+          <rich-text :nodes="content"></rich-text>
+        </tn-read-more>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsReadMore',
+    components: {demoTitle},
+    data() {
+      return {
+        content: `噫吁嚱，危乎高哉！
+                  蜀道之难，难于上青天！
+                  蚕丛及鱼凫，开国何茫然！
+                  尔来四万八千岁，不与秦塞通人烟。
+                  西当太白有鸟道，可以横绝峨眉巅。
+                  地崩山摧壮士死，然后天梯石栈相钩连。
+                  上有六龙回日之高标，下有冲波逆折之回川。
+                  黄鹤之飞尚不得过，猿猱欲度愁攀援。
+                  青泥何盘盘，百步九折萦岩峦。
+                  扪参历井仰胁息，以手抚膺坐长叹。
+
+                  问君西游何时还？畏途巉岩不可攀。
+                  但见悲鸟号古木，雄飞雌从绕林间。
+                  又闻子规啼夜月，愁空山。
+                  蜀道之难，难于上青天，使人听此凋朱颜！
+                  连峰去天不盈尺，枯松倒挂倚绝壁。
+                  飞湍瀑流争喧豗，砯崖转石万壑雷。
+                  其险也如此，嗟尔远道之人胡为乎来哉！(也如此 一作：也若此)
+
+                  剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
+                  所守或匪亲，化为狼与豺。
+                  朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
+                  锦城虽云乐，不如早还家。
+                  蜀道之难，难于上青天，侧身西望长咨嗟！`,
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/scroll-list/scroll-list.vue b/componentsPage/scroll-list/scroll-list.vue
new file mode 100644
index 0000000..a891cf5
--- /dev/null
+++ b/componentsPage/scroll-list/scroll-list.vue
@@ -0,0 +1,135 @@
+<template>
+
+  <view class="components-scroll-list tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-scroll-list>
+          <view class="tn-flex tn-margin-sm">
+            <block v-for="(item, index) in 14" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                    <view class="tn-icon-gloves-fill"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-lg tn-text-center">
+                    <text class="tn-text-ellipsis">傻北</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </demo-title>
+      
+      <demo-title title="隐藏指示器">
+        <tn-scroll-list :indicator="false">
+          <view class="tn-flex tn-margin-sm">
+            <block v-for="(item, index) in 14" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                    <view class="tn-icon-gloves-fill"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-lg tn-text-center">
+                    <text class="tn-text-ellipsis">傻北</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </demo-title>
+      
+      <demo-title title="自定义指示器样式">
+        <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#D6F4FA" indicatorActiveColor="#27A1BA">
+          <view class="tn-flex tn-margin-sm">
+            <block v-for="(item, index) in 14" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
+                    <view class="tn-icon-gloves-fill"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-lg tn-text-center">
+                    <text class="tn-text-ellipsis">傻北</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsScrollList',
+    components: {demoTitle},
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-scroll-list {
+    min-height: 100vh;
+  }
+
+  .icon3 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      margin-top: 0;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 25%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/select/select.vue b/componentsPage/select/select.vue
new file mode 100644
index 0000000..f77449d
--- /dev/null
+++ b/componentsPage/select/select.vue
@@ -0,0 +1,381 @@
+<template>
+
+  <view class="components-select">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Select列选择器</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
+        <view class="select-result tn-border-dashed">
+          {{ result }}
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- select -->
+    <tn-select
+      v-model="show"
+      :mode="mode"
+      title="请选择数据"
+      :list="list"
+      :maskCloseable="maskCloseable"
+      @cancel="cancelSelect"
+      @confirm="confirmSelect"
+    >
+    </tn-select>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    name: 'componentsSelect',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        result: 'Select结果',
+        show: false,
+        mode: 'single',
+        list: [
+          {
+            value: 1,
+            label: '哆啦A梦'
+          },
+          {
+            value: 2,
+            label: '大熊'
+          },
+          {
+            value: 3,
+            label: '小夫'
+          },
+          {
+            value: 4,
+            label: '静香'
+          },
+          {
+            value: 5,
+            label: '胖虎'
+          },
+          {
+            value: 6,
+            label: '大星'
+          },
+        ],
+        maskCloseable: true,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-select组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '模式',
+                optional: ['单列','多列','自动多列'],
+                methods: 'modeChange'
+              },
+              {
+                title: '点击遮罩关闭',
+                optional: ['是','否'],
+                methods: 'maskCloseableChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出Select
+      showSelect(event) {
+        this.openSelect()
+      },
+      // 切换模式
+      modeChange(event) {
+        switch(event.index) {
+          case 0:
+            this.mode = 'single'
+            this.list = [
+              {
+                value: 1,
+                label: '哆啦A梦'
+              },
+              {
+                value: 2,
+                label: '大熊'
+              },
+              {
+                value: 3,
+                label: '小夫'
+              },
+              {
+                value: 4,
+                label: '静香'
+              },
+              {
+                value: 5,
+                label: '胖虎'
+              }
+            ]
+            break
+          case 1:
+            this.mode = 'multi'
+            this.list = [
+              [
+                {
+                  value: 1,
+                  label: '哆啦A梦'
+                },
+                {
+                  value: 2,
+                  label: '大熊'
+                },
+                {
+                  value: 3,
+                  label: '小夫'
+                },
+                {
+                  value: 4,
+                  label: '静香'
+                },
+                {
+                  value: 5,
+                  label: '胖虎'
+                },
+              ],
+              [
+                {
+                  value: 1,
+                  label: '家'
+                },
+                {
+                  value: 2,
+                  label: '学校'
+                },
+                {
+                  value: 3,
+                  label: '操场'
+                }
+              ]
+            ]
+            break
+          case 2:
+            this.mode = 'multi-auto'
+            this.list = [
+              {
+                value: 11,
+                label: '森林—1',
+                children: [
+                  {
+                    value: 1101,
+                    label: '树-11',
+                    children: [
+                      {
+                        value: 110101,
+                        label: '树叶-111'
+                      },
+                      {
+                        value: 110102,
+                        label: '树叶-112'
+                      },
+                      {
+                        value: 110103,
+                        label: '树叶-113'
+                      },
+                      {
+                        value: 110104,
+                        label: '树叶-114'
+                      }
+                    ]
+                  },
+                  {
+                    value: 1102,
+                    label: '树-12',
+                    children: [
+                      {
+                        value: 110201,
+                        label: '树叶-121'
+                      },
+                      {
+                        value: 110202,
+                        label: '树叶-122'
+                      },
+                      {
+                        value: 110203,
+                        label: '树叶-123'
+                      },
+                      {
+                        value: 110204,
+                        label: '树叶-124'
+                      }
+                    ]
+                  },
+                  {
+                    value: 1103,
+                    label: '树-13',
+                    children: [
+                      {
+                        value: 110301,
+                        label: '树叶-131'
+                      },
+                      {
+                        value: 110302,
+                        label: '树叶-132'
+                      },
+                      {
+                        value: 110303,
+                        label: '树叶-133'
+                      },
+                      {
+                        value: 110304,
+                        label: '树叶-134'
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                value: 12,
+                label: '森林—2',
+                children: [
+                  {
+                    value: 1201,
+                    label: '树-21',
+                    children: [
+                      {
+                        value: 120101,
+                        label: '树叶-211'
+                      },
+                      {
+                        value: 120102,
+                        label: '树叶-212'
+                      },
+                      {
+                        value: 120103,
+                        label: '树叶-213'
+                      },
+                      {
+                        value: 120104,
+                        label: '树叶-214'
+                      }
+                    ]
+                  },
+                  {
+                    value: 1202,
+                    label: '树-22',
+                    children: [
+                      {
+                        value: 120201,
+                        label: '树叶-221'
+                      },
+                      {
+                        value: 120202,
+                        label: '树叶-222'
+                      },
+                      {
+                        value: 120203,
+                        label: '树叶-223'
+                      },
+                      {
+                        value: 120204,
+                        label: '树叶-224'
+                      }
+                    ]
+                  },
+                  {
+                    value: 1203,
+                    label: '树-23',
+                    children: [
+                      {
+                        value: 120301,
+                        label: '树叶-231'
+                      },
+                      {
+                        value: 120302,
+                        label: '树叶-232'
+                      },
+                      {
+                        value: 120303,
+                        label: '树叶-233'
+                      },
+                      {
+                        value: 120304,
+                        label: '树叶-234'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+            break
+        }
+        this.openSelect()
+      },
+      // 切换点击遮罩关闭
+      maskCloseableChange(event) {
+        this.maskCloseable = event.index === 0 ? true : false
+        this.openSelect()
+      },
+      
+      // 点击取消按钮
+      cancelSelect(event) {
+        this.$tn.message.toast('点击了取消按钮')
+      },
+      // 点击确认按钮
+      confirmSelect(event) {
+        console.log(event);
+        switch (this.mode) {
+          case 'single':
+            this.result = event[0]['label']
+            break
+          case 'multi':
+            this.result = ''
+            if (event.length) {
+              event.map((item, index) => {
+                if (index !== 0) this.result += ' - ' 
+                this.result += item.label
+              })
+            }
+            break
+          case 'multi-auto':
+            this.result = ''
+            if (event.length) {
+              event.map((item, index) => {
+                if (index !== 0) this.result += ' - ' 
+                this.result += item.label
+              })
+            }
+            break
+        }
+      },
+      
+      // 打开Select
+      openSelect() {
+        this.show = true
+      },
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .select-result {
+    margin-top: 10rpx;
+    padding: 10rpx 30rpx;
+    background-color: $tn-font-holder-color;
+    text-align: center;
+  }
+</style>
diff --git a/componentsPage/sign-board/sign-board.vue b/componentsPage/sign-board/sign-board.vue
new file mode 100644
index 0000000..1af1900
--- /dev/null
+++ b/componentsPage/sign-board/sign-board.vue
@@ -0,0 +1,134 @@
+<template>
+
+  <view class="components-toast">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :beforeBack="beforeBack">SignBoard签字板</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+        <view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+          <view class="image">
+            <image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image>
+          </view>
+          <view class="button">
+            <tn-button fontColor="tn-color-white" @click="showSignBoard">弹出签字板</tn-button>
+          </view>
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- SignBoard -->
+    <tn-sign-board :show="show" :customBarHeight="vuex_custom_bar_height" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @closed="closeSign"></tn-sign-board>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        show: false,
+        imageSrc: '',
+        signSelectColor: ['#080808', '#E83A30'],
+        rotate: true,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-sign-board组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '画笔颜色',
+                optional: ['默认','自定义'],
+                methods: 'colorChange'
+              },
+              {
+                title: '旋转签名',
+                optional: ['不旋转','旋转'],
+                methods: 'rotateChange',
+                current: 1
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出SignBoard
+      showSignBoard() {
+        this.show = true
+      },
+      // 切换画笔颜色
+      colorChange(event) {
+        switch (event.index) {
+          case 0:
+            this.signSelectColor = ['#080808', '#E83A30']
+            break
+          case 1:
+            this.signSelectColor = ['#838383', '#01BEFF']
+            break
+        }
+        this.showSignBoard()
+      },
+      // 切换旋转内容
+      rotateChange(event) {
+        this.rotate = event.index === 0 ? false : true
+        this.showSignBoard()
+      },
+      
+      
+      // 保存签名
+      saveSign(e) {
+        // console.log(e);
+        this.imageSrc = e
+        this.show = false
+      },
+      // 关闭签名板
+      closeSign() {
+        this.show = false
+      },
+      
+      // 返回前判断是否已经关闭了签名板
+      beforeBack() {
+        return new Promise((resolve, reject) => {
+          if (!this.show) {
+            resolve()
+            return
+          }
+          this.$tn.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
+            resolve()
+          }, true, () => {
+            reject()
+          })
+        })
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image {
+    height: 200rpx;
+    
+    image {
+      height: 200rpx;
+    }
+  }
+  
+  .button {
+    margin-top: 20rpx;
+  }
+</style>
diff --git a/componentsPage/skeleton/skeleton.vue b/componentsPage/skeleton/skeleton.vue
new file mode 100644
index 0000000..b8da4bb
--- /dev/null
+++ b/componentsPage/skeleton/skeleton.vue
@@ -0,0 +1,236 @@
+<template>
+  <view class="components-skeleton tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>骨架屏</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="tn-padding-top"></view>
+      
+      <view class="news tn-skeleton">
+        <block v-for="(item, index) in list" :key="index">
+          <view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top">
+            <view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center">
+              <view class="news__item__avatar tn-skeleton-circle">
+                <image :src="item.userInfo.avatar"></image>
+              </view>
+              <view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around">
+                <view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view>
+                <view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view>
+              </view>
+            </view>
+            <view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center">
+              <view class="news__item__content__data">
+                <view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view>
+                <view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view>
+              </view>
+              <view class="news__item__main-image tn-skeleton-rect">
+                <image :src="item.content.mainImage" mode="aspectFill"></image>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+    <!-- 引用组件 -->
+    <tn-skeleton :show="showSkeleton"></tn-skeleton>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsSkeleton',
+    data() {
+      return {
+        showSkeleton: true,
+        list: [
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          },
+          {
+            userInfo: {
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
+              nickName: '图鸟科技-北北'
+            },
+            content: {
+              title: '全新UI框架，tuniaoUI正式发布',
+              desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              releaseDate: '2020年12月30日'
+            }
+          }
+        ]
+      }
+    },
+    onLoad() {
+      // 模拟加载数据完毕
+      setTimeout(() => {
+        this.showSkeleton = false
+      }, 3000)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-skeleton {
+    // background-color: $tn-bg-gray-color;
+  }
+  
+  .news {
+    position: relative;
+    
+    &__item {
+      margin: 0 30rpx;
+      padding: 10rpx;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
+      margin-bottom: 30rpx;
+      
+      &__info {
+        height: 80rpx;
+        margin-bottom: 20rpx;
+      }
+      &__avatar {
+        width: 80rpx;
+        height: 100%;
+        border-radius: 100%;
+        overflow: hidden;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &__outline {
+        height: 100%;
+        margin-left: 20rpx;
+      }
+      &__nick-name {
+        font-size: 30rpx;
+        margin-bottom: 6rpx;
+      }
+      &__release-date {
+        font-size: 22rpx;
+        color: $tn-font-sub-color;
+      }
+      
+      &__content {
+        height: 140rpx;
+        &__data {
+          width: 60%;
+          margin-right: 10rpx;
+        }
+      }
+      &__title {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: bold;
+        margin-bottom: 10rpx;
+      }
+      &__desc {
+        width: 100%;
+        word-break: break-all;
+        font-size: 24rpx;
+      }
+      &__main-image {
+        width: 40%;
+        height: 100%;
+        border-radius: 5rpx;
+        overflow: hidden;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/slider/slider.vue b/componentsPage/slider/slider.vue
new file mode 100644
index 0000000..3471590
--- /dev/null
+++ b/componentsPage/slider/slider.vue
@@ -0,0 +1,97 @@
+<template>
+
+  <view class="components-slider tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>slider滑动条</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-slider v-model="value1"></tn-slider>
+        <view class="tn-margin-top">
+          <tn-slider v-model="value1" :disabled="true"></tn-slider>
+        </view>
+      </demo-title>
+      
+      <demo-title title="设置最小最大值">
+        <tn-slider v-model="value2" :min="20" :max="80"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="设置步进值">
+        <tn-slider v-model="value3" :step="10"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="自定义滑块滑轨信息">
+        <tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="自定义颜色信息">
+        <tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider>
+      </demo-title>
+      
+      <demo-title title="自定义滑块">
+        <tn-slider v-model="value7">
+          <view class="tn-slider__custom-block">
+            {{ value7 }}
+          </view>
+        </tn-slider>
+      </demo-title>
+      
+      <demo-title title="配合formItem使用">
+        <tn-form>
+          <tn-form-item label="价格区间" :labelWidth="140">
+            <tn-slider v-model="value8"></tn-slider>
+          </tn-form-item>
+        </tn-form>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSlider',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: 0,
+        value2: 0,
+        value3: 0,
+        value4: 0,
+        value5: 0,
+        value6: 0,
+        value7: 0,
+        value8: 0
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-slider {
+    min-height: 100vh;
+  }
+  
+  .tn-slider__custom-block {
+    background-color: $tn-color-orange;
+    width: auto;
+    height: 40rpx;
+    line-height: 40rpx;
+    padding: 0 10rpx;
+    border-radius: 50%;
+    text-align: center;
+    color: #FFFFFF;
+  }
+</style>
diff --git a/componentsPage/static/images/empty/cart.jpg b/componentsPage/static/images/empty/cart.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3b5bfac84fefb45f467fc5fea8d8cc52163f5b9d
GIT binary patch
literal 20320
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

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/comment.jpg b/componentsPage/static/images/empty/comment.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4848ca118bf2ba9398af3513d816e22d07fc4d67
GIT binary patch
literal 19323
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

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/data.jpg b/componentsPage/static/images/empty/data.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b8731254b913aca84c20fd711bba4987b29c0643
GIT binary patch
literal 19574
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
Bj_CjZ

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/network.jpg b/componentsPage/static/images/empty/network.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d4585316bc42b993ae1debe32b33069c1209a6c6
GIT binary patch
literal 21328
zcmeIZ2UJtd(=dJ$Lhn^TO6W~`Z_-QXgbt#FBtU=!2nhm;BGQpwq$mQ?5v+isBBB%(
z3ms`9ic&0yVpqPKps3HUp7(#=|M|}Oo(*?*c4l^VX13hjz01bL#$(!t7SXr>0I;_Q
z<N*L+0O%oH01XI1z#jk+1Zb%+0Qf_;Z^6M3*&jSmkVh2&V?Z2yh!8a@%mcy&DL4T3
zqij8xjsS|iT>v1%@iR5Sg!yCPPC;R$u*jgWaJZQnTunt)7cT38BVfYzM#=$dDr#za
zDr$OaYH&4GJyl&j4NU-`set^_uLAnB4#<uQnqM$jA0^O1Xnye0{ca0H{Ff~d`QL4U
zLbhb6LAPYXPHc(;ticrY%4WJTvGEdMp<1!W%pQPjyaL#$IRFz+;oF!35&;$l1_nk3
z7Dh%EPG%-%PF{8v7It2KZf;&~ZhlS{YWR_CX8syOSecnw*;qN)*f@CD*w}a|5gX5D
z5zhZcz(yCq$p9*BO#=}JpqvmIPRPa#Xe8~%O^6YwB`t&+K!quR27o|ev~=_gj7-d6
z2l$f+0iZNLi5vg~2BCq%ptSUK474;X>L8Jm1}4U(N^9bb;ueoMq(;Y+TY1)0LXsDG
z-CtdUm@sHYFO}!A`uGhxQj@Rh++k_+d{>M`_eql0wjsB9?ArOn8^h!$Z!KjCs*^4h
z-W+-QuBNqTbYa~+AS$`2wyk&U*?Vm(kHEbtN9)@A#-D%S1fWn*TNqU*dOBK7stRJN
zTrg0B2yt#&wL`f)6b-H;2Upc4{T~w(^2}U#(UBT&r06IL&`WD}4}nUY+=j7m(;{K#
zw^aDo8p!-oVPg_tp`q5v2^azEuKBum(YEDg-kM6%fayu)?J|2GzQkW<VA~<q#U*pj
z#x4&bStD7oq7XO~PJdm0_jnqPelD*>G7lk#kj%3=xba|p`|>vA=hTpPC~)@jlu_B$
z(lEk8=JK8gIJP^tPm6tmeG#J5Xa0V?U2mrC%e6vstBdc!yWi($%-V*ozubOopJa8^
zbN>gE_bi%EkEBZ8!E6BCaXdc4t+hLkVlziO0s>ue%}3iBcNrmE4oUkPnZFTr{Dgn6
zP#8G4IPo?A{oW_p!)Ko__Lh}>`LY3MN=d$Z`Z51Q#j$C5;&#NXh7#CI-fis>Mwi+S
z>PCKZX?ePE*K=Xw<8+XJU-m~U_KHUzwGQGj!$%069U+`oZ)9}|-y_<@32~T`bW*Gr
zIHlx3OC2``*WGA5OWv5ZJxAaVJ{O&9x|)4(IAU+^lUE4)l&Ne_rMS!>Lap`CHuV!D
z$pMIcE206JnV5ZT8$h+vw+-OwcmMX$<L3$L8o8bKQ=Vym|9<Y+NWo#H+$_(f8Mj{f
zGpy`uzF%6reYZ2VdQU06zjSk(<FhmS+75d6#Yx#0py!VUU=40KJk#v;?$e*r9RFUp
zg09*%Fs&XP(5L%qJA!t~Bz^YaUZM@T`Rq~F!U@12XHn*pZ1Kx;XV2ce7$td2#HOyo
zfTy_c{Gv|#<G$&<vL(1%WVP1)w<&KBQbrp?>omLeb4{d|Na@C06?>>%RuU922f>9d
z(>)61s~>)VL$~{coLUQ-FnWE@`$2(ZZCM9_xs?A!Y(F8v^4jw_DZTKs^(Rbg-F+(+
zIjn`-6;ui&tM_qDq%lfX`(OGfnNH~_!|Sd`Z#PKREm!~RWaHt+OV){BldHOt3ZP?(
zu!l)e$2kWz{w<=?^r(n&Fs9Hc6CD6BhZAuGk|UWEP9}j_%G&^NiX^%ChlPbwIS>RA
z7E2)GDFg~kP4R(nFlDEfb-_hbI81RQN*M}yQzn+^fWl*4Ej(R8)MjOy1)PXsVF4~!
z5;@$_KNt-XX@kUqv@<#n5-5cMrtmE~n4=an4J8qN=)mGn#)Xn_1ga2_&Pe4pv-h&y
zv|pbh0;&i`zij0C%|^#?5-yAo3DUPwIL*RIgr8~yW}*JXtqd|S(tayrMkJX1$`DAu
zGIsu<ky{jpKvL9J#sVK|zLfzz_e-=XIwbIi>6?B5kXEK<pf;5EGJwRu;g~S8zj4?c
zB})xfM8ZGdOhf;X&y<L9bt8~0C6J+%*4zrFp&0l-!y_X@NmRU3bf_`0>nA@`6c$Yi
zBbuW~D2fGCC7lADB7gP+3QXYzQ;OPv9X4Q7%wMW?1z-FBtXdaz=qBEYh&J}3NT3D|
zG%+mPBM1vNF4!k=gutKfW1|p|piZV?BvKeYG>j1VqX^4S3PpwA@T@=aNL*mh?*!(b
z1W>mve#+>edAX?rWCxgn@5Y}gb>v7>X>30#1rwuqV6(rmQgM`pkT;c6U@I>|mHL*N
zXQakp1fiA!7fF=B^kZ0nXe#eI6>AMB2LynWP%s9UHDG}Jz*Lr$Zei4@cyBQN$pfyP
zKu$`}|AC>({0Qa&ARGWT{%N3Dq>%q9Y2*J3jp_@EXmBtBOw=4@5eWc%)c7AFDu)Uc
z&Aho{*<7|z@f4dVayC8AK+XLa-B4qY06srxA{2<a#M|T*q-1Hpb<hu=P_h7}WvQ)8
z8z>({UtA3OOqGJB690^T!)=xNgX1@bE&LDFD0u=olrkeyOsDe?BNH%@e;M~^5~XTN
z_W>w_WvfSm`M>mNz;vtUQ<VphTOFI4r;7~5p|O$fp>~v^3HhTQS}F}hbAb;%HG?q!
ztuFdNVi-C64-{P(5f_NtnsqH)DAFCNI8X*FicAW#!V<7V6bXv~5rAt<_|Mk_(<U<o
zL!lrxUl#w{_S2Awp?|z=sLuZrV;>p#=L?Ar6-shN1^&UshQ@}5x?-bAh)8Q!d%K?#
zAj41eAIywFVZ>OIP+Z_oPqA+rZ~YSuI)EO74M35p6Eb5ImPq<1?Cw9&f3h?C2bzV2
zh7o^rF6X9vQ>!fk#m5d|1d6X2NnzpOt2`3>`;5mF3QmpxfMxNgPNn~VX9k-%=&$V5
zQ7B8P2w(vpsL?7F-W+2*RG89*d8m984ghu;j3|S{`o}W?00vzk{sh1eZk_(#TK&DX
z`g?2j_txtF&aKtvye0<DTmaw;J`l=8#txVO7$6Mr2e1GfZ~}rrm;^qNR45$e*!CYd
z;D8zUg9B=S3b^3Vr3l`vX>+|s4<5}?)}6q{V>Vb2i4?A<tW1bhLQ#&<l+a;#<!Ds6
zvZ|7bGGJg79gaeWU`cR)EclK#6n}mBnm8PXF%<XEv{$hYH^T<utYe8-mskf^bZiJ(
z7b9-86K)W#7mW|cV@W7@G(MCNsTXZ1P8F^P!W6W!IGoBt3NaL?9(2Jy?VaFeVMHuk
zQ%Oq^t*W63*Va{1)l%2c)!jik%+pa;(NR`aS5(!~(@>!t<NXNYU~NQ9fF9D^@<&}@
z&QSb^QG569Robhr6h;hGR@K$jRaQ|`R#Q_1ITRyf2qaXrA|X=Zrv!6sB$|k$?%CiJ
ziQs;OOfnP)HQh7;AHF5_pZe-IMtl2z&x*%W96%KtNwSCnYx#GL5J`C_D<iRyVPqm2
zYY~MdkR*N<$Dp^$hJ&jTs-+mTGBy;82iYRQMpWIZD*Wg9=vI+G?ARhxTb@!uxSkmi
zivo9NuHeq>XG8ru2>6Fn*5Art!3`bOP@Hn?s;Hu-sHW!n^Vn5EMMqCXWs}t&><Sog
z=l9<+hhcC5G5-y#y}cfS5J^H2&{%}Ip*U!W5)OyaQ_;m}VKlH9MQx0Rt|CfH1EuJ%
zrlYEeR#(-+s$tav&?;(Fy}<J3VQ4bNgOu`{Jr@&(24!qHNl#l-&0kX;rKYH@rmLx_
zqN?GqsH>`tQdHLs&_VfQwNd^U-JjAn7qh6)-=$Kt!hjNWF)FHPlvaSEswP%L5u>A_
zrHH}=s4A-H`0MIw1gNWnk2oBI)(Z$D;!$8%!QoMXSmoewY@j&&mparnntd1sbUMiX
z3y&}}1J5r4aG@X}65RX45f)}zs=8WQifT%#l&%lz0orSgiv-&_=Eq=i!AAUmLUC|v
z57k4VDTf(`;%G{bz+%LIpmG1i&;Ol8n_~BZTkwC|O*Yvg!vaWqQADgsAlN4VO;1$*
zSNcbyqW-=1|6MQn-_`zybJ0O4LLe5LYn8<*_9#<krOl>M{%fmIX}`^2KiR=)kpgbb
z$2)({n}4T&d*E*m{Oy6iJ@B^&{`SECLmv3Gqr(!wrNv%wzqT>Y;t8%3_c$RPEfIDW
z)J-UhwH=NS1_ck8@!<C)%EHmp%NtIA4?JLI1W&lZqhu61GTh$9lJdz702h^T%IcB=
z{|fKNHcz^T6|J4%@L%}<3gSeE6TuHl5GRmZ9Ru#oKsXVEL-&%xDR|1cAdi0t1%^^j
z1c{)6Ak0s}2X4aP={v}?2^&*j44wcUAwwxThhy*<3VaiUQ=`a~qh%U95KfN5VfTXY
z2nb7tlJPhYrhM7p!DCV2aW{-|<|s+RqJuzK1%z3Mu1N696wCm;@xl`L8|?oZOajk%
zL0-TtEIfvK>Is)c%fZ1dsSey4yEha|A}Kn7+iVmO18#!x;V4230BqV!DFtx-!^)kC
z-i-b&@i)GI2U6O0lm6D3+GY^GfnT^^C4b?<s=)6c;8!G?oL@Nq5&&pV0s#KWUpUDM
z@H`_C0NU>VW)B~wzx=jE$6?V*6o+nw|H!b#`LBWB>QkcBx3%kmn{OVH!zsNQ4IX-v
ziSS79lmiP_{A(xv9~b;ht>5(6fy4%2iCA!73U>#48Ti=|Y;FPuN7-7zafCniX1_`J
z9~S#f0tMXc*C4=M{T<-hqXcl==K*M54gfH2W`Jf_IY@zQwVNHIJ9zK}03M>xH~T#Z
zgLG>AM+D6Vv(QLfAe@3WL%PDzWMUKr2FC;?q6NP_vI9JT03ZTL0J7j0Ff~9M&<BhG
z3%~|&1Y7|xU^jpUkGAjt5!egt2Mz(rKn9Ql6auBd37{Hi09t@^Ks#^+xDNCJcYp`L
zC@=-g0SmwiunN2fzJTBF=pn2SZioOx6e0ytfT%%qAUh!z5IYDG;sx=81VRW9GGssG
zFeC$#2PuVALK+}vA(tT6A-5odkcW`RkR`|(<TI28$^zwq3PYu#%1|As3Dg$q3iX8s
zLL;ED&_rk!v=~|iJq2xpUWeX+jzZ_4E6{cDRv0r4AB`A|B8?7>8I2>2H%$Nyk>&tR
zI!zHx6-^6G2TdQ%FwGpz3z|<bIv6($4pW5b!>nO$Ff=Rzb^vw+Rtl?!wZU$}hGCCk
ztFZ61th7S33bcB(2wG3tK-#^u$+ShZwY06YJ+z~=3$*X)=;-+9WazZ%tm(Yyg6a0r
z9icl;cbcw?ZjkN?-8wxzy#T!ey&=6LJ&K-0pG;pue~SJZ{Sf^E{YM6722lnz21^ES
z1_DC@LlHwGLnp%!!*hl&j2w(ojCzcYj2Olk#%#uF#tz2&j0=okm^hham<*X*nSz-P
zF%>hlF!eA^GreVIW)^4GWp-x9F~>6(GoNAZXMW85iG_<rp2du17Ymssi=~dGi{&B9
zTUJ(9X;x!aZ&ng(7Hb3R4c1xKk8Ip*N^A%=4BJ7rGPX9hA+}fSjO<eEChWV}W7&(?
z&$HiWf5E}XA<bdNf#Nv8QO0qJW1M51lbchO(~%R;d4#i(^A_hK7d@9WmjxGwE0OCY
z*A1>G+%()0+-BTp?!(;G+&$b2JajxVJP4j(o(!I5o_jp2yj;8*yzacwyk)#sdFS|O
z_@wy|e4%{VeCPPa_&#qF-e$55yDe>7%eJ9yANaTP8}noN)A>*HkMe&OfD2d%gb3sc
zv<u7#!UW|7odx#_mJ9X>zSz#QU4J`zd;0cs+b4yfLh?dLp?yLpg$9Jyg++v|gu{hP
zgl`DH5aAOs76}$95a|?I66F@%DT)&<5WOb44CjTLz(e81@SE^eF(EN)F|t^t*gdf?
z;xgiH;tArX#b+d#By=PKBnl+DB~~RxCG92mOEyVPN-;|5NCin9mFkoFAT1;9A)O-K
zF1;wjFN2VYm1&ZhmSvSSl8un9k{ywwlhct4kvlH;KprZuDIX+XCVyW6s-UHSQ#h_L
zxPx|w?he9^svYBsEQ%(IQHo89kCph8?35Ce+Lc}@ODcOS=PLIpe^=2|300|9nNsCa
zwNXt_?ND7)lUGBlm8p%Wv#MLFA5_1n{zgMV1FKQ4F`>z=X|I{0*{%6aOIwSm)uOee
zEvfCNeN1~?heyXr=ZH?fF0HPq?m^uvx}Ws4^hkQ=^j_;L>WAnz>Mt6|7+?*m4W1Z^
z8=?#=4d-^kclzzD*g0n;W`r`TGMYD*Fvb|y8b3FYGYK|1W%9~Y#gu5;YWl%U&n(WY
z%bdpC$~@ito&}eMn?<R`tfjbRpk<Tgs+FeIKC3QkT5DVDT<dX!FanKeK&;wm+r-)2
zv}Lh%u`RWox0AOc+I84N?QQJy?WY~290(5Wj({V=G2d~<NyaI{>9RAOvy*d~^E0F>
zazC=qh1+G1OQXwsS5wz)*C{tyH?mu|JG=WX_XhV59_Ai-9&?_`o^hUcyac^)UKhRT
zz1_WQz1Mv#d<uOQc4_WP-Zkbc;~VXJYq#L;(A`(}u<t?bIqyg7=i%4r_Z8)cszR;%
zBm9r~ucFP+N6{-7V@v^N32TVW!#)o%49E*u3^WYP4_pc|3MvYEfiuIE;@$*X2cHQ3
z5aJk87qSuR5qcWWfcL{+B5)Bx2sgt-!lJ_l!xh4l!{;LOA_^l`iMGVrNJyk_<V6w>
zxR@Fs%aW7GkE3=*l|_Br>%RAVG-os+dLTwVCN1W9tYvJ?KG;6=zV7{E`w#7Z9A^?&
zc>r?2|3LRaiGzs;7vinr>kly<3ORH)K_wwC;oV`6!ySpjiSda~lB|-NlG&1p$>S;d
zDJN24skqd8Y3gYuY2VW^>9;dfGKw<39zh?uovE5xoVk$|kaaIxE4w_0E{BjamTQz-
zpU0UOoA)H&KEJI1UXWh!u5eG`ts;%06Gxejl8??6+ZA6dku1q6`C1xOI$CC0cKVpm
zv9x0!j$@7wl^d70oDe>dapH3Yu41Cns<N$0x~k|T-N~qv&#K+4`)YJ*8fpb=Gitxp
z5$fjZk@Ytlv>O^4g&MP)piSharBl03J!m#>zSyGJQhA#1bjBIr4EfCRS--Pm=WNe)
zpVv9xazX0Cu~zQZ^fpLaOxtREQ2X3PuZx41Y%X<o=y$YUR=QkwMeIu1Ro<)FolKpH
zog3F;udR25cfGhCc>PKDp6;m|o;OBrI^Vq4W82f;YuS6F&!q2KzhVECTY9%H-PXC?
zen;z0+koak>s`&et@pI<wcXdgfAN9tgN{Li!OkJ0q3gru!@VPjkvpRfql05^V-w@M
z#^)w56N?W+AHJE4n*1^qKTSKGKEp9nG%GY)^+@i~={c>rtB=he56rvFPd!0DS$P`y
z^y@<6GuCHC&qbd%EUGPDS+ZPuu<WzEuoAxV<wf#K&X>nt$-cVq+W7Urs^{v$8{(Ud
zwIgo@-qyX-c-Ot|v_AVD|NhH|^p64`>p$sy>ig{R`T3W<U+KRVf0O&x@!j_O^adWh
z>+=c_qki83Fvj3o0K7xZK?9}P{0K!^9Dsp(xB1sS94H8amvN~vlp4SSU;rZ+CD71P
z1NfSwrw1=Y{|G<$VIUJdEsXXz%1@5}kZyE?cbg$QAUkLv;AP;=yUjO&3*d?eLJNRb
zbGHILcx{=15dx)Qg8YWvBy)gE9y*H7TLmCAv`}ss4;?)h11GNvBixuHp09$Fax)rK
z6x5TEo)#<$N&`4yv|_4sCY4-j;Em%$x!m-tXT^C`j31lwzCrpE6RIRQ;MeocshdeM
z#1Fcl4@>cNYnZzhaQ#(>ip{IU5by>yCn)*b*Db~W7Xe5{X;z5tnEz9XEy?_h1ZBx&
zOxI?G3ul4iLyy#_!CWo;Fbohu7?-m9QEB`FpM16U&)#SRvoJw_H~^8z>!(r}Miw|9
zAp3(3=?Uuq09w)*+-FQ2%SfdX0o{9%@K=ztmX)PXNnO`O#doUa0EYGf@Fx+sUJTq1
zr!vua-}RJ1k~LZ8AGg<q+l8+Kq7r3w!kGlcXCtDG`O8>oCvb~J33O?KK%~kn%{61d
zxDS?Tq`1HtCMoe=9CAQyQ&bJyj9aNr)Y`K&t3Ce#y`BSaafGGMofvbx$>&pm0E)6q
z27sjg5onB>na#bp;|?<D%;%D~P2<}OuvglTN9lI~N<GmOrcb$V(oU!_omW(oaLhVb
z&K6v>7GERF1Wi5W&?{^Pw3XYPp|E)#*#$u6?qo-%B-IZO$tW&BY@9^;-0se3Kjjyz
z?zu9V@81Qo$uj$aAB`Q1k6o3@4`5XhSDSU>seM&uPC7OrAq0OSxHHLFmx}>pq}81R
zAopF4BweYH<_^r{*7%xdpQjyv>t3?}PJpNG3{a3!L1B}N=Uh5e>`X88WC!R3S;k$H
z67d1wgrN#)M+QttYWXVac_wP=Vms#mKrXc_t^a8)P^(*E35u1?h-rKp5ZW*-zKW3U
zi3fmN2-l*4dVoEbo8t|5*EZPXWR0A$&uwUG_K}L|wMBCoH`_(9O1dcfXLd|bMpaN`
z`>}LYu32OO?Uf3(A)=CW-LY;XWbYuz1+WwMNSaEhg3b|~h;*%zWsb3N7RVJl?BRgo
zikNk&qH~~d8RY3^ic|oAhQ^TEtTPY&!0mzJDK2x(#Ot;X)wa)LC_KQv60Z=jm!3*d
zN+-r&<-T>EZdgEtN&%J5c$i&K0RXDv)4p~UYd^5`dGB_0$)>A6_>l(_h?B<&CxE{H
zlSp0sPpnAagU{t%U`~YH<@($vR>To~i!vzwe+b~XXMjK{v(*Mr>PXFj|AFyajyjWl
zPhQY%6Hat~_U-$iPFKShx!WiA2asy_2Y#GYpC*^fUv2l`ESl)Q<cz;~NgX?&T=&`c
z^is>y8U3R{WNmkH*&fn~Q<|4Y*ENPMjFQitD@`bq9uS(HZ&eNUAL(gGs7>eYIbYhL
zQ;|gr|HfK*_RVpN)9=TFcwR^^_jiuIr-`H=n|=49Xenb(U3^FDx>e&XQ>OwcMle#@
zySOy^jrB&8>eZ=JXR>Qv5+{~U>G_PYn(CWRJuJ<?8+AWMQ-6=`7o+yQeBEEqbu2ar
zHuwAFw2Ki;r;{!*6ZxKsna`zFwNGdtIJ#GV#1~5(dpK4+8>8*pM(?d=sX1<1$a;M8
zohn1=&ifJWfv5J!^+kq8%XcvFIl2~-U2`Q7T;{og;dN|r(@GaY$oXG1mq*-6?+1s(
z^<K{ycNrS4tqQ*JS%17iQ08pwy*<dQZY{!ri{C4j&%cUZF>fk*K|oose$5nPuWKHA
zX}7Zbi&H}%%*H}8F^|g{0l!pfll=9I$e7-;V$Z{wnaiVY@Tvf-p}2Ej>c8+xCP+7O
zws-bCJ#yrlZM)+=9rf=qm-CxXPG4Hmm0Pz>vaFpbFm+}$m*OZei;a@-Twl*PYj|z)
z>Y)ZVWr+F5ByI^Qq@eR9?{9Zy6RWsVHQY;`_pi5(WR6^-dl>EO`d+CkLHqL+m&o~j
zeJf3^I&aGr*0U!A8N&HKuJ8A@B5UELFZp{G>3hxAvO1`JJt1{Zw7|}aKBsXvH0=$O
zw56}^4Rq|}xtnKqg!44sGkZ4C+BiNQ+i!I$F}B|l_Ouyodq~J8N}?qPo1?C$k0yM!
zC2PIp>+!dTU5=TZJnC019Z-dGO-M_fTjRCua^5M?6gy_1%rS>Pltrh*AGU`0n%-C{
zcj>8;rgM{Z)pG2-$i<WvF$AkGjKps1D%X{Q>UdG^L8E@MQ|slF(mlN06o<2snCq3)
zxm6xJ`5b3eArY(H<U`L(I_pEV@wr_oP$33gz4Pjlw~G9;(!XY3d15-yQ<9<17qDZ%
zt5{E63~|c_J7QTP{9%F>fAp2+lI-!Iww)JG-3T6W>~~WZ*D;{wW~$!q)%0lBdJ(Hh
z%h{bRs@t<dy27{9D;OXOC)0Y~cL;@6WH>(0%20eWE}_N<ljO)THK8Q!5)3s`O0S}t
z?b0jFzq0N<Gmp)x%1W9|!G_pO%bzvx?`~kAs7?Oh&Sz-BvfIi>)${B(lIS^aOC7cJ
z$t$(>#eS-bsZQ<kkG%Vin|PnTiLtayW0aOG&htm4Nwe|frgR)X;m987thP#NpO1p$
z81w!bdsdnry7_Lg(aJj!b%vRvLP;kP%h%p%p6QwM$CJWhxObCVY>IO4)?RTR?DKJ3
zMu{|XE>}_`ma`4p1N%ID&1ds#A6}oLDf;ff@%Xa(<aOU;fmt%Gktc5y3wbo2ZgN(s
z!ajDrLd(6XVt?H%sWRum6ZVN-3%k2~&L>IV%z9XP4K-;sRHF^_g^}eM<Hgc%#cbxk
z&dRn)N0`fMD-2oAw4V*md6?^eU%Z!_r+%t()ol#v1Yd8PSTyUsH!wrHi??+p_N~a3
zzSF9n$JOJcZw)M~4-}dYWKt?+lHLvWoky>l3W;A7{Pp~gA6!|<xO~_pj$4yOHHM!K
z-e%@$|DFD{>dL?m85Dq3fX(S<=v3w{_^ncO_6Cr*a?-BI<h;)ILYMrG_n001UODH*
z0!#-|0@Zz(q_{b|oVn6U1RJ86q<QSFU_WmFq62hi2akl0wmCU#4&LB+IJE*B(bVbK
zq3O9$!mP&kOF|MQi%QY%_oAWm9L+KLs;i4^MH+Q_Tx-TNv?cnODpvA6$Oy8yAU4^U
zR(M)5uKD(w6p~3=BECwBTTK%Qb_ukOcgq{3WD=K3&(pA-_b>P%E??0zy7aDLo0J~7
zpZi^i_$22~1Y-@C^ZX@}Te4bgtI%|4Pw{y^{{gQI)c}3#58TonV5@BoJ=xR;Svn6@
zCG)cwGI}iVnu7W(@)Io+qo%w(cUJDYZvbWED_M`N(pw*2l3?4H`4E(_<Cm}<*O3CE
zpJ}h%vv3quh~#^wIN(#<u1fHq?zxn;P=7&5UZ!8R*jc5~gl=JZK8#RXCEfdcTj||{
zqjtFyp(3RrU$1T}PkSk-vmEPunaBNbb=kR=9afbbU2O^}s*mmdkeBhB_!$JDc`X?K
z=QOWx(m10&fG{7iu;6|w;n<J8v9=@04&Agb^XnV7k|!7FkIY?c5k_pi78L(1{#zDW
zw|1c7s(*v=1zy%Sa3YH9j~~1DYuf(t6zAm$R8^Ns@^ErF11g{4zx^ej$Q^9&KC}VQ
znPZxTR2g!zAUkZiz&Z3kL~HPqS@2T1>OI-n;*x$UK{riznd|WXm@EHdB4z29BgVpU
zV=W@F4=ThGuG-Z{^RJVeXS+G)GCoUfE*+qBMu5hN&4t5nFa!ePHvqrE@G-sGM>UIu
zMoLxR+<Rob1QKIzBb=A*1`HkRmK9nTh|-DQ>Fsb!(aAlAz6%26N+wRbb<sNa+jy<Q
z!ybf&#)jBS`1>MEiJ$CikV}}<*4>K<Ny76b88z_e@Kc&jL%SV0dM#~k#)(h5Ikz-e
z(v`>4_AiJxBxYR+ggJSY;Ux;mga*t9xcF|>Ojb@uW3#t!-ug*D2@ulvt=h}^MTz~J
zQ_*6Rsl3|;aHH}2_N!fUE%OIz$t~F<MLkP*YNUj(^^X*~?T{bCd9yY%n%P~wIXN&b
zr1M73g+}da*otF=TWq_N`y1yaL&oZ|;K{P2XuGfH)~yC~YB^Qvb}^bK)6C1kVw0L>
z-4IKL2^F76x1U&Fb-U2;^}L07Q-A0Nu>aDNewL5vPQ%u$8V^|8ru?MjY|P^UKS0#{
zrLRwAk${k`_th@Ej9-de15-V|xLWOD-i)vU{QKgKHeEYn@q+4YKRI}UD$K#};|-E_
zPh(@wE!J`Q;D~Eu1NC7q6LltUWL|_mxWHiov*WNDA@6DM?yYg1jI>57twgx#MbGR?
z#kZ9q;M;^F5T+1#1g9FE%6Pp<OYMcAqCGtCV$E!?JSwvY!dcuzy0n~3f)GSsi-_+x
zZ%XVJSNyC#$nFrjJ7-Bjf}wTdp@;D7xsv4k?krk^BG2;C2(>B)$$Ygqljijpvd1@8
zhf&3V;?WNw`*=*;?sZf=;ki?XO*D9DJnwpFPE0q#`Wr;Dp9P`fiM3i?w%|FFgW;<@
z<n=wPe&LbO<tIn?6JKZfzPZz>ySF=ZG~~E`-`Dh!7`}+dFWm2SKB`|)wpk~Z6Rw|H
zVm)`RcDlN%GO6Zf=bgK}NivyrJ~qQQ86^D~x`i6n>BlaQoo=l;fK@zg?}OWsE=z|}
zy7Fb5tL0o`#XB3h*}>Ut??O^-UfH!}_rjRd%%XAZGp?V@WWMiVSmer-eqF(?u)2(K
zt#fwrkyjjP-5EN#AX}DD#$;>_mts2hmY(r|b_=0!k~qRwit+F*9ll>lkey51uT<C+
zny<ctn9*4<=4L%Irssoh4?NBKzy;Zo`D_;7)_v4+%3AE6CL1qfp0o=6rxjc)VtIJ&
zmV`>)PKn1U`!V}j{^_3-PD&oZWRv)ep;s<ATW`2~RkZv>l26~r%g*v8d!3n;5ruE9
zg1MIqmu&b};v`1dk!|OuFpAHa8pc;6Bv}}x_p2D1ZUCOwmWeeTk5v7SnmSFr4vD<Y
zCVI$C<AQum4HkLgsH2+62`*lp#-T?`x4&Q;TbD-KzV+Uz&3U59nsNYk<+Hp~$}xGl
zTymu3vp}|yk&Ys{2?Y81aWOelq%=YXF82OHdB$FsPwI$^(~YdmOcKFdg5+S)<{PX&
zhF<UHPuol$^TgeCu5G-=gNwJjI8*Dg<08kg5g!E)Q#-HqfV`_N%fgxmQQH*2#r3>z
zT|Mf$O10chSOClQT+v(F<+f(12$P*3>ulNROHlOlmJ(?;ec_x%i+4!a4z(EpLXsjz
zjDa@98{AUa<=Gh`>c4rlU5oH5nr_3L)?59&%OS|KwQ_Yb#q>5x<IcrB{FrjyUBc&g
zoXa)nH%lk_re=RF8#eSsG=(lX1=LJMAbsn?v*0NcF|y>s+*I2%I?o;pP1~iwCv2_H
z$~mGFv*L1lhtnctUTc|b@2tUH{#;Y-5!pF0p>-MmdDO?t#Jv<be|*ig(St+C*c<#m
z@59}Qg4%%7g-xUGxP_1Sg(Tba&t)HFA{t1vW8V&3T@E()Tn=e%#S5GG=PENLY26OO
z$qwm^B^L71iY8hg2@DzL&Hkh@D*M&ulKOLFFEhV)Y1Jj9L%eb)A0q(+8HVP^&^;X8
zny)KAl&)W`JzjTk*OKM3t81xVX>9V+aw#D)Cx)$Nzpg#(h-*OY;sy{uwj1@_=v6{%
zeY4HY229?5^jhCS_8rk8k%opCo{^D7mvvtDQ(~-@G-)=-LO1}$6gQuV^|H=(ZFP~d
zQ+jqIJ-Em2Y~r1zkByip_0`<(a8;+wi00*O=okz8B?U1J_oCjLrBMuQw*JQzJa$=s
z;Lp8}%661j9Bm5dJM~H<cAJM!bauY8Rb+#OtoM-m4#k@t`NeWY=7&G|DIR6E6^&t%
zm|+a=^qebA%znwf#KE9W&tdtfVTsk9DL1HNShsGv-cf?A@v5ap&UwQ9D8kW^aWTcT
zG2x7EaqRKJPg$L|c(@QkHEx8=E>`rS$R@cA-vc}u<t4LJz^d=0N-=sl3!sKYF>$%?
ztsaVE4#+gWn#ImGGZA~L@%!1Pn^L=jLUTB#Z)RkONyz2HgB3^DQxJ>rOG80E+)XTs
z@VoL&r0~WXf8(#la88X%X(LO$lZ}%5j>NiHPKeo#xMLgq9Fy8!vFfxQxQ(=<*1}jr
zcELxhInEdgr!2F(k9C&DdPnrGv|#Ap<)2}B+)H{XFN-@QXOH#Y-&Z)seY^aIj!j{#
zZ37*)T@I(?7{+Y;I^$^F&Ia$H(av`{QyxCV3~YMh{P5j|{T6i`5llV$JUR%vW|5-W
zl+jGBwSuNN3&S|6#`!7CoIL-fjywC!zWX$l69p^+s>byQN9}7fnHudo&MlaE`8XBK
zJ3EYCnoKOb18=R`r<#)y;_WqlYJ9sy=RWe`xq4p4kFGTXEDjcuHl8+~##Jpy#mU>#
z6K=OBS@J&9(Y}|CKp5P*E7NHHT%b21;z9XQo!*9Z;Z8mM%u!_26gJ$?^eJZD^x)&e
z-TC(dm{{+)E>DeGR*r0QE6qq6T6`Qa&Ss2`x3Ofj&av(S#QoWXt7PPArBxAG^_Dd;
zE%J)|w@#U*bBk(w=mq2*^t)I&R(wzW$dl6TUh2+V9zi#jrY=-sH7>yQ)?iQT+)D<&
zH#!K{?(F{}@#3%r^4yd6-9^aO0B@&{GCR{aXIL{2srQ}wmh06*vVe!Vw&krq8|Z>)
z^Hke4)1c>AIyZooKwDDlsDAJj@A9{}Wx-M*+)V)vlh-g#iQL2o<9shCZ_iRq&viNk
z-{U7VbYLwKv7D>4^GgG^2<aR1+?A_9N*t3H4zLXP8mhljTW$<-dQve`UgacPGkLnB
z4Zp%A8|Ht4zv&gih%3!#8=t(4Zr{c0aP$T9n?m~LcK-R?{MEfBm5p_4rzg)fmcNcN
z?dwf)ZDzopG_ax}7Ee^2e%37GUpK$AkkHXWH$`jfJOPvAvHheMkzj*;CQHuO-D^4<
zgB{;xU>k8mlY7h#D`4qVGdLoD+%{)V0fyyV@f7R%2>7X67hK^G_0PtrS&2}$l{j|m
z?W3&K*J94AKwTni%x^z{#qU2raR(xD(;YK!`Rjv&BI-D-;fLo;xFl%!;>4^hk84)1
z6tk=_Cmru8oL&wv!37v!xDJRa1*Q&g85cyzTrmMHvvS>cgo_R|F7$9pP_n|x($~A{
zH6t_kmYy+IK0j2p1AS;78C_tc!Fj<l^CaUF#+HCfxFvfzO`GY5nP=Oyy7yf1ZFp&S
zYPE7D|D{S^Y(|YZt5lQA)GIezb$d-(y!t&MEveT0cc;#jtX{0Dxf8~6=8*t_v*__}
zQS@y=Wa5Z<0k(wBY2Dst*wN9UaOaoTIf-HnLN>^P2JrTSWY2YPt&viDt=u)<$<``l
zMq#kKX`>l3&)cBVt8tf=PE>kpqWc4PncL)}J0%sF`T|oWE?C_iN^<j*AC<Q`pI++R
zcZaxVU&YIp#aWUcQYBfUQkSzM5{z>NQY$ZbH{5mWonMw+k{c{7IxjY%m461!BN&xh
zGnsg>?DAN(?KAmln#|}IT~daOP$iEZiL?w_!Mr3}ndQ-ix({4WiLbJJAMCEdDa|yc
z)wNxiD>aQTJ?1pYt(rV!u1~z;dMTo1|J~c^HF8#GP;j~~6^=qNsn&|SQrs|(NV@Gq
zrRfcBjY!A25Au1o=Z#BnJtCp7AqRcc?md=CHv3`OqPK)P7Z*NQDR=0`4c>W`wTEPz
zva{dpV5#B9o;!or90&$_#6p{sW1rKL4u1KNgK5+%II+rMeoW%n+)j?@ERMTbAD7%3
z%*E5s1_TtJ=s5Z5#KRZ2mIa@2`j~h>DtN23-`bl^-@rt8@NK~%x7gUT=16xT*P*PP
zE_qWAh#sLg?SA$X8Sh7O7nP4%e#G;<W=}6FL?1hxH!Z?=1IPKm++})MaBZd4rSXb#
zD#G*_yWF7(BvaqYL2+d5U0?L!v<~+pXO^6MP5B#6)!E9`m|&B==5uIwnU}mY8sygs
zUpht<euLQKP-0{`FJC%;>|&Xd)3G)bLv6<p)3#j(iX#^gLHTFi_#fW@tRzxZlU3VE
z_?hi{EoTPXN!x@yO}W!t5&?Zg%2lOzYcEnX@#|HZip!I8&TY<mB{9}Mfsf<nBJVQv
zL9262`1e&=DJHXV^dx_O<5n4Xr>Z4<V3<4JCi|<=i}#py+DL|$_Hp=yFBHG<rrwNB
z&^OoL*HABm=<F1<&4_QX_O3NkVB|l|o@_SH|1RDo<Xqu!^#%~<{hX=5$PKu2vqx(7
zcvV*e6PwC;wIneMChnYa2^!Ymrge>X-=H7s<wW@1cOEXG*Lq;7&v*lscBJY){-S#Z
zxvl1%^uq2lC!Y=<)&|cP1G`zy+;g_IAdI~K92@LDXlv`RV9L*czmQl1H*m?}%3j+h
z82fNxEnDmPdmhy1IxDVOXOEkVITQNHoc#t8dAi`Ac>Y}jTT@%Cl^R!7?!`E<1D$6Z
zrRl=lE+!AopM%MXFA|jMzAE^HM8#zo$bMTy;stSp@91%vp|q&V>eFAGDy?yf2p!2G
zmpAo$N93+|un#P!ckvFSdlWk4&p398-8oJ+ZP`{jD<7h$=|A?^XQ(H5UUIcUpy?t$
zz4UWmp_`j$tE=12rP6}da&bpoS}OdA;h;p(4SI&)sZ+1yYKD*DhX-fC(-rY)PgCT{
zw6$AC=gYl(>(^~bqmvG8C4EZ0bJbrPY8c)!Ct>1qa&!`|a}`{NIVh7#EgaoFdG|Ow
z))u<UIK32$L)6Iw?3vaDtM?R1<m+}`igHYsM<t+dS9S(J#QWHdrcLPer^gCfa@!+p
z63^P*fJ@1mf*ZY1&QZ}+S8bV<c*Pp8np1u2=U21#?6;FP_h&c;v50A^X1t}b&JK^3
zyv;@X<XMi<jb>b(%w$!T;%YAO9CA$3&tCjE%IfOwpczK{?)2J;^Q9lT-lDI<6h5HD
zXJYH(de+X=B+nR~dCk;ro)Ca)yQYPCpKny@W{<Ze6)ZlBt-+aE#ik~;<7$a(AG>sn
z5(YK^FTeT^GMzlh^3Fjh&lvZS_y%(Gew!00j>h!m6a`Ta^-%}8p7QlPbbfS}{k*Pr
zYUAnV2#pbveM@6w<q*_q3MY@uc7n>kYMKw8y`@nUta&iWp-{l?0P#}c7&eC^Ji)ls
z0bL~xPf+<_p5?>hwL?ydryu9BH&4xbtW_<0IZ>fkHqLOb>$uyJw|~*%yEQ%=9-Z3c
z`@j=#lcP*L)^tdyVCOPl=62Fk0a==-P&MwZj*4&rN&kqP^bmZ<ag7VE4Xo$x?9;n7
zkQX62Z%6LCH`2NR1XVh{WjYsgJvG!ZV3dq%ljH#Z*_&b0gr~C-KdpH>D`u4JJBwmi
zsPn#&dC+-Q@>QZ{+=Z$J0r|%1(~9?olJfHQF(g(c&lR{fvF9~?=RUs(@l<$^_)dIO
zPu`*SU_N5p+6Jk2D`^<_jHZzradDJArIlgeeN#89{k>-L=}?#DV!QW}nA{N<F>~;?
zww3IR&`A;%w2(gB*1_!@&UkUp$Y77g<2~I$cixWZq%P8+(o$CrCvw4tB853sVVo%)
za)mLd17x9LM=$GZid{(p1;-e~<0M#f<ne9y^Q$qdZo3-;R+g8{Y=}h3z;0lBtXM`I
z4P$Lhtq`k5HWxxSzeGkS_myfu?MOz{l21h3VQ0*_hV$;DOy!I*Z~GFWoqM`??^TK=
z_MaVFN@{hkYvBQ}IJCO<2E~?Eo_R}vn%@_6<yB8R_E!^rvjzkiuwe(J%uCn{o1LAl
zzwy3hJJsh38@}|^9ilB8EXk*5gH1>Y+<&d`_U+cywj*2x^EFNWNUeM!HzviQio5BO
zj)x2btJjMcW`r)EJW8Ux=mzg}=<c=XeG~4HZx(`@{M;^;A6n7uyT)(v#Mz@{)c1t1
zv-vZQ1Wa-tk_&3(lwf=#=y%sKG+m^1nbOTWQuM)T(Q!|Tou<9rkY^nxTw~ZDVZE4^
z+BB@E*n7Hkc)qTok&Bo&c`D6|UuSXRP`tsz@Y1Qf%U7q456wSrXl^;>?31<QrQ}CQ
z4nK>;pr&tkrq}su4PUy0^76hs4_~ZBOO5`iw3X80Z+1LL5tM4@FwJ=q$ppj0%%Y~w
z)wp8PgU`oDzH|HROCLrEzd(Di=%iFKr-8Hz@^b&`k@jAnCyH;1KHk}n?Noat5SBQ}
zzlYYLzL9XqL`L*z;MW^vLy6@l>DdN_4}6ql(Mm1Oy2ya14e@$x!zGO{gmSt?T6=#g
ztx}Vtf7h`O&QcQ(<@x4w3soJ^&QkYqC^k{oVyS8QWSv3KRVHJXh<d*x#hykC_fuu&
z_1XM7dVCb>8iES0+%<Jgs_`*Rs5VIt+*M6{ROeLP()Q9RFR>XIs3}(>3)QM@k7doa
z+x?DLTw@`<wEPy{GB0A1?1DsIC=#^sZuDu`!^8y$;a+A0G!461o*N|F9CdgSUx`EV
z`FQgc`tuY@CKyPo{)4q!2$-KG{IE!%=(pa363-k(<Q%ixQ}!#Q?{_h9Sz68P1mDP0
z9a>-ZT0SByPQ9Gj9(Va<82GY&|0<K#CV<~;8&l#DjC(sjVmg;w;QEaVR(m=bX;`a_
zl69P0N3rj_T+o?ci`L%0TI9IfIc&Us`>|8BS5*Z*Oz-?i(RFG5)8piWA74W9HUP$x
zvQd|=A1kQ5nY;l+zdOY9%2P?RbmxN2gIcrZ2J*-~4&CX1O20S4HO$t_No7hE=Vu$P
z=NUYgZxE4aX2J%Ejwfy--R(SUU!wJ?<)qq*2nuHE;*??EAOr1KUYBLx0Ms4%ao@--
z2G5WtQ4ed1W##)efU|D8?4Nz#;D-f+XUnifBMEnfC9pO}xza~!<Rayf1qf$pO!1#)
z{~M1`NO$JHEk&6gw>g;jNdXq>d^5HGBmY1BYoEEWF5Yyy!@jT4ISea#$=T*JQpDCT
zQc>zcy-W~{#hRn-xCw474c|LWD{qsBF`?%$NjoyXTO7J0Hmc+EV*@e1QmbXv4WO#f
z%qF&Lwyb7XjZ1y-_F%K-+Wq5Ju`o@SQ|r7I>rZdlw0k?R6@0@XZ~3GPqvQK-;WB6q
z3lpHbH1LQ%soaPj`w+um$zH3j|Jh#`zy*H$M=vaVjrrR5(gwNO%`=rYZ&Oho@P5ZZ
z#|NcN-?Q6x2an2)PS@kg_puLqGqra+8S0!VILVXbEz7I4HW=R&mEGzjCyjIC?aZxW
ze*rhPF}86@K<2{fM-z}bY5j~{<m)$I&ur&@zX9w>E!I8E9l9!d_n|1q(OqYbJkg<S
zQvYo<Z#?kcSl&S5w9ZFMeb>nEq%3ijkB+W>f&7oxkDZ)XU*?Q|{n_p$4Zmo^b79r^
L4FILQ@$mlur#xms

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/page.jpg b/componentsPage/static/images/empty/page.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..939e1c88f72063307dae1b9603da340a57796f0b
GIT binary patch
literal 21070
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

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/permission.jpg b/componentsPage/static/images/empty/permission.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..709782b75d4f1fe92c92bc40763c905794c92815
GIT binary patch
literal 18967
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
Tk{1y8YbA+wjfduyR{H-Bb#Mf^

literal 0
HcmV?d00001

diff --git a/componentsPage/static/images/empty/search.jpg b/componentsPage/static/images/empty/search.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f735294727eb16bc583741c06f17a0857ea98687
GIT binary patch
literal 20234
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

literal 0
HcmV?d00001

diff --git a/componentsPage/steps/steps.vue b/componentsPage/steps/steps.vue
new file mode 100644
index 0000000..e0a8bb8
--- /dev/null
+++ b/componentsPage/steps/steps.vue
@@ -0,0 +1,105 @@
+<template>
+
+  <view class="components-steps tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Steps步骤条</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="operate_btn">
+        <view>
+          <tn-button backgroundColor="tn-bg-indigo" fontColor="tn-color-white" @click="prevStep">上一步</tn-button>
+        </view>
+        <view>
+          <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="nextStep">下一步</tn-button>
+        </view>
+      </view>
+      
+      <view class="tn-padding-top-lg"></view>
+      
+      <demo-title title="点模式">
+        <tn-steps :list="list" :current="current" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="数值模式">
+        <tn-steps :list="list" :current="current" mode="number" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="图标模式">
+        <tn-steps :list="list" :current="current" mode="icon" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="点图标模式">
+        <tn-steps :list="list" :current="current" mode="dotIcon" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="隐藏标题">
+        <tn-steps :list="list" :current="current" mode="icon" :showTitle="false" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="自定义颜色">
+        <tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <demo-title title="垂直显示">
+        <tn-steps :list="list" :current="current" direction="column" @click="stepItemClick"></tn-steps>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSteps',
+    components: {demoTitle},
+    data() {
+      return {
+        list: [
+          {name: '第一步'},
+          {name: '第二步', icon: 'trusty', selectIcon: 'trusty-fill'},
+          {name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
+          {name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
+        ],
+        
+        current: 0
+      }
+    },
+    methods: {
+      prevStep() {
+        let current = this.current
+        current--
+        this.current = current < 0 ? 0 : current
+      },
+      nextStep() {
+        let current = this.current
+        current++
+        this.current = current > this.list.length ? this.list.length : current
+      },
+      stepItemClick(e) {
+        this.current = e.index
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .operate_btn {
+    position: fixed;
+    width: 100%;
+    padding: 0 30rpx;
+    margin: 30rpx 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1000;
+  }
+</style>
diff --git a/componentsPage/sticky/sticky.vue b/componentsPage/sticky/sticky.vue
new file mode 100644
index 0000000..d4c1fed
--- /dev/null
+++ b/componentsPage/sticky/sticky.vue
@@ -0,0 +1,67 @@
+<template>
+
+  <view class="components-sticky tn-safe-area-inset-bottom" style="height: 200vh;">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>sticky吸顶</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="吸顶">
+        <tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height">
+          <view class="sticky-content tn-bg-orangered tn-color-white">普通吸顶</view>
+        </tn-sticky>
+        <view style="margin-top: 200rpx;">
+          <tn-sticky :offsetTop="100" :customNavHeight="vuex_custom_bar_height">
+            <view class="sticky-content tn-bg-indigo tn-color-white">有距离吸顶</view>
+          </tn-sticky>
+        </view>
+      </demo-title>
+      
+      <demo-title title="取消吸顶">
+        <tn-sticky :offsetTop="0" :enabled="false" :customNavHeight="vuex_custom_bar_height">
+          <view class="sticky-content tn-bg-red tn-color-white">不允许吸顶</view>
+        </tn-sticky>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSticky',
+    components: {demoTitle},
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .components-sticky {
+    min-height: 100vh;
+  }
+  
+  .sticky-content {
+    height: 80rpx;
+    padding: 0 80rpx;
+    margin: 0 10rpx;
+    line-height: 80rpx;
+    text-align: center;
+    border-radius: 10rpx;
+  }
+</style>
diff --git a/componentsPage/subsection/subsection.vue b/componentsPage/subsection/subsection.vue
new file mode 100644
index 0000000..6c10be0
--- /dev/null
+++ b/componentsPage/subsection/subsection.vue
@@ -0,0 +1,68 @@
+<template>
+  <view class="components-subsection tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>分段器</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <tn-subsection :list="list"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="按钮模式">
+        <tn-subsection :list="list" mode="button"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <demo-title title="取消切换动画">
+        <tn-subsection :list="list" :animation="false"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="贝塞尔曲线切换动画">
+        <tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <demo-title title="选中字体设置为粗体">
+        <tn-subsection :list="list" :bold="true"></tn-subsection>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
+        </view>
+        <view class="tn-margin-top">
+          <tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsSubsection',
+    components: { demoTitle },
+    data() {
+      return {
+        list: ['全部','未付款','待发货','待收货','待评价']
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/swipe-action/swipe-action.vue b/componentsPage/swipe-action/swipe-action.vue
new file mode 100644
index 0000000..3b9b477
--- /dev/null
+++ b/componentsPage/swipe-action/swipe-action.vue
@@ -0,0 +1,244 @@
+<template>
+
+  <view class="components-swipe-action tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基本使用">
+        <!-- <tn-swipe-action>
+          
+        </tn-swipe-action> -->
+        <tn-swipe-action-item :options="options1" name="0" @click="onSwiperItemClick">
+          <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+            <view class="swipe-action__item__image">
+              <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+            </view>
+            <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+              <view class="swipe-action__item__info__title">
+                基本使用
+              </view>
+              <view class="swipe-action__item__info__desc">
+                向左滑动即可看到
+              </view>
+            </view>
+          </view>
+        </tn-swipe-action-item>
+      </demo-title>
+      
+      <demo-title title="多菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              </view>
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  多菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
+              </view>
+            </view>
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="带图标菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options3">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              </view>
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  带图标菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
+              </view>
+            </view>
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="单图标菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item :options="options4">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              </view>
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  单图标菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到
+                </view>
+              </view>
+            </view>
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="关联打开滑动菜单">
+        <tn-swipe-action>
+          <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              </view>
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  关联打开滑动菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到，同时只能打开一个菜单
+                </view>
+              </view>
+            </view>
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <demo-title title="非关联打开滑动菜单">
+        <tn-swipe-action :autoClose="false">
+          <tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
+            <view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
+              <view class="swipe-action__item__image">
+                <image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
+              </view>
+              <view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
+                <view class="swipe-action__item__info__title">
+                  非关联打开滑动菜单
+                </view>
+                <view class="swipe-action__item__info__desc">
+                  向左滑动即可看到，允许同时打开多个菜单
+                </view>
+              </view>
+            </view>
+          </tn-swipe-action-item>
+        </tn-swipe-action>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSwipeAction',
+    components: { demoTitle },
+    data() {
+      return {
+        // 滑动菜单
+        options1: [{
+          text: '置顶',
+          style: {
+            backgroundColor: '#FFA726'
+          }
+        }],
+        options2: [{
+            text: '置顶',
+            style: {
+              backgroundColor: '#FFA726'
+            }
+          },
+          {
+            text: '删除',
+            style: {
+              backgroundColor: '#E83A30'
+            }
+          }
+        ],
+        options3: [{
+            text: '置顶',
+            icon: 'star',
+            style: {
+              backgroundColor: '#FFA726'
+            }
+          },
+          {
+            text: '删除',
+            icon: 'delete',
+            style: {
+              backgroundColor: '#E83A30'
+            }
+          }
+        ],
+        options4: [{
+            icon: 'star',
+            style: {
+              backgroundColor: '#FFA726',
+              width: '80rpx',
+              height: '80rpx',
+              margin: '0 12rpx',
+              borderRadius: '100rpx'
+            }
+          },
+          {
+            icon: 'delete',
+            style: {
+              backgroundColor: '#E83A30',
+              width: '80rpx',
+              height: '80rpx',
+              margin: '0 12rpx',
+              borderRadius: '100rpx'
+            }
+          }
+        ]
+      }
+    },
+    methods: {
+      // 处理swiperActionItem点击事件
+      onSwiperItemClick(e) {
+        if (e.type === 'button') {
+          this.$tn.message.toast(`点击了第${e.index}个按钮`)
+        } else if (e.type === 'item') {
+          this.$tn.message.toast(`点击了item标签,name为${e.name}`)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .swipe-action__item {
+    padding: 10rpx 20rpx;
+
+    &__image {
+      image {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 20rpx;
+      }
+    }
+
+    &__info {
+      margin-left: 20rpx;
+
+      &__title {
+        font-size: 30rpx;
+        font-weight: bold;
+      }
+
+      &__desc {
+        margin-top: 5rpx;
+        font-size: 22rpx;
+        color: $tn-font-sub-color;
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/swiper/swiper.vue b/componentsPage/swiper/swiper.vue
new file mode 100644
index 0000000..c77e782
--- /dev/null
+++ b/componentsPage/swiper/swiper.vue
@@ -0,0 +1,73 @@
+<template>
+
+  <view class="components-swiper tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Swiper轮播图</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="圆角方形">
+        <tn-swiper :list="list"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="方形">
+        <tn-swiper :list="list" mode="rect"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="点">
+        <tn-swiper :list="list" mode="dot"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="数值">
+        <tn-swiper :list="list" mode="number"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="隐藏指示器">
+        <tn-swiper :list="list" mode=""></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="轮播标题">
+        <tn-swiper :list="list" :title="true" mode=""></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="指示器设置在右上角">
+        <tn-swiper :list="list" indicatorPosition="topRight"></tn-swiper>
+      </demo-title>
+      
+      <demo-title title="3D切换效果">
+        <tn-swiper :list="list" :effect3d="true"></tn-swiper>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSwiper',
+    components: {demoTitle},
+    data() {
+      return {
+        list: [
+          {image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
+          {image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
+          {image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
+          {image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
+        ]
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/switch/switch.vue b/componentsPage/switch/switch.vue
new file mode 100644
index 0000000..cfdfd26
--- /dev/null
+++ b/componentsPage/switch/switch.vue
@@ -0,0 +1,96 @@
+<template>
+
+  <view class="components-switch tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Switch开光</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="普通切换按钮">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value1"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value2" shape="square"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value2" shape="square" :disabled="true"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value2" shape="square" :loading="value2"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮颜色">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value3" activeColor="#A4E82F"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value4" activeColor="#FFA4A4"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮尺寸">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value5" :size="30"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value6"></tn-switch>
+          </view>
+          <view class="tn-margin">
+            <tn-switch v-model="value7" :size="60"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <demo-title title="按钮内嵌图标">
+        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+          <view>
+            <tn-switch v-model="value8" leftIcon="sex-female" rightIcon="sex-male"></tn-switch>
+          </view>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsSwitch',
+    components: {demoTitle},
+    data() {
+      return {
+        value1: false,
+        value2: false,
+        value3: false,
+        value4: false,
+        value5: false,
+        value6: false,
+        value7: false,
+        value8: false,
+      }
+    },
+    methods: {
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-switch {
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/tabs/tabs.vue b/componentsPage/tabs/tabs.vue
new file mode 100644
index 0000000..8181a51
--- /dev/null
+++ b/componentsPage/tabs/tabs.vue
@@ -0,0 +1,94 @@
+<template>
+
+  <view class="components-tabs tn-safe-area-inset-bottom">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>tabs标签</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="默认" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <demo-title title="隐藏底部滑块" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" :showBar="false" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <demo-title title="修改背景颜色" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" @change="tabChange"></tn-tabs>
+        <view class="tn-margin-top">
+          <tn-tabs :list="scrollList" :current="current" backgroundColor="tn-main-gradient-indigo" activeColor="#FFFFFF" @change="tabChange"></tn-tabs>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义标签宽高" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" :height="120" :itemWidth="200" :barWidth="140" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <demo-title title="自定义标签、滑块" :contentPadding="false">
+        <tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" :activeItemStyle="activeItemStyle" :barStyle="barStyle" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <demo-title title="固定选项标签" :contentPadding="false">
+        <tn-tabs :list="fixedList" :current="current" :isScroll="false" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'componentsTabs',
+    components: {demoTitle},
+    data() {
+      return {
+        current: 0,
+        activeItemStyle: {
+          borderTop: '1rpx solid #E6E6E6'
+        },
+        barStyle: {
+          boxShadow: `12rpx 12rpx 16rpx #01BEFF`
+        },
+        scrollList: [
+          {name: '关注', count: 10},
+          {name: '推荐'},
+          {name: '热榜', count: '99+'},
+          {name: '搞笑'},
+          {name: '视频'},
+          {name: '科技'},
+          {name: '音乐'},
+          {name: '电影'},
+          {name: '游戏'}
+        ],
+        fixedList: [
+          {name: '关注', count: 10},
+          {name: '推荐'},
+          {name: '热榜', count: '99+'},
+          {name: '搞笑'}
+        ]
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-tabs {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/time-line/time-line.vue b/componentsPage/time-line/time-line.vue
new file mode 100644
index 0000000..8f58f9a
--- /dev/null
+++ b/componentsPage/time-line/time-line.vue
@@ -0,0 +1,223 @@
+<template>
+
+  <view class="components-time-line">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Timeline时间轴</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="time-line__wrap">
+        <tn-time-line>
+          <block v-for="(item, index) in expressData" :key="index">
+            <tn-time-line-item v-if="item.status !== 0" :top="2">
+              <template slot="node">
+                <view class="time-line-item__node">
+                  <view v-if="item.status === 1" class="time-line-item__node--icon tn-icon-image-text"></view>
+                  <view v-if="item.status === 2" class="time-line-item__node--icon tn-icon-prize"></view>
+                  <view v-if="item.status === 3" class="time-line-item__node--icon tn-icon-gift"></view>
+                  <view v-if="item.status === 4" class="time-line-item__node--icon tn-icon-logistics"></view>
+                  <view v-if="item.status === 5" class="time-line-item__node--icon tn-icon-my"></view>
+                  <view v-if="item.status === 6" class="time-line-item__node--icon tn-icon-cardbag"></view>
+                  <view v-if="item.status === 7" class="time-line-item__node--icon tn-icon-success"></view>
+                </view>
+              </template>
+              <template slot="content">
+                <view>
+                	<view v-if="item.status === 1" class="time-line-item__content__title">已下单</view>
+                	<view v-if="item.status === 2" class="time-line-item__content__title">已发货</view>
+                	<view v-if="item.status === 3" class="time-line-item__content__title">已揽件</view>
+                	<view v-if="item.status === 4" class="time-line-item__content__title">运输中</view>
+                	<view v-if="item.status === 5" class="time-line-item__content__title">派送中</view>
+                	<view v-if="item.status === 6" class="time-line-item__content__title">待取件</view>
+                	<view v-if="item.status === 7" class="time-line-item__content__title">已签收</view>
+                	<view class="time-line-item__content__desc">{{ item.info }}</view>
+                	<view class="time-line-item__content__time">{{ item.time }}</view>
+                </view>
+              </template>
+            </tn-time-line-item>
+            <tn-time-line-item v-else>
+              <template slot="content">
+                <view>
+                	<view class="time-line-item__content__desc">{{ item.info }}</view>
+                	<view class="time-line-item__content__time">{{ item.time }}</view>
+                </view>
+              </template>
+            </tn-time-line-item>
+          </block>
+        </tn-time-line>
+      </view>
+
+    </view>
+
+  </view>
+
+</template>
+
+<script>
+  export default {
+    name: 'componentsTimeline',
+    data() {
+      return {
+        expressData: [
+          {
+            info: '派送成功',
+            status: 7,
+            time: '2021-11-11 17:42'
+          },
+          {
+            info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
+            status: 0,
+            time: '2021-11-11 17:31'
+          },
+          {
+            info: '快件领取成功',
+            status: 0,
+            time: '2021-11-11 17:31'
+          },
+          {
+            info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， 联系电话：18888888888 〖来自代收点〗',
+            status: 6,
+            time: '2021-11-11 17:15'
+          },
+          {
+            info: '快件交给XXX，正在派送途中（联系电话：18888888888，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
+            status: 5,
+            time: '2021-11-11 17:07'
+          },
+          {
+            info: '快件到达〖XXX合作点〗',
+            status: 4,
+            time: '2021-11-11 16:25'
+          },
+          {
+            info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
+            status: 0,
+            time: '2021-11-11 13:50'
+          },
+          {
+            info: '快件到达〖XXX营业点〗',
+            status: 0,
+            time: '2021-11-11 13:06'
+          },
+          {
+            info: '快件在〖XXX集散点〗完成分拣，准备发往〖XXX营业点〗',
+            status: 0,
+            time: '2021-11-11 12:04'
+          },
+          {
+            info: '快件到达〖XXX集散点〗',
+            status: 0,
+            time: '2021-11-11 10:14'
+          },
+          {
+            info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX集散点〗',
+            status: 0,
+            time: '2021-11-11 05:52'
+          },
+          {
+            info: '快件到达〖XXX转场〗',
+            status: 0,
+            time: '2021-11-11 05:36'
+          },
+          {
+            info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX中转场〗',
+            status: 0,
+            time: '2021-11-10 23:36'
+          },
+          {
+            info: '快件到达〖XXX中转场〗',
+            status: 0,
+            time: '2021-11-10 22:34'
+          },
+          {
+            info: '快件在〖XXX营业部〗完成分拣，准备发往〖XXX中转场〗',
+            status: 0,
+            time: '2021-11-10 22:01'
+          },
+          {
+            info: '顺丰速运已收取快件',
+            status: 3,
+            time: '2021-11-10 21:54'
+          },
+          {
+            info: '包裹正在等待揽收',
+            status: 1,
+            time: '2021-11-10 17:41'
+          },
+          {
+            info: '商品已经下单',
+            status: 1,
+            time: '2021-11-10 12:17'
+          }
+        ]
+      }
+    },
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line-class {
+    .tn-time-line-item-class {
+      &:first-child {
+        .tn-time-line-item__node {
+          .time-line-item__node {
+            background-color: $tn-main-color !important;
+          }
+        }
+      }
+    }
+  }
+  
+  .time-line {
+    
+    &__wrap {
+      padding: 60rpx 30rpx 30rpx 60rpx;
+    }
+    
+    &-item {
+      &__node {
+        width: 44rpx;
+        height: 44rpx;
+        border-radius: 100rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #AAAAAA;
+        
+        &--active {
+          background-color: $tn-main-color;
+        }
+        
+        &--icon {
+          color: #FFFFFF;
+          font-size: 24rpx;
+        }
+      }
+      
+      &__content {
+        &__title {
+          font-weight: bold;
+          font-size: 32rpx;
+        }
+        
+        &__desc {
+          color: $tn-font-sub-color;
+          font-size: 28rpx;
+          margin-bottom: 6rpx;
+        }
+        
+        &__time {
+          color: $tn-font-holder-color;
+          font-size: 26rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/componentsPage/tips/tips.vue b/componentsPage/tips/tips.vue
new file mode 100644
index 0000000..75d730b
--- /dev/null
+++ b/componentsPage/tips/tips.vue
@@ -0,0 +1,133 @@
+<template>
+
+  <view class="components-tips">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>提示信息框</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- Tips -->
+    <tn-tips
+      ref="tips"
+      :position="position"
+      :top="vuex_custom_bar_height"
+      @close="closeTips"
+    ></tn-tips>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsTips',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        msg: '这是一条信息',
+        backgroundColor: '',
+        fontColor: '',
+        duration: 2000,
+        position: '',
+        
+        tips: ['无需依赖额外的样式文件','使用tn-tips组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '自定义颜色',
+                optional: ['默认','自定义'],
+                methods: 'colorChange'
+              },
+              {
+                title: '弹出位置',
+                optional: ['默认','顶部','中间','底部'],
+                methods: 'positionChange'
+              },
+              {
+                title: '关闭时间',
+                optional: ['默认','5000'],
+                methods: 'durationChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出Tips
+      showTips() {
+        this.openTips()
+      },
+      // 切换弹出位置
+      positionChange(event) {
+        switch(event.index) {
+          case 0:
+            this.position = ''
+            break
+          case 1:
+            this.position = 'top'
+            break
+          case 2:
+            this.position = 'center'
+            break
+          case 3:
+            this.position = 'bottom'
+            break
+        }
+        this.openTips()
+      },
+      // 切换颜色
+      colorChange(event) {
+        if (event.index === 0) {
+          this.backgroundColor = ''
+          this.fontColor = ''
+        } else {
+          this.backgroundColor = 'tn-bg-gray--light'
+          this.fontColor = '#E83A30'
+        }
+        this.openTips()
+      },
+      // 切换Tips关闭时间
+      durationChange(event) {
+        this.duration = event.index === 0 ? 2000 : Number(event.name)
+        this.openTips()
+      },
+      
+      
+      // 打开Tips
+      openTips() {
+        this.$refs.tips.show({
+          msg: this.msg,
+          backgroundColor: this.backgroundColor,
+          fontColor: this.fontColor,
+          duration: this.duration
+        })
+      },
+      // 关闭Tips
+      closeTips() {
+        this.$tn.message.toast('tips提示框关闭了')
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+</style>
diff --git a/componentsPage/toast/toast.vue b/componentsPage/toast/toast.vue
new file mode 100644
index 0000000..e16d2b9
--- /dev/null
+++ b/componentsPage/toast/toast.vue
@@ -0,0 +1,139 @@
+<template>
+
+  <view class="components-toast">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Toast</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
+        <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- Toast -->
+    <tn-toast
+      ref="toast"
+      @closed="closedToast"
+    ></tn-toast>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  export default {
+    name: 'componentsToast',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        title: '提示信息',
+        content: '欢迎使用图鸟UI',
+        icon: 'balancecar',
+        image: '',
+        duration: 2000,
+        
+        tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '标题',
+                optional: ['无标题','有标题'],
+                methods: 'titleChange',
+                current: 1
+              },
+              {
+                title: '内容',
+                optional: ['无内容','有内容'],
+                methods: 'contentChange',
+                current: 1
+              },
+              {
+                title: '图标',
+                optional: ['无图标','balancecar','图片'],
+                methods: 'iconChange',
+                current: 1
+              },
+              {
+                title: '关闭时间',
+                optional: ['默认','5000'],
+                methods: 'durationChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 弹出Toast
+      showToast() {
+        this.openToast()
+      },
+      // 切换Toast标题
+      titleChange(event) {
+        this.title = event.index === 0 ? '' : '提示信息'
+        this.openToast()
+      },
+      // 切换Toast内容
+      contentChange(event) {
+        this.content = event.index === 0 ? '' : '欢迎使用图鸟UI'
+        this.openToast()
+      },
+      // 切换Toast图标
+      iconChange(event) {
+        switch (event.index) {
+          case 0:
+            this.icon = ''
+            this.image = ''
+            break
+          case 1:
+            this.icon = event.name
+            this.image = ''
+            break
+          case 2:
+            this.icon = ''
+            this.image = '/static/favicon.ico'
+            break
+        }
+        this.openToast()
+      },
+      // 切换Toast关闭时间
+      durationChange(event) {
+        this.duration = event.index === 0 ? 2000 : Number(event.name)
+        this.openToast()
+      },
+      
+      
+      // 打开Toast
+      openToast() {
+        this.$refs.toast.show({
+          title: this.title,
+          content: this.content,
+          icon: this.icon,
+          image: this.image,
+          duration: this.duration
+        })
+      },
+      // 关闭Toast
+      closedToast() {
+        this.$tn.message.toast('Toast关闭')
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/componentsPage/verification-code-input/verification-code-input.vue b/componentsPage/verification-code-input/verification-code-input.vue
new file mode 100644
index 0000000..10db42f
--- /dev/null
+++ b/componentsPage/verification-code-input/verification-code-input.vue
@@ -0,0 +1,91 @@
+<template>
+  <view class="components-verification-code-input tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>验证码输入</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础使用">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value1"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="居中提示线">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="底部提示线">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="修改验证码长度">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="使用圆点隐藏已输入">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="不带呼吸效果">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="字体加粗">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <demo-title title="自定义样式">
+        <view class="tn-bg-white">
+          <tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input>
+        </view>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'ComponentsVerificationCode',
+    components: { demoTitle },
+    data() {
+      return {
+        value1: '24',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .components-verification-code-input {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>
diff --git a/componentsPage/verification-code/verification-code.vue b/componentsPage/verification-code/verification-code.vue
new file mode 100644
index 0000000..072bd69
--- /dev/null
+++ b/componentsPage/verification-code/verification-code.vue
@@ -0,0 +1,158 @@
+<template>
+
+  <view class="components-verification_code">
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>验证码倒计时</tn-nav-bar>
+
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
+        <view class="tn-flex tn-flex-row-center tn-flex-wrap">
+          <view style="width: 100%;">
+            <tn-form :labelWidth="120" :borderBottom="true">
+              <tn-form-item label="验证码">
+                <tn-input></tn-input>
+                <view slot="right">
+                  <tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" size="sm" @click="getCode">{{ tips }}</tn-button>
+                </view>
+              </tn-form-item>
+            </tn-form>
+          </view>
+          <view style="width: 100%;">
+            <tn-button width="100%" backgroundColor="tn-bg-red" fontColor="tn-color-white" margin="30rpx 0 0 0" style="width: 100%;" @click="reset">重置</tn-button>
+          </view>
+        </view>
+      </dynamic-demo-template>
+
+    </view>
+    
+    <!-- verification-code -->
+    <tn-verification-code
+      ref="code"
+      :keepRunning="keepRunning"
+      :seconds="seconds"
+      :startText="startText"
+      :countDownText="countDownText"
+      :endText="endText"
+      @end="codeEnd"
+      @start="codeStart"
+      @change="codeChange"
+    >
+    </tn-verification-code>
+
+  </view>
+
+</template>
+
+<script>
+  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
+  
+  export default {
+    name: 'componentsVerificationCode',
+    components: {dynamicDemoTemplate},
+    data() {
+      return {
+        tips: '获取验证码',
+        keepRunning: true,
+        seconds: 60,
+        startText: '获取验证码',
+        countDownText: 's秒后重新获取',
+        endText: '重新获取',
+        
+        tips: ['无需依赖额外的样式文件','使用tn-verification-code组件'],
+        sectionList: [
+          {
+            name: '参数切换',
+            section: [
+              {
+                title: '倒计时间',
+                optional: ['60s','30s','5s'],
+                methods: 'secondsChange'
+              },
+              {
+                title: '退出后保持运行',
+                optional: ['是','否'],
+                methods: 'keepRunningChange'
+              },
+              {
+                title: '自定义提示语',
+                optional: ['默认','自定义'],
+                methods: 'customTitleChange'
+              }
+            ]
+          }
+        ]
+
+      }
+    },
+    methods: {
+      click(event) {
+        this[event.methods] && this[event.methods](event)
+      },
+      // 切换倒计时间
+      secondsChange(event) {
+        this.seconds = Number(event.name.replace('s',''))
+      },
+      // 切换是否保持
+      keepRunningChange(event) {
+        this.keepRunning = event.index === 0 ? true : false
+      },
+      // 切换是否使用自定义提示语
+      customTitleChange(event) {
+        switch (event.index) {
+          case 0:
+            this.startText = '点击获取验证码'
+            this.countDownText = '重新获取s秒后'
+            this.endText = '再次获取'
+            break
+          case 1:
+            this.startText = '获取验证码'
+            this.countDownText = 's秒后重新获取'
+            this.endText = '重新获取'
+            break
+        }
+        this.reset()
+      },
+      
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      
+      // 重置验证码
+      reset() {
+        this.$refs.code.reset()
+      },
+      
+      // 开始倒计时
+      codeStart() {
+        this.$tn.message.toast('倒计时开始')
+      },
+      // 结束倒计时
+      codeEnd() {
+        this.$tn.message.toast('倒计时结束')
+      },
+      // 正在倒计时
+      codeChange(event) {
+        this.tips = event
+      }
+
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b61f63e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/libs/components/demo-title.vue b/libs/components/demo-title.vue
new file mode 100644
index 0000000..1386ff8
--- /dev/null
+++ b/libs/components/demo-title.vue
@@ -0,0 +1,94 @@
+<template>
+  <view class="demo-title">
+    <view>
+      <view v-if="type === 'first'" class="main_title">
+        <view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
+        <view class="main_title__content">{{ title }}</view>
+        <view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
+      </view>
+      <view v-if="type === 'second'" class="second_title">
+        <view class="second_title__content">{{ title }}</view>
+      </view>
+    </view>
+    <view class="content" :class="[{
+      'content--padding': contentPadding
+    }]">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'demo-title',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    props: {
+      // 标题类型
+      type: {
+        type: String,
+        default: 'first'
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 左图标
+      leftIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 右图标
+      rightIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 内容容器是否有两边边距
+      contentPadding: {
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .main_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 50rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    
+    &__content {
+      padding: 0 18rpx;
+    }
+    
+    &__icon {
+      font-size: 34rpx;
+    }
+  }
+  
+  .second_title {
+    margin: 24rpx 0;
+    margin-left: 30rpx;
+    
+    &__content {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+  }
+  
+  .content {
+    margin-top: 30rpx;
+    
+    &--padding {
+      margin-left: 30rpx;
+      margin-right: 30rpx;
+    }
+  }
+</style>
diff --git a/libs/components/dynamic-demo-template.vue b/libs/components/dynamic-demo-template.vue
new file mode 100644
index 0000000..525e316
--- /dev/null
+++ b/libs/components/dynamic-demo-template.vue
@@ -0,0 +1,689 @@
+<template>
+  <view class="dynamic-demo">
+
+    <!-- 效果预览窗口 -->
+    <view v-if="!noDemo" class="demo-container" :class="{'demo-container--full': full}">
+      <view class="demo">
+        <slot></slot>
+      </view>
+      <!-- 提示信息 -->
+      <view v-if="haveTips">
+        <view class="demo__tips__icon" @click="demoTipsClick">
+          <view class="icon tn-icon-help"></view>
+        </view>
+        <view class="demo__tips__content"
+          :class="[showContentTips ? 'demo__tips__content--show' : 'demo__tips__content--hide']">
+          <view v-for="(item,index) in tipsData" :key="index" class="demo__tips__content--item">{{ item }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 模式切换 -->
+    <view v-if="multiMode" class="mode-switch">
+      <view class="mode-switch__container">
+        <view v-for="(item, index) in sectionModeListInfos" :key="index" class="mode-switch__item"
+          :class="[`mode-switch-item-${index}`,{'mode-switch__item--active': modeIndex === index}]"
+          @click="switchMode(index)">{{ item.name }}</view>
+
+        <!-- 滑块样式 -->
+        <view class="mode-switch__slider" :style="[modeSwitchSliderStyle]"></view>
+      </view>
+    </view>
+
+    <!-- 组件对应可选项容器 -->
+    <view class="section-container">
+      <scroll-view
+        class="section__scroll-view"
+        :class="{'section__scroll-view--auto': sectionScrollViewStyle.height === 'auto'}"
+        :style="[sectionScrollViewStyle]"
+        :scroll-y="sectionScrollViewStyle.height !== 'auto'"
+      >
+        <block v-for="(item,index) in btnsList" :key="index">
+          <view class="section__content" :class="{'section__content--visible': item.show}">
+            <view class="section__content__title">
+              <view class="section__content__title__left-line" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]"></view>
+              <view class="section__content__title--text tn-text-ellipsis" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]">{{ item.title }}</view>
+              <view class="section__content__title__right-line" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]"></view>
+            </view>
+            <view class="section__content__btns">
+              <view v-for="(section_btn,section_index) in item.optional" :key="section_index"
+                class="section__content__btns__item" :class="[`tn-main-gradient-${tuniaoColorList[index]}--light`]" @click="sectionBtnClick(index, section_index)">
+                <view class="section__content__btns__item__bg"
+                  :class="[`tn-main-gradient-${tuniaoColorList[index]}`, {'section__content__btns__item__bg--active':sectionIndex[modeIndex][index]['value'] === section_index}]"></view>
+                <view class="section__content__btns__item--text tn-text-ellipsis"
+                  :class="[sectionIndex[modeIndex][index]['value'] === section_index ? 'section__content__btns__item--text--active' : `tn-color-${tuniaoColorList[index]}`]">{{ section_btn }}</view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'dynamic-demo-template',
+    props: {
+      // 可选项列表数据
+      sectionList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 提示信息
+      tips: {
+        type: [String, Array],
+        default: ''
+      },
+      // 演示框的内容是否为铺满
+      full: {
+        type: Boolean,
+        default: false
+      },
+      // 是否使用了自定义顶部导航栏
+      customBar: {
+        type: Boolean,
+        default: true
+      },
+      // 是否全屏滚动
+      fullWindowsScroll: {
+        type: Boolean,
+        default: false
+      },
+      // 没有演示内容
+      noDemo: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      tipsData() {
+        if (typeof this.tips === 'string') {
+          return [this.tips]
+        }
+        return this.tips
+      },
+      haveTips() {
+        return this.tips && this.tips.length > 0
+      },
+      multiMode() {
+        return this.sectionList.length > 1
+      },
+      sectionModeList() {
+        return this.sectionList.map((item) => {
+          return item.name
+        })
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: this.$tn.color.getTuniaoColorList(),
+        // 保存选项列表信息（由于prop中的数据时不能被修改的）
+        _sectionList: [],
+        // 模式列表信息
+        sectionModeListInfos: [],
+        // 所选模式的序号
+        modeIndex: 0,
+        // 模式选择滑块样式
+        modeSwitchSliderStyle: {
+          width: 0,
+          left: 0
+        },
+        // 显示组件相关提示信息
+        showContentTips: false,
+        // 可选项滚动容器样式
+        sectionScrollViewStyle: {
+          height: 0
+        },
+        // 按钮列表信息
+        btnsList: [],
+        // 标记当前所选按钮
+        sectionIndex: [],
+        // 标记选项按钮是否可以滑动（使用scroll-view进行包裹）
+        sectionScrollFlag: true
+      }
+    },
+    watch: {
+      sectionList: {
+        handler(value) {
+          // 如果sectionList发生改变，重新初始化选项列表信息
+          this.initSectionBtns()
+        },
+        deep: true
+      },
+      sectionScrollFlag(value) {
+        if (!value) {
+          this.sectionScrollViewStyle.height = 'auto'
+        }
+      },
+      fullWindowsScroll: {
+        handler(value) {
+          if (value) {
+            this.sectionScrollViewStyle.height = 'auto'
+          }
+        },
+        immediate: true
+      }
+    },
+    created() {
+      // 初始化可选项模式列表
+      this.sectionModeListInfos = this.sectionModeList.map((item) => {
+        return {
+          name: item
+        }
+      })
+      // 初始化选项按钮默认信息
+      this.initSectionBtns()
+    },
+    mounted() {
+      // 等待加载组件完成
+      // setTimeout(() => {
+      //   // 计算出底部scroll-view的高度
+      //   this.initSectionScrollView()
+
+      //   if (this.multiMode) {
+      //     // 获取模式切换标签的信息
+      //     this.getModeTabsInfo()
+      //   }
+      // }, 10)
+      this.$nextTick(() => {
+        // 计算出底部scroll-view的高度
+        this.initSectionScrollView()
+        
+        if (this.multiMode) {
+          // 获取模式切换标签的信息
+          this.getModeTabsInfo()
+        }
+      })
+    },
+    methods: {
+      // 初始化选项滑动窗口的高度
+      initSectionScrollView() {
+        // 全屏滚动时不进行任何的操作
+        if (this.fullWindowsScroll) {
+          return
+        }
+        // 获取屏幕的高度
+        uni.getSystemInfo({
+          success: (systemInfo) => {
+            // 通过当前屏幕的安全高度减去上一个元素的底部和距离上一个元素的外边距，然后减获取到的值减去标题栏的高度即可
+            const navBarHeight = this.customBar ? 0 : this.vuex_custom_bar_height
+            if (this.multiMode) {
+              uni.createSelectorQuery().in(this).select('.mode-switch').boundingClientRect(data => {
+                if (data.bottom >= systemInfo.safeArea.height) {
+                  this.sectionScrollFlag = false
+                } else {
+                  this.sectionScrollFlag = true
+                  const containerBaseHeight = systemInfo.safeArea.height - data.bottom
+                  this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
+                }
+              }).exec()
+            } else {
+              if (!this.noDemo) {
+                uni.createSelectorQuery().in(this).select('.demo-container').boundingClientRect(data => {
+                  if (data.bottom >= systemInfo.safeArea.height) {
+                    this.sectionScrollFlag = false
+                  } else {
+                    this.sectionScrollFlag = true
+                    const containerBaseHeight = systemInfo.safeArea.height - data.bottom
+                    this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
+                  }
+                }).exec()
+              } else {
+                this.sectionScrollFlag = false
+              }
+            }
+            
+          }
+        })
+      },
+      // 更新选项滑动容器的高度
+      updateSectionScrollView() {
+        this.$nextTick(() => {
+          this.initSectionScrollView()
+        })
+      },
+      // 获取各个模式tab的节点信息
+      getModeTabsInfo() {
+        let view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.sectionModeListInfos.length; i++) {
+          view.select('.mode-switch-item-' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          // 如果没有获取到，则重新获取
+          if (!res.length) {
+            setTimeout(() => {
+              this.getModeTabsInfo()
+            }, 10)
+            return
+          }
+          // 将每个模式的宽度放入list中
+          res.map((item, index) => {
+            this.sectionModeListInfos[index].width = item.width
+          })
+          // 初始化滑块的宽度
+          this.modeSwitchSliderStyle.width = this.sectionModeListInfos[0].width + 'px'
+
+          // 初始化滑块的位置
+          this.modeSliderPosition()
+        })
+      },
+      // 设置模式滑块的位置
+      modeSliderPosition() {
+        let left = 0
+        // 计算当前所选模式选项到组件左边的距离
+        this.sectionModeListInfos.map((item, index) => {
+          if (index < this.modeIndex) left += item.width
+        })
+
+        this.modeSwitchSliderStyle.left = left + 'px'
+      },
+      // 切换模式
+      switchMode(index) {
+        // 不允许点击当前激活的选项
+        if (index === this.modeIndex) return
+        this.modeIndex = index
+        this.modeSliderPosition()
+        this.updateSectionBtns()
+        this.$emit('modeClick', {
+          index: index
+        })
+      },
+      // 点击内容提示信息
+      demoTipsClick() {
+        this.showContentTips = !this.showContentTips
+      },
+      // 初始化被选中选项按钮
+      initSectionBtns() {
+        this.sectionIndex = []
+        this.sectionIndex = this.sectionList.map((item) => {
+          if (item.hasOwnProperty('section') && item.section.length > 0) {
+            return Array(item.section.length).fill({
+              value: 0,
+              change: false
+            })
+          } else {
+            return []
+          }
+        })
+        
+        this._sectionList = this.$tn.deepClone(this.sectionList)
+        // 给本地选项按钮列表给默认show属性
+        this._sectionList.map((item) => {
+          const section = item.section.map((section_item) => {
+            if (!section_item.hasOwnProperty('show')) {
+              section_item.show = true
+            }
+            return section_item
+          })
+          item.section = section
+          return item
+        })
+        
+        // 更新按钮信息
+        this.updateSectionBtns()
+      },
+      // 跟新选项按钮信息
+      updateSectionBtns(sectionIndex = -1, showState = true) {
+        let sectionOptional = this._sectionList[this.modeIndex]['section']
+        this.btnsList = sectionOptional.map((item, index) => {
+          // 判断是否已经修改了对应的值
+          let changeValue = this.sectionIndex[this.modeIndex][index]['change'] || false
+          let currentSectionIndexValue = this.sectionIndex[this.modeIndex][index]['value'] || 0
+          // 取出默认值(如果是已经修改过的选项，则使用之前的选项信息)
+          let indexValue = changeValue ? currentSectionIndexValue : item.hasOwnProperty('current') ? item.current : 0
+          // 取出是否显示当前选项
+          let show = (sectionIndex !== -1 && sectionIndex === index) ? showState : item.hasOwnProperty('show') ? item.show : true
+          // 处理最大最小值
+          if (indexValue < 0) {
+            indexValue = 0
+          }
+          if (indexValue >= item.optional.length) {
+            indexValue = item.optional.length
+          }
+          // this.sectionIndex[this.modeIndex][index]['value'] = indexValue
+          this.$set(this.sectionIndex[this.modeIndex], index, {value: indexValue, change: changeValue})
+          item.show = show
+          return item
+        })
+      },
+      // 更新选项按钮状态信息
+      updateSectionBtnsState(sectionIndex = -1, showState = true) {
+        // 判断sectionIndex是否为数组
+        if (this.$tn.array.isArray(sectionIndex)) {
+          if (sectionIndex.length === 0) {
+            return
+          }
+          sectionIndex = sectionIndex.filter((item) => item >= 0 && item < this.sectionList[this.modeIndex]['section'].length)
+          sectionIndex.map((item) => {
+            this.btnsList[item]['show'] = showState
+            this._sectionList[this.modeIndex]['section'][item]['show'] = showState
+          })
+        } else {
+          if (sectionIndex < 0 || sectionIndex >= this.sectionList[this.modeIndex]['section'].length) {
+            return
+          }
+          // 将按键的对应显示状态设置为对应的状态
+          this.btnsList[sectionIndex]['show'] = showState
+          this._sectionList[this.modeIndex]['section'][sectionIndex]['show'] = showState
+        }
+        
+      },
+      // 更新选项按钮选中信息
+      updateSectionBtnsValue(modeIndex = 0, sectionIndex = -1, value = 0) {
+        if (sectionIndex < 0 || sectionIndex >= this.sectionList[modeIndex]['section'].length) {
+          return
+        }
+        // 如果showState为false则移除对应的选项按钮，否则往对应的位置添加上对应的选项按钮
+        this.sectionIndex[modeIndex][sectionIndex] = {
+          value,
+          change: true
+        }
+      },
+      // 选项按钮点击事件
+      sectionBtnClick(index, sectionIndex) {
+        // if (this.sectionIndex[this.modeIndex][index] === sectionIndex) {
+        //   return
+        // }
+        this.$set(this.sectionIndex[this.modeIndex], index, {value: sectionIndex, change: true})
+        this.$emit('click', {
+          methods: this.btnsList[index]['methods'],
+          index: sectionIndex,
+          name: this.btnsList[index]['optional'][sectionIndex]
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dynamic-demo {
+    padding-top: 78rpx;
+
+    /* 顶部模式切换start */
+    .mode-switch {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 75rpx;
+      padding: 0 30rpx;
+
+      &__container {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 476rpx;
+        height: 62rpx;
+        background-color: #FFFFFF;
+        box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+        border-radius: 31rpx;
+      }
+
+      &__item {
+        flex: 1;
+        height: 62rpx;
+        width: 100%;
+        line-height: 62rpx;
+        text-align: center;
+        font-size: 28rpx;
+        color: $tn-font-sub-color;
+        z-index: 2;
+        transition: all 0.3s;
+
+        &--active {
+          color: #FFFFFF;
+          font-weight: bold;
+        }
+      }
+
+      &__slider {
+        position: absolute;
+        height: 62rpx;
+        border-radius: 31rpx;
+        // background-image: linear-gradient(-86deg, #FF8359 0%, #FFDF40 100%);
+        background-image: linear-gradient(-86deg, #00C3FF 0%, #58FFF5 100%);
+        box-shadow: 1rpx 10rpx 24rpx 0rpx #00C3FF77;
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+
+    /* 顶部模式切换end */
+
+    /* 演示内容展示start */
+    .demo-container {
+      min-height: 327rpx;
+      width: calc(100% - 60rpx);
+      background-color: #FFFFFF;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      margin: 0 30rpx 5rpx 30rpx;
+      border-radius: 20rpx;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &--full {
+        display: inline-block;
+        padding-bottom: 20rpx;
+        min-height: 0rpx;
+        padding: 10rpx 20rpx 30rpx;
+      }
+
+      .demo {
+        padding-top: 70rpx;
+
+        &__tips {
+          &__icon {
+            position: absolute;
+            top: 20rpx;
+            right: 16rpx;
+            width: 39rpx;
+            height: 39rpx;
+            line-height: 39rpx;
+            font-size: 39rpx;
+
+            .icon {
+              background: linear-gradient(-45deg, #FF8359 0%, #FFDF40 100%);
+              -webkit-background-clip: text;
+              color: transparent;
+              text-shadow: 0rpx 10rpx 10rpx rgba(255, 156, 82, 0.2);
+            }
+          }
+
+          &__content {
+            position: absolute;
+            top: 65rpx;
+            right: 16rpx;
+            font-size: 20rpx;
+            margin-left: 20rpx;
+            word-wrap: normal;
+            display: flex;
+            flex-direction: column;
+            background-color: #E6E6E6;
+            padding: 20rpx;
+            border-radius: 10rpx;
+            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1);
+            transform-origin: 0 0;
+            z-index: 999999;
+
+            &--hide {
+              transform: scaleY(0);
+            }
+
+            &--show {
+              transform: scaleY(100%);
+
+              &::after {
+                content: "";
+                width: 0px;
+                height: 0px;
+                border-width: 4px;
+                border-style: solid;
+                border-color: transparent transparent rgba(149, 149, 149, 0.1) transparent;
+                position: absolute;
+                top: -8px;
+                right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* 演示内容展示end */
+
+    /* 可选项start */
+    .section-container {
+      width: 100%;
+      height: auto;
+      margin-top: 70rpx;
+
+      .section {
+        &__content {
+          margin-top: 70rpx;
+          display: none;
+          
+          &--visible {
+            display: block;
+            
+            &:last-child {
+              padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
+            }
+          }
+
+          &:nth-child(1) {
+            margin-top: 0rpx;
+          }
+
+          &__title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 30rpx;
+            text-align: center;
+
+            &__left-line,
+            &__right-line {
+
+              width: 100rpx;
+              height: 2rpx;
+              position: relative;
+            }
+
+            &__left-line {
+              &::after {
+                content: '';
+                background: inherit;
+                width: 12rpx;
+                height: 12rpx;
+                position: absolute;
+                top: -12rpx;
+                right: 0rpx;
+                border-radius: 50%;
+                transform: translateY(50%);
+              }
+            }
+
+            &__right-line {
+              &::after {
+                content: '';
+                background: inherit;
+                width: 12rpx;
+                height: 12rpx;
+                position: absolute;
+                top: -12rpx;
+                left: 0rpx;
+                border-radius: 50%;
+                transform: translateY(50%);
+              }
+            }
+
+            &--text {
+              -webkit-background-clip: text;
+              color: transparent;
+              min-width: 124rpx;
+              height: 30rpx;
+              font-size: 32rpx;
+              line-height: 1;
+              margin: 0 35rpx;
+            }
+          }
+
+          &__btns {
+            width: calc(100% - 60rpx);
+            margin: 0 30rpx;
+            margin-top: 29rpx;
+            padding: 50rpx 30rpx 0rpx 0rpx;
+            background-color: #FFFFFF;
+            box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+            border-radius: 20rpx;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+
+            &__item {
+              max-width: 30%;
+              padding: 17rpx 36rpx;
+              border-radius: 10rpx;
+              margin-bottom: 40rpx;
+              margin-left: 40rpx;
+              position: relative;
+              z-index: 1;
+
+              // &::before {
+              //   content: " ";
+              //   position: absolute;
+              //   top: 10rpx;
+              //   left: 1rpx;
+              //   width: 100%;
+              //   height: 100%;
+              //   background: inherit;
+              //   filter: blur(24rpx);
+              //   opacity: 1;
+              //   z-index: -1;
+              // }
+
+              &__bg {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                z-index: -1;
+                opacity: 0;
+                transform: scale(0);
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+                &--active {
+                  opacity: 1;
+                  transform: scale(1);
+                }
+              }
+
+              &--text {
+                font-size: 24rpx;
+                line-height: 1.2em;
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                
+                &--active {
+                  color: #FFFFFF;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* 可选项end */
+  }
+</style>
diff --git a/libs/components/multiple-options-demo.vue b/libs/components/multiple-options-demo.vue
new file mode 100644
index 0000000..f3644b6
--- /dev/null
+++ b/libs/components/multiple-options-demo.vue
@@ -0,0 +1,147 @@
+<template>
+  <view class="multiple-options">
+    <view class="list">
+      <block v-for="(item, index) in listData" :key="index">
+        <view
+          class="list__item"
+          :class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
+          @tap="navOptionsPage(item.url)"
+        >
+          <view class="list__content">
+            <view class="list__content__title">{{ item.title }}</view>
+            <view class="list__content__desc">{{ item.desc }}</view>
+          </view>
+          <view class="list__icon">
+            <view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+            <view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'multiple-options-demo',
+    props: {
+      // 显示的列表数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: [
+          'red',
+          'purplered',
+          'purple',
+          'bluepurple',
+          'aquablue',
+          'blue',
+          'indigo',
+          'cyan',
+          'teal',
+          'green',
+          'orange',
+          'orangered'
+        ],
+        listData: []
+      }
+    },
+    watch: {
+      list(val) {
+        this.initList()
+      }
+    },
+    created() {
+      this.initList()
+    },
+    methods: {
+      // 初始化列表数据
+      initList() {
+        // 给列表添加背景颜色数据
+        this.listData = this.list.map((item, index) => {
+          item.bgColorIndex = this.getBgNum()
+          item.mainIcon = item?.mainIcon || 'computer-fill'
+          item.subIcon = item?.subIcon || 'share'
+          return item
+        })
+      },
+      // 跳转到对应的选项页面
+      navOptionsPage(url) {
+        uni.navigateTo({
+          url: url
+        })
+      },
+      // 获取酷炫背景随机数
+      getBgNum() {
+        return Math.floor((Math.random() * this.tuniaoColorList.length))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .list {
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 60rpx);
+      margin: 108rpx 30rpx 0rpx 30rpx;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 20rpx;
+    }
+    
+    &__content {
+      flex: 1;
+      // color: $tn-font-color;
+      margin: 34rpx 0rpx 27rpx 37rpx;
+      
+      &__title {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 12rpx;
+      }
+      &__desc {
+        font-size: 28rpx;
+      }
+    }
+    
+    &__icon {
+      flex: 1;
+      margin-right: 26rpx;
+      position: relative;
+      
+      &__main, &__sub {
+        -webkit-background-clip: text;
+        color: transparent;
+        position: absolute;
+        transition: transform 0.25s ease;
+      }
+      
+      &__main {
+        font-size: 200rpx;
+        width: 190rpx;
+        line-height: 200rpx;
+        top: 0;
+        right: 0rpx;
+        transform: translateY(-60%);
+      }
+      &__sub {
+        font-size: 70rpx;
+        top: 0;
+        right: 175rpx;
+        transform: translateY(-5rpx);
+      }
+    }
+  }
+</style>
diff --git a/libs/components/nav-index-button.vue b/libs/components/nav-index-button.vue
new file mode 100644
index 0000000..1a7fba6
--- /dev/null
+++ b/libs/components/nav-index-button.vue
@@ -0,0 +1,169 @@
+<template>
+  <view class="nav-index-button" :style="{bottom: `${bottom}rpx`, right: `${right}rpx`}" @tap.stop="navIndex">
+    <view class="nav-index-button__content">
+        <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7">
+          <view class="tn-icon-home-vertical-fill"></view>
+        </view>  
+    </view>
+  
+    <view class="nav-index-button__meteor">
+      <view class="nav-index-button__meteor__wrapper">
+        <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+          <view class="nav-index-button__meteor__item--pic"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'nav-index-button',
+    props: {
+      // 距离底部的距离
+      bottom: {
+        type: [Number, String],
+        default: 300
+      },
+      // 距离右边的距离
+      right: {
+        type: [Number, String],
+        default: 75
+      },
+      // 首页地址
+      indexPath: {
+        type: String,
+        default: '/pages/index/index'
+      }
+    },
+    methods: {
+      // 跳转回首页
+      navIndex() {
+        // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+        const pages = getCurrentPages()
+        if (pages && pages.length > 0) {
+          const indexPath = this.indexPath || '/pages/index/index'
+          const firstPage = pages[0]
+          if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
+            uni.reLaunch({
+              url: indexPath
+            })
+          } else {
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+        } else {
+          uni.reLaunch({
+            url: indexPath
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .nav-index-button {
+    position: fixed;
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+    
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+    
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+      
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+      
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+        
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc3.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+  
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+  
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+  
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/libs/mixin/dynamic_demo_mixin.js b/libs/mixin/dynamic_demo_mixin.js
new file mode 100644
index 0000000..66ff992
--- /dev/null
+++ b/libs/mixin/dynamic_demo_mixin.js
@@ -0,0 +1,52 @@
+/**
+ * 动态参数演示mixin
+ */
+module.exports = {
+  data() {
+    return {
+      // 效果显示框top的值
+      contentContainerTop: '0px',
+      contentContainerIsTop: false,
+      
+      // 参数显示框top的值
+      sectionContainerTop: '0px'
+    }
+  },
+  onReady() {
+    this.updateSectionContainerTop()
+  },
+  methods: {
+    // 处理演示效果框的位置
+    async _handleContentConatinerPosition() {
+      // 获取效果演示框的节点信息
+      const contentContainer = await this._tGetRect('#content_container')
+      // 获取参数框的节点信息
+      this._tGetRect('#section_container').then((res) => {
+        // 判断参数框是否在移动，如果是则更新效果框的位置
+        // 如果效果框的顶部已经触控到顶部导航栏就停止跟随
+        if (res.top - contentContainer.bottom != 15) {
+          const newTop = res.top - (contentContainer.height + uni.upx2px(20))
+          const minTop = this.vuex_custom_bar_height + 1
+          if (newTop < minTop) {
+            this.contentContainerTop = minTop + 'px'
+            this.contentContainerIsTop = true
+          } else {
+            this.contentContainerTop = newTop + 'px'
+            this.contentContainerIsTop = false
+          }
+        }
+      })
+    },
+    // 更新状态切换栏位置信息
+    updateSectionContainerTop() {
+      this._tGetRect('#content_container').then((res) => {
+        this.contentContainerTop = (this.vuex_custom_bar_height + 148) + 'px'
+        this.sectionContainerTop = (res.height + 20) + 'px'
+      })
+    }
+  },
+  // 监听页面滚动
+  onPageScroll() {
+    this._handleContentConatinerPosition()
+  }
+}
diff --git a/libs/mixin/template_page_mixin.js b/libs/mixin/template_page_mixin.js
new file mode 100644
index 0000000..2314549
--- /dev/null
+++ b/libs/mixin/template_page_mixin.js
@@ -0,0 +1,60 @@
+/**
+ * 演示页面mixin
+ */
+module.exports = {
+  data() {
+    return {
+      
+    }
+  },
+  onLoad() {
+    // 更新顶部导航栏信息
+    this.updateCustomBarInfo()
+  },
+  methods: {
+    // 点击左上角返回按钮时触发事件
+    goBack() {
+      // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+      const pages = getCurrentPages()
+      if (pages && pages.length > 0) {
+        const firstPage = pages[0]
+        if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
+          uni.reLaunch({
+            url: '/pages/index/index'
+          })
+        } else {
+          uni.navigateBack({
+            delta: 1
+          })
+        }
+      } else {
+        uni.reLaunch({
+          url: '/pages/index/index'
+        })
+      }
+    },
+    // 更新顶部导航栏信息
+    async updateCustomBarInfo() {
+      // 获取vuex中的自定义顶栏的高度
+      let customBarHeight = this.vuex_custom_bar_height
+      let statusBarHeight = this.vuex_status_bar_height
+      // 如果获取失败则重新获取
+      if (!customBarHeight) {
+        try {
+          const navBarInfo = await this.$tn.updateCustomBar()
+          customBarHeight = navBarInfo.customBarHeight
+          statusBarHeight = navBarInfo.statusBarHeight
+        } catch(e) {
+          setTimeout(() => {
+            this.updateCustomBarInfo()
+          }, 10)
+          return
+        }
+      }
+      
+      // 更新vuex中的导航栏信息
+      this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
+      this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
+    }
+  }
+}
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..34d386f
--- /dev/null
+++ b/main.js
@@ -0,0 +1,28 @@
+import App from './App'
+import store from './store'
+
+import Vue from 'vue'
+Vue.config.productionTip = false
+App.mpType = 'app'
+
+// 引入全局TuniaoUI
+import TuniaoUI from 'tuniao-ui'
+Vue.use(TuniaoUI)
+
+// 引入TuniaoUI提供的vuex简写方法
+let vuexStore = require('@/store/$tn.mixin.js')
+Vue.mixin(vuexStore)
+
+// 引入TuniaoUI对小程序分享的mixin封装
+let mpShare = require('tuniao-ui/libs/mixin/mpShare.js')
+Vue.mixin(mpShare)
+
+const app = new Vue({
+  store,
+  ...App
+})
+
+// 引入请求封装
+require('./util/request/index')(app)
+
+app.$mount()
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..3fbd98c
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,133 @@
+{
+    "name" : "TuniaoUI_UniApp",
+    "appid" : "__UNI__C82400B",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {},
+            "splashscreen" : {
+                "androidStyle" : "common"
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "wxf3d81a452b88ff4b",
+        "setting" : {
+            "urlCheck" : false,
+            "es6" : true,
+            "minified" : true,
+            "postcss" : true
+        },
+        "usingComponents" : true,
+        "optimization" : {
+            "subPackages" : true
+        },
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "获取您的位置信息方便为您提供服务"
+            }
+        }
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2",
+    "h5" : {
+        "title" : "Tuniao UI",
+        "template" : "template.h5.html",
+        "router" : {
+            "mode" : "hash",
+            "base" : "./"
+        },
+        "sdkConfigs" : {
+            "maps" : {
+                "qqmap" : {
+                    "key" : "IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5"
+                }
+            }
+        }
+    }
+}
diff --git a/mock/basic_page.js b/mock/basic_page.js
new file mode 100644
index 0000000..1646dc8
--- /dev/null
+++ b/mock/basic_page.js
@@ -0,0 +1,88 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [
+    {
+      title: '基础元素',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'menu-more',
+          title: 'Flex布局',
+          url: '/basicPage/flex-layout/flex-layout'
+        },
+        {
+          icon: 'menu-circle',
+          title: 'Grid布局',
+          url: '/basicPage/grid-layout/grid-layout'
+        },
+        {
+          icon: 'gloves',
+          title: '配色',
+          url: '/basicPage/color/color'
+        },
+        {
+          icon: 'font',
+          title: '图标',
+          url: '/basicPage/icon/icon'
+        },
+        {
+          icon: 'circle-fill',
+          title: '按钮',
+          url: '/basicPage/button/button'
+        },
+        {
+          icon: 'tag',
+          title: '标签',
+          url: '/basicPage/tag/tag'
+        },
+        {
+          icon: 'square',
+          title: '边框',
+          url: '/basicPage/border/border'
+        },
+        {
+          icon: 'copy-fill',
+          title: '阴影',
+          url: '/basicPage/shadow/shadow'
+        },
+        {
+          icon: 'moon',
+          title: '微标',
+          url: '/basicPage/badge/badge'
+        },
+        {
+          icon: 'emoji-good',
+          title: '头像',
+          url: '/basicPage/avatar/avatar'
+        }
+      ]
+    }, {
+      title: '常用工具',
+      backgroundColor: 'tn-cool-bg-color-2',
+      list: [
+        {
+          icon: 'code',
+          title: 'String工具',
+          url: '/basicPage/utils/string/index'
+        },
+        {
+          icon: 'code',
+          title: 'Number工具',
+          url: '/basicPage/utils/number/index'
+        },
+        {
+          icon: 'code',
+          title: 'Message工具',
+          url: '/basicPage/utils/message/index'
+        },
+        {
+          icon: 'code',
+          title: 'Color工具',
+          url: '/basicPage/utils/color/index'
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/mock/components_page.js b/mock/components_page.js
new file mode 100644
index 0000000..c460682
--- /dev/null
+++ b/mock/components_page.js
@@ -0,0 +1,266 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [
+    {
+      title: '基础组件',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'signpost',
+          title: '列表',
+          url: '/componentsPage/list/list'
+        },
+        {
+          icon: 'circle-arrow',
+          title: 'Loading加载',
+          url: '/componentsPage/loading/loading'
+        },
+        {
+          icon: 'tag',
+          title: 'tabs标签',
+          url: '/componentsPage/tabs/tabs'
+        },
+        {
+          icon: 'receipt',
+          title: 'sticky吸顶',
+          url: '/componentsPage/sticky/sticky'
+        },
+        {
+          icon: 'all',
+          title: 'navBar导航栏',
+          url: '/componentsPage/nav-bar/nav-bar'
+        },
+        {
+          icon: 'sound',
+          title: 'noticeBar通知栏',
+          url: '/componentsPage/notice-bar/notice-bar'
+        },
+        {
+          icon: 'image',
+          title: 'swiper轮播图',
+          url: '/componentsPage/swiper/swiper'
+        },
+        {
+          icon: 'server',
+          title: 'collapse折叠面板',
+          url: '/componentsPage/collapse/collapse'
+        },
+        {
+          icon: 'more-circle',
+          title: 'readMore查看更多',
+          url: '/componentsPage/read-more/read-more'
+        },
+        {
+          icon: 'success-square',
+          title: 'steps步骤条',
+          url: '/componentsPage/steps/steps'
+        },
+        {
+          icon: 'clock',
+          title: 'timeLine时间轴',
+          url: '/componentsPage/time-line/time-line'
+        },
+        {
+          icon: 'level',
+          title: 'indexList索引列表',
+          url: '/componentsPage/index-list/index-list'
+        },
+        {
+          icon: 'group-square',
+          title: 'scrollList横向滚动',
+          url: '/componentsPage/scroll-list/scroll-list'
+        },
+        {
+          icon: 'brand',
+          title: 'swipeAction滑动菜单',
+          url: '/componentsPage/swipe-action/swipe-action'
+        },
+        {
+          icon: 'pharmacy',
+          title: 'fab悬浮按钮',
+          url: '/componentsPage/fab/fab'
+        },
+        {
+          icon: 'cardbag',
+          title: '懒加载',
+          url: '/componentsPage/lazy-load/lazy-load'
+        },
+        {
+          icon: 'down-double',
+          title: '加载更多',
+          url: '/componentsPage/load-more/load-more'
+        },
+        {
+          icon: 'menu-more',
+          title: '骨架屏',
+          url: '/componentsPage/skeleton/skeleton'
+        },
+        {
+          icon: 'empty-search',
+          title: '空页面',
+          url: '/componentsPage/empty/empty'
+        },
+        {
+          icon: 'share',
+          title: '商品导航',
+          url: '/componentsPage/goods-nav/goods-nav'
+        }
+      ]
+    },
+    {
+      title: '弹框组件',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'prize',
+          title: '弹出层',
+          url: '/componentsPage/popup/popup'
+        },
+        {
+          icon: 'bankcard',
+          title: '模态框',
+          url: '/componentsPage/modal/modal'
+        },
+        {
+          icon: 'comment',
+          title: 'Toast',
+          url: '/componentsPage/toast/toast'
+        },
+        {
+          icon: 'creative',
+          title: '提示信息框',
+          url: '/componentsPage/tips/tips'
+        },
+        {
+          icon: 'reply',
+          title: '压屏窗',
+          url: '/componentsPage/landscape/landscape'
+        }
+      ]
+    },
+    {
+      title: '表单组件',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'image-text',
+          title: 'Form表单',
+          url: '/componentsPage/form/form'
+        },
+        {
+          icon: 'square',
+          title: 'Input输入框',
+          url: '/componentsPage/input/input'
+        },
+        {
+          icon: 'circle-fill',
+          title: 'Radio单选框',
+          url: '/componentsPage/radio/radio'
+        },
+        {
+          icon: 'copy',
+          title: 'Checkbox复选框',
+          url: '/componentsPage/check-box/check-box'
+        },
+        {
+          icon: 'ticket',
+          title: 'ActionSheet操作菜单',
+          url: '/componentsPage/action-sheet/action-sheet'
+        },
+        {
+          icon: 'deploy',
+          title: 'Picker选择器',
+          url: '/componentsPage/picker/picker'
+        },
+        {
+          icon: 'organizatio',
+          title: 'Select列选择器',
+          url: '/componentsPage/select/select'
+        },
+        {
+          icon: 'data',
+          title: '验证码倒计时',
+          url: '/componentsPage/verification-code/verification-code'
+        },
+        {
+          icon: 'power',
+          title: 'Switch开关',
+          url: '/componentsPage/switch/switch'
+        },
+        {
+          icon: 'upload',
+          title: '图片上传',
+          url: '/componentsPage/image-upload/image-upload'
+        },
+        {
+          icon: 'calendar',
+          title: '日历',
+          url: '/componentsPage/calendar/calendar'
+        },
+        {
+          icon: 'edit-write',
+          title: '签名板',
+          url: '/componentsPage/sign-board/sign-board'
+        },
+        {
+          icon: 'safe',
+          title: '验证码输入',
+          url: '/componentsPage/verification-code-input/verification-code-input'
+        },
+        {
+          icon: 'expand',
+          title: '分段器',
+          url: '/componentsPage/subsection/subsection'
+        }
+      ]
+    },
+    {
+      title: '数据组件',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'watercup',
+          title: 'Progress进度条',
+          url: '/componentsPage/progress/progress'
+        },
+        {
+          icon: 'star',
+          title: 'rate评分',
+          url: '/componentsPage/rate/rate'
+        },
+        {
+          icon: 'light',
+          title: 'slider滑动条',
+          url: '/componentsPage/slider/slider'
+        },
+        {
+          icon: 'statistics',
+          title: 'numberBox步进输入',
+          url: '/componentsPage/number-box/number-box'
+        },
+        {
+          icon: 'keyboard-circle',
+          title: 'keyboard键盘',
+          url: '/componentsPage/keyboard/keyboard'
+        },
+        {
+          icon: 'time',
+          title: 'countDown倒计时',
+          url: '/componentsPage/count-down/count-down'
+        },
+        {
+          icon: 'group-circle',
+          title: 'countTo数字跳转',
+          url: '/componentsPage/count-to/count-to'
+        },
+        {
+          icon: 'sequence-vertical',
+          title: 'countScroll数字滚动',
+          url: '/componentsPage/count-scroll/count-scroll'
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/mock/template_page.js b/mock/template_page.js
new file mode 100644
index 0000000..5081169
--- /dev/null
+++ b/mock/template_page.js
@@ -0,0 +1,247 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [
+    {
+      title: '登录注册',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '火箭登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '粒子登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '背景登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '简约登录',
+          author: '图鸟北北',
+          url: '/templatePage/login/demo4/demo4'
+        }
+      ]
+    },
+    {
+      title: '个人中心',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '夏天个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '图鸟个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '外卖个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo3/demo3'
+        },
+        {
+          icon: 'send',
+          title: '高端个人',
+          author: '图鸟北北',
+          url: '/templatePage/my/demo4/demo4'
+        }
+      ]
+    },
+    {
+      title: '常用首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '音乐首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/music/music'
+        },
+        {
+          icon: 'send',
+          title: '课程首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/course/course'
+        },
+        {
+          icon: 'send',
+          title: '设计首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/design/design'
+        },
+        {
+          icon: 'send',
+          title: '招聘首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/job/job'
+        },
+        {
+          icon: 'send',
+          title: '投屏首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/screen/screen'
+        },
+        {
+          icon: 'send',
+          title: '壁纸首页',
+          author: '图鸟北北',
+          url: '/templatePage/home/wallpaper/wallpaper'
+        },
+      ]
+    },
+    {
+      title: '骚气页面',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '健康码',
+          author: '图鸟北北',
+          url: '/templatePage/health/qrcode/qrcode'
+        },
+        {
+          icon: 'send',
+          title: '关于我们',
+          author: 'Jaylen',
+          url: '/templatePage/life/about/about'
+        },
+        {
+          icon: 'send',
+          title: '全新出发',
+          author: '你的小可爱',
+          url: '/templatePage/life/outset/outset'
+        },
+        {
+          icon: 'send',
+          title: '资讯左图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '资讯右图',
+          author: '图鸟北北',
+          url: '/templatePage/article/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '全屏轮播',
+          author: '图鸟北北',
+          url: '/templatePage/life/fullpage/fullpage'
+        },
+        {
+          icon: 'rocket',
+          title: '浏览器',
+          author: '图鸟北北',
+          url: '/templatePage/life/browser/browser'
+        },
+        {
+          icon: 'rocket',
+          title: '时钟',
+          author: '图鸟北北',
+          url: '/templatePage/time/clock/clock'
+        }
+      ]
+    },
+    {
+       title: '动效元素',
+       backgroundColor: 'tn-cool-bg-color-1',
+       list: [
+         {
+           icon: 'send',
+           title: '加载动画',
+           author: '图鸟北北',
+           url: '/templatePage/animate/loading/loading'
+         },
+         {
+           icon: 'send',
+           title: '流星悬浮',
+           author: '图鸟北北',
+           url: '/templatePage/animate/suspended/suspended'
+         },
+         {
+           icon: 'send',
+           title: '随机粒子',
+           author: 'Jaylen',
+           url: '/templatePage/animate/particle/particle'
+         },
+         {
+           icon: 'send',
+           title: '相册图集',
+           author: '你的小可爱',
+           url: '/templatePage/animate/photo/photo'
+         },
+         {
+           icon: 'send',
+           title: '镂空效果',
+           author: '你的小可爱',
+           url: '/templatePage/animate/hollow/hollow'
+         },
+         {
+           icon: 'send',
+           title: '泡泡飘出',
+           author: 'Jaylen',
+           url: '/templatePage/animate/bubble/bubble'
+         },
+         {
+           icon: 'send',
+           title: 'css波浪',
+           author: '图鸟北北',
+           url: '/templatePage/animate/wave/wave'
+         }
+       ]
+     },
+     {
+        title: '群友力献',
+        backgroundColor: 'tn-cool-bg-color-1',
+        list: [
+          {
+            icon: 'send',
+            title: '3D全景(第三方，约120￥一年)',
+            author: '图鸟北北 & 芊云全景',
+            url: '/templatePage/life/pano/pano'
+          },
+          {
+            icon: 'rocket',
+            title: 'Ucharts图表(第三方，免费开源)',
+            author: '图鸟北北 & Ucharts秋云',
+            url: '/templatePage/life/candle/candle'
+          },
+          {
+            icon: 'rocket',
+            title: '阿凡提·污克西西(第三方，免费开源)',
+            author: '阿凡提·污克西西',
+            url: '/templatePage/life/candle/candle'
+          },
+          {
+            icon: 'rocket',
+            title: '微信红包封面',
+            author: '微信红包封面',
+            url: '/templatePage/life/cover/cover'
+          },
+          {
+            icon: 'rocket',
+            title: '营销小游戏-魔方',
+            author: '最帅的你',
+            url: '/templatePage/life/cube/cube'
+          },
+        ]
+      }
+  ]
+}
\ No newline at end of file
diff --git a/mock/vip_page.js b/mock/vip_page.js
new file mode 100644
index 0000000..34a6a34
--- /dev/null
+++ b/mock/vip_page.js
@@ -0,0 +1,299 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [{
+      title: '圈子博客',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '操作指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/guide/guide'
+        },{
+          icon: 'order',
+          title: '首次指引',
+          author: '图鸟科技',
+          url: '/vipPage/life/start/start'
+        },
+        {
+          icon: 'order',
+          title: '圈子首页',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blog/blog'
+        },
+        {
+          icon: 'order',
+          title: '社交圈子',
+          author: '图鸟科技',
+          url: '/vipPage/blog/socialize/socialize'
+        },
+        {
+          icon: 'order',
+          title: '简约圈子(旧)',
+          author: '图鸟科技',
+          url: '/vipPage/blog/circle/circle'
+        },
+        {
+          icon: 'order',
+          title: '圈子个人',
+          author: '图鸟科技',
+          url: '/vipPage/blog/myblog/myblog'
+        },
+        {
+          icon: 'order',
+          title: '消息通知',
+          author: '图鸟科技',
+          url: '/vipPage/blog/message/message'
+        },
+        {
+          icon: 'order',
+          title: '商品优选',
+          author: '图鸟科技',
+          url: '/vipPage/blog/prefer/prefer'
+        },
+        {
+          icon: 'order',
+          title: '优选详情',
+          author: '图鸟科技',
+          url: '/vipPage/blog/product/product'
+        },
+        {
+          icon: 'order',
+          title: '博客博主',
+          author: '图鸟科技',
+          url: '/vipPage/blog/blogger/blogger'
+        },
+        {
+          icon: 'order',
+          title: '酷炫功能',
+          author: '图鸟科技',
+          url: '/vipPage/home/cool/cool'
+        },
+        {
+          icon: 'order',
+          title: '友情链接',
+          author: '图鸟科技',
+          url: '/vipPage/home/link/link'
+        },
+        {
+          icon: 'order',
+          title: '祝福页面',
+          author: '图鸟科技',
+          url: '/vipPage/life/bless/bless'
+        }
+      ]
+    },
+    {
+      title: '酷炫首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '图鸟首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tuniao/tuniao'
+        },
+        {
+          icon: 'order',
+          title: '奶茶首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/tea/tea'
+        },
+        {
+          icon: 'order',
+          title: '阅读首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/read/read'
+        },
+        {
+          icon: 'order',
+          title: '月亮首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/moon/moon'
+        },
+        {
+          icon: 'order',
+          title: '计划首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/plan/plan'
+        },
+        {
+          icon: 'order',
+          title: '新年首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/year/year'
+        },
+        {
+          icon: 'order',
+          title: '电影首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/movie/movie'
+        },
+        {
+          icon: 'order',
+          title: '食物首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/food/food'
+        },
+        {
+          icon: 'order',
+          title: '拟态首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/mimicry/mimicry'
+        },
+        {
+          icon: 'order',
+          title: '充电首页',
+          author: '图鸟科技',
+          url: '/vipPage/life/power/power'
+        },
+        {
+          icon: 'order',
+          title: '卡片首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/card/card'
+        },
+        {
+          icon: 'order',
+          title: '健康首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/health/health'
+        },
+        {
+          icon: 'order',
+          title: '全景首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/panoramic/panoramic'
+        },
+        {
+          icon: 'order',
+          title: 'uCharts首页',
+          author: '图鸟科技',
+          url: '/vipPage/home/ucharts/ucharts'
+        },
+      ]
+    },
+    {
+      title: '商城店铺',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '店铺商品',
+          author: '图鸟科技',
+          url: '/vipPage/shop/store/store'
+        },
+        {
+          icon: 'order',
+          title: '商品订单',
+          author: '图鸟科技',
+          url: '/vipPage/shop/order/order'
+        },
+        {
+          icon: 'order',
+          title: '商品分类',
+          author: '图鸟科技',
+          url: '/vipPage/shop/classify/classify'
+        },
+        {
+          icon: 'order',
+          title: '积分活动',
+          author: '图鸟科技',
+          url: '/vipPage/shop/money/money'
+        }
+      ]
+    },
+    {
+      title: '会员需求',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: 'Drag长按拖拽随机固定',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/basic-drag/basic-drag'
+        },
+        {
+          icon: 'order',
+          title: '图片上传长按拖拽',
+          author: '图鸟科技',
+          url: '/vipPage/components/drag/upload-image-drag/upload-image-drag'
+        },
+        {
+          icon: 'order',
+          title: 'Cropper图片裁剪',
+          author: '图鸟科技',
+          url: '/vipPage/components/cropper/cropper'
+        },
+        {
+          icon: 'order',
+          title: 'StackSwiper堆叠轮播',
+          author: '图鸟科技',
+          url: '/vipPage/components/stack-swiper/stack-swiper'
+        },
+        {
+          icon: 'order',
+          title: '重力效果',
+          author: '图鸟科技',
+          url: '/vipPage/home/gravity/page1/page1'
+        },
+        {
+          icon: 'order',
+          title: '下拉刷新',
+          author: '图鸟科技',
+          url: '/vipPage/components/scroll-view/index'
+        },
+        {
+          icon: 'order',
+          title: '级联选择',
+          author: '图鸟科技',
+          url: '/vipPage/components/cascade-selection/cascade-selection'
+        },
+        {
+          icon: 'order',
+          title: '瀑布流',
+          author: '图鸟科技',
+          url: '/vipPage/components/waterfall/waterfall'
+        },
+        {
+          icon: 'order',
+          title: '树形菜单',
+          author: '图鸟科技',
+          url: '/vipPage/components/tree-view/tree-view'
+        },
+        {
+          icon: 'order',
+          title: '表格',
+          author: '图鸟科技',
+          url: '/vipPage/components/table/index'
+        },
+        {
+          icon: 'order',
+          title: '图鸟轮播(实验)',
+          author: '图鸟科技',
+          url: '/vipPage/components/custom-swiper/index'
+        }
+      ]
+    },
+    {
+      title: '生态支持',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'order',
+          title: '短视频',
+          author: '图鸟 & 第三方',
+          url: '/thirdPage/short-video/short-video'
+        },{
+          icon: 'order',
+          title: '外卖模板',
+          author: '图鸟 & 第三方',
+          url: '/takeOutPage/walking-route/walking-route'
+        },
+        {
+          icon: 'order',
+          title: '期待你的加入',
+          author: '图鸟 & 第三方',
+          url: '/templatePage/life/candle/candle'
+        }
+      ]
+    }
+  ]
+}
diff --git a/pages.json b/pages.json
new file mode 100644
index 0000000..b7fd57f
--- /dev/null
+++ b/pages.json
@@ -0,0 +1,667 @@
+{
+  "easycom": {
+    "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
+  },
+  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "mp-weixin": {
+          "disableScroll": true
+        },
+        "app-plus": {
+          "bounce": "none"
+        },
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "mp-baidu": {
+          "disableScroll": true
+        }
+      }
+    }
+  ],
+  "subPackages": [{
+    "root": "basicPage",
+    "pages": [{
+        "path": "test/test",
+        "style": {
+          "navigationStyle": "default",
+          "navigationBarTitleText": "测试页面",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "flex-layout/flex-layout",
+        "style": {
+          "navigationBarTitleText": "Flex布局",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "grid-layout/grid-layout",
+        "style": {
+          "navigationBarTitleText": "Grid布局",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "color/color",
+        "style": {
+          "navigationBarTitleText": "配色",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "icon/icon",
+        "style": {
+          "navigationBarTitleText": "图标",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "button/button",
+        "style": {
+          "navigationBarTitleText": "按钮",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "tag/tag",
+        "style": {
+          "navigationBarTitleText": "标签",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "border/border",
+        "style": {
+          "navigationBarTitleText": "边框",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shadow/shadow",
+        "style": {
+          "navigationBarTitleText": "阴影",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "badge/badge",
+        "style": {
+          "navigationBarTitleText": "微标",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "avatar/avatar",
+        "style": {
+          "navigationBarTitleText": "头像",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/string/index",
+        "style": {
+          "navigationBarTitleText": "String工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/number/index",
+        "style": {
+          "navigationBarTitleText": "Number工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/message/index",
+        "style": {
+          "navigationBarTitleText": "Message工具",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "utils/color/index",
+        "style": {
+          "navigationBarTitleText": "Color工具",
+          "enablePullDownRefresh": false
+        }
+      }
+    ]
+  }, {
+    "root": "componentsPage",
+    "pages": [{
+      "path": "list/list",
+      "style": {
+        "navigationBarTitleText": "列表",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "popup/popup",
+      "style": {
+        "navigationBarTitleText": "弹出层",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "modal/modal",
+      "style": {
+        "navigationBarTitleText": "模态框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "toast/toast",
+      "style": {
+        "navigationBarTitleText": "Toast",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "tips/tips",
+      "style": {
+        "navigationBarTitleText": "提示信息",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "form/form",
+      "style": {
+        "navigationBarTitleText": "Form表单",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "action-sheet/action-sheet",
+      "style": {
+        "navigationBarTitleText": "操作菜单",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "picker/picker",
+      "style": {
+        "navigationBarTitleText": "Picker选择器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "select/select",
+      "style": {
+        "navigationBarTitleText": "Select列选择器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "verification-code/verification-code",
+      "style": {
+        "navigationBarTitleText": "验证码倒计时",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "loading/loading",
+      "style": {
+        "navigationBarTitleText": "Loading加载",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "switch/switch",
+      "style": {
+        "navigationBarTitleText": "Switch开关",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "progress/progress",
+      "style": {
+        "navigationBarTitleText": "Progress进度条",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "image-upload/image-upload",
+      "style": {
+        "navigationBarTitleText": "图片上传",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "rate/rate",
+      "style": {
+        "navigationBarTitleText": "rate评分",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "slider/slider",
+      "style": {
+        "navigationBarTitleText": "slider滑动条",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "number-box/number-box",
+      "style": {
+        "navigationBarTitleText": "numberBox步进输入",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "keyboard/keyboard",
+      "style": {
+        "navigationBarTitleText": "keyboard键盘",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "tabs/tabs",
+      "style": {
+        "navigationBarTitleText": "tabs标签",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "count-down/count-down",
+      "style": {
+        "navigationBarTitleText": "countDown倒计时",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "count-to/count-to",
+      "style": {
+        "navigationBarTitleText": "countTo数字跳转",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "count-scroll/count-scroll",
+      "style": {
+        "navigationBarTitleText": "countTo数字滚动",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "sticky/sticky",
+      "style": {
+        "navigationBarTitleText": "sticky吸顶",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "nav-bar/nav-bar",
+      "style": {
+        "navigationBarTitleText": "navBar导航栏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "notice-bar/notice-bar",
+      "style": {
+        "navigationBarTitleText": "noticeBar通知栏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "swiper/swiper",
+      "style": {
+        "navigationBarTitleText": "swiper轮播图",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "collapse/collapse",
+      "style": {
+        "navigationBarTitleText": "collapse折叠面板",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "read-more/read-more",
+      "style": {
+        "navigationBarTitleText": "readMore查看更多",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "steps/steps",
+      "style": {
+        "navigationBarTitleText": "steps步骤条",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "time-line/time-line",
+      "style": {
+        "navigationBarTitleText": "timeLine时间轴",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "index-list/index-list",
+      "style": {
+        "navigationBarTitleText": "indexList索引列表",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "index-list/base/index-list",
+      "style": {
+        "navigationBarTitleText": "indexList索引列表",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "index-list/avatar/index-list",
+      "style": {
+        "navigationBarTitleText": "indexList索引列表",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "calendar/calendar",
+      "style": {
+        "navigationBarTitleText": "calendar日历",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "scroll-list/scroll-list",
+      "style": {
+        "navigationBarTitleText": "scrollList横向滚动",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "swipe-action/swipe-action",
+      "style": {
+        "navigationBarTitleText": "swipeAction滑动菜单",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "sign-board/sign-board",
+      "style": {
+        "navigationBarTitleText": "signBoard签名板",
+        "enablePullDownRefresh": false
+        // "pageOrientation": "landscape"
+      }
+    }, {
+      "path": "fab/fab",
+      "style": {
+        "navigationBarTitleText": "fab悬浮按钮",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "input/input",
+      "style": {
+        "navigationBarTitleText": "输入框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "radio/radio",
+      "style": {
+        "navigationBarTitleText": "单选框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "check-box/check-box",
+      "style": {
+        "navigationBarTitleText": "复选框",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "lazy-load/lazy-load",
+      "style": {
+        "navigationBarTitleText": "懒加载",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "load-more/load-more",
+      "style": {
+        "navigationBarTitleText": "加载更多",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "skeleton/skeleton",
+      "style": {
+        "navigationBarTitleText": "骨架屏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "empty/empty",
+      "style": {
+        "navigationBarTitleText": "空页面",
+        "enablePullDownRefresh": false
+      }
+
+    }, {
+      "path": "landscape/landscape",
+      "style": {
+        "navigationBarTitleText": "压屏窗",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "verification-code-input/verification-code-input",
+      "style": {
+        "navigationBarTitleText": "验证码输入",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "subsection/subsection",
+      "style": {
+        "navigationBarTitleText": "分段器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "goods-nav/goods-nav",
+      "style": {
+        "navigationBarTitleText": "商品导航",
+        "enablePullDownRefresh": false
+      }
+    }]
+  }, {
+    "root": "templatePage",
+    "pages": [{
+      "path": "login/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "火箭登录",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "login/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "粒子登录",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "login/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "背景登录",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "login/demo4/demo4",
+      "style": {
+        "navigationBarTitleText": "简约登录",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "health/qrcode/qrcode",
+      "style": {
+        "navigationBarTitleText": "健康码",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/course/course",
+      "style": {
+        "navigationBarTitleText": "课程首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/music/music",
+      "style": {
+        "navigationBarTitleText": "音乐首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/design/design",
+      "style": {
+        "navigationBarTitleText": "设计首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/job/job",
+      "style": {
+        "navigationBarTitleText": "招聘首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/screen/screen",
+      "style": {
+        "navigationBarTitleText": "投屏首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "home/wallpaper/wallpaper",
+      "style": {
+        "navigationBarTitleText": "壁纸首页",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/fullpage/fullpage",
+      "style": {
+        "navigationBarTitleText": "全屏轮播",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/pano/pano",
+      "style": {
+        "navigationBarTitleText": "3D全景",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/plus/plus",
+      "style": {
+        "navigationBarTitleText": "会员协议",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/browser/browser",
+      "style": {
+        "navigationBarTitleText": "浏览器",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/share/share",
+      "style": {
+        "navigationBarTitleText": "",
+        // 图鸟公众号
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/candle/candle",
+      "style": {
+        "navigationBarTitleText": "敬请期待",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/cover/cover",
+      "style": {
+        "navigationBarTitleText": "红包封面",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "life/cube/cube",
+      "style": {
+        "navigationBarTitleText": "魔方游戏",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "time/clock/clock",
+      "style": {
+        "navigationBarTitleText": "时钟",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/loading/loading",
+      "style": {
+        "navigationBarTitleText": "加载动画",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/particle/particle",
+      "style": {
+        "navigationBarTitleText": "随机粒子",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/photo/photo",
+      "style": {
+        "navigationBarTitleText": "相册图集",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/hollow/hollow",
+      "style": {
+        "navigationBarTitleText": "镂空效果",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "夏天个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "图鸟个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "外卖个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "my/demo4/demo4",
+      "style": {
+        "navigationBarTitleText": "高端个人",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/suspended/suspended",
+      "style": {
+        "navigationBarTitleText": "流星悬浮",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/bubble/bubble",
+      "style": {
+        "navigationBarTitleText": "泡泡飘出",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "article/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "资讯左图",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "article/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "资讯右图",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/about/about",
+      "style": {
+        "navigationBarTitleText": "关于我们",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "animate/wave/wave",
+      "style": {
+        "navigationBarTitleText": "css波浪",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "life/outset/outset",
+      "style": {
+        "navigationBarTitleText": "全新出发",
+        "enablePullDownRefresh": false
+      }
+    }]
+  }, 
+	{
+    "root": "thirdPage",
+    "pages": [{
+      "path": "short-video/short-video",
+      "style": {
+        "navigationBarTitleText": "短视频",
+        "enablePullDownRefresh": false
+      }
+
+    }]
+  },{
+    "root":"takeOutPage",
+    "pages": [{
+      "path": "walking-route/walking-route",
+      "style": {
+        "navigationBarTitleText": "路线轨迹",
+        "enablePullDownRefresh": false
+      }
+    }]
+  }],
+  "preloadRule": {
+    "pages/index/index": {
+      "network": "all",
+      "packages": ["basicPage", "componentsPage", "templatePage", "vipPage", "thirdPage"]
+    }
+  },
+  "globalStyle": {
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Tuniao UI",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
diff --git a/pages/basic/basic.vue b/pages/basic/basic.vue
new file mode 100644
index 0000000..c70c594
--- /dev/null
+++ b/pages/basic/basic.vue
@@ -0,0 +1,170 @@
+<template>
+  <view class="basic tn-safe-area-inset-bottom">
+
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="icon">
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view>
+            <view class="nav-link">
+              <view class='title'>{{ content_item.title }}</view>
+            </view>
+          </navigator>
+        </block>
+        
+      </view>
+    </block>
+    
+    <view class="tn-padding-bottom-xs"></view>
+
+  </view>
+</template>
+
+<script>
+  import basicListData from '@/mock/basic_page.js'
+  
+  export default {
+    name: 'Basic',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        // nav菜单列表
+        navList: basicListData.data
+      }
+    },
+    methods: {
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 20rpx 30rpx;
+      border-radius: 12rpx;
+      width: 45%;
+      margin: 0 18rpx 40rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      
+      
+      
+      /* 元素标题 start */
+      .nav-link {
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 0 0 10rpx 0;
+        position: relative;
+        
+        .title {
+          color: #FFFFFF;
+          margin-top: 20rpx;
+          text-align: center;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        width: 90rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 50rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+</style>
diff --git a/pages/components/components.vue b/pages/components/components.vue
new file mode 100644
index 0000000..a36dff4
--- /dev/null
+++ b/pages/components/components.vue
@@ -0,0 +1,167 @@
+<template>
+  <view class="components tn-safe-area-inset-bottom">
+  
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="nav-link tn-flex-1">
+              <view class='title'>{{ content_item.title }}</view>
+            </view>
+            <view class="icon">
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view>
+          </navigator>
+        </block>
+        
+      </view>
+    </block>
+    
+    <view class="tn-padding-bottom-xs"></view>
+
+  </view>
+</template>
+
+<script>
+  import componentsListData from '@/mock/components_page.js'
+  
+  export default {
+    name: 'Components',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        // nav菜单列表
+        navList: componentsListData.data
+      }
+    },
+    methods: {
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 30rpx 30rpx 20rpx 30rpx;
+      border-radius: 12rpx;
+      width: 45%;
+      margin: 0 18rpx 40rpx;
+      background-size: cover;
+      background-position: 50%;
+      position: relative;
+      z-index: 99;
+      
+      /* 元素标题 start */
+      .nav-link {
+        font-size: 32rpx;
+        line-height: 1.2;
+        text-transform: capitalize;
+        padding: 0rpx 10rpx 0rpx 0;
+        position: relative;
+        
+        .title {
+          color: #FFFFFF;
+          text-align: left;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        width: 70rpx;
+        height: 70rpx;
+        line-height: 70rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 45rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
new file mode 100644
index 0000000..026f68e
--- /dev/null
+++ b/pages/index/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <view class="index">
+            
+    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <Basic ref="basic"></Basic>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <components ref="components"></components>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <vip ref="vip"></vip>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <templatePage ref="template"></templatePage>
+      </scroll-view>
+    </view>
+    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <tuniao ref="about"></tuniao>
+      </scroll-view>
+    </view>
+    
+    <tn-tabbar
+      v-model="currentIndex"
+      :list="tabbarList"
+      activeColor="#838383"
+      inactiveColor="#AAAAAA"
+      activeIconColor="tn-cool-bg-color-7"
+      :animation="true"
+      :safeAreaInsetBottom="true"
+      @change="switchTabbar"
+    ></tn-tabbar>
+
+  </view>
+</template>
+
+<script>
+  import Basic from '../basic/basic.vue'
+  import Components from '../components/components.vue'
+  import TemplatePage from '../template/template.vue'
+  import Vip from '../vip/vip.vue'
+  import Tuniao from '../tuniao/tuniao.vue'
+  
+  export default {
+    components: {
+      Basic,
+      Components,
+      TemplatePage,
+      Vip,
+      Tuniao
+    },
+    data() {
+      return {
+        // 底部tabbar菜单数据
+        tabbarList: [
+          {
+            title: '元素',
+            activeIcon: 'count-fill',
+            inactiveIcon: 'menu'
+          },
+          {
+            title: '组件',
+            activeIcon: 'honor-fill',
+            inactiveIcon: 'honor'
+          },
+          {
+            title: '会员',
+            activeIcon: 'vip-fill',
+            inactiveIcon: 'vip',
+            activeIconColor: '#FFFFFF',
+            inactiveIconColor: '#FFFFFF',
+            iconSize: 50,
+            out: true
+          },
+          {
+            title: '发现',
+            activeIcon: 'discover-fill',
+            inactiveIcon: 'discover',
+            count: 100
+          },
+          {
+            title: '图鸟',
+            activeIcon: 'computer-fill',
+            inactiveIcon: 'computer',
+            dot: true
+          }
+        ],
+        // tabbar当前被选中的序号
+        currentIndex: 0,
+        // 自定义底栏对应页面的加载情况
+        tabberPageLoadFlag: []
+      }
+    },
+    onLoad(options) {
+      const index = Number(options.index || 0)
+      // 根据底部tabbar菜单列表设置对应页面的加载情况
+      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
+        return index === tabbar_index
+      })
+      this.switchTabbar(index)
+    },
+    methods: {
+      // 切换导航
+      switchTabbar(index) {
+        this._switchTabbarPage(index)
+      },
+      
+      
+      // 导航页面滚动到底部
+      tabbarPageScrollLower(e) {
+      },
+      
+      // 切换导航页面
+      _switchTabbarPage(index) {
+        const selectPageFlag = this.tabberPageLoadFlag[index]
+        if (selectPageFlag === undefined) {
+          return
+        }
+        if (selectPageFlag === false) {
+          this.tabberPageLoadFlag[index] = true
+        }
+        this.currentIndex = index
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .index {
+    overflow: hidden;
+    height: 100%;
+  }
+  
+  .custom-tabbar-page {
+    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
+  }
+
+</style>
diff --git a/pages/template/template.vue b/pages/template/template.vue
new file mode 100644
index 0000000..12482d3
--- /dev/null
+++ b/pages/template/template.vue
@@ -0,0 +1,194 @@
+<template>
+  <view class="template tn-safe-area-inset-bottom">
+  
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
+              <view class="nav-link">
+                <view class='title'>{{ content_item.title }}</view>
+              </view>
+              <view class="icon">
+                <view :class="['tn-icon-' + content_item.icon]"></view>
+              </view>
+            </view>
+            <view class="author">
+              <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
+                <text class="tn-icon-code tn-padding-right-xs"></text>
+                <text class=""> {{ content_item.author }} </text>
+              </view>
+            </view>
+          </navigator>
+        </block>
+      </view>
+    </block>
+    
+    <view class="tn-padding-bottom-xs"></view>
+  
+  </view>
+</template>
+
+<script>
+  import templateListData from '@/mock/template_page.js'
+  
+  export default {
+    name: 'TemplatePage',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        // nav菜单列表
+        navList: templateListData.data
+      }
+    },
+    methods: {
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 50rpx 30rpx 36rpx 30rpx;
+      border-radius: 12rpx;
+      width: 100%;
+      margin: 0 18rpx 90rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+      
+      /* 元素标题 start */
+      .nav-link {
+        flex: 1;
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 10rpx 0 20rpx 0;
+        position: relative;
+        
+        .title {
+          color: #FFFFFF;
+          text-align: left;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        width: 70rpx;
+        height: 70rpx;
+        line-height: 70rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 45rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+      
+      /* 作者信息 start*/
+      .author {
+        // background-color: red;
+        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
+        border-radius: 0 0 15rpx 15rpx;
+        position: absolute;
+        width: 85%;
+        line-height: 50rpx;
+        left: 50%;
+        bottom: -50rpx;
+        transform: translateX(-50%);
+        z-index: -1;
+        text-align: center;
+      }
+      /* 作者信息 end*/
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+</style>
diff --git a/pages/tuniao/tuniao.vue b/pages/tuniao/tuniao.vue
new file mode 100644
index 0000000..92713be
--- /dev/null
+++ b/pages/tuniao/tuniao.vue
@@ -0,0 +1,563 @@
+<template>
+  <view class="about tn-safe-area-inset-bottom">
+  
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <view class="about__wrap">
+      <!-- 头像用户信息 -->
+      <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+        <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
+          </view>
+          <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
+        </view>
+        <view class="user-info__nick-name">图鸟小伙伴</view>
+      </view>
+      
+      <!-- banner start-->
+      <!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
+        <view class="" style="width: 100%;">
+          <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-Vue3.png');">
+             <view class="image-capsule">
+             </view>
+           </view>  
+        </view>  
+      </view> -->
+      <!-- banner end-->
+      
+      <view class="tn-margin-left tn-margin-right">
+        
+        <!-- 方式20 start-->
+        <view class="tn-flex">
+          <view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 15rpx 0 0;padding: 30rpx 0;" @click="navTuniaoWebsite">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orangered tn-color-white">
+                <view class="tn-icon-computer-fill"></view>
+              </view>  
+              <view class="tn-text-center" style="font-size: 30rpx;">
+                <view class="tn-text-ellipsis">图鸟官网</view>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 0 0 15rpx;padding: 30rpx 0;" @click="navShare">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
+                <view class="tn-icon-moon-fill"></view>
+              </view>  
+              <view class="tn-text-center" style="font-size: 30rpx;">
+                <view class="tn-text-ellipsis">图鸟公众号</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 数据信息 -->
+        <!-- <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
+          <block v-for="(item, index) in tuniaoData" :key="index">
+            <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow">
+              <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+                <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <view :class="[`tn-icon-${item.icon}`]"></view>
+                </view>
+                <view class="tn-info__item__left__content">
+                  <view class="tn-info__item__left__content--title">{{ item.title }}</view>
+                  <view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
+                </view>
+              </view>
+              <view class="tn-info__item__right">
+                <view class="tn-info__item__right--icon">
+                  <view class="tn-icon-code"></view>
+                </view>
+              </view>
+            </view>
+          </block>
+        </view> -->
+        
+        <!-- 更多信息-->
+        <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyDCloud">
+            <view class="tn-flex tn-flex-col-center">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
+                <view class="tn-icon-fire-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm tn-flex-1">插件市场</view>
+              <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee">
+            <view class="tn-flex tn-flex-col-center">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white"> 
+                <view class="tn-icon-star-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm tn-flex-1">Gitee地址</view>
+              <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus">
+            <view class="tn-flex tn-flex-col-center">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> 
+                <view class="tn-icon-safe-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+              <view class="tn-margin-left-sm tn-color-red tn-icon-send-fill"></view>
+            </view>
+          </tn-list-cell>
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+            <view class="tn-flex tn-flex-col-center">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white"> 
+                <view class="tn-icon-set-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm tn-flex-1">更新日志</view>
+              <view class="tn-margin-left-sm tn-color-gray">懒</view>
+            </view>
+          </tn-list-cell>
+        </view>
+        <!-- 更多信息-->
+        <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+            <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white"> 
+                <view class="tn-icon-wechat-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm">合作勾搭</view>
+            </button>
+          </tn-list-cell>
+          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+            <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
+              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white"> 
+                <view class="tn-icon-comment-fill"></view>
+              </view>
+              <view class="tn-margin-left-sm">问题反馈</view>
+            </button>
+          </tn-list-cell>
+        </view>
+        
+        <view class="tn-flex tn-flex-row-between">
+          <view class="justify-content-item tn-text-bold tn-text-lg">
+            <text class="">友情链接</text>
+          </view>
+          <view class="justify-content-item tn-text-df">
+            <text class="tn-padding-xs">全部</text>
+            <text class="tn-icon-right"></text>
+          </view>
+        </view>
+        <!-- 更多信息-->
+        <view class="about-shadow tn-margin-top tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
+          <tn-scroll-list :indicator="false">
+            <view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
+              <navigator target="miniProgram" :app-id="item.appid" :path="item.path" version="release" delta="1" hover-class="none" 
+                v-for="(item, index) in linksData" :key="index">  
+                <view class="tn-flex-1 tn-padding-sm tn-radius">
+                  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                    <!-- <view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
+                      :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                      <view :class="[`tn-icon-${item.icon}`]"></view>
+                    </view> -->
+                    <view class="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" 
+                    :style="'background-image:url('+ item.url + ');background-size:100% 100%;'">
+                    </view>
+                    <view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
+                      <text class="tn-text-ellipsis">{{ item.title }}</text>
+                    </view>
+                  </view>
+                </view>
+              </navigator>
+            </view>
+          </tn-scroll-list>
+        </view>
+        
+      </view>
+    </view>
+    
+    
+    <view class="tn-padding-bottom-xs"></view>
+  
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'Tuniao',
+    data() {
+      return {
+        tuniaoData: [
+          {
+            title: 'View',
+            icon: 'eye',
+            color: 'indigo',
+            value: '1.22 W'
+          },
+          {
+            title: 'Star',
+            icon: 'star',
+            color: 'orange',
+            value: '406'
+          },
+          {
+            title: 'Fork',
+            icon: 'fork',
+            color: 'purplered',
+            value: '129'
+          },
+          {
+            title: 'Version',
+            icon: 'trusty',
+            color: 'green',
+            value: '1.2.0'
+          }
+        ],
+        linksData: [{
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646920408332-assets/web-upload/6ea58bb4-cb0d-4034-b9ac-a0155d5c3afb.jpeg',
+            title: 'uCharts',
+            appid: 'wx37a9ee6a7398dec0',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646963464962-assets/web-upload/3c14732e-cc92-4726-9a9c-1fa7133f8147.jpeg',
+            title: '芊云全景',
+            appid: 'wx9f77d65eb4eff65b',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648734439954-assets/web-upload/2e3d3e73-a28c-4c5d-885a-e5cdf2da13af.jpeg',
+            title: '前端铺子',
+            appid: 'wx201efd3f86fa2ba7',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/png/280373/1647178609988-assets/web-upload/37a6d22c-410b-4f51-a083-993306bbc4fa.png',
+            title: 'DIY神器',
+            appid: 'wxda438798441f31f1',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880969854-assets/web-upload/95902944-1be6-4c23-a2f5-47cf78eda072.jpeg',
+            title: '江夏生活',
+            appid: 'wx2257f5c246ad1bcd',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1667656184223-assets/web-upload/cc3dbf5c-1483-4c74-83fc-03c2bd7c373e.jpeg',
+            title: '多客社交',
+            appid: 'wx86cc21f2f7fa3efa',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647505953019-assets/web-upload/a6c0a823-5b55-4cb7-aee5-5b82990533ed.jpeg',
+            title: '样式库',
+            appid: 'wx853f345b163a00d6',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647765849135-assets/web-upload/dfcacf41-b1c0-4dbf-8613-3f948e43d125.jpeg',
+            title: '旺石头科技',
+            appid: 'wx6007249d6b2348ea',
+            path: ''
+          },
+          {
+            url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1655887617723-assets/web-upload/028185c8-fac6-4863-a00f-7e9bbe3ea54e.jpeg',
+            title: '邻邻邦',
+            appid: 'wxf7512cb916d6d1c2',
+            path: ''
+          },
+        ]
+      }
+    },
+    methods: {
+      // 跳转到图鸟官网
+      navTuniaoWebsite() {
+        uni.navigateToMiniProgram({
+          appId: 'wxa698b1eee960632f'
+        })
+      },
+      
+      // 跳转到图鸟Vue3
+      navTuniaoVue3(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wxd4296f570b8b39c9'
+        })
+      },
+      
+      // 跳转到会员协议
+      navPlus() {
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+      
+      // 跳转到图鸟公众号
+      navShare() {
+        uni.navigateTo({
+          url: '/templatePage/life/share/share'
+        })
+      },
+      
+      // 复制插件市场地址
+      copyDCloud() {
+        uni.setClipboardData({
+          data: "https://ext.dcloud.net.cn/publisher?id=356088",
+        })
+      },
+      
+      // 复制Gitee地址
+      copyGitee() {
+        uni.setClipboardData({
+          data: "https://gitee.com/TSpecific/tuniao-ui",
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 页面 start*/
+  .about-shadow{
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .about {
+    
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 0rpx;
+      margin-top: -180rpx;
+    }
+  }
+  /* 页面 end*/
+  
+  /* 用户信息 start */
+  .user-info {
+    &__container {
+      
+    }
+    
+    &__avatar {
+      width: 180rpx;
+      height: 180rpx;
+      border: 8rpx solid rgba(255,255,255,0.05);
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    }
+    
+    &__nick-name {
+      margin-top: 26rpx;
+      font-size: 42rpx;
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+  /* 用户信息 end */
+  
+  /* 信息展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 0rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 28rpx;
+      border-radius: 15rpx;
+      
+
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 30rpx;
+          
+          &--data {
+            margin-top: 5rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          font-size: 60rpx;
+          opacity: 0.15;
+        }
+      }
+    }
+  }
+  /* 信息展示 end */
+  
+  /* 图标容器5 start */
+    .icon5 {
+      &__item {
+        // width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 0rpx;
+        margin: 0rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+    
+  .icon20 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+  
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      // width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+    /* 图标容器1 end */
+    
+    /* 胶囊banner*/
+    .image-capsule{
+      padding: 100rpx 0rpx;
+      font-size: 40rpx;
+      font-weight: 300;
+      position: relative;
+    }
+    .image-piccapsule{
+      background-size: cover;
+      background-repeat:no-repeat;
+      // background-attachment:fixed;
+      background-position:top;
+      border-radius: 20rpx 20rpx 0 0;
+    }
+</style>
diff --git a/pages/vip/vip.vue b/pages/vip/vip.vue
new file mode 100644
index 0000000..e60e532
--- /dev/null
+++ b/pages/vip/vip.vue
@@ -0,0 +1,508 @@
+<template>
+  <view class="vip tn-safe-area-inset-bottom">
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/index_bg/tools_new.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <swiper class="card-swiper" :circular="true"
+      :autoplay="false" duration="500" interval="180000" previous-margin="170rpx" next-margin="170rpx" @change="cardSwiper"  style="margin-top: -280rpx;"> 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <!-- <view class="swiper-item image-banner">
+          <image :src="item.url" mode="widthFix" v-if="item.type=='image'"></image>
+        </view> -->
+        <!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');width: 230rpx;height: 100%;background-size:100% 100%;'">
+        </view> -->
+        
+        <view class="tnphone-white-min swiper-item  wow fadeInLeft2" @click="navTuniaoMoban">
+        	<view class="skin wow fadeInRight2">
+        	  <view class="screen wow fadeInUp2">
+        		  <!-- <view class="head">
+        			  <text>{{item.name}}</text>
+        		  </view> -->
+        		  <view class="peak wow">
+        			  <view class="sound"></view>
+        			  <view class="lens"></view>
+        		  </view>
+        		  <!-- <view class="area-l">
+        			  <view class="">
+                  <text class="tn-icon-all"></text>
+                  <text class="tn-icon-wifi tn-padding-left-xs"></text>
+        			  </view>
+        		  </view>
+        		  <view class="area-r">
+        			  <view class="">
+                  <text class="tn-icon-light"></text>
+                  <text class="tn-icon-time tn-padding-left-xs"></text>
+                </view>
+        		  </view> -->
+              <!-- <view class="talk"></view> -->
+              
+              <view class="image-banner">
+                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+              </view>
+        
+        		</view>
+        	</view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 方式4 start-->
+    <view class="tn-flex tn-padding-bottom-sm">
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoVUE3">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-level-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">图鸟VUE3</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navTuniaoMoban">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">圈子博客</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navBusiness">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-identity-fill tn-cool-color-icon4 tn-cool-bg-color-15"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">简约商圈</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="navXiongJie">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
+            <view class="tn-icon-image-fill tn-cool-color-icon4 tn-cool-bg-color-3"></view>
+          </view>  
+          <view class="tn-color-gray--dark tn-text-center">
+            <text class="tn-text-ellipsis">凶姐壁纸</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式4 end-->
+    
+    
+    <!-- banner start-->
+    <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoMoban">
+      <view class="" style="width: 100%;">
+        <view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-circle2.png');">
+           <view class="image-capsule">
+           </view>
+         </view>  
+      </view>  
+    </view>
+    <!-- banner end-->
+
+    
+    <block v-for="(item, index) in navList" :key="index">
+      <view class="nav_title--wrap tn-margin-bottom-sm">
+        <view class="nav_title tn-cool-bg-color-15">{{ item.title | titleFilter}}</view>
+      </view>
+      
+      <view class='nav-list'>
+        <block v-for="(content_item, content_index) in item.list" :key="content_index">
+          <navigator
+            open-type="navigate"
+            hover-class='none'
+            :url="content_item.url"
+            class="nav-list-item tn-shadow-blur tn-cool-bg-image"
+            :class="[
+              getRandomCoolBg(content_index)
+            ]"
+          >
+            <view class="nav-link">
+              <view class='title'>{{ content_item.title }}</view>
+              <view class='author'> <text class="tn-icon-code tn-padding-right-xs"></text> {{ content_item.author }}</view>
+            </view>
+            <!-- <view class="icon">
+              <view :class="['tn-icon-' + content_item.icon]"></view>
+            </view> -->
+          </navigator>
+        </block>
+      </view>
+    </block>
+    
+    <view class="tn-padding-xl tn-text-center tn-color-gray">
+      <view class="tn-padding-bottom-sm" @click="navPlus">
+        关于图鸟会员
+        <text class="tn-icon-rocket tn-padding-left-xs"></text>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import vipListData from '@/mock/vip_page.js'
+  
+  export default {
+    name: 'Vip',
+    filters: {
+      titleFilter(value) {
+        if (value.length === 0) {
+          return ''
+        }
+        let newString = ''
+        for (let i = 0; i < value.length; i++) {
+          if (i !== 0) {
+            newString += ' / '
+          }
+          newString += value[i]
+        }
+        return newString
+      }
+    },
+    data() {
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle1.jpg',
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle2.jpg',
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle3.jpg',
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle4.jpg',
+        },{
+          id: 4,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle5.jpg',
+        },{
+          id: 5,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle6.jpg',
+        },{
+          id: 6,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/index_bg/circle7.jpg',
+        }
+        ],
+        // nav菜单列表
+        navList: vipListData.data
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+      getRandomCoolBg() {
+        return this.$tn.color.getRandomCoolBgClass()
+      },
+      // 跳转到图鸟VUE3
+      navTuniaoVUE3(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wxd4296f570b8b39c9'
+        })
+      },
+      // 跳转到图鸟模板
+      navTuniaoMoban(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx13c0ed55c12d2afb'
+        })
+      },
+      // 跳转到关于作者
+      navSaitolia(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+      // 跳转到图鸟模板2
+      navBusiness(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx9056aabd1c0c6a8a'
+        })
+      },
+      // 跳转到图鸟模板3
+      navXiongJie(e) {
+        wx.vibrateLong();
+        uni.navigateToMiniProgram({
+          appId: 'wx76bb942a2810e8e5'
+        })
+      },
+      
+      // 跳转到会员协议
+      navPlus() {
+        uni.navigateTo({
+          url: '/templatePage/life/plus/plus'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 350rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 667rpx;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 轮播 start */
+/* .tnphone-white-min 细边框*/
+  .tnphone-white-min {width: 380rpx; height: 800rpx; border-radius: 40rpx; background: #E9E5F3; padding: 7rpx; display: table; color: #333;
+  	box-sizing: border-box; box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.15); margin: 70rpx auto; cursor: default; position: relative}
+  .tnphone-white-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #E9E5F3; padding: 10rpx;}
+  .tnphone-white-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #E9E5F3; position: relative; overflow: hidden}
+  .tnphone-white-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
+  .tnphone-white-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #E9E5F3; position: absolute}
+  .tnphone-white-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
+  	box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
+  .tnphone-white-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
+  .tnphone-white-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
+  .tnphone-white-min .area-l,.tnphone-white-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
+  .tnphone-white-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
+  .tnphone-white-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
+  .tnphone-white-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
+  .tnphone-white-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
+  .tnphone-white-min .fa-chevron-left {float: left; margin-top: 4rpx}
+  .tnphone-white-min .fa-cog {float: right; margin-top: 4rpx}
+  .tnphone-white-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
+  .tnphone-white-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
+  .tnphone-white-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
+  .tnphone-white-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
+
+  
+  /* 轮播样机样式 start*/
+  .card-swiper {
+    height: 830rpx !important;
+  }
+  
+  .card-swiper swiper-item {
+    width: 260rpx !important;
+    // left: 170rpx;
+    // width: 380rpx !important;
+    box-sizing: border-box;
+    padding: 0rpx 15rpx 90rpx 15rpx;
+    overflow: initial;
+  }
+  
+  .card-swiper swiper-item .swiper-item {
+    display: block;
+    transform: scale(0.45);
+    transition: all 0.2s ease-in 0s;
+    overflow: hidden;
+  }
+  
+  .card-swiper swiper-item.cur .swiper-item {
+    transform: scale(0.65);
+    transition: all 0.2s ease-in 0s;
+  }
+  
+  .image-banner{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .image-banner image{
+    width: 100%;
+    height: 770rpx;
+    // border: 1rpx solid red;
+  }
+  
+  /* 轮播指示点 start*/
+  .indication{
+    z-index: 9999;
+    width: 100%;
+    height: 36rpx;
+    position: absolute;
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+  }
+  
+  .spot{
+    background-color: #000;
+    opacity: 0;
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 20rpx;
+    margin: 0 8rpx !important;
+    top: -80rpx;
+    position: relative;
+  }
+  
+  .spot.active{
+    opacity: 0;
+    width: 30rpx;
+    background-color: #000;
+  }
+  
+  /* 轮播 end */
+  
+  /* 图标容器4 start */
+    .tn-cool-color-icon4{
+      // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+      // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-fill-color: transparent;
+    }
+    .icon4 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 110rpx;
+          height: 110rpx;
+          font-size: 55rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+            0px -8px 40px rgba(255, 255, 255, 1),
+            inset 0px -10px 10px rgba(70,23,129, 0.05),
+            inset 0px 10px 20px rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  
+  /* 标题start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: transparent;
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      font-size: 46rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题end */
+  
+  /* 组件导航列表 start*/
+  .nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0rpx 12rpx 0rpx;
+    justify-content: space-between;
+    
+    /* 列表元素 start */
+    .nav-list-item {
+      padding: 35rpx 30rpx 5rpx 30rpx;
+      border-radius: 12rpx;
+      width: 45%;
+      margin: 0 18rpx 40rpx;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      z-index: 99;
+      
+      
+      
+      /* 元素标题 start */
+      .nav-link {
+        font-size: 32rpx;
+        text-transform: capitalize;
+        padding: 0 0 10rpx 0;
+        position: relative;
+        
+        .title {
+          font-weight: bold;
+          font-size: 36rpx;
+          color: #FFFFFF;
+          margin-top: 30rpx;
+          text-align: center;
+        }
+        .author {
+          font-size: 25rpx;
+          color: #FFFFFF;
+          margin-top: 50rpx;
+          margin-left: -10rpx;
+          text-align: center;
+        }
+      }
+      /* 元素标题 end */
+      
+      /* 元素图标 start */
+      .icon {
+        font-variant: small-caps;
+        position: absolute;
+        top: 20rpx;
+        right: 50rpx;
+        left: 37%;
+        width: 90rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        vertical-align: middle;
+        font-size: 50rpx;
+        color: #FFFFFF;
+        white-space: nowrap;
+        opacity: 0.9;
+        background-color: rgba(0, 0, 0, 0.05);
+        background-size: cover;
+        background-position: 50%;
+        border-radius: 5000rpx;
+      }
+      /* 元素图标 end */
+    }
+    /* 列表元素 end */
+  }
+  /* 组件导航列表 end*/
+  
+  /* 胶囊banner*/
+  .image-capsule{
+    padding: 100rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-piccapsule{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+</style>
diff --git a/static/css/components/demo_page_common.scss b/static/css/components/demo_page_common.scss
new file mode 100644
index 0000000..f40b136
--- /dev/null
+++ b/static/css/components/demo_page_common.scss
@@ -0,0 +1,193 @@
+/* 顶部 start */
+.header {
+  padding: 80rpx 60rpx 40rpx 60rpx;
+  
+  .title {
+    font-size: 36rpx;
+    color: $tn-font-color;
+    font-weight: bold;
+  }
+  
+  .sub-title {
+    font-size: 28rpx;
+    color: $tn-content-color;
+    padding-top: 18rpx;
+  }
+  
+  .tips-title {
+    font-size: 24rpx;
+    color: $tn-font-sub-color;
+    padding-top: 5rpx;
+  }
+}
+/* 顶部 end */
+
+/* 展示内容容器 start */
+.show-content-container {
+  
+  /* 标题容器 start */
+  .title-container {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 100rpx;
+    
+    // 标题样式
+    .title {
+      height: 100%;
+      max-width: 100%;
+      margin: 0 20rpx;
+      font-size: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      // 标题前面小点
+      &:before {
+        content: " ";
+        background-color: $tn-main-color;
+        width: 15rpx;
+        height: 15rpx;
+        border-radius: 10rpx;
+        margin-right: 18rpx;
+      }
+    }
+  }
+  /* 标题容器 end */
+  
+  /* 内容 start */
+  .content {
+    padding: 20rpx;
+  }
+  /* 内容 end */
+  
+}
+/* 展示内容容器 end */
+
+/* 内容容器 start */
+.demo-content-container {
+  border: 1rpx dashed $tn-main-color;
+  margin: 20rpx;
+  margin-top: 0rpx;
+  
+  position: fixed;
+  width: 95%;
+  z-index: 10;
+  
+  transition: all 0.15s ease-out;
+  
+  &.top {
+    width: 100%;
+    margin: 0;
+  }
+  
+  &.no-fixed {
+    position: relative !important;
+  }
+  
+  /* 标题容器 start */
+  .title-container {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    min-height: 100rpx;
+    
+    // 标题样式
+    .title {
+      height: 100%;
+      max-width: 100%;
+      margin: 0 30rpx;
+      font-size: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  /* 标题容器 end */
+  
+  /* 内容 start */
+  .content {
+    padding: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  /* 内容 end */
+  
+}
+/* 内容容器 end */
+
+/* 可选项内容容器 start */
+.demo-section-container {
+  margin: 20rpx;
+  height: 100%;
+  
+  /* 标题容器 start */
+  .title-container {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    min-height: 100rpx;
+    margin-bottom: 10rpx;
+    
+    // 标题样式
+    .title {
+      height: 100%;
+      max-width: 100%;
+      margin: 0 30rpx;
+      font-size: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    &::after {
+      content: " ";
+      box-sizing: border-box;
+      width: 90%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      border-bottom: 1rpx solid $tn-border-solid-color;
+    }
+  }
+  /* 标题容器 end */
+  
+  /* 参数内容 start*/
+  .content {
+    padding: 0 20rpx 10rpx 20rpx;
+    
+    // 标题样式
+    .title {
+      padding-left: 20rpx;
+      height: 100%;
+      position: relative;
+      
+      &::before {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 4rpx;
+        height: 90%;
+        background-color: $tn-main-color;
+        border-radius: 6rpx;
+        transform: translateY(-50%);
+      }
+    }
+    
+    // 参数样式
+    .section {
+      margin-top: 15rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+  /* 参数内容 end*/
+  
+}
+/* 可选项内容容器 end */
\ No newline at end of file
diff --git a/static/css/templatePage/custom_nav_bar.scss b/static/css/templatePage/custom_nav_bar.scss
new file mode 100644
index 0000000..7cc0960
--- /dev/null
+++ b/static/css/templatePage/custom_nav_bar.scss
@@ -0,0 +1,38 @@
+.tn-custom-nav-bar__back {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 1000rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  color: #FFFFFF;
+  font-size: 18px;
+  
+  .icon {
+    display: block;
+    flex: 1;
+    margin: auto;
+    text-align: center;
+  }
+  
+  &:before {
+    content: " ";
+    width: 1rpx;
+    height: 110%;
+    position: absolute;
+    top: 22.5%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    opacity: 0.7;
+    background-color: #FFFFFF;
+  }
+}
\ No newline at end of file
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7bf90375f6b3c53badd9cb1536841e207889f098
GIT binary patch
literal 67646
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

literal 0
HcmV?d00001

diff --git a/store/$tn.mixin.js b/store/$tn.mixin.js
new file mode 100644
index 0000000..ab7689b
--- /dev/null
+++ b/store/$tn.mixin.js
@@ -0,0 +1,28 @@
+import { mapState } from 'vuex'
+import store from '@/store'
+
+// 尝试将用户在根目录中的store/index.js的vuex的state变量加载到全局变量中
+let $tStoreKey = []
+try {
+  $tStoreKey = store.state ? Object.keys(store.state) : []
+} catch(e) {
+  
+}
+
+module.exports = {
+  beforeCreate() {
+    // 将vuex方法挂在在$t中
+    // 使用方法: 
+    // 修改vuex的state中的user.name变量为图鸟小菜 => this.$tn.vuex('user.name', '图鸟小菜')
+    // 修改vuexde state中的version变量为1.0.1 => this.$tn.vuex('version', 1.0.1)
+    this.$tn.vuex = (name, value) => {
+      this.$store.commit('$tStore', {
+        name, value
+      })
+    }
+  },
+  computed: {
+    // 将vuex的state中的变量结构到全局混入mixin中
+    ...mapState($tStoreKey)
+  }
+}
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..828212c
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,75 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+let lifeData = {}
+
+// 尝试获取本地是否存在lifeData变量，第一次启动时不存在
+try {
+  lifeData = uni.getStorageSync('lifeData')
+} catch(e) {
+  
+}
+
+// 标记需要永久存储的变量，在每次启动时取出，在state中的变量名
+let saveStateKeys = ['vuex_user']
+
+// 保存变量到本地存储
+const saveLifeData = function(key, value) {
+  // 判断变量是否在存储数组中
+  if (saveStateKeys.indexOf(key) != -1) {
+    // 获取本地存储的lifeData对象，将变量添加到对象中
+    let tmpLifeData = uni.getStorageSync('lifeData')
+    // 第一次启动时不存在，则放一个空对象
+    tmpLifeData = tmpLifeData ? tmpLifeData : {},
+    tmpLifeData[key] = value
+    // 将变量再次放回本地存储中
+    uni.setStorageSync('lifeData', tmpLifeData)
+  }
+}
+
+const store = new Vuex.Store({
+  state: {
+    // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
+    // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
+    vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '图鸟'},
+    
+    // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
+    // app版本
+    vuex_version: "1.0.0",
+    // 是否使用自定义导航栏
+    vuex_custom_nav_bar: true,
+    // 状态栏高度
+    vuex_status_bar_height: 0,
+    // 自定义导航栏的高度
+    vuex_custom_bar_height: 0
+  },
+  mutations: {
+    $tStore(state, payload) {
+      // 判断是否多层调用，state中为对象存在的情况，例如user.info.score = 1
+      let nameArr = payload.name.split('.')
+      let saveKey = ''
+      let len = nameArr.length
+      if (len >= 2) {
+        let obj = state[nameArr[0]]
+        for (let i= 1; i < len - 1; i++) {
+          obj = obj[nameArr[i]]
+        }
+        obj[nameArr[len - 1]] = payload.value
+        saveKey = nameArr[0]
+      } else {
+        // 单层级变量
+        state[payload.name] = payload.value
+        saveKey = payload.name
+      }
+      
+      // 保存变量到本地中
+      saveLifeData(saveKey, state[saveKey])
+    }
+  },
+  actions: {
+  }
+})
+
+export default store
\ No newline at end of file
diff --git a/takeOutPage/static/images/location.png b/takeOutPage/static/images/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..338d999d71bba1c783265de8a570ac5d994c9430
GIT binary patch
literal 5631
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
Qw*I0uH?=V-H#&LdA5by8CjbBd

literal 0
HcmV?d00001

diff --git a/takeOutPage/static/images/take_out_car.png b/takeOutPage/static/images/take_out_car.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ffde399705178aa16cc9cbaf7e73b70e7acf152
GIT binary patch
literal 9455
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

literal 0
HcmV?d00001

diff --git a/takeOutPage/walking-route/walking-route.vue b/takeOutPage/walking-route/walking-route.vue
new file mode 100644
index 0000000..65ee873
--- /dev/null
+++ b/takeOutPage/walking-route/walking-route.vue
@@ -0,0 +1,226 @@
+<template>
+  <view class="take-out__walking-route">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>路线轨迹</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <map
+        class="take-out__map"
+        :longitude="location.longitude"
+        :latitude="location.latitude"
+        :scale="18"
+        :polyline="mapPolyline"
+        :markers="mapMarkers"
+      ></map>
+    </view>
+    
+    <tn-modal
+      v-model="openSettingFlag"
+      :custom="true"
+      :showCloseBtn="true"
+      width="auto"
+      padding="40rpx 80rpx"
+    >
+      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+        <view class="tn-text-bold tn-text-lg">授权使用位置信息</view>
+        <view class="tn-margin-top-xs tn-color-gray">获取定位失败, 请进行设置</view>
+        <view class="tn-margin-top">
+          <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="openSetting">打开设置</tn-button>
+        </view>
+      </view>
+    </tn-modal>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'takeOutWalkingRoute',
+    data() {
+      return {
+        openSettingFlag: false,
+        location: {
+          latitude: 22.970675,
+          longitude: 113.334259
+        },
+        mapPolyline: [{
+          points: [
+            {latitude: 22.969238, longitude: 113.333890},
+            {latitude: 22.969309, longitude: 113.333878},
+            {latitude: 22.969334, longitude: 113.334132},
+            {latitude: 22.969649, longitude: 113.334130},
+            {latitude: 22.970044, longitude: 113.334130},
+            {latitude: 22.970578, longitude: 113.334130},
+            {latitude: 22.970606, longitude: 113.334255},
+            {latitude: 22.970667, longitude: 113.334345},
+            {latitude: 22.970673, longitude: 113.334458},
+            {latitude: 22.970798, longitude: 113.334452},
+            {latitude: 22.970962, longitude: 113.334530},
+            {latitude: 22.971108, longitude: 113.334564},
+            {latitude: 22.971111, longitude: 113.334631}
+          ],
+          color: '#01BEFFFF',
+          width: 3,
+          arrowLine: true
+        }],
+        mapMarkers: [{
+          id: 0,
+          latitude: 22.971093,
+          longitude: 113.334740,
+          iconPath: '/takeOutPage/static/images/location.png',
+          width: 20,
+          height: 30,
+          callout: {
+            content: '您所在位置',
+            color: '#080808',
+            bgColor: 'transparent',
+            display: 'ALWAYS'
+          }
+        },{
+          id: 1,
+          latitude: 22.969238,
+          longitude: 113.333890,
+          iconPath: '/takeOutPage/static/images/take_out_car.png',
+          width: 30,
+          height: 30,
+          rotate: 270
+        }],
+        // 当前外卖小车的坐标位置Index
+        takeOutCarIndex: 0
+      }
+    },
+    onLoad() {
+      // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
+      // this.getUserAuthorize()
+      // #endif
+      // #ifdef APP-VUE || H5
+      // this.getUserLocation()
+      // #endif
+      
+      this.runIntervalTimer = setInterval(() => {
+        let rotate = 0
+        const pointsLength = this.mapPolyline[0].points.length
+        if (this.takeOutCarIndex >= pointsLength) {
+          this.takeOutCarIndex = 0
+        }
+        
+        if (this.takeOutCarIndex < pointsLength - 2) {
+          const currentPoint = this.mapPolyline[0].points[this.takeOutCarIndex]
+          const nextPoint = this.mapPolyline[0].points[this.takeOutCarIndex+1]
+          rotate = this.getAngle(currentPoint, nextPoint)
+        }
+        
+        this.mapMarkers[1].latitude = this.mapPolyline[0].points[this.takeOutCarIndex].latitude
+        this.mapMarkers[1].longitude = this.mapPolyline[0].points[this.takeOutCarIndex].longitude
+        this.mapMarkers[1].rotate = rotate === 0 ? 0 : rotate - 90
+        this.takeOutCarIndex++
+      }, 500)
+    },
+    onUnload() {
+      if (this.runIntervalTimer) {
+        clearInterval(this.runIntervalTimer)
+      }
+    },
+    methods: {
+      // 获取用户是否已经授权获取位置信息
+      getUserAuthorize() {
+        uni.authorize({
+          scope: 'scope.userLocation',
+          success: (res) => {
+            this.getUserLocation()
+          },
+          fail: (err) => {
+            // 获取权限失败，判断用户是否禁止了获取用户信息
+            // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
+            uni.getSetting({
+              success: (settingRes) => {
+                if (!settingRes.authSetting.hasOwnProperty('scope.userLocation') || !settingRes.authSetting['scope.userLocation']) {
+                  this.openSettingFlag = true
+                }
+              },
+              fail: (settingErr) => {}
+            })
+            // #endif
+            // #ifdef APP-VUE || H5
+            this.$tn.message.toast('获取定位失败, 请重试')
+            // #endif
+          }
+        })
+      },
+      // 获取用户的当前位置信息
+      getUserLocation() {
+        uni.getLocation({
+          type: 'gcj02',
+          success: (res) => {
+            this.location.latitude = res.latitude
+            this.location.longitude = res.longitude
+          },
+          fail: (err) => {
+            this.$tn.message.toast('获取定位失败, 请重试')
+          }
+        })
+      },
+      // 打开设置页面
+      openSetting() {
+        uni.openSetting({
+          success: (res) => {
+            if (res.authSetting.hasOwnProperty('scope.userLocation') && res.authSetting['scope.userLocation'] === true) {
+              this.openSettingFlag = false
+              this.getUserLocation()
+            } else {
+              this.$tn.message.toast('设置获取位置信息失败')
+            }
+          },
+          fail: (err) => {}
+        })
+      },
+      // 获取两点之间的角度
+      getAngle(current, next) {
+        let ret = 0
+        let w1 = current.latitude/180 * Math.PI
+        let j1 = current.longitude/180 * Math.PI
+
+        let w2 = next.latitude/180 * Math.PI
+        let j2 = next.longitude/180 * Math.PI
+
+        ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
+        ret = Math.sqrt(ret)
+
+        // var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
+        let temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
+        ret = ret/temp
+
+        ret = Math.atan(ret) / Math.PI * 180 
+        ret += 90
+        
+        // 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
+        if(j1-j2 < 0){
+          if(w1-w2 < 0){
+              ret = ret
+          }else{
+              ret = -ret+180
+          }
+        }else{
+          if(w1-w2 < 0){
+              ret = 180+ret
+          }else{
+              ret = -ret
+          }
+        }
+        return ret
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .take-out {
+    
+    
+    &__map {
+      width: 100%;
+      height: calc(100vh - 300px);
+    }
+  }
+</style>
diff --git a/template.h5.html b/template.h5.html
new file mode 100644
index 0000000..974e4db
--- /dev/null
+++ b/template.h5.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico">
+    <meta name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>
+      <%= htmlWebpackPlugin.options.title %>
+    </title>
+    <style>
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+    <!-- 正式发布的时候使用，开发期间不启用。↑ -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
+      })
+    </script>
+    <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
+  </head>
+  <body>
+    <!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
+    <!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
+    <!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
+    <noscript>
+      <strong>本站点必须要开启JavaScript才能运行</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+      /*BAIDU_STAT*/
+    </script>
+  </body>
+</html>
diff --git a/templatePage/animate/bubble/bubble.vue b/templatePage/animate/bubble/bubble.vue
new file mode 100644
index 0000000..5b95d53
--- /dev/null
+++ b/templatePage/animate/bubble/bubble.vue
@@ -0,0 +1,226 @@
+<template>
+  <view class="template-bubble">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateBubble',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        windowHeight: 0,
+        windowWidth: 0,
+        actionTimer: null,
+        animationTimer: null,
+        queue: {},
+        ctx: null
+      }
+    },
+    onLoad() {
+      this.getSystemInfo()
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.queue = {}
+        this.ctx = uni.createCanvasContext("bubble", this)
+        
+        setTimeout(() => {
+          this.actionTimer = setInterval(() => {
+            this.generateBubble()
+          }, 500)
+        }, 1000)
+      })
+    },
+    onUnload() {
+      this.clearActionTimer()
+      this.clearAnimationTimer()
+    },
+    methods: {
+      // 获取系统信息
+      getSystemInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        if (!systemInfo) {
+          setTimeout(() => {
+            this.getSystemInfo()
+          }, 50)
+          return
+        }
+        
+        this.windowHeight = systemInfo.safeArea.height
+        this.windowWidth = systemInfo.safeArea.width
+      },
+      
+      // 生成泡泡
+      generateBubble() {
+        const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
+        uni.getImageInfo({
+          src: image,
+          success: (res) => {
+            if (res.errMsg === 'getImageInfo:ok') {
+              const anmationData = {
+                id: new Date().getTime(),
+                timer: 0,
+                opacity: 0,
+                pathData: this.generatePathData(),
+                image: res.path,
+                factor: {
+                  speed: 0.0006, // 运动速度，值越小越慢
+                  t: 0.1 //  贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
+                }
+              }
+              if (Object.keys(this.queue).length > 0) {
+                this.queue[anmationData.id] = anmationData
+              } else {
+                this.queue[anmationData.id] = anmationData
+                this.bubbleAnimate()
+              }
+            }
+          }
+        })
+      },
+      
+      /* 动画相关 */
+      // 生成运动的路径数据
+      generatePathData() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        const p0 = {
+          x: 0.72 * width,
+          y: height
+        }
+        const p1 = {
+          x: this.$tn.number.random(0.22 * width, 0.33 * width),
+          y: this.$tn.number.random(0.5 * height, 0.75 * height)
+        }
+        const p2 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0.25 * height, 0.5 * height)
+        }
+        const p3 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0, 0.125 * height)
+        }
+        return [p0, p1, p2, p3]
+      },
+      // 更新运动的路径
+      updatePath(data, factor) {
+        const p0 = data[0]
+        const p1 = data[1]
+        const p2 = data[2]
+        const p3 = data[3]
+      
+        const t = factor.t
+      
+        /*计算多项式系数 （下同）*/
+        const cx1 = 3 * (p1.x - p0.x)
+        const bx1 = 3 * (p2.x - p1.x) - cx1
+        const ax1 = p3.x - p0.x - cx1 - bx1
+      
+        const cy1 = 3 * (p1.y - p0.y)
+        const by1 = 3 * (p2.y - p1.y) - cy1
+        const ay1 = p3.y - p0.y - cy1 - by1
+      
+        const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
+        const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
+        // console.log(p0.y, p1.y, p2.y, p3.y, y);
+        return {
+          x,
+          y
+        }
+      },
+      // 执行泡泡动画
+      bubbleAnimate() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        Object.keys(this.queue).forEach(key => {
+          const anmationData = this.queue[+key];
+          const {
+            x,
+            y
+          } = this.updatePath(
+            anmationData.pathData,
+            anmationData.factor
+          )
+          const speed = anmationData.factor.speed
+          anmationData.factor.t += speed
+      
+          var curWidth = 30
+          curWidth = (height - y) / 1.5
+          curWidth = Math.min(30, curWidth)
+      
+          var curAlpha = anmationData.opacity
+          curAlpha = y / (0.3 * height) //消失的高度适当调一下
+          curAlpha = Math.min(1, curAlpha)
+          this.ctx.globalAlpha = curAlpha
+          this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
+          // this.ctx.setFillStyle('red')
+          // this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
+          if (anmationData.factor.t > 1) {
+            delete this.queue[anmationData.id]
+          }
+          if (y > height) {
+            delete this.queue[anmationData.id]
+          }
+        })
+        this.ctx.draw()
+        if (Object.keys(this.queue).length > 0) {
+          this.animationTimer = setTimeout(() => {
+            this.bubbleAnimate()
+          }, 5)
+        } else {
+          this.clearAnimationTimer()()
+          this.ctx.draw() // 清空画面
+        }
+      },
+      
+      // 清除定时器
+      clearActionTimer() {
+        if (this.actionTimer) {
+          clearInterval(this.actionTimer)
+        }
+      },
+      clearAnimationTimer() {
+        if (this.animationTimer) {
+          clearTimeout(this.animationTimer)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-bubble {
+    position: relative;
+    background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
+    width: 100vw;
+    height: 100vh;
+    
+    .bubble {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1024;
+      pointer-events: none;
+    }
+  }
+</style>
diff --git a/templatePage/animate/hollow/hollow.vue b/templatePage/animate/hollow/hollow.vue
new file mode 100644
index 0000000..5b54527
--- /dev/null
+++ b/templatePage/animate/hollow/hollow.vue
@@ -0,0 +1,147 @@
+<template>
+  <view class="template-hollow">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
+      <view class="tn-flex tn-flex-row-between tn-margin-xl">
+        <view class="justify-content-item" style="margin-top: 50rpx;">
+          <view class="tn-radius tn-margin-bottom-xl">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
+          </view>
+          <view class="tn-radius tn-margin-bottom">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
+          </view>
+        </view>
+        <view class="justify-content-item">
+          <view class="tn-radius tn-margin-bottom-xl">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
+          </view>
+          <view class="tn-radius tn-margin-bottom">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
+          </view>
+        </view>
+        <view class="justify-content-item" style="margin-top: 50rpx;">
+          <view class="tn-radius tn-margin-bottom-xl">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
+          </view>
+          <view class="tn-radius tn-margin-bottom">
+            <view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
+              <view class="image-hollow">
+              </view>
+            </view>
+            <view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="bottom-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    <view class="hollow">
+      <view class="tn-text-xxl">
+        <text class="">Hi，图鸟的小伙伴</text>
+      </view>
+      <view class="tn-text-xl tn-padding-top">
+        技术的友情，有你真好
+      </view>  
+      <view class="tn-text-xl tn-padding-top">
+        TnUI，感谢一路陪伴与支持
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateHollow',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 背景图 start */
+  .bottom-backgroup {
+    height: 700rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      border-radius: 60rpx 60rpx 0 0;
+      width: 100%;
+      height: 3373rpx;
+      // z-index: -1;
+    }
+  }
+  /* 背景图 end */
+    
+  /* 镂空 start*/
+    .hollow {
+      position: fixed;
+      text-align: center;
+      width: 87%;
+      padding: 30rpx;
+      margin: 0 6.5%;
+      top: 180rpx;
+      font-weight: bold;
+      z-index: 1000;
+      background: rgba(255, 255, 255, 0.95);
+      color: #000;
+      border-radius: 20rpx;
+      /* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
+      mix-blend-mode: lighten;
+    }
+    /* 效果布局 start*/
+  .image-hollow{
+    width: 200rpx;
+    height: 400rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    height: 100%;
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+
+</style>
diff --git a/templatePage/animate/loading/loading.vue b/templatePage/animate/loading/loading.vue
new file mode 100644
index 0000000..73893da
--- /dev/null
+++ b/templatePage/animate/loading/loading.vue
@@ -0,0 +1,265 @@
+<template>
+  <view class="template-loading">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view class="bg-contaniner">
+    </view>
+    
+    <view class="container-content hex-border">
+      <view class="hexagons">
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+        <view class="hexagon"></view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateLoading',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 移动背景部分 */
+  .bg-contaniner {
+    position: fixed;
+    top: -0rpx;
+    left: -300rpx;
+    --text-color: hsl(0 95% 60%);
+    --bg-color: hsl(0 0% 100%);
+    --bg-size: 200px;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    place-content: center;
+    /* grid-template-areas: "body"; */
+    overflow: hidden;
+    font-family: "Dela Gothic One", sans-serif;
+    background-color: var(--bg-color);
+    z-index: -1;
+  }
+  
+  .bg-contaniner::before {
+    --size: 150vmax;
+  
+    grid-area: body;
+    content: "";
+    inline-size: var(--size);
+    block-size: var(--size);
+    background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
+    background-size: var(--bg-size);
+    background-repeat: repeat;
+    transform: rotate(45deg);
+    opacity: 0.25;
+    animation: bg 6s linear infinite;
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .bg-contaniner::before {
+      animation-duration: 0s;
+    }
+  }
+  
+  @keyframes bg {
+    to {
+      background-position: 0 calc(var(--bg-size) * -1);
+    }
+  }
+
+  
+  
+  /* 加载部分 */
+  .components-anloading {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    /* background: linear-gradient(45deg, #0fd850, #f9f047); */
+  }
+  
+  .hex-border {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    width: 170px;
+    height: 170px;
+    border: 2px solid rgba(235, 237, 241, 0.8);
+    border-radius: 100%;
+  }
+  
+  .hex-border::before {
+    content: "";
+    position: absolute;
+    width: 174px;
+    height: 174px;
+    border: 2px solid #F4B4C4;
+    border-radius: 100%;
+    box-sizing: border-box;
+    clip-path: inset(0px 135px 135px 0px);
+    -webkit-clip-path: inset(0px 135px 135px 0px);
+    top: -4px;
+    left: -4px;
+    animation: rotateSmall 2s linear infinite;
+    z-index: 2;
+  }
+  
+  .hex-border::after {
+    content: "";
+    position: absolute;
+    width: 174px;
+    height: 174px;
+    border: 2px solid #F4B4C4;
+    border-radius: 100%;
+    box-sizing: border-box;
+    top: -4px;
+    left: -4px;
+    clip-path: inset(0px 30px 30px 0px);
+    -webkit-clip-path: inset(0px 30px 30px 0px);
+    animation: rotateLarge 1.6s linear infinite;
+  }
+  
+  .hexagons {
+    position: relative;
+    border-radius: 100%;
+    padding: 5%;
+    top: 30px;
+    left: 35px;
+  }
+  
+  .hexagon {
+    position: absolute;
+    width: 40px;
+    height: 23px;
+    background-color: #F4B4C4;
+    transform: scale(1.02);
+    transform-origin: center;
+  }
+  
+  .hexagon::before {
+    content: "";
+    position: absolute;
+    top: -11.5px;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-bottom: 11.5px solid #F4B4C4;
+  }
+  
+  .hexagon::after {
+    content: "";
+    position: absolute;
+    top: 23px;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 11.5px solid #F4B4C4;
+  }
+  
+  .hexagon:nth-child(1) {
+    animation: animateHex 3s infinite;
+  }
+  
+  .hexagon:nth-child(2) {
+    left: 53px;
+    animation: animateHex 3s 0.2s infinite;
+  }
+  
+  .hexagon:nth-child(3) {
+    left: -13px;
+    top: 46px;
+    animation: animateHex 3s 1s infinite;
+  }
+  
+  .hexagon:nth-child(4) {
+    left: 31px;
+    top: 46px;
+    animation: animateHex 3s 1.2s infinite;
+  }
+  
+  .hexagon:nth-child(5) {
+    left: 75px;
+    top: 46px;
+    animation: animateHex 3s 0.4s infinite;
+  }
+  
+  .hexagon:nth-child(6) {
+    top: 84px;
+    animation: animateHex 3s 0.8s infinite;
+  }
+  
+  .hexagon:nth-child(7) {
+    left: 53px;
+    top: 84px;
+    animation: animateHex 3s 0.6s infinite;
+  }
+  
+  @keyframes rotateSmall {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
+  
+  @keyframes rotateLarge {
+    0% {
+      clip-path: inset(0px 30px 30px 0px);
+      -webkit-clip-path: inset(0px 30px 30px 0px);
+    }
+  
+    50% {
+      clip-path: inset(0px 150px 150px 0px);
+      -webkit-clip-path: inset(0px 150px 150px 0px);
+    }
+  
+    100% {
+      transform: rotate(1turn);
+      clip-path: inset(0px 30px 30px 0px);
+      -webkit-clip-path: inset(0px 30px 30px 0px);
+    }
+  }
+  
+  @keyframes animateHex {
+    0% {
+      transform: scale(1.02);
+    }
+  
+    20%,
+    50% {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+  
+    65% {
+      transform: scale(1.02);
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/templatePage/animate/particle/particle.vue b/templatePage/animate/particle/particle.vue
new file mode 100644
index 0000000..5a261b4
--- /dev/null
+++ b/templatePage/animate/particle/particle.vue
@@ -0,0 +1,149 @@
+<template>
+  <view class="template-particle">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  
+  const Point = class {
+    constructor(x, y) {
+      this.x = x
+      this.y = y
+      this.r = 1 + Math.random() * 2
+      this.sx = Math.random() * 2 - 1
+      this.sy = Math.random() * 2 - 1
+    }
+  
+    draw(ctx) {
+      ctx.beginPath()
+      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
+      ctx.closePath()
+      ctx.fillStyle = '#fff'
+      ctx.fill()
+    }
+  
+    move(w, h) {
+      this.x += this.sx
+      this.y += this.sy
+      if (this.x > w || this.x < 0) this.sx = -this.sx
+      if (this.y > h || this.y < 0) this.sy = -this.sy
+    }
+  
+    drawLine(ctx, p) {
+      const dx = this.x - p.x
+      const dy = this.y - p.y
+      const d = Math.sqrt(dx * dx + dy * dy)
+      if (d < 100) {
+        var alpha = (100 - d) / 300 * 1
+        ctx.beginPath()
+        ctx.moveTo(this.x, this.y)
+        ctx.lineTo(p.x, p.y)
+        ctx.closePath()
+        ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
+        ctx.strokeWidth = 1
+        ctx.stroke()
+      }
+    }
+  }
+  
+  const sysinfo = uni.getSystemInfoSync()
+  const w = 400
+  const h = 1000
+  
+  export default {
+    name: 'TemplateParticle',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        ctx: null,
+        screenWidth: sysinfo.screenWidth,
+        screenHeight: sysinfo.screenHeight,
+        timer: null,
+        points: []
+      }
+    },
+    onLoad(options) {
+      this.from = options.from || ''
+      
+      for (let i = 0; i < 80; i++) {
+        this.points.push(new Point(Math.random() * w, Math.random() * h))
+      }
+      this.ctx = uni.createCanvasContext('star_canvas')
+      // console.log(points)
+    
+      this.gameloop() //进行
+      // this.ctx.setFillStyle('red')
+      // this.ctx.fillRect(200, 300, 50, 50)
+      // this.ctx.draw()
+    },
+    onUnload() {
+      clearTimeout(this.timer)
+    },
+
+    methods: {
+      /**粒子进行*/
+      gameloop() {
+        this.timer = setTimeout(this.gameloop, 100);
+        // console.log('gameloop')
+        this.paint();
+      },
+      /**清空画布*/
+      paint() {
+        this.ctx.clearRect(0, 0, w, h)
+        for (var i = 0; i < this.points.length; i++) {
+          this.points[i].move(w, h)
+          this.points[i].draw(this.ctx)
+          for (var j = i + 1; j < this.points.length; j++) {
+            this.points[i].drawLine(this.ctx, this.points[j])
+          }
+        }
+        this.ctx.draw();
+      }
+    }
+  }
+  
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-particle {
+    background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
+    background: linear-gradient(90deg, #892FE8, #3D7EFF);
+    min-height: 100vh
+  }
+  .template-particle:before {
+  		content: "";
+  		position: absolute;
+  		top: 0;
+  		left: 0;
+  		bottom: 0;
+      right: 0;
+  		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
+  		-webkit-mask-image: linear-gradient(to bottom, transparent, black);
+  		        mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
+  		        mask-image: linear-gradient(to bottom, transparent, black);
+  		background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
+  		background: linear-gradient(90deg, #E72F8C, #892FE8);	
+    }
+  
+  .mycanvas {
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+  }
+</style>
diff --git a/templatePage/animate/photo/photo.vue b/templatePage/animate/photo/photo.vue
new file mode 100644
index 0000000..1676e52
--- /dev/null
+++ b/templatePage/animate/photo/photo.vue
@@ -0,0 +1,264 @@
+<template>
+  <view class="template-photo">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view class="slideshow">
+      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
+      <view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePhoto',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-photo {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    overflow: hidden;
+  }
+  
+
+  
+  /* 相册 start*/
+  .slideshow {
+    top: 0;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  
+  .slideshow-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: no-repeat 50% 50%;
+    background-size: cover;
+    -webkit-animation-name: kenburns;
+            animation-name: kenburns;
+    -webkit-animation-timing-function: linear;
+            animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+    -webkit-animation-duration: 16s;
+            animation-duration: 16s;
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  .slideshow-image:nth-child(1) {
+    -webkit-animation-name: kenburns-1;
+            animation-name: kenburns-1;
+    z-index: 3;
+  }
+  .slideshow-image:nth-child(2) {
+    -webkit-animation-name: kenburns-2;
+            animation-name: kenburns-2;
+    z-index: 2;
+  }
+  .slideshow-image:nth-child(3) {
+    -webkit-animation-name: kenburns-3;
+            animation-name: kenburns-3;
+    z-index: 1;
+  }
+  .slideshow-image:nth-child(4) {
+    -webkit-animation-name: kenburns-4;
+            animation-name: kenburns-4;
+    z-index: 0;
+  }
+  
+  @-webkit-keyframes kenburns-1 {
+    0% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    1.5625% {
+      opacity: 1;
+    }
+    23.4375% {
+      opacity: 1;
+    }
+    26.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+    98.4375% {
+      opacity: 0;
+      transform: scale(1.2117647059);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes kenburns-1 {
+    0% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    1.5625% {
+      opacity: 1;
+    }
+    23.4375% {
+      opacity: 1;
+    }
+    26.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+    98.4375% {
+      opacity: 0;
+      transform: scale(1.2117647059);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes kenburns-2 {
+    23.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    26.5625% {
+      opacity: 1;
+    }
+    48.4375% {
+      opacity: 1;
+    }
+    51.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+  }
+  @keyframes kenburns-2 {
+    23.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    26.5625% {
+      opacity: 1;
+    }
+    48.4375% {
+      opacity: 1;
+    }
+    51.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+  }
+  @-webkit-keyframes kenburns-3 {
+    48.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    51.5625% {
+      opacity: 1;
+    }
+    73.4375% {
+      opacity: 1;
+    }
+    76.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+  }
+  @keyframes kenburns-3 {
+    48.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    51.5625% {
+      opacity: 1;
+    }
+    73.4375% {
+      opacity: 1;
+    }
+    76.5625% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+  }
+  @-webkit-keyframes kenburns-4 {
+    73.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    76.5625% {
+      opacity: 1;
+    }
+    98.4375% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+  @keyframes kenburns-4 {
+    73.4375% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+    76.5625% {
+      opacity: 1;
+    }
+    98.4375% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+    /* 相册 end*/
+</style>
diff --git a/templatePage/animate/suspended/suspended.vue b/templatePage/animate/suspended/suspended.vue
new file mode 100644
index 0000000..3bb2907
--- /dev/null
+++ b/templatePage/animate/suspended/suspended.vue
@@ -0,0 +1,214 @@
+<template>
+  <view class="template-suspended">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>    
+    
+    <view class="wechat tnxuanfu" @click="navTuniaoUI">
+      <view class="bg0 pa">
+        <view class="bg1">
+          <image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
+        </view>
+      </view>
+      <view class="hx-box pa">
+        <view class="pr">
+          <view class="hx-k1 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k2 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k3 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k4 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k5 pa0">
+            <view class="span"></view>
+          </view>
+          <view class="hx-k6 pa0">
+            <view class="span"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateSuspended',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      // 跳转到
+      navTuniaoUI(e) {
+        wx.vibrateShort();
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-suspended{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }  
+  /* 悬浮 */
+  .tnxuanfu{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+  /* 悬浮按钮 */
+  .button-shop {
+    width: 90rpx;
+    height: 90rpx;
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    /* bottom:200rpx;
+      right: 20rpx; */
+    left: 5rpx;
+    top: 5rpx;
+    z-index: 1001;
+    border-radius: 100px;
+    opacity: 0.9;
+  }
+  
+  
+  /* 按钮 */
+  .wechat {
+    bottom: 300rpx;
+    right: 75rpx;
+    position: fixed;
+    z-index: 9999;
+  }
+  
+  
+  .pa,
+  .pa0 {
+    position: absolute
+  }
+  
+  .pa0 {
+    left: 0;
+    top: 0
+  }
+  
+  
+  .bg0 {
+    width: 100rpx;
+    height: 100rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .bg1 {
+    width: 100%;
+    height: 100%;
+  }
+  
+  
+  
+  
+  .hx-box {
+    top: 50%;
+    left: 50%;
+    width: 100rpx;
+    height: 100rpx;
+    transform-style: preserve-3d;
+    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+  }
+  
+  .hx-box .pr {
+    width: 100rpx;
+    height: 100rpx;
+    transform-style: preserve-3d;
+    animation: hxz 20s linear infinite;
+  }
+  
+  @keyframes hxz {
+    0% {
+      transform: rotateX(0deg);
+    }
+  
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+  
+  
+  
+  .hx-box .pr .pa0 {
+    width: 100rpx;
+    height: 100rpx;
+    /* border: 4px solid #5ec0ff; */
+    border-radius: 1000px;
+  }
+  
+  .hx-box .pr .pa0 .span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
+    background-size: 100% 100%;
+    animation: hx 4s linear infinite;
+  }
+  
+  @keyframes hx {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .hx-k1 {
+    transform: rotateX(-60deg) rotateZ(-60deg)
+  }
+  
+  .hx-k2 {
+    transform: rotateX(-30deg) rotateZ(-30deg)
+  }
+  
+  .hx-k3 {
+    transform: rotateX(0deg) rotateZ(0deg)
+  }
+  
+  .hx-k4 {
+    transform: rotateX(30deg) rotateZ(30deg)
+  }
+  
+  .hx-k5 {
+    transform: rotateX(60deg) rotateZ(60deg)
+  }
+  
+  .hx-k6 {
+    transform: rotateX(90deg) rotateZ(90deg)
+  }
+</style>
diff --git a/templatePage/animate/wave/wave.vue b/templatePage/animate/wave/wave.vue
new file mode 100644
index 0000000..31b6e9c
--- /dev/null
+++ b/templatePage/animate/wave/wave.vue
@@ -0,0 +1,122 @@
+<template>
+  <view class="template-wave">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="">
+      
+    </view>
+    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateWave',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-wave{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+</style>
diff --git a/templatePage/article/demo1/demo1.vue b/templatePage/article/demo1/demo1.vue
new file mode 100644
index 0000000..0551396
--- /dev/null
+++ b/templatePage/article/demo1/demo1.vue
@@ -0,0 +1,739 @@
+<template>
+  <view class="tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur"
+            style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+            <view class="logo-image">
+              <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
+              </tn-badge>
+            </view>
+          </view>
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
+          </view>
+        </view> -->
+        <view class="tn-margin-top tn-margin-left">
+          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
+            :fontSize="36"></tn-tabs>
+        </view>
+      </view>
+
+    </tn-nav-bar>
+
+
+    <!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="article-shadow tn-margin">
+          <view class="tn-flex">
+            <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
+              <view class="image-article">
+              </view>
+            </view>
+            <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
+              <view class="tn-text-lg tn-text-bold clamp-text-1">
+                {{ item.title }}
+              </view>
+              <view class="tn-padding-top-xs" style="min-height: 100rpx;">
+                <text class=" tn-text-sm tn-color-gray clamp-text-2">
+                  {{ item.desc }}
+                </text>
+              </view>
+              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index"
+                  class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
+                </view>
+                <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 5rpx;">
+                  <text class="tn-icon-footprint tn-padding-right-xs"></text>
+                  <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                  <text class="tn-icon-like-lack tn-padding-right-xs"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-black">圈子</view>
+      </view>
+
+      <!-- <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view> -->
+
+      <view class="action bar-center" @click="">
+        <view class="nav-index-button">
+          <view class="nav-index-button__content">
+            <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <!-- <view class="tn-icon-logo-tuniao"></view> -->
+              <view class="bar-circle tn-shadow-blur">
+                <view class="tn-icon-add tn-color-white"></view>
+                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
+              </view>
+            </view>
+          </view>
+
+          <view class="nav-index-button__meteor">
+            <view class="nav-index-button__meteor__wrapper">
+              <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
+                :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+                <view class="nav-index-button__meteor__item--pic"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+        </view>
+        <view class="tn-color-gray">优选</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+
+
+    <view class="tn-padding-xl"></view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        current: 0,
+        scrollList: [{
+            name: '资讯'
+          },
+          {
+            name: '博客'
+          },
+          {
+            name: '学习',
+            count: ''
+          }
+        ],
+        content: [{
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'red',
+            label: ['小程序'],
+            title: '全新出发，新版本已上线，欢迎三连',
+            desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 567
+            },
+            collectionCount: 543,
+            commentCount: 543,
+            likeCount: 206
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'cyan',
+            label: ['模型'],
+            title: '3D模型了解一下？',
+            desc: '一个拥有大量3D模型的网站',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 987
+            },
+            collectionCount: 567,
+            commentCount: 69,
+            likeCount: 65
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'blue',
+            label: ['UI设计'],
+            title: '为什么资讯不显示时间',
+            desc: '你确定你经常更新文章吗？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 321
+            },
+            collectionCount: 654,
+            commentCount: 232,
+            likeCount: 543
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'green',
+            label: ['创意'],
+            title: '创意一点点',
+            desc: '创意灵感从这里开始',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 230
+            },
+            collectionCount: 987,
+            commentCount: 236,
+            likeCount: 342
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'orange',
+            label: ['UI设计'],
+            title: '语雀素材地址资源',
+            desc: '图鸟UI素材免费可商用',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 106
+            },
+            collectionCount: 765,
+            commentCount: 32,
+            likeCount: 91
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purplered',
+            label: ['神器'],
+            title: '最强的视频转GIF工具',
+            desc: '神器推荐',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 232
+            },
+            collectionCount: 776,
+            commentCount: 48,
+            likeCount: 86
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purple',
+            label: ['粒子'],
+            title: '小程序粒子效果',
+            desc: '酷炫的小程序粒子效果一览',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 456
+            },
+            collectionCount: 342,
+            commentCount: 42,
+            likeCount: 76
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'brown',
+            label: ['工具'],
+            title: '小程序任意页面生成二维码',
+            desc: '二维码生成器',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+
+  .logo-image {
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    margin-top: -15rpx;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+  }
+
+  /* 自定义导航栏内容 end */
+
+  /* 资讯主图 start*/
+  .image-article {
+    border-radius: 8rpx;
+    border: 1rpx solid #F8F7F8;
+    width: 200rpx;
+    height: 200rpx;
+    position: relative;
+  }
+
+  .image-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 10rpx;
+  }
+
+  .article-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 35rpx;
+      padding: 5rpx 25rpx;
+
+      &--prefix {
+        padding-right: 10rpx;
+      }
+    }
+  }
+
+  /* 标签内容 end*/
+
+  /* 底部tabbar start*/
+  .footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 999;
+    background-color: #FFFFFF;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+    padding: 0;
+    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+
+  .tabbar .action {
+    font-size: 22rpx;
+    position: relative;
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    display: block;
+    height: auto;
+    line-height: 1;
+    margin: 0;
+    overflow: initial;
+  }
+
+  .bar-center {
+    animation: suspension 3s ease-in-out infinite;
+  }
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: 0rpx auto 0rpx;
+    text-align: center;
+    font-size: 60rpx;
+    line-height: 100rpx;
+    background-color: #FBBF18;
+    width: 100rpx !important;
+    height: 100rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
+      0px -8px 40px rgba(255, 255, 255, 1),
+      inset 0px -10px 10px rgba(70, 23, 129, 0.05),
+      inset 0px 10px 20px rgba(255, 255, 255, 1);
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
+  }
+
+  .tabbar .action .bar-circle image {
+    width: 100rpx;
+    height: 100rpx;
+    display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+
+
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.6rem);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/templatePage/article/demo2/demo2.vue b/templatePage/article/demo2/demo2.vue
new file mode 100644
index 0000000..c0da17e
--- /dev/null
+++ b/templatePage/article/demo2/demo2.vue
@@ -0,0 +1,739 @@
+<template>
+  <view class="tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur"
+            style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
+            <view class="logo-image">
+              <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
+              </tn-badge>
+            </view>
+          </view>
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
+          </view>
+        </view> -->
+        <view class="tn-margin-top tn-margin-left">
+          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
+            :fontSize="36"></tn-tabs>
+        </view>
+      </view>
+
+    </tn-nav-bar>
+
+
+    <!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="article-shadow tn-margin">
+          <view class="tn-flex">
+            <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
+              <view class="tn-text-lg tn-text-bold clamp-text-2 tn-text-justify" style="min-height: 95rpx;">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" style="transform: translate(0,-5rpx);"
+                  class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                  <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
+                </view>
+                <text class="">{{ item.title }}</text>
+              </view>
+              <view class="tn-padding-top-xs">
+                <text class=" tn-text-sm tn-color-gray clamp-text-1">
+                  {{ item.desc }}
+                </text>
+              </view>
+              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
+                <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 15rpx;">
+                  <text class="tn-icon-footprint tn-padding-right-xs"></text>
+                  <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                  <text class="tn-icon-like-lack tn-padding-right-xs"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
+              <view class="image-article">
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-black">圈子</view>
+      </view>
+
+      <!-- <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view> -->
+
+      <view class="action bar-center" @click="">
+        <view class="nav-index-button">
+          <view class="nav-index-button__content">
+            <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <!-- <view class="tn-icon-logo-tuniao"></view> -->
+              <view class="bar-circle tn-shadow-blur">
+                <view class="tn-icon-add tn-color-white"></view>
+                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
+              </view>
+            </view>
+          </view>
+
+          <view class="nav-index-button__meteor">
+            <view class="nav-index-button__meteor__wrapper">
+              <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
+                :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+                <view class="nav-index-button__meteor__item--pic"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+        </view>
+        <view class="tn-color-gray">优选</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+
+
+    <view class="tn-padding-xl"></view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: {
+      NavIndexButton
+    },
+    data() {
+      return {
+        current: 0,
+        scrollList: [{
+            name: '资讯'
+          },
+          {
+            name: '博客'
+          },
+          {
+            name: '学习',
+            count: ''
+          }
+        ],
+        content: [{
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'red',
+            label: ['小程序'],
+            title: '小程序官网源码，免费开源欢迎白嫖嗷嗷',
+            desc: '2.2.0版本已上线，欢迎三连',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 567
+            },
+            collectionCount: 543,
+            commentCount: 543,
+            likeCount: 206
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'cyan',
+            label: ['模型'],
+            title: '一个拥有大量3D模型的网站',
+            desc: '3D模型了解一下？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 987
+            },
+            collectionCount: 567,
+            commentCount: 69,
+            likeCount: 65
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'blue',
+            label: ['UI设计'],
+            title: '为什么资讯不显示时间？',
+            desc: '你确定你经常更新文章吗？',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 321
+            },
+            collectionCount: 654,
+            commentCount: 232,
+            likeCount: 543
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'green',
+            label: ['创意'],
+            title: '创意一点点',
+            desc: '创意灵感从这里开始',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 230
+            },
+            collectionCount: 987,
+            commentCount: 236,
+            likeCount: 342
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'orange',
+            label: ['UI设计'],
+            title: '图鸟UI素材免费可商用',
+            desc: '语雀素材地址资源',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 106
+            },
+            collectionCount: 765,
+            commentCount: 32,
+            likeCount: 91
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purplered',
+            label: ['神器'],
+            title: '最强的视频转GIF工具',
+            desc: '神器推荐',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 232
+            },
+            collectionCount: 776,
+            commentCount: 48,
+            likeCount: 86
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'purple',
+            label: ['粒子'],
+            title: '酷炫的小程序粒子效果一览',
+            desc: '小程序粒子效果',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 456
+            },
+            collectionCount: 342,
+            commentCount: 42,
+            likeCount: 76
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            color: 'brown',
+            label: ['工具'],
+            title: '小程序任意页面生成二维码',
+            desc: '二维码生成器',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [{
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
+                },
+                {
+                  src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
+                },
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ],
+      }
+    },
+    methods: {
+      // tab选项卡切换
+      tabChange(index) {
+        this.current = index
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+
+  .logo-image {
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    margin-top: -15rpx;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+  }
+
+  /* 自定义导航栏内容 end */
+
+  /* 资讯主图 start*/
+  .image-article {
+    border-radius: 8rpx;
+    border: 1rpx solid #F8F7F8;
+    width: 250rpx;
+    height: 200rpx;
+    position: relative;
+  }
+
+  .image-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 10rpx;
+  }
+
+  .article-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 35rpx;
+      padding: 5rpx 25rpx;
+
+      &--prefix {
+        padding-right: 10rpx;
+      }
+    }
+  }
+
+  /* 标签内容 end*/
+
+  /* 底部tabbar start*/
+  .footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 999;
+    background-color: #FFFFFF;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+    padding: 0;
+    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+
+  .tabbar .action {
+    font-size: 22rpx;
+    position: relative;
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    display: block;
+    height: auto;
+    line-height: 1;
+    margin: 0;
+    overflow: initial;
+  }
+
+  .bar-center {
+    animation: suspension 3s ease-in-out infinite;
+  }
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: 0rpx auto 0rpx;
+    text-align: center;
+    font-size: 60rpx;
+    line-height: 100rpx;
+    background-color: #FBBF18;
+    width: 100rpx !important;
+    height: 100rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
+      0px -8px 40px rgba(255, 255, 255, 1),
+      inset 0px -10px 10px rgba(70, 23, 129, 0.05),
+      inset 0px 10px 20px rgba(255, 255, 255, 1);
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
+  }
+
+  .tabbar .action .bar-circle image {
+    width: 100rpx;
+    height: 100rpx;
+    display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+
+
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.6rem);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/templatePage/health/qrcode/qrcode.vue b/templatePage/health/qrcode/qrcode.vue
new file mode 100644
index 0000000..6d561f6
--- /dev/null
+++ b/templatePage/health/qrcode/qrcode.vue
@@ -0,0 +1,621 @@
+<template>
+  <view class="template-screen tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @tap.stop="goBack">
+        <!-- 返回按钮 -->
+        <view class="custom-nav__back">
+          <view class="tn-icon-backspace tn-color-white" style="font-size: 60rpx;"></view>
+        </view>
+        <!-- 字 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-white">
+            <text class="tn-text-bold tn-text-xl">健康码</text>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view class="bg-contaniner">
+      
+    </view>
+    
+    
+    
+    
+    
+
+    <view class="">
+      <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+        <view class="tn-bg-white tn-margin tn-text-center" style="border-radius: 20rpx">
+          <view class="tn-flex tn-flex-row-around tn-padding-sm tn-bg-blue--light" style="border-radius: 20rpx 20rpx 0 0;">
+            <view class="justify-content-item">广州 <text class="tn-icon-down-triangle"></text> </view>
+            <view class="justify-content-item">蔡*东</view>
+            <view class="justify-content-item">添加成员</view>
+          </view>
+          <view class="">
+            <view class="tn-text-bold tn-margin-top-xl" style="font-size: 60rpx;">12-1 17:01:42</view>
+            <view  class="tn-icon-qr-beibei tn-color-orange" style="font-size: 450rpx;">
+            </view>
+            <view class="tn-border-solid-top tn-padding">
+              <text class="tn-icon-qr-code tn-padding-right-sm"></text>
+              <text>不敢弄太真实，万一坏人拿去了，放黄码</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 方式12 start-->
+      <view class="tn-flex tn-margin-xs">
+        <view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 30rpx 20rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-cyan--light tn-color-cyan--dark">
+              <view class="tn-icon-safe-fill tn-three"></view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-color-teal--dark">核酸阴性</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">2021-06-13 08:38</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 30rpx 20rpx;padding: 40rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-cyan--light tn-color-cyan--dark">
+              <view class="tn-icon-trusty-fill tn-three"></view>
+            </view>  
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-text-xl tn-color-teal--dark">已完成全程接种</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">2021-11-15</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      
+      <view class="tn-bg-white" style="border-radius: 50rpx 50rpx 0 0;">
+        <!-- 方式12 start-->
+        <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top"> 
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-orange--light tn-color-orange">
+                <view class="tn-icon-honor tn-three"></view>
+              </view>  
+              <view class="tn-color-black tn-text-center">
+                <text class="tn-text-ellipsis">通关凭证</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purple--light tn-color-purple">
+                <view class="tn-icon-chemistry tn-three"></view>
+              </view>  
+              <view class="tn-color-black tn-text-center">
+                <text class="tn-text-ellipsis">核酸检测</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
+                <view class="tn-icon-edit-form tn-three"></view>
+              </view>  
+              <view class="tn-color-black tn-text-center">
+                <text class="tn-text-ellipsis">健康申报</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purplered--light tn-color-purplered">
+                <view class="tn-icon-identity tn-three"></view>
+              </view>  
+              <view class="tn-color-black tn-text-center">
+                <text class="tn-text-ellipsis">通信行程</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 方式12 end-->
+      </view>
+      
+      
+      <!-- 图文 -->
+      <view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 110rpx;">
+        
+        <block v-for="(item,index) in content" :key="index">
+          <view class="tn-blogger-content__wrap">
+            <view class="">
+              <!-- 方式一 -->
+              <!-- <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+                <view class="image-qrcode">
+                </view>
+              </view> -->
+              <!-- 方式二 -->
+              <image 
+                class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
+                :src="item.mainImage[0]"
+                mode="aspectFill"
+              ></image>
+            </view>
+            <view class="tn-blogger-content__label tn-text-justify">
+              <text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-padding">{{ item.desc }}</text>  
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+              <view class="justify-content-item tn-flex tn-flex-col-center">
+                <view style="margin-right: 10rpx;margin-left: 0rpx;">
+                  <view class="tn-color-gray tn-padding">
+                    <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                    <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                    <text class="tn-padding-right">{{ item.commentCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                    <text class="">{{ item.likeCount }}</text>
+                  </view>
+                </view>
+              </view>
+              <view class="justify-content-item tn-text-center">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                  <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+                </view>
+                
+              </view>
+            </view>
+          </view>
+          
+        </block>
+      </view>
+      
+      
+    </view>
+    
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-qr-code tn-color-white">
+          </view>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">粤码通城</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <view class="tn-icon-emoji-good tn-color-gray--dark">
+          </view>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateScreen',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        content: [
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage:[
+              'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            ],
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage:[
+              'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            ],
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage:[
+              'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            ],
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['站点','链接'],
+            desc: 'https://www.yuque.com/tuniao',
+            mainImage:[
+              'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg',
+            ],
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage:[
+              'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
+            ],
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 65
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 71%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 60rpx 0;
+        font-size: 24rpx;
+        // background-color: rgba(255,255,255,0.1);
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+      }
+    }
+  }
+  /* 自定义导航栏内容 end */
+  
+  .screen-shadow{
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      border-radius: 20rpx;
+  }
+  
+  /* 图标容器12 start */
+  .icon12 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+  
+            
+        }
+      }
+    }
+  }
+  
+  
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.09);
+      border-radius: 20rpx;
+      margin: 30rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 55rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx 16rpx 0 0;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 40rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-qrcode{
+    padding: 180rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+  /* 文章内容 end*/
+   
+  /* 移动背景部分 start*/
+  .bg-contaniner {
+    position: fixed;
+    top: 0rpx;
+    left: 0rpx;
+    --text-color: hsl(0 95% 60%);
+    --bg-color: hsl(0 0% 100%);
+    --bg-size: 750rpx;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    place-content: center;
+    overflow: hidden;
+    background-color: #4392F4;
+    z-index: -1;
+  }
+  
+  .bg-contaniner::before {
+    --size: 150vmax;
+  
+    grid-area: body;
+    content: "";
+    inline-size: var(--size);
+    block-size: var(--size);
+    background-image: url("https://tnuiimage.tnkjapp.com/animate/health.png");
+    background-size: var(--bg-size);
+    background-repeat: repeat;
+    transform: rotate(0deg);
+    opacity: 0.15;
+    animation: bg 6s linear infinite;
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .bg-contaniner::before {
+      animation-duration: 0s;
+    }
+  }
+  
+  @keyframes bg {
+    to {
+      background-position: 0 calc(var(--bg-size) * -1);
+    }
+  }
+  /* 移动背景部分 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+  
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: -60rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+    background-color: #01BEFF;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+</style>
diff --git a/templatePage/home/course/course.vue b/templatePage/home/course/course.vue
new file mode 100644
index 0000000..27b7cb5
--- /dev/null
+++ b/templatePage/home/course/course.vue
@@ -0,0 +1,732 @@
+<template>
+  <view class="template-course tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">搜搜学习资料</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-swiper :list="banner" :height="350" :effect3d="false" mode="dot"></tn-swiper>
+    </view>
+    
+    <view class="tn-padding-top-xs">
+      <!-- 方式15 start-->
+      <view class="tn-flex tn-margin tn-flex-row-center tn-bg-white course-shadow course-radius">
+        <view class="tn-padding-sm tn-margin-xs">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+              <view class="tn-icon-calendar"></view>
+            </view>  
+            <view class="tn-text-center">
+              <text class="tn-text-ellipsis">课程安排</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-bluepurple tn-color-white">
+              <view class="tn-icon-trophy"></view>
+            </view>  
+            <view class="tn-text-center">
+              <text class="tn-text-ellipsis">获奖公告</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-indigo tn-color-white">
+              <view class="tn-icon-company"></view>
+            </view>  
+            <view class="tn-text-center">
+              <text class="tn-text-ellipsis">校园活动</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
+              <view class="tn-icon-comment"></view>
+            </view>  
+            <view class="tn-text-center">
+              <text class="tn-text-ellipsis">家长反馈</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式15 end-->
+
+      <view class="tn-flex tn-flex-row-between tn-margin-sm tn-padding-top">
+        <view class="justify-content-item tn-text-bold tn-text-xl">
+          <text class="tn-icon-title "></text>
+          <text class="">教育专栏</text>
+        </view>
+        <view class="justify-content-item tn-text-lg">
+          <text class="tn-padding-xs">更多</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>     
+      
+      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
+        <block v-for="(item, index) in tuniaoData" :key="index">
+          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-bg-blue--light tn-shadow-blur">
+            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+              <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center tn-color-white" :class="[`tn-bg-${item.color}--disabled`]">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+              <view class="tn-info__item__left__content">
+                <view class="tn-info__item__left__content--title tn-text-xl tn-color-aquablue--dark">{{ item.title }}</view>
+                <!-- <view class="tn-info__item__left__content--data tn-padding-top-xs tn-color-black">
+                {{ item.value }}
+                  <text class="tn-icon-right tn-padding-left-xs"></text>
+                </view> -->
+              </view>
+            </view>
+            <!-- <view class="tn-info__item__right">
+              <view class="tn-info__item__right--icon">
+                <view :class="[`tn-icon-${item.icon}`]"></view>
+              </view>
+            </view> -->
+          </view>
+        </block>
+      </view>
+      
+      
+      <view class="tn-flex tn-flex-row-between tn-margin-sm">
+        <view class="justify-content-item tn-text-bold tn-text-xl">
+          <text class="tn-icon-title "></text>
+          <text class="">学习交流</text>
+        </view>
+        <view class="justify-content-item tn-text-lg">
+          <text class="tn-padding-xs">更多</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>       
+       
+      <!-- 比例 start-->
+      <view class="tn-flex tn-flex-wrap tn-margin-sm">
+        <block v-for="(item, index) in content" :key="index">
+          <view class="" style="width: 50%;">
+            <view class="tn-blogger-content__wrap">
+              <view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+                <view class="image-music">
+                </view>
+              </view> 
+              
+              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
+                <text class="tn-blogger-content__label__desc">{{ item.desc }}</text>  
+              </view>
+              
+              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
+                <view class="justify-content-item tn-flex tn-flex-col-center">
+                  <view style="margin-right: 10rpx;margin-left: 20rpx;">
+                    <tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
+                  </view>
+                  <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
+                </view>
+              </view>
+              
+              
+            </view>
+          </view>
+        </block>
+      </view>
+      <!-- 比例 end-->
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
+        </view>
+        <view class="tn-color-black">课程</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-watercup tn-color-gray">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
+        </view>
+        <view class="tn-color-gray">精选</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-ticket tn-color-gray">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
+        </view>
+        <view class="tn-color-gray">播放</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+        }],
+        tuniaoData: [
+          {
+            title: '热门专栏',
+            icon: 'fire-fill',
+            color: 'red',
+            value: '我就看看'
+          },
+          {
+            title: '优秀讲师',
+            icon: 'praise-fill',
+            color: 'blue',
+            value: '我就看看'
+          },
+          {
+            title: '必看攻略',
+            icon: 'cardbag-fill',
+            color: 'orange',
+            value: '我就看看'
+          },
+          {
+            title: '课程排行',
+            icon: 'honor-fill',
+            color: 'purple',
+            value: '我就看看'
+          }
+        ],
+        content: [
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 999,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['炸串','火锅'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '我们都是好孩子',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['烤肉','烤肉'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  /*logo start */
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  /* 自定义导航栏内容 end */
+  
+  /* 内容布局 start*/
+  .course-shadow{
+    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .course-radius{
+    border-radius: 15rpx;
+  }
+  
+  /* 图标容器15 start */
+  .icon15 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+  
+            
+        }
+      }
+    }
+  }
+  
+  /* 业务展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 10rpx;
+      margin-bottom: 50rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 40rpx 30rpx;
+      border-radius: 15rpx;
+      
+  
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
+        }
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 30%;
+          font-size: 50rpx;
+          margin-right: 20rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          }
+        }
+        
+        &__content {
+          font-size: 30rpx;
+          
+          &--data {
+            margin-top: 5rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          position: absolute;
+          right: 0upx;
+          top: 50upx;
+          font-size: 100upx;
+          width: 108upx;
+          height: 108upx;
+          text-align: center;
+          line-height: 60upx;
+          opacity: 0.15;  
+        }
+      }
+    }
+  }
+  /* 业务展示 end */
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      border-radius: 20rpx;
+      margin: 15rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #82B2FF;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 35rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx 16rpx 0 0;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 30rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-music{
+    padding: 100rpx 0rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  /* 文章内容 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+</style>
diff --git a/templatePage/home/design/design.vue b/templatePage/home/design/design.vue
new file mode 100644
index 0000000..09ca707
--- /dev/null
+++ b/templatePage/home/design/design.vue
@@ -0,0 +1,527 @@
+<template>
+  <view class="template-design tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 页面内容 -->
+    <view>
+      <tn-swiper :list="banner" :height="1000" :effect3d="false" mode="number"></tn-swiper>
+    </view>
+    
+    <!-- 方式10 start-->
+    <view class="tn-flex tn-margin-top">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+            <view class="tn-icon-image-fill"></view>
+          </view>  
+          <view class="tn-color-black tn-text-lg tn-text-center">
+            <text class="tn-text-ellipsis">相册</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+            <view class="tn-icon-live-stream-fill"></view>
+          </view>  
+          <view class="tn-color-black tn-text-lg tn-text-center">
+            <text class="tn-text-ellipsis">视频</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
+            <view class="tn-icon-image-text-fill"></view>
+          </view>  
+          <view class="tn-color-black tn-text-lg tn-text-center">
+            <text class="tn-text-ellipsis">日志</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
+            <view class="tn-icon-topics-fill"></view>
+          </view>  
+          <view class="tn-color-black tn-text-lg tn-text-center">
+            <text class="tn-text-ellipsis">话题</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
+            <view class="tn-icon-discover-fill"></view>
+          </view>  
+          <view class="tn-color-black tn-text-lg tn-text-center">
+            <text class="tn-text-ellipsis">发现</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式10 end-->
+    
+    
+    <!-- 图文 -->
+    <view class="tn-flex tn-flex-direction-column">
+      
+      <block v-for="(item,index) in content" :key="index">
+        <view class="tn-blogger-content__wrap">
+          <view class="tn-padding-top-xs">
+            <!-- 方式一 -->
+            <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-design">
+              </view>
+            </view>
+            <!-- 方式二 -->
+            <!-- <image 
+              class="tn-blogger-content__main-image tn-shadow tn-blogger-content__main-image--1 tn-margin-bottom-sm"
+              :src="item.mainImage"
+              mode="aspectFill"
+            ></image> -->
+          </view>
+          <view class="tn-blogger-content__label tn-text-justify tn-margin-top tn-margin-bottom-sm">
+            <text class="tn-blogger-content__label__desc tn-text-bold tn-text-xl">{{ item.desc }}</text>  
+          </view>
+          
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+            <view class="justify-content-item tn-flex tn-flex-col-center">
+              <view style="margin-right: 10rpx;margin-left: 0rpx;">
+                <view class="tn-color-gray">
+                  <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                  <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                  <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                  <text class="tn-padding-right">{{ item.commentCount }}</text>
+                  <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="justify-content-item tn-text-center">
+              <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+              </view>
+              
+            </view>
+          </view>
+        </view>
+        
+        <!-- 边距间隔 -->
+        <view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
+      </block>
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image>
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">案例</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateDesign',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper2.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper3.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/swiper4.jpg'
+        }],
+        content: [
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 999,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '我们都是好孩子',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-design{
+  }
+    /* 图标容器10 start */
+      .icon10 {
+        &__item {
+          width: 30%;
+          background-color: #FFFFFF;
+          border-radius: 10rpx;
+          padding: 30rpx;
+          margin: 20rpx 10rpx;
+          transform: scale(1);
+          transition: transform 0.3s linear;
+          transform-origin: center center;
+          
+          &--icon {
+            width: 84rpx;
+            height: 65rpx;
+            font-size: 45rpx;
+            border-radius: 200rpx;
+            margin-bottom: 18rpx;
+            position: relative;
+            z-index: 1;
+            
+            &::after {
+              content: " ";
+              position: absolute;
+              z-index: -1;
+              width: 100%;
+              height: 100%;
+              left: 0;
+              bottom: 0;
+              border-radius: inherit;
+              opacity: 1;
+              transform: scale(1, 1);
+              background-size: 100% 100%;
+              background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+            }
+          }
+        }
+      }
+    /* 图标容器10 end */
+    
+    /* 文章内容 start*/
+    .tn-blogger-content {
+      &__wrap {
+        padding: 30rpx;
+      }
+      
+      &__info {
+        &__btn {
+          margin-right: -12rpx;
+          opacity: 0.5;
+        }
+      }
+      
+      &__label {
+        &__item {
+          line-height: 45rpx;
+          padding: 0 20rpx;
+          margin: 5rpx 18rpx 0 0;
+          
+          &--prefix {
+            color: #00FFC8;
+            padding-right: 10rpx;
+          }
+        }
+        
+        &__desc {
+          line-height: 55rpx;
+        }
+      }
+      
+      &__main-image {
+        box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
+        border-radius: 16rpx;
+        
+        &--1 {
+          max-width: 690rpx;
+          min-width: 690rpx;
+          max-height: 400rpx;
+          min-height: 400rpx;
+        }
+        
+        &--2 {
+          max-width: 260rpx;
+          max-height: 260rpx;
+        }
+        
+        &--3 {
+          height: 212rpx;
+          width: 100%;
+        }
+      }
+      
+      &__count-icon {
+        font-size: 40rpx;
+        padding-right: 5rpx;
+      }
+    }
+    
+    .image-design{
+      padding: 180rpx 0rpx;
+      font-size: 40rpx;
+      font-weight: 300;
+      position: relative;
+    }
+    .image-pic{
+      background-size: cover;
+      background-repeat:no-repeat;
+      // background-attachment:fixed;
+      background-position:top;
+      border-radius: 10rpx;
+    }
+    /* 文章内容 end*/
+     
+     /* 间隔线 start*/
+    .tn-strip-bottom {
+     width: 100%;
+     border-bottom: 20rpx solid rgba(241, 241, 241, 0.3);
+    }
+     /* 间隔线 end*/
+
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+    
+</style>
diff --git a/templatePage/home/job/job.vue b/templatePage/home/job/job.vue
new file mode 100644
index 0000000..1816041
--- /dev/null
+++ b/templatePage/home/job/job.vue
@@ -0,0 +1,558 @@
+<template>
+  <view class="template-job tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 返回按钮 -->
+        <view class="custom-nav__back">
+          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">好想搜点什么</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-swiper :list="banner" :height="350" :effect3d="true" mode="round"></tn-swiper>
+    </view>
+    
+    <!-- 数据信息 -->
+    <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin">
+      <block v-for="(item, index) in tuniaoData" :key="index">
+        <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between job-shadow">
+          <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
+            <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center tn-color-white" :class="[`tn-bg-${item.color}`]">
+              <view :class="[`tn-icon-${item.icon}`]"></view>
+            </view>
+            <view class="tn-info__item__left__content">
+              <view class="tn-info__item__left__content--title">{{ item.title }}</view>
+              <view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
+            </view>
+          </view>
+          <view class="tn-info__item__right">
+            <view class="tn-info__item__right--icon">
+              <view class="tn-icon-right"></view>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+    
+    <!-- 方式16 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin job-shadow">
+      <block v-for="(item, index) in icons" :key="index">
+        <view class=" " style="width: 25%;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center  tn-padding-xl">
+            <view class="icon16__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <view class="tn-cool-color-icon16" :class="[$tn.color.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
+            </view>  
+            <view class="tn-color-black tn-text-lg tn-text-center">
+              <text class="tn-text-ellipsis">{{item.title}}</text>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+    <!-- 方式16 end-->
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-level">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
+        </view>
+        <view class="tn-color-black">职位</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-level">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
+        </view>
+        <view class="tn-color-black">简历</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-message-fill tn-color-white">
+          </view>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-level">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
+        </view>
+        <view class="tn-color-black">提升</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+         <!-- <view class="tn-icon-signpost tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateJob',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+        }],
+        tuniaoData: [
+          {
+            title: '职位推荐',
+            icon: 'praise',
+            color: 'purplered',
+            value: '32'
+          },
+          {
+            title: '课程专区',
+            icon: 'discover',
+            color: 'green',
+            value: '65'
+          },
+          {
+            title: '精选专题',
+            icon: 'topics',
+            color: 'orange',
+            value: '26'
+          },
+          {
+            title: '在线简历',
+            icon: 'honor',
+            color: 'indigo',
+            value: '6'
+          }
+        ],
+        icons: [
+          {
+            icon: "shop",
+            title: "电商",
+          },
+          {
+            icon: "video",
+            title: "直播",
+          },
+          {
+            icon: "company",
+            title: "建筑",
+          },
+          {
+            icon: "computer",
+            title: "互联网",
+          },
+          {
+            icon: "focus",
+            title: "猎头",
+          },
+          {
+            icon: "sing",
+            title: "音乐",
+          },
+          {
+            icon: "code",
+            title: "软件开发",
+          },
+          {
+            icon: "medical",
+            title: "医疗",
+          },
+          {
+            icon: "biology",
+            title: "生物",
+          },
+          {
+            icon: "pharmacy",
+            title: "制药",
+          },
+          {
+            icon: "chemistry",
+            title: "化学",
+          },
+          {
+            icon: "creative",
+            title: "教师",
+          },
+          {
+            icon: "gloves",
+            title: "行政文秘",
+          },
+          {
+            icon: "caring",
+            title: "通信技术",
+          },
+          {
+            icon: "refund",
+            title: "外贸",
+          },
+          {
+            icon: "level",
+            title: "土木",
+          },
+          {
+            icon: "deploy",
+            title: "机械",
+          },
+          {
+            icon: "server",
+            title: "电气",
+          },
+          {
+            icon: "hardware",
+            title: "电子",
+          },
+          {
+            icon: "group-circle",
+            title: "化工",
+          },
+          {
+            icon: "cube",
+            title: "材料",
+          },
+          {
+            icon: "safe",
+            title: "保险",
+          },
+          {
+            icon: "coupon",
+            title: "证券",
+          },
+          {
+            icon: "funds",
+            title: "银行",
+          },
+          {
+            icon: "map",
+            title: "会展",
+          },
+          {
+            icon: "service",
+            title: "客服",
+          },
+          {
+            icon: "trophy",
+            title: "销售",
+          },
+          {
+            icon: "image-text",
+            title: "编辑运营",
+          },
+          {
+            icon: "brand",
+            title: "投行",
+          },
+          {
+            icon: "trusty",
+            title: "法务",
+          },
+          {
+            icon: "comment",
+            title: "咨询",
+          },
+          {
+            icon: "logistics",
+            title: "快递物流",
+          },
+          {
+            icon: "moon",
+            title: "艺术设计",
+          },
+          {
+            icon: "bankcard",
+            title: "财务",
+          },
+          {
+            icon: "trust",
+            title: "人力",
+          },
+          {
+            icon: "flag",
+            title: "市场营销",
+          },
+          {
+            icon: "signpost",
+            title: "其他",
+          }
+          
+
+        ],
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-job{
+  }
+  /* 自定义导航栏内容 start */
+    .custom-nav {
+      height: 100%;
+      
+      &__back {
+        margin: auto 5rpx;
+        font-size: 40rpx;
+        margin-right: 10rpx;
+        margin-left: 30rpx;
+        flex-basis: 5%;
+      }
+      
+      &__search {
+        flex-basis: 60%;
+        width: 100%;
+        height: 100%;
+        
+        &__box {
+          width: 100%;
+          height: 70%;
+          padding: 10rpx 0;
+          margin: 0 30rpx;
+          border-radius: 60rpx 60rpx 0 60rpx;
+          font-size: 24rpx;
+          background-color: rgba(255,255,255,0.2);
+        }
+        
+        &__icon {
+          padding-right: 10rpx;
+          margin-left: 20rpx;
+          font-size: 30rpx;
+        }
+        
+        &__text {
+        }
+      }
+    }
+    /* 自定义导航栏内容 end */
+    
+    /*logo start */
+    .logo-image{
+      width: 65rpx;
+      height: 65rpx;
+      position: relative;
+    }
+    .logo-pic{
+      background-size: cover;
+      background-repeat:no-repeat;
+      // background-attachment:fixed;
+      background-position:top;
+      border-radius: 50%;
+    }
+    
+
+  /* 信息展示 start */
+  .tn-info {
+    
+    &__container {
+      margin-top: 40rpx;
+    }
+    
+    &__item {
+      width: 48%;
+      margin: 15rpx 0rpx;
+      padding: 38rpx 28rpx;
+      border-radius: 10rpx;
+      
+      &__left {
+        
+        &--icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          font-size: 40rpx;
+          margin-right: 20rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg3.png);
+          }
+        }
+        
+        &__content {
+          font-size: 30rpx;
+          
+          &--data {
+            margin-top: 5rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      &__right {
+        &--icon {
+          font-size: 30rpx;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .job-shadow{
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      border-radius: 20rpx;
+  }
+  /* 信息展示 end */
+  
+  /* 图标容器16 start */
+  .tn-cool-color-icon16{
+    // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
+    // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+    .icon16 {
+      &__item {
+        // width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 0rpx;
+        margin: 0rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 100rpx;
+          height: 100rpx;
+          font-size: 70rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+  /* 图标容器16 end */
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+  
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: -30rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+  	background-color: #E72F8C;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+</style>
diff --git a/templatePage/home/music/music.vue b/templatePage/home/music/music.vue
new file mode 100644
index 0000000..1232af3
--- /dev/null
+++ b/templatePage/home/music/music.vue
@@ -0,0 +1,704 @@
+<template>
+  <view class="template-music tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 返回按钮 -->
+        <view class="custom-nav__back">
+          <view class="tn-icon-sing" style="font-size: 60rpx;"></view>
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-gray--dark tn-bg-gray--light">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-right">Craigie Hill 北北推荐吖</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="tn-margin-left tn-margin-right tn-margin-top-lg" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <tn-swiper :list="banner" :height="300" :effect3d="false" mode="round"></tn-swiper>
+    </view>
+    
+    <!-- 方式12 start-->
+    <view class="tn-flex tn-margin-sm">
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
+            <view class="tn-icon-like-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">心动模式</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
+            <view class="tn-icon-live-stream-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">优质MV</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
+            <view class="tn-icon-moon-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">动听单曲</text>
+          </view>
+        </view>
+      </view>
+      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
+            <view class="tn-icon-statistics-fill tn-three"></view>
+          </view>  
+          <view class="tn-color-black tn-text-center">
+            <text class="tn-text-ellipsis">排行榜</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 方式12 end-->
+    
+    <!-- 图文 -->
+    <!-- 比例 start-->
+    <view class="tn-flex tn-flex-wrap tn-margin-sm">
+      <block v-for="(item, index) in content" :key="index">
+        <view class="" style="width: 50%;">
+          <view class="tn-blogger-content__wrap">
+            <view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-music">
+              </view>
+            </view> 
+            
+            <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
+              <text class="tn-blogger-content__label__desc">{{ item.desc }}</text>  
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
+              <view class="justify-content-item tn-flex tn-flex-col-center">
+                <view>
+                  <view class="tn-color-gray">
+                    <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                    <text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                    <text class="tn-padding-right-sm">{{ item.commentCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                    <text class="">{{ item.likeCount }}</text>
+                  </view>
+                </view>
+              </view>
+              <!-- <view class="justify-content-item tn-text-center">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                  <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+                </view>
+              </view> -->
+            </view>
+            
+            
+          </view>
+        </view>
+      </block>
+    </view>
+    <!-- 比例 end-->
+    
+    
+    
+    <view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
+      
+      <block v-for="(item,index) in content" :key="index">
+        <view class="tn-blogger-content__wrap">
+          <view class="">
+            <!-- 方式一 -->
+            <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+              <view class="image-music">
+              </view>
+            </view>
+            <!-- 方式二 -->
+            <!-- <image 
+              class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
+              :src="item.mainImage"
+              mode="aspectFill"
+            ></image> -->
+          </view>
+          <view class="tn-blogger-content__label tn-text-justify tn-margin">
+            <text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold">{{ item.desc }}</text>  
+          </view>
+          
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+            <view class="justify-content-item tn-flex tn-flex-col-center">
+              <view style="margin-right: 10rpx;margin-left: 0rpx;">
+                <view class="tn-color-gray tn-padding-left tn-padding-right tn-padding-bottom">
+                  <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                  <text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
+                  <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                  <text class="tn-padding-right-sm">{{ item.commentCount }}</text>
+                  <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                  <text class="">{{ item.likeCount }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="justify-content-item tn-text-center tn-padding-bottom">
+              <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+              </view>
+              
+            </view>
+          </view>
+        </view>
+        
+      </block>
+    </view>
+    
+    <view class="tabbar footerfixed">
+      <view class="action navbar__item -blue">
+        <view class="bar-icon">
+          <view class="tn-icon-home-capsule navbar__icon">
+          </view>
+        </view>
+        <view class="-blue bar-text">
+          <text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">首页</text>
+        </view>
+      </view>
+      <view class="action navbar__item -orange">
+        <view class="bar-icon">
+          <view class="tn-icon-discover-planet navbar__icon">
+          </view>
+        </view>
+        <view class="-orange bar-text">
+          <text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">圈子</text>
+        </view>
+      </view>
+      <view class="action navbar__item -yellow">
+        <view class="bar-icon">
+          <view class="tn-icon-honor navbar__icon">
+          </view>
+        </view>
+        <view class="-yellow bar-text">
+          <text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">榜单</text>
+        </view>
+      </view>
+      <view class="action navbar__item -purple">
+        <view class="bar-icon">
+          <view class="tn-icon-my navbar__icon">
+            <!-- <tn-badge :absolute="true">99+</tn-badge> -->
+          </view>
+        </view>
+        <view class="-purple bar-text">
+          <text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">我的</text>
+        </view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+  
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateMusic',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
+        }],
+        content: [
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 999,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '我们都是好孩子',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-music{
+  }
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 0 60rpx;
+        font-size: 24rpx;
+        background-color: rgba(255,255,255,0.2);
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+      }
+    }
+  }
+  /* 自定义导航栏内容 end */
+  
+  /* 图标容器12 start */
+  .tn-three{
+      position: absolute;
+      top: 50%;
+      right: 50%;
+      bottom: 50%;
+      left: 50%;
+      transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
+      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
+  }
+  .icon12 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+  
+            
+        }
+      }
+    }
+  }
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
+      border-radius: 20rpx;
+      margin: 15rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #82B2FF;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 35rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx 16rpx 0 0;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 30rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-music{
+    padding: 150rpx 0rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 20rpx 20rpx 0 0;
+  }
+  /* 文章内容 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+  
+  /* 底部标签栏动画 */
+  .navbar__item .bar-text {
+    font-variant: small-caps;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    position: relative;
+    width: 50rpx;
+    height: 50rpx;
+    background-size: cover;
+    background-position: center;
+    vertical-align: middle;
+    background-color: currentColor;
+    border-radius: 50%;
+    transform: scale(0.8);
+    opacity: 0;
+    transition: all 0.55s cubic-bezier(0.71, 0.03, 0.23, 0.95);
+  }
+  
+  .navbar__item.-blue {
+    color: #06b8ff;
+  }
+  
+  .navbar__item.-orange {
+    color: #f2704d;
+  }
+  
+  .navbar__item.-yellow {
+    color: #f8cd4b;
+  }
+  
+  .navbar__item.-purple {
+    color: #8444d6;
+  }
+  
+  .bar-text.-blue {
+    color: #06b8ff;
+  }
+  
+  .bar-text.-orange {
+    color: #f2704d;
+  }
+  
+  .bar-text.-yellow {
+    color: #f8cd4b;
+  }
+  
+  .bar-text.-purple {
+    color: #8444d6;
+  }
+  
+  .navbar__item:hover .bar-text {
+    transform: translateY(-74rpx) scale(1.4);
+    opacity: 1;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
+      -1px -1px 5px rgba(255, 255, 255, 1);
+  }
+  
+  .navbar__item:hover::before {
+    opacity: 1;
+  }
+  
+  .navbar__item:hover::after {
+    opacity: 0.4;
+  }
+  
+  .navbar__item:hover .navbar__icon {
+    transform: translateY(-42rpx) scale(1);
+    color: #fff;
+    transition-delay: 0.1s, 0.1s;
+  }
+  
+  .navbar__icon {
+    bottom: -26rpx;
+    transition: all 0.5s cubic-bezier(0.71, 0.03, 0.23, 0.95);
+    transition-delay: 0.1s;
+    display: inline-block;
+    position: relative;
+    z-index: 2;
+  }
+</style>
diff --git a/templatePage/home/screen/screen.vue b/templatePage/home/screen/screen.vue
new file mode 100644
index 0000000..f35e3bf
--- /dev/null
+++ b/templatePage/home/screen/screen.vue
@@ -0,0 +1,704 @@
+<template>
+  <view class="template-screen tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#3D7EFF80">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 按钮 -->
+        <view class="custom-nav__back">
+          <view class="tn-icon-caring tn-color-white" style="font-size: 60rpx;"></view>
+        </view>
+        <!-- 搜索框 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-white">
+            <view class="custom-nav__search__icon tn-icon-search"></view>
+            <view class="custom-nav__search__text tn-padding-left-xs">试试搜索“电影投屏”</view>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    <!-- 页面内容 -->
+    <view class="bg-contaniner tn-bg-blue">
+      
+    </view>
+    <view class="tn-margin-top-lg" style="padding-bottom: 120rpx;">
+      <view class="tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+        <tn-swiper :list="banner" :height="350" :effect3d="false" mode="dot"></tn-swiper>
+      </view>
+      <!-- 方式15 start-->
+      <view class="tn-flex tn-margin-sm tn-flex-row-center tn-radius"> 
+        <view class="tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
+              <view class="tn-icon-scan"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">扫码投屏</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
+              <view class="tn-icon-share-circle"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">邀请投屏</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
+              <view class="tn-icon-star"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">收藏投屏</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
+              <view class="tn-icon-set"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">投屏设置</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式15 end-->
+    </view>
+    
+    <view class="tn-bg-white" style="margin-top: -100rpx;border-radius: 50rpx 50rpx 0 0;">
+      <!-- 方式7 start-->
+      <view class="tn-flex tn-margin-xs tn-padding-top-xl">
+        <view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/icon/5.jpg' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-black tn-text-lg ">资料投屏</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark">选择资料投屏</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/icon/6.jpg' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-black tn-text-lg ">文件投屏</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark">选择文件投屏</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <view class="tn-flex tn-margin-xs" style="margin-top: -10rpx;">
+        <view class="tn-flex-1  screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/icon/7.jpg' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-black tn-text-lg ">电脑投屏</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark">匹配电脑投屏</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1  screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/icon/8.jpg' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-black tn-text-lg ">文档投屏</view>
+              <view class="tn-text-ellipsis tn-color-gray--dark">选择文档投屏</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式7 end-->
+      
+      <!-- 图文 -->
+      <view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 110rpx;">
+        
+        <block v-for="(item,index) in content" :key="index">
+          <view class="tn-blogger-content__wrap">
+            <view class="">
+              <!-- 方式一 -->
+              <!-- <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+                <view class="image-screen">
+                </view>
+              </view> -->
+              <!-- 方式二 -->
+              <image 
+                class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
+                :src="item.mainImage"
+                mode="aspectFill"
+              ></image>
+            </view>
+            <view class="tn-blogger-content__label tn-text-justify">
+              <text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-padding">{{ item.desc }}</text>  
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+              <view class="justify-content-item tn-flex tn-flex-col-center">
+                <view style="margin-right: 10rpx;margin-left: 0rpx;">
+                  <view class="tn-color-gray tn-padding">
+                    <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                    <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                    <text class="tn-padding-right">{{ item.commentCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                    <text class="">{{ item.likeCount }}</text>
+                  </view>
+                </view>
+              </view>
+              <view class="justify-content-item tn-text-center">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                  <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+                </view>
+                
+              </view>
+            </view>
+          </view>
+          
+        </block>
+      </view>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-level">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
+        </view>
+        <view class="tn-color-black">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-discover-planet tn-color-white">
+          </view>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+         <!-- <view class="tn-icon-signpost tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateScreen',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        banner: [{
+          image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+        }, {
+          image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+        }],
+        content: [
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 999,
+            commentCount: 999,
+            likeCount: 999
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '我们都是好孩子',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          },
+          {
+            userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+            userName: '可我会像',
+            date: '2021年12月20日',
+            label: ['开源','创意'],
+            desc: '免费开源可商用组件',
+            mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+            viewUser: {
+              latestUserAvatar: [
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+              ],
+              viewUserCount: 129
+            },
+            collectionCount: 265,
+            commentCount: 22,
+            likeCount: 62
+          }
+        ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 60%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+        border-radius: 60rpx 60rpx 60rpx 0;
+        font-size: 24rpx;
+        background-color: rgba(255,255,255,0.1);
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+      }
+    }
+  }
+  /* 自定义导航栏内容 end */
+  
+  .screen-shadow{
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      border-radius: 20rpx;
+  }
+  /* 图标容器15 start */
+  .icon15 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+  
+            
+        }
+      }
+    }
+  }
+  
+  /* 图标容器7 start */
+      .icon7 {
+        &__item {
+          width: 30%;
+          background-color: #FFFFFF;
+          border-radius: 10rpx;
+          padding: 10rpx;
+          margin: 20rpx 10rpx;
+          transform: scale(1);
+          transition: transform 0.3s linear;
+          transform-origin: center center;
+          
+          &--icon {
+            width: 100rpx;
+            height: 100rpx;
+            font-size: 60rpx;
+            border-radius: 0;
+            margin-bottom: 18rpx;
+            position: relative;
+            z-index: 1;
+          }
+        }
+      }
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.09);
+      border-radius: 20rpx;
+      margin: 30rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 55rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx 16rpx 0 0;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 40rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-screen{
+    padding: 180rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+  /* 文章内容 end*/
+   
+  /* 移动背景部分 start*/
+  .bg-contaniner {
+    position: fixed;
+    top: -0rpx;
+    left: -300rpx;
+    --text-color: hsl(0 95% 60%);
+    --bg-color: hsl(0 0% 100%);
+    --bg-size: 200px;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    place-content: center;
+    overflow: hidden;
+    background-color: var(--bg-color);
+    z-index: -1;
+  }
+  
+  .bg-contaniner::before {
+    --size: 150vmax;
+    content: "";
+    inline-size: var(--size);
+    block-size: var(--size);
+    background-image: url("https://tnuiimage.tnkjapp.com/animate/animate3.png");
+    background-size: var(--bg-size);
+    background-repeat: repeat;
+    transform: rotate(45deg);
+    opacity: 0.25;
+    animation: bg 6s linear infinite;
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .bg-contaniner::before {
+      animation-duration: 0s;
+    }
+  }
+  
+  @keyframes bg {
+    to {
+      background-position: 0 calc(var(--bg-size) * -1);
+    }
+  }
+  /* 移动背景部分 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #FFFFFF;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+  
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: -30rpx auto 20rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+  	background-color: #FFCA28;
+    width: 90rpx !important;
+    height: 90rpx !important;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(255, 202, 40, 0.5);
+  }
+  
+  .tabbar .action .bar-circle image {
+    width: 60rpx;
+  	height: 60rpx;
+  	display: inline-block;
+    margin: 15rpx auto 15rpx;
+  }
+</style>
diff --git a/templatePage/home/wallpaper/wallpaper.vue b/templatePage/home/wallpaper/wallpaper.vue
new file mode 100644
index 0000000..df3614b
--- /dev/null
+++ b/templatePage/home/wallpaper/wallpaper.vue
@@ -0,0 +1,614 @@
+<template>
+  <view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#343434">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 返回按钮 -->
+        <view class="custom-nav__back">
+          <view class="logo-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
+            <view class="logo-image">
+            </view>
+          </view> 
+          <!-- <view class="tn-icon-left"></view> -->
+        </view>
+        <!-- 字 -->
+        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
+          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-white">
+            <text class="tn-text-bold tn-text-xxl">北北壁纸库</text>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <!-- 页面内容-->
+    <view class="">
+      <view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+        <tn-swiper :list="banner" :height="350" :effect3d="false" mode="rect"></tn-swiper>
+      </view>
+      
+      <!-- 方式12 start-->
+      <view class="tn-flex tn-margin-sm">
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-orange--light tn-color-orange">
+              <view class="tn-icon-moon-fill tn-three"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">高清壁纸</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purple--light tn-color-purple">
+              <view class="tn-icon-light-fill tn-three"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">热门排行</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-indigo--light tn-color-indigo">
+              <view class="tn-icon-star-fill tn-three"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">文艺可爱</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purplered--light tn-color-purplered">
+              <view class="tn-icon-like-fill tn-three"></view>
+            </view>  
+            <view class="tn-color-white tn-text-center">
+              <text class="tn-text-ellipsis">精选壁纸</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式12 end-->
+      
+      <!-- banner start-->
+      <view class="tn-flex tn-flex-wrap tn-margin-xs">
+        <view class=" " style="width: 100%;">
+          <view class="image-pic tn-margin-sm" style="background-image:url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')">
+             <view class="image-wallpaper">
+             </view>
+           </view>  
+        </view>  
+      </view>
+      <!-- banner end-->
+      
+      <!-- 比例 start-->
+      <view class="tn-flex tn-flex-wrap tn-margin-xs">
+        <block v-for="(item, index) in pic" :key="index">
+          <view class=" " style="width: 50%;">
+            <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.image + ')'">
+              <view class="image-wallpaper">
+              </view>
+            </view>  
+          </view>
+        </block>
+      </view>
+      <!-- 比例 end-->
+      
+      <!-- 图文 -->
+      <view class="tn-flex tn-flex-direction-column">
+        
+        <block v-for="(item,index) in content" :key="index">
+          <view class="tn-blogger-content__wrap">
+            <view class="">
+              <image 
+                class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom tn-margin-top"
+                :src="item.mainImage"
+                mode="aspectFill"
+              ></image>
+            </view>
+            <view class="tn-blogger-content__label tn-text-justify">
+              <text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-color-white">{{ item.desc }}</text>  
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
+              <view class="justify-content-item tn-flex tn-flex-col-center">
+                <view style="margin-right: 10rpx;margin-left: 0rpx;">
+                  <view class="tn-color-gray">
+                    <text class="tn-blogger-content__count-icon tn-icon-flower"></text> 
+                    <text class="tn-padding-right">{{ item.collectionCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-message"></text>
+                    <text class="tn-padding-right">{{ item.commentCount }}</text>
+                    <text class="tn-blogger-content__count-icon tn-icon-like"></text>
+                    <text class="">{{ item.likeCount }}</text>
+                  </view>
+                </view>
+              </view>
+              <view class="justify-content-item tn-text-center">
+                <view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
+                  <text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
+                </view>
+                
+              </view>
+            </view>
+          </view>
+          
+        </block>
+      </view>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
+        </view>
+        <view class="tn-color-white">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-watercup tn-color-gray">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
+        </view>
+        <view class="tn-color-gray">投稿</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-ticket tn-color-gray">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateWallpaper',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        
+          banner: [{
+            image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
+          }],
+          pic: [{
+            image: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg'
+          },{
+            image: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg'
+          }, {
+            image: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg'
+          }],
+          content: [
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 999,
+              commentCount: 999,
+              likeCount: 999
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '我们都是好孩子',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            },
+            {
+              userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
+              userName: '可我会像',
+              date: '2021年12月20日',
+              label: ['开源','创意'],
+              desc: '免费开源可商用组件',
+              mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
+              viewUser: {
+                latestUserAvatar: [
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'},
+                  {src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'},
+                ],
+                viewUserCount: 129
+              },
+              collectionCount: 265,
+              commentCount: 22,
+              likeCount: 62
+            }
+          ]
+      }
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-wallpaper{
+  }
+/* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      margin-left: 30rpx;
+      flex-basis: 5%;
+    }
+    
+    &__search {
+      flex-basis: 70%;
+      width: 100%;
+      height: 100%;
+      
+      &__box {
+        width: 100%;
+        height: 70%;
+        padding: 10rpx 0;
+        margin: 0 30rpx;
+      }
+      
+      &__icon {
+        padding-right: 10rpx;
+        margin-left: 20rpx;
+        font-size: 30rpx;
+      }
+      
+      &__text {
+        color: #AAAAAA;
+      }
+    }
+  }
+  /* 自定义导航栏内容 end */
+  
+  /*logo start */
+  .logo-image{
+    width: 65rpx;
+    height: 65rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+  }
+  
+  /* 图标容器12 start */
+  .tn-three{
+      position: absolute;
+      top: 50%;
+      right: 50%;
+      bottom: 50%;
+      left: 50%;
+      transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
+      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
+  }
+  .icon12 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+  
+            
+        }
+      }
+    }
+  }
+  
+  /* 文章内容 start*/
+  .tn-blogger-content {
+    &__wrap {
+      margin: 30rpx;
+    }
+    
+    &__info {
+      &__btn {
+        margin-right: -12rpx;
+        opacity: 0.5;
+      }
+    }
+    
+    &__label {
+      &__item {
+        line-height: 45rpx;
+        padding: 0 20rpx;
+        margin: 5rpx 18rpx 0 0;
+        
+        &--prefix {
+          color: #00FFC8;
+          padding-right: 10rpx;
+        }
+      }
+      
+      &__desc {
+        line-height: 55rpx;
+      }
+    }
+    
+    &__main-image {
+      border-radius: 16rpx;
+      
+      &--1 {
+        max-width: 690rpx;
+        min-width: 690rpx;
+        max-height: 400rpx;
+        min-height: 400rpx;
+      }
+      
+      &--2 {
+        max-width: 260rpx;
+        max-height: 260rpx;
+      }
+      
+      &--3 {
+        height: 212rpx;
+        width: 100%;
+      }
+    }
+    
+    &__count-icon {
+      font-size: 40rpx;
+      padding-right: 5rpx;
+    }
+  }
+  
+  .image-wallpaper{
+    padding: 160rpx 0rpx;
+    font-size: 40rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 10rpx;
+  }
+  /* 文章内容 end*/
+  
+  /* 底部tabbar start*/
+  .footerfixed{
+   position: fixed;
+   width: 100%;
+   bottom: 0;
+   z-index: 999;
+   background-color: #080808;
+   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+  	padding: 0;
+  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+  
+  .tabbar .action {
+  	font-size: 22rpx;
+  	position: relative;
+  	flex: 1;
+  	text-align: center;
+  	padding: 0;
+  	display: block;
+  	height: auto;
+  	line-height: 1;
+  	margin: 0;
+  	overflow: initial;
+  }
+  
+  .tabbar .action .bar-icon {
+  	width: 100rpx;
+  	position: relative;
+  	display: block;
+  	height: auto;
+  	margin: 0 auto 10rpx;
+  	text-align: center;
+  	font-size: 42rpx;
+  }
+  
+  .tabbar .action .bar-icon image {
+  	width: 50rpx;
+  	height: 50rpx;
+  	display: inline-block;
+  }
+   
+</style>
diff --git a/templatePage/life/about/about.vue b/templatePage/life/about/about.vue
new file mode 100644
index 0000000..26e108c
--- /dev/null
+++ b/templatePage/life/about/about.vue
@@ -0,0 +1,267 @@
+<template>
+  <view class="template-bubble">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
+    
+    <view class="container about-bg" style="background-image:url('https://tnuiimage.tnkjapp.com/about/about.png')">
+    </view>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateBubble',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        windowHeight: 0,
+        windowWidth: 0,
+        actionTimer: null,
+        animationTimer: null,
+        queue: {},
+        ctx: null
+      }
+    },
+    onLoad() {
+      this.getSystemInfo()
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.queue = {}
+        this.ctx = uni.createCanvasContext("bubble", this)
+        
+        setTimeout(() => {
+          this.actionTimer = setInterval(() => {
+            this.generateBubble()
+          }, 500)
+        }, 1000)
+      })
+    },
+    onUnload() {
+      this.clearActionTimer()
+      this.clearAnimationTimer()
+    },
+    methods: {
+      // 获取系统信息
+      getSystemInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        if (!systemInfo) {
+          setTimeout(() => {
+            this.getSystemInfo()
+          }, 50)
+          return
+        }
+        
+        this.windowHeight = systemInfo.safeArea.height
+        this.windowWidth = systemInfo.safeArea.width
+      },
+      
+      // 生成泡泡
+      generateBubble() {
+        const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
+        uni.getImageInfo({
+          src: image,
+          success: (res) => {
+            if (res.errMsg === 'getImageInfo:ok') {
+              const anmationData = {
+                id: new Date().getTime(),
+                timer: 0,
+                opacity: 0,
+                pathData: this.generatePathData(),
+                image: res.path,
+                factor: {
+                  speed: 0.0006, // 运动速度，值越小越慢
+                  t: 0.1 //  贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
+                }
+              }
+              if (Object.keys(this.queue).length > 0) {
+                this.queue[anmationData.id] = anmationData
+              } else {
+                this.queue[anmationData.id] = anmationData
+                this.bubbleAnimate()
+              }
+            }
+          }
+        })
+      },
+      
+      /* 动画相关 */
+      // 生成运动的路径数据
+      generatePathData() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        const p0 = {
+          x: 0.72 * width,
+          y: height
+        }
+        const p1 = {
+          x: this.$tn.number.random(0.22 * width, 0.33 * width),
+          y: this.$tn.number.random(0.5 * height, 0.75 * height)
+        }
+        const p2 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0.25 * height, 0.5 * height)
+        }
+        const p3 = {
+          x: this.$tn.number.random(0, 0.88 * width),
+          y: this.$tn.number.random(0, 0.125 * height)
+        }
+        return [p0, p1, p2, p3]
+      },
+      // 更新运动的路径
+      updatePath(data, factor) {
+        const p0 = data[0]
+        const p1 = data[1]
+        const p2 = data[2]
+        const p3 = data[3]
+      
+        const t = factor.t
+      
+        /*计算多项式系数 （下同）*/
+        const cx1 = 3 * (p1.x - p0.x)
+        const bx1 = 3 * (p2.x - p1.x) - cx1
+        const ax1 = p3.x - p0.x - cx1 - bx1
+      
+        const cy1 = 3 * (p1.y - p0.y)
+        const by1 = 3 * (p2.y - p1.y) - cy1
+        const ay1 = p3.y - p0.y - cy1 - by1
+      
+        const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
+        const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
+        // console.log(p0.y, p1.y, p2.y, p3.y, y);
+        return {
+          x,
+          y
+        }
+      },
+      // 执行泡泡动画
+      bubbleAnimate() {
+        let width = this.windowWidth,
+          height = this.windowHeight;
+        Object.keys(this.queue).forEach(key => {
+          const anmationData = this.queue[+key];
+          const {
+            x,
+            y
+          } = this.updatePath(
+            anmationData.pathData,
+            anmationData.factor
+          )
+          const speed = anmationData.factor.speed
+          anmationData.factor.t += speed
+      
+          var curWidth = 30
+          curWidth = (height - y) / 1.5
+          curWidth = Math.min(30, curWidth)
+      
+          var curAlpha = anmationData.opacity
+          curAlpha = y / (0.3 * height) //消失的高度适当调一下
+          curAlpha = Math.min(1, curAlpha)
+          this.ctx.globalAlpha = curAlpha
+          this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
+          // this.ctx.setFillStyle('red')
+          // this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
+          if (anmationData.factor.t > 1) {
+            delete this.queue[anmationData.id]
+          }
+          if (y > height) {
+            delete this.queue[anmationData.id]
+          }
+        })
+        this.ctx.draw()
+        if (Object.keys(this.queue).length > 0) {
+          this.animationTimer = setTimeout(() => {
+            this.bubbleAnimate()
+          }, 5)
+        } else {
+          this.clearAnimationTimer()()
+          this.ctx.draw() // 清空画面
+        }
+      },
+      
+      // 清除定时器
+      clearActionTimer() {
+        if (this.actionTimer) {
+          clearInterval(this.actionTimer)
+        }
+      },
+      clearAnimationTimer() {
+        if (this.animationTimer) {
+          clearTimeout(this.animationTimer)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  .template-bubble {
+    margin: 0;
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+    /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
+    /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
+    /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
+    background-size: 500% 500%;
+    animation: gradientBG 15s ease infinite;
+    
+    position: relative;
+    
+    .bubble {
+      position: fixed;
+      bottom: -10vh;
+      right: 0;
+      z-index: 1024;
+      pointer-events: none;
+      // background-color: red;
+    }
+  }
+  
+  
+  .about-bg {
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+  }
+  
+
+  
+
+  @keyframes gradientBG {
+    0% {
+      background-position: 0% 50%;
+    }
+  
+    50% {
+      background-position: 100% 50%;
+    }
+  
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+  .container {
+    width: 100%;
+    position: absolute;
+    text-align: center;
+  }
+  
+</style>
diff --git a/templatePage/life/browser/browser.vue b/templatePage/life/browser/browser.vue
new file mode 100644
index 0000000..5541955
--- /dev/null
+++ b/templatePage/life/browser/browser.vue
@@ -0,0 +1,37 @@
+<template>
+  <view class="template-course">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+</style>
diff --git a/templatePage/life/candle/candle.vue b/templatePage/life/candle/candle.vue
new file mode 100644
index 0000000..ea883b1
--- /dev/null
+++ b/templatePage/life/candle/candle.vue
@@ -0,0 +1,625 @@
+<template>
+  <view class="template-candle">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="wrapper">
+      <view class="candles">
+        <view class="light__wave"></view>
+        <view class="candle1">
+          <view class="candle1__body">
+            <view class="candle1__eyes">
+              <view class="candle1__eyes-one"></view>
+              <view class="candle1__eyes-two"></view>
+            </view>
+            <view class="candle1__mouth"></view>
+          </view>
+          <view class="candle1__stick"></view>
+        </view>
+        <view class="candle2">
+          <view class="candle2__body">
+            <view class="candle2__eyes">
+              <view class="candle2__eyes-one"></view>
+              <view class="candle2__eyes-two"></view>
+            </view>
+          </view>
+          <view class="candle2__stick"></view>
+        </view>
+        <view class="candle2__fire"></view>
+        <view class="sparkles-one"></view>
+        <view class="sparkles-two"></view>
+        <view class="candle__smoke-one">
+        </view>
+        <view class="candle__smoke-two">
+        </view>
+      </view>
+      <view class="floor">
+      </view>
+    </view>
+    
+    <view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;overflow-y: hidden;">
+      敬请期待
+    </view>
+    
+    
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCandle',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 蜡烛 start*/
+  .template-candle{
+  }
+  .wrapper {
+    background: red;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: scale(1.5, 1.5) translate(-50%, -50%);
+  }
+  
+  .floor {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    height: 5px;
+    background: #673C63;
+    transform: translate(-50%, -50%);
+    box-shadow: 0px 2px 5px #111;
+    z-index: 2;
+  }
+  
+  .candles {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 250px;
+    height: 150px;
+    transform: translate(-50%, -100%);
+    z-index: 1;
+  }
+  
+  .candle1 {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 35px;
+    height: 100px;
+    background: #fff;
+    border: 3px solid #673C63;
+    border-bottom: 0px;
+    border-radius: 3px;
+    transform-origin: center right;
+    transform: translate(60%, -25%);
+    box-shadow: -2px 0px 0px #95c6f2 inset;
+    animation: expand-body 3s infinite linear;
+  }
+  
+  .candle1__stick, .candle2__stick {
+    position: absolute;
+    left: 50%;
+    top: 0%;
+    width: 3px;
+    height: 15px;
+    background: #673C63;
+    border-radius: 8px;
+    transform: translate(-50%, -100%);
+  }
+  
+  .candle2__stick {
+    height: 12px;
+    transform-origin: bottom center;
+    animation: stick-animation 3s infinite linear;
+  }
+  
+  .candle1__eyes, .candle2__eyes {
+    position: absolute;
+    left: 50%;
+    top: 0%;
+    width: 35px;
+    height: 30px;
+    transform: translate(-50%, 0%);
+  }
+  
+  .candle1__eyes-one {
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    width: 5px;
+    height: 5px;
+    border-radius: 100%;
+    background: #673C63;
+    transform: translate(-70%, 0%);
+    animation: blink-eyes 3s infinite linear;
+  }
+  
+  .candle1__eyes-two {
+    position: absolute;
+    left: 70%;
+    top: 20%;
+    width: 5px;
+    height: 5px;
+    border-radius: 100%;
+    background: #673C63;
+    transform: translate(-70%, 0%);
+    animation: blink-eyes 3s infinite linear;
+  }
+  
+  .candle1__mouth {
+    position: absolute;
+    left: 40%;
+    top: 20%;
+    width: 0px;
+    height: 0px;
+    border-radius: 20px;
+    background: #673C63;
+    transform: translate(-50%, -50%);
+    animation: uff 3s infinite linear;
+  }
+  
+  .candle__smoke-one {
+    position: absolute;
+    left: 30%;
+    top: 50%;
+    width: 30px;
+    height: 3px;
+    background: grey;
+    transform: translate(-50%, -50%);
+    animation: move-left 3s infinite linear;
+  }
+  
+  .candle__smoke-two {
+    position: absolute;
+    left: 30%;
+    top: 40%;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    background: grey;
+    transform: translate(-50%, -50%);
+    animation: move-top 3s infinite linear;
+  }
+  
+  .candle2 {
+    position: absolute;
+    left: 20%;
+    top: 65%;
+    width: 47px;
+    height: 60px;
+    background: #fff;
+    border: 3px solid #673C63;
+    border-bottom: 0px;
+    border-radius: 3px;
+    transform: translate(60%, -15%);
+    transform-origin: center right;
+    box-shadow: -2px 0px 0px #95c6f2 inset;
+    animation: shake-left 3s infinite linear;
+  }
+  
+  .candle2__eyes-one {
+    position: absolute;
+    left: 30%;
+    top: 50%;
+    width: 5px;
+    height: 5px;
+    display: inline-block;
+    border: 0px solid #673C63;
+    border-radius: 100%;
+    float: left;
+    background: #673C63;
+    transform: translate(-80%, 0%);
+    animation: changeto-lower 3s infinite linear;
+  }
+  
+  .candle2__eyes-two {
+    position: absolute;
+    left: 70%;
+    top: 50%;
+    width: 5px;
+    height: 5px;
+    display: inline-block;
+    border: 0px solid #673C63;
+    border-radius: 100%;
+    float: left;
+    background: #673C63;
+    transform: translate(-80%, 0%);
+    animation: changeto-greater 3s infinite linear;
+  }
+  
+  .light__wave {
+    position: absolute;
+    top: 35%;
+    left: 35%;
+    width: 75px;
+    height: 75px;
+    border-radius: 100%;
+    z-index: 0;
+    transform: translate(-25%, -50%) scale(2.5, 2.5);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    animation: expand-light 3s infinite linear;
+  }
+  
+  .candle2__fire {
+    position: absolute;
+    top: 50%;
+    left: 40%;
+    display: block;
+    width: 16px;
+    height: 20px;
+    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+    background: #FF9800;
+    transform: translate(-50%, -50%);
+    animation: dance-fire 3s infinite linear;
+  }
+  
+  @keyframes blink-eyes {
+    0%,35% {
+      opacity: 1;
+      transform: translate(-70%, 0%);
+    }
+    36%,39% {
+      opacity: 0;
+      transform: translate(-70%, 0%);
+    }
+    40% {
+      opacity: 1;
+      transform: translate(-70%, 0%);
+    }
+    50%,65% {
+      transform: translate(-140%, 0%);
+    }
+    66% {
+      transform: translate(-70%, 0%);
+    }
+  }
+  @keyframes expand-body {
+    0%,40% {
+      transform: scale(1, 1) translate(60%, -25%);
+    }
+    45%,55% {
+      transform: scale(1.1, 1.1) translate(60%, -28%);
+    }
+    60% {
+      transform: scale(0.89, 0.89) translate(60%, -25%);
+    }
+    65% {
+      transform: scale(1, 1) translate(60%, -25%);
+    }
+    70% {
+      transform: scale(0.95, 0.95) translate(60%, -25%);
+    }
+    75% {
+      transform: scale(1, 1) translate(60%, -25%);
+    }
+  }
+  @keyframes uff {
+    0%,40% {
+      width: 0px;
+      height: 0px;
+    }
+    50%,54% {
+      width: 15px;
+      height: 15px;
+      left: 30%;
+    }
+    59% {
+      width: 5px;
+      height: 5px;
+      left: 20%;
+    }
+    62% {
+      width: 2px;
+      height: 2px;
+      left: 20%;
+    }
+    67% {
+      width: 0px;
+      height: 0px;
+      left: 30%;
+    }
+  }
+
+  @keyframes move-left {
+    0%,59%,100% {
+      width: 0px;
+      left: 40%;
+    }
+    60% {
+      width: 30px;
+      left: 30%;
+    }
+    68% {
+      width: 0px;
+      left: 20%;
+    }
+  }
+  @keyframes move-top {
+    0%,64%,100% {
+      width: 0px;
+      height: 0px;
+      top: 0%;
+    }
+    65% {
+      width: 10px;
+      height: 10px;
+      top: 40%;
+      left: 40%;
+    }
+    80% {
+      width: 0px;
+      height: 0px;
+      top: 20%;
+    }
+  }
+  @keyframes shake-left {
+    0%,40% {
+      left: 20%;
+      transform: translate(60%, -15%);
+    }
+    50%,54% {
+      left: 20%;
+      transform: translate(60%, -15%);
+    }
+    59% {
+      left: 20%;
+      transform: translate(60%, -15%);
+    }
+    62% {
+      left: 18%;
+      transform: translate(60%, -15%);
+    }
+    65% {
+      left: 21%;
+      transform: translate(60%, -15%);
+    }
+    67% {
+      left: 20%;
+      transform: translate(60%, -15%);
+    }
+    75% {
+      left: 20%;
+      transform: scale(1.15, 0.85) translate(60%, -15%);
+      background: #fff;
+      border-color: #673C63;
+    }
+    91% {
+      left: 20%;
+      transform: scale(1.18, 0.82) translate(60%, -10%);
+      background: #F44336;
+      border-color: #F44336;
+      box-shadow: -2px 0px 0px #F44336 inset;
+    }
+    92% {
+      left: 20%;
+      transform: scale(0.85, 1.15) translate(60%, -15%);
+    }
+    95% {
+      left: 20%;
+      transform: scale(1.05, 0.95) translate(60%, -15%);
+    }
+    97% {
+      left: 20%;
+      transform: scale(1, 1) translate(60%, -15%);
+    }
+  }
+  @keyframes stick-animation {
+    0%,40% {
+      left: 50%;
+      top: 0%;
+      transform: translate(-50%, -100%);
+    }
+    50%,54% {
+      left: 50%;
+      top: 0%;
+      transform: translate(-50%, -100%);
+    }
+    59% {
+      left: 50%;
+      top: 0%;
+      transform: translate(-50%, -100%);
+    }
+    62% {
+      left: 50%;
+      top: 0%;
+      transform: rotateZ(-15deg) translate(-50%, -100%);
+    }
+    65% {
+      left: 50%;
+      top: 0%;
+      transform: rotateZ(15deg) translate(-50%, -100%);
+    }
+    70% {
+      left: 50%;
+      top: 0%;
+      transform: rotateZ(-5deg) translate(-50%, -100%);
+    }
+    72% {
+      left: 50%;
+      top: 0%;
+      transform: rotateZ(5deg) translate(-50%, -100%);
+    }
+    74%,84% {
+      left: 50%;
+      top: 0%;
+      transform: rotateZ(0deg) translate(-50%, -100%);
+    }
+    85% {
+      transform: rotateZ(180deg) translate(0%, 120%);
+    }
+    92% {
+      left: 50%;
+      top: 0%;
+      transform: translate(-50%, -100%);
+    }
+  }
+  @keyframes expand-light {
+    10%,29%,59%,89% {
+      transform: translate(-25%, -50%) scale(0, 0);
+      border: 2px solid rgba(255, 255, 255, 0);
+    }
+    90%,20%,50% {
+      transform: translate(-25%, -50%) scale(1, 1);
+    }
+    95%,96%,26%,27%,56%,57% {
+      transform: translate(-25%, -50%) scale(2, 2);
+      border: 2px solid rgba(255, 255, 255, 0.5);
+    }
+    0%,28%,58%,100% {
+      transform: translate(-25%, -50%) scale(2.5, 2.5);
+      border: 2px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+  @keyframes dance-fire {
+    59%,89% {
+      left: 40%;
+      width: 0px;
+      height: 0px;
+    }
+    90%,0%,7%,15%,23%,31%,39%,47%,55% {
+      left: 40.8%;
+      width: 16px;
+      height: 20px;
+      background: #FFC107;
+    }
+    94%,3%,11%,19%,27%,35%,43%,51%,58% {
+      left: 41.2%;
+      width: 16px;
+      height: 20px;
+      background: #FF9800;
+    }
+  }
+  @keyframes changeto-lower {
+    0%,70%,90% {
+      padding: 0px;
+      display: inline-block;
+      border-radius: 100%;
+      background: #673C63;
+      border-width: 0 0 0 0;
+      border: 0px solid #673C63;
+      transform: translate(-90%, 0%);
+    }
+    71%,89% {
+      background: none;
+      border: solid #673C63;
+      border-radius: 0px;
+      border-width: 0 2px 2px 0;
+      display: inline-block;
+      padding: 1px;
+      float: left;
+      transform-origin: bottom left;
+      transform: rotate(-45deg) translate(-50%, -65%);
+      -webkit-transform: rotate(-45deg) translate(-50%, -65%);
+    }
+  }
+  @keyframes changeto-greater {
+    0%,70%,90% {
+      top: 50%;
+      padding: 0px;
+      display: inline-block;
+      border-radius: 100%;
+      background: #673C63;
+      border-width: 0 0 0 0;
+      border: 0px solid #673C63;
+      transform: translate(-80%, 0%);
+    }
+    71%,89% {
+      top: 30%;
+      background: none;
+      border: solid #673C63;
+      border-radius: 0px;
+      border-width: 0 2px 2px 0;
+      display: inline-block;
+      padding: 1px;
+      float: left;
+      transform-origin: bottom left;
+      transform: rotate(135deg) translate(-80%, 20%);
+      -webkit-transform: rotate(135deg) translate(-80%, 20%);
+    }
+  }
+  
+  /*敬请期待 start*/
+  .text-shine {
+    background: linear-gradient(to right, #080808 0, #fff 10%, #080808 20%);
+    background-position: 0;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shine 4s infinite linear;
+    animation-fill-mode: forwards;
+    -webkit-text-size-adjust: none;
+    text-decoration: none; 
+    white-space: nowrap;
+  }
+  @-moz-keyframes shine {
+    0% {
+      background-position: 0;
+    }
+    60% {
+      background-position: 280px;
+    }
+    100% {
+      background-position: 280px;
+    }
+  }
+  @-webkit-keyframes shine {
+    0% {
+      background-position: 0; 
+    }
+    60% {
+      background-position: 280px;
+    }
+    100% {
+      background-position: 280px;
+    }
+  }
+  @-o-keyframes shine {
+    0% {
+      background-position: 0;
+    }
+    60% {
+      background-position: 280px;
+    }
+    100% {
+      background-position: 280px;
+    }
+  }
+  @keyframes shine {
+    0% {
+      background-position: 0;
+    } 
+    60% {
+      background-position: 280px;
+    }
+    100% {
+      background-position: 280px;
+    }
+  }
+
+</style>
diff --git a/templatePage/life/cover/cover.vue b/templatePage/life/cover/cover.vue
new file mode 100644
index 0000000..f92f3dd
--- /dev/null
+++ b/templatePage/life/cover/cover.vue
@@ -0,0 +1,22 @@
+<template>
+	<view class="">
+    <web-view src="https://support.weixin.qq.com/cgi-bin/mmsupport-bin/showredpacket?receiveuri=dfvH6iYFZGS&check_type=2#wechat_redirect"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/templatePage/life/cube/cube.vue b/templatePage/life/cube/cube.vue
new file mode 100644
index 0000000..ddb1d6b
--- /dev/null
+++ b/templatePage/life/cube/cube.vue
@@ -0,0 +1,22 @@
+<template>
+	<view class="">
+    <web-view src="https://www.tuniaokj.com/cube/index.html"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/templatePage/life/fullpage/fullpage.vue b/templatePage/life/fullpage/fullpage.vue
new file mode 100644
index 0000000..b999414
--- /dev/null
+++ b/templatePage/life/fullpage/fullpage.vue
@@ -0,0 +1,159 @@
+<template>
+  <view class="template-fullpage">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <swiper class="card-swiper" :circular="true" vertical="true"
+      :autoplay="true" duration="500" interval="5000" @change="cardSwiper" > 
+      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+        <view class="swiper-item image-banner">
+          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
+        </view>
+        <view class="swiper-item-png image-banner">
+          <image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view class="indication">
+        <block v-for="(item,index) in swiperList" :key="index">
+            <view class="spot" :class="cardCur==index?'active':''"></view>
+        </block>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateFullpage',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        cardCur: 0,
+        swiperList: [{
+          id: 0,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
+        }, {
+          id: 1,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
+        }, {
+          id: 2,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
+        }, {
+          id: 3,
+          type: 'image',
+          url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
+          pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
+        }],
+      }
+    },
+    methods: {
+      // cardSwiper
+      cardSwiper(e) {
+        this.cardCur = e.detail.current
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 全屏轮播  start*/
+    .card-swiper {
+      height: 100vh !important;
+    }
+  
+    .card-swiper swiper-item {
+      width: 750rpx !important;
+      left: 0rpx;
+      box-sizing: border-box;
+      overflow: initial;
+    }
+  
+    .card-swiper swiper-item .swiper-item {
+      width: 100%;
+      display: block;
+      height: 100vh;
+      border-radius: 0rpx;
+      transform: scale(1);
+      transition: all 0.2s ease-in 0s;
+      overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item {
+      transform: none;
+      transition: all 0.2s ease-in 0s;
+    }
+  
+    .card-swiper swiper-item .swiper-item-png {
+      margin-top: -50vh;
+      width: 100%;
+      display: block;
+      border-radius: 0rpx;
+      transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
+      transition: all 0.6s ease 0s;
+      // overflow: hidden;
+    }
+  
+    .card-swiper swiper-item.cur .swiper-item-png {
+      margin-top: -100vh;
+      width: 900rpx;
+      transform: translate(-80rpx, 0rpx) scale(1, 1);
+      transition: all 0.6s ease 0s;
+    }
+    .image-banner{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .image-banner image{
+      width: 100%;
+    }
+    
+    
+  
+    
+    /* 轮播指示点 start*/
+    .indication{
+      z-index: 9999;
+      width: 100%;
+      height: 36rpx;
+      position: fixed;
+      // display:flex;
+      display: block;
+      flex-direction:row;
+      align-items:center;
+      justify-content:center;
+    }
+    
+    .spot{
+      background-color: #000;
+      opacity: 0.3;
+      width: 10rpx;
+      height: 10rpx;
+      border-radius: 20rpx;
+      margin: 20rpx 0 !important;
+      left: 95vw;
+      top: -60vh;
+      position: relative;
+    }
+    
+    .spot.active{
+      opacity: 0.6;
+      height: 30rpx;
+      background-color: #000;
+    }
+</style>
diff --git a/templatePage/life/outset/outset.vue b/templatePage/life/outset/outset.vue
new file mode 100644
index 0000000..fac48f0
--- /dev/null
+++ b/templatePage/life/outset/outset.vue
@@ -0,0 +1,477 @@
+<template>
+  <view class="template-outset">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    
+    <!-- 流星-->
+    <view class="tn-satr">
+      <view class="sky"></view>
+      <view class="stars">
+        <view class="falling-stars">
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+          <view class="star-fall"></view>
+        </view>
+        <view class="small-stars">
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+        </view>
+        <view class="medium-stars">
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+          <view class="star"></view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 头像用户信息 -->
+    <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+      <view class="user-info__avatar tn-flex tn-flex-col-center tn-flex-row-center">
+        <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
+        </view>
+      </view>
+      <!-- <view class="user-info__nick-name">图鸟UI</view> -->
+    </view>
+    
+    <view class="tn-text-center tn-color-gray--disabled" style="padding: 60vh 0 0 0;">
+      <view class="" style="font-size: 45rpx;">
+        图鸟UI，不止于此
+      </view>
+      <view class="tn-color-gray--disabled tn-text-df tn-padding-top">
+        新触动 新感受 新创意
+      </view>
+    </view>
+    
+    <view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
+      <tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="100%" height="70rpx">全新出发</tn-button>
+    </view>
+    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateWave',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+/* 用户信息 start */
+  .user-info {
+    &__container {
+      position: absolute;
+      top: 25vh;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+    
+    &__avatar {
+      width: 200rpx;
+      height: 200rpx;
+      border: 8rpx solid rgba(255,255,255,0.05);
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    }
+    
+    &__nick-name {
+      color: #FFFFFF;
+      margin-top: 26rpx;
+      font-size: 36rpx;
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+  /* 用户信息 end */
+  
+  /* 流星*/
+  .tn-satr {
+    position: fixed;
+    width: 100%;
+    height: 600px;
+    overflow: hidden;
+    flex-shrink: 0;
+    z-index: 998;
+  }
+  
+  .stars {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 400px;
+  }
+  
+  .star {
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
+  }
+  
+  .small-stars .star {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+  }
+  .small-stars .star:nth-child(2n) {
+    opacity: 0;
+    -webkit-animation: star-blink 1.2s linear infinite alternate;
+            animation: star-blink 1.2s linear infinite alternate;
+  }
+  .small-stars .star:nth-child(1) {
+    left: 40px;
+    bottom: 50px;
+  }
+  .small-stars .star:nth-child(2) {
+    left: 200px;
+    bottom: 40px;
+  }
+  .small-stars .star:nth-child(3) {
+    left: 60px;
+    bottom: 120px;
+  }
+  .small-stars .star:nth-child(4) {
+    left: 140px;
+    bottom: 250px;
+  }
+  .small-stars .star:nth-child(5) {
+    left: 400px;
+    bottom: 300px;
+  }
+  .small-stars .star:nth-child(6) {
+    left: 170px;
+    bottom: 80px;
+  }
+  .small-stars .star:nth-child(7) {
+    left: 200px;
+    bottom: 360px;
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  .small-stars .star:nth-child(8) {
+    left: 250px;
+    bottom: 320px;
+  }
+  .small-stars .star:nth-child(9) {
+    left: 300px;
+    bottom: 340px;
+  }
+  .small-stars .star:nth-child(10) {
+    left: 130px;
+    bottom: 320px;
+    -webkit-animation-delay: .5s;
+            animation-delay: .5s;
+  }
+  .small-stars .star:nth-child(11) {
+    left: 230px;
+    bottom: 330px;
+    -webkit-animation-delay: 7s;
+            animation-delay: 7s;
+  }
+  .small-stars .star:nth-child(12) {
+    left: 300px;
+    bottom: 360px;
+    -webkit-animation-delay: .3s;
+            animation-delay: .3s;
+  }
+  @-webkit-keyframes star-blink {
+    50% {
+      width: 3px;
+      height: 3px;
+      opacity: 1;
+    }
+  }
+  @keyframes star-blink {
+    50% {
+      width: 3px;
+      height: 3px;
+      opacity: 1;
+    }
+  }
+  .medium-stars .star {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    opacity: 0;
+    -webkit-animation: star-blink 1.2s ease-in infinite alternate;
+            animation: star-blink 1.2s ease-in infinite alternate;
+  }
+  .medium-stars .star:nth-child(1) {
+    left: 300px;
+    bottom: 50px;
+  }
+  .medium-stars .star:nth-child(2) {
+    left: 400px;
+    bottom: 40px;
+    -webkit-animation-delay: .4s;
+            animation-delay: .4s;
+  }
+  .medium-stars .star:nth-child(3) {
+    left: 330px;
+    bottom: 300px;
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  .medium-stars .star:nth-child(4) {
+    left: 460px;
+    bottom: 300px;
+    -webkit-animation-delay: .9s;
+            animation-delay: .9s;
+  }
+  .medium-stars .star:nth-child(5) {
+    left: 300px;
+    bottom: 150px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(6) {
+    left: 440px;
+    bottom: 120px;
+    -webkit-animation-delay: 1s;
+            animation-delay: 1s;
+  }
+  .medium-stars .star:nth-child(7) {
+    left: 200px;
+    bottom: 140px;
+    -webkit-animation-delay: .8s;
+            animation-delay: .8s;
+  }
+  .medium-stars .star:nth-child(8) {
+    left: 30px;
+    bottom: 480px;
+    -webkit-animation-delay: .3s;
+            animation-delay: .3s;
+  }
+  .medium-stars .star:nth-child(9) {
+    left: 460px;
+    bottom: 400px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(10) {
+    left: 150px;
+    bottom: 10px;
+    -webkit-animation-delay: 1s;
+            animation-delay: 1s;
+  }
+  .medium-stars .star:nth-child(11) {
+    left: 420px;
+    bottom: 450px;
+    -webkit-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+  }
+  .medium-stars .star:nth-child(12) {
+    left: 340px;
+    bottom: 180px;
+    -webkit-animation-delay: 1.1s;
+            animation-delay: 1.1s;
+  }
+  @keyframes star-blink {
+    50% {
+      width: 4px;
+      height: 4px;
+      opacity: 1;
+    }
+  }
+  .star-fall {
+    position: relative;
+    border-radius: 2px;
+    width: 80px;
+    height: 2px;
+    overflow: hidden;
+    -webkit-transform: rotate(-20deg);
+            transform: rotate(-20deg);
+  }
+  .star-fall:after {
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 2px;
+    background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
+    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
+    left: 100%;
+    -webkit-animation: star-fall 3.6s linear infinite;
+            animation: star-fall 3.6s linear infinite;
+  }
+  
+  .star-fall:nth-child(1) {
+    left: 80px;
+    bottom: -100px;
+  }
+  .star-fall:nth-child(1):after {
+    -webkit-animation-delay: 2.4s;
+            animation-delay: 2.4s;
+  }
+  
+  .star-fall:nth-child(2) {
+    left: 200px;
+    bottom: -200px;
+  }
+  .star-fall:nth-child(2):after {
+    -webkit-animation-delay: 2s;
+            animation-delay: 2s;
+  }
+  
+  .star-fall:nth-child(3) {
+    left: 430px;
+    bottom: -50px;
+  }
+  .star-fall:nth-child(3):after {
+    -webkit-animation-delay: 3.6s;
+            animation-delay: 3.6s;
+  }
+  
+  .star-fall:nth-child(4) {
+    left: 400px;
+    bottom: 100px;
+  }
+  .star-fall:nth-child(4):after {
+    -webkit-animation-delay: .2s;
+            animation-delay: .2s;
+  }
+  
+  @-webkit-keyframes star-fall {
+    20% {
+      left: -100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+  
+  @keyframes star-fall {
+    20% {
+      left: -100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+
+  
+  /* 波浪*/
+  .template-outset{
+    background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
+    width: 100vw;
+    height: 100vh;
+  }
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+</style>
diff --git a/templatePage/life/pano/pano.vue b/templatePage/life/pano/pano.vue
new file mode 100644
index 0000000..0b8f549
--- /dev/null
+++ b/templatePage/life/pano/pano.vue
@@ -0,0 +1,24 @@
+<template>
+	<view class="components-pano">
+		<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
+    <web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
+    <!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/templatePage/life/plus/plus.vue b/templatePage/life/plus/plus.vue
new file mode 100644
index 0000000..4418f8a
--- /dev/null
+++ b/templatePage/life/plus/plus.vue
@@ -0,0 +1,303 @@
+<template>
+  <view class="template-plus">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-bdhook-shadow" style="border-radius: 10rpx;overflow: hidden;margin: 50rpx 30rpx 30rpx 30rpx;">
+        <view class="tn-flex tn-flex-row-between tn-padding tn-text-center tn-color-white" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">
+          <view class="tn-flex-1">
+            <view class="tn-text-bold tn-text-lg">
+              开源项目
+            </view>
+            <view class="tn-text-sm">
+              不喜勿喷
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-text-bold tn-text-lg">
+              普通用户
+            </view>
+            <view class="tn-text-sm">
+              免费开源
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="tn-text-bold tn-text-lg">
+              至尊VIP
+            </view>
+            <view class="tn-text-sm">
+              会员福利
+            </view>
+          </view>
+        </view>
+        
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-sm" v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
+          <view class="tn-flex-1 tn-text-center">
+            <view class="">
+              {{ item.title }}
+            </view>
+            <!-- <view class="tn-color-gray tn-text-xs">
+              {{ item.title2 }}
+            </view> -->
+          </view>
+          <view class="tn-flex-1">
+            <view class="">
+              {{ item.common }}
+            </view>
+            <view class="">
+              {{ item.common2 }}
+            </view>
+          </view>
+          <view class="tn-flex-1">
+            <view class="">
+              {{ item.vip }}
+            </view>
+            <view class="">
+              {{ item.vip2 }}
+            </view>
+          </view>
+        </view>
+        
+      </view>
+    
+    </view>
+    
+    <view class="tn-text-center tn-margin tn-text-lg plus-box" style="padding-top: 60rpx;">
+      <view class="plus-text">
+        <view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
+        <view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
+        <view class="tn-text-bold">
+          <text class="tn-text-xl-xxl">699￥</text>
+          <text class="tn-text-xl" style="">1299￥</text>
+          <!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
+          <text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
+          <text class="tn-text-xl-xxl"> / </text>
+          <text class="tn-text-xxl tn-padding-left-sm">终身</text>
+        </view>
+        <view class="tn-margin-bottom-xl">（大约等于2个酷炫前端页面价格💕）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
+        <view class="tn-margin-bottom-xl">（偶尔恰饭时常更新啦）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
+        <view class="tn-margin-bottom-xl">（毕竟前端开发圈子就那么小）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">图鸟北北，微信号：<text class="tn-text-bold tn-text-xxl" @click="copyWechat">tnkewo</text> </view>
+        <view class="">（如需入群，可备注：进微信群）</view>
+        <view class="">（如需合作，可备注：商业合作）</view>
+        <view class="tn-margin-bottom-xl">（如需会员，可备注：咨询会员）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">入群须知，群内禁止黄赌毒+广告+吵架</view>
+        <view class="tn-margin-bottom-xl">（可进群与群友合作，拓展人脉）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">开源希望能得到理解</view>
+        <view class="">（做开源本身就不是为了赚取）</view>
+        <view class="">（毕竟还不如多找几个会员进行项目合作）</view>
+        <view class="tn-margin-bottom-xl">（会员费用仅垫付服务器+工作室支出）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">也希望大家能喜欢这个项目</view>
+        <view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
+        <view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
+        <view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.tuniaokj.com/）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
+        <view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
+        <view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
+        <view class="">①会员尊享更多酷炫模板，模板持续更新</view>
+        <view class="">②优先响应会员页面模板需求，icon需求</view>
+        <view class="">③会员版本更新，在会员群进行代码发送</view>
+        <view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
+        <view class="">蔡北北，95年，广州</view>
+        <view class="">浮夸UI设计</view>
+        <view class="">菜鸡软件开发</view>
+        <view class="">祭天产品经理</view>
+        <view class="">背锅项目经理</view>
+        <view class="tn-margin-bottom-xl">努力往CTO去发展</view>
+      </view>
+      
+      <view class="plus-text">
+        <view class="tn-text-bold">图鸟小小团队感恩你的支持</view>
+        <view class="tn-margin-bottom-xl"></view>
+      </view>
+      
+    </view>
+    
+    
+    <view class="tn-padding-bottom"></view>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePlus',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+        setList: [
+        	{
+        		title: "图鸟UI",
+            title2: "UI组件",
+            common: "免费商用",
+            common2: "插件市场获取",
+            vip: "免费商用",
+            vip2: "会员群直接获取"
+        	},
+        	{
+        		title: "图鸟VUE3 ",
+            title2: "UI组件",
+        		common: "免费商用",
+        		common2: "插件市场获取",
+        		vip: "免费商用",
+        		vip2: "会员群直接获取"
+        	},
+        	{
+        		title: "圈子博客",
+            title2: "纯前端模板",
+        		common: "免费商用",
+        		common2: "插件市场获取",
+        		vip: "免费商用",
+        		vip2: "会员群直接获取"
+        	},
+          {
+          	title: "简约商圈",
+            title2: "纯前端模板",
+          	common: "免费商用",
+          	common2: "插件市场获取",
+          	vip: "免费商用",
+          	vip2: "会员群直接获取"
+          },
+        	{
+        		title: "凶姐壁纸",
+            title2: "纯前端模板",
+        		common: "免费商用",
+        		common2: "插件市场获取",
+        		vip: "免费商用",
+        		vip2: "会员群直接获取"
+        	},
+          {
+          	title: "无名小程序",
+            title2: "前后端项目",
+          	common: "无",
+          	common2: "",
+          	vip: "会员专属",
+          	vip2: "前后端开发ing"
+          }
+        ]
+      }
+    },
+    methods: {
+      // 复制地址
+      copyYuque() {
+        uni.setClipboardData({
+          data: "https://www.tuniaokj.com/",
+        })
+      },
+      // 复制微信号
+      copyWechat() {
+        uni.setClipboardData({
+          data: "tnkewo",
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  /* 间隔线 start*/
+    .tn-strip-bottom-min {
+      width: 100%;
+      border-bottom: 1rpx solid #F8F9FB;
+    }
+    
+    .tn-strip-bottom {
+     width: 100%;
+     border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+    }
+     /* 间隔线 end*/
+  
+  /* 页面阴影 start*/
+  .tn-bdhook-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  /* 内容 开始 */
+  .plus-box {
+    counter-reset: index;  
+    padding: 0;
+    max-width: 100vw;
+    background-image: linear-gradient(to top, #FFA726 , #2DE8BD);
+    background-attachment: fixed;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .plus-text {
+    counter-increment: index; 
+    display: initial;
+    align-items: center;
+    padding: 12px 0;
+    box-sizing: border-box;
+
+  }
+  
+  
+  .plus-text::before {
+    content: counters(index, ".", decimal-leading-zero);
+    font-size: 1.5rem;
+    font-weight: bold;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+    align-self: flex-start;
+  }
+  
+</style>
diff --git a/templatePage/life/share/share.vue b/templatePage/life/share/share.vue
new file mode 100644
index 0000000..660d766
--- /dev/null
+++ b/templatePage/life/share/share.vue
@@ -0,0 +1,54 @@
+<template>
+  <view class="">
+    <web-view src="https://mp.weixin.qq.com/s/1apBuGcPQXMfz2osv5wwiQ"></web-view>
+  </view>
+</template>
+
+<!-- <template>
+  <view class="template-course">
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="bottom-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>    
+
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template> -->
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateCourse',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+/*  @import '@/static/css/templatePage/custom_nav_bar.scss';
+    .bottom-backgroup {
+      height: 700rpx;
+      z-index: -1;
+    
+      .backgroud-image {
+        border-radius: 60rpx 60rpx 0 0;
+        width: 100%;
+        height: 4100rpx;
+      }
+    } */
+</style>
diff --git a/templatePage/login/demo1/demo1.vue b/templatePage/login/demo1/demo1.vue
new file mode 100644
index 0000000..d2dc896
--- /dev/null
+++ b/templatePage/login/demo1/demo1.vue
@@ -0,0 +1,414 @@
+<template>
+  <view class="template-login">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="login">
+      <!-- 顶部背景图片-->
+      <view class="login__bg login__bg--top">
+        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
+      </view>
+      <view class="login__bg login__bg--top">
+        <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
+      </view>
+      
+      <view class="login__wrapper">
+        <!-- 登录/注册切换 -->
+        <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
+            登录
+          </view>
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
+            注册
+          </view>
+          
+          <!-- 滑块-->
+          <view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
+        </view>
+        
+        <!-- 输入框内容-->
+        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+          <!-- 登录 -->
+          <block v-if="currentModeIndex === 0">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          <!-- 注册 -->
+          <block v-if="currentModeIndex === 1">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-code"></view>
+              </view>
+              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
+                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
+              </view>
+              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          
+          <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
+          
+          <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
+        </view>
+        
+        <!-- 其他登录方式 -->
+        <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-sina"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-qq"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      
+      <!-- 底部背景图片-->
+      <view class="login__bg login__bg--bottom">
+        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
+      </view>
+    </view>
+    
+    <!-- 验证码倒计时 -->
+    <tn-verification-code
+      ref="code"
+      uniqueKey="login-demo-1"
+      :seconds="60"
+      @change="codeChange">
+    </tn-verification-code>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'login-demo-1',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        // 当前选中的模式
+        currentModeIndex: 0,
+        // 模式选中滑块
+        modeSliderStyle: {
+          left: 0
+        },
+        // 是否显示密码
+        showPassword: false,
+        // 倒计时提示文字
+        tips: '获取验证码'
+      }
+    },
+    watch: {
+      currentModeIndex(value) {
+        const sliderWidth = uni.upx2px(476 / 2)
+        this.modeSliderStyle.left = `${sliderWidth * value}px`
+      }
+    },
+    methods: {
+      // 切换模式
+      modeSwitch(index) {
+        this.currentModeIndex = index
+        this.showPassword = false
+      },
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      // 获取验证码倒计时被修改
+      codeChange(event) {
+        this.tips = event
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 悬浮 */
+  .rocket-sussuspension{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(-0.8rem , 1rem);
+    }
+  }
+  
+  .login {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    
+    /* 背景图片 start */
+    &__bg {
+      z-index: -1;
+      position: fixed;
+      
+      &--top {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        
+        .bg {
+          width: 750rpx;
+          will-change: transform;
+        }
+        .rocket {
+          margin: 50rpx 28%;
+          width: 400rpx;
+          will-change: transform;
+        }
+      }
+      
+      &--bottom {
+        bottom: -10rpx;
+        left: 0;
+        right: 0;
+        width: 100%;
+        // height: 144px;
+        margin-bottom: env(safe-area-inset-bottom);
+        
+        image {
+          width: 750rpx;
+          will-change: transform;
+        }
+      }
+    }
+    /* 背景图片 end */
+    
+    /* 内容 start */
+    &__wrapper {
+      margin-top: 403rpx;
+      width: 100%;
+    }
+    
+    /* 切换 start */
+    &__mode {
+      position: relative;
+      margin: 0 auto;
+      width: 476rpx;
+      height: 77rpx;
+      background-color: #FFFFFF;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 39rpx;
+      
+      &__item {
+        height: 77rpx;
+        width: 100%;
+        line-height: 77rpx;
+        text-align: center;
+        font-size: 31rpx;
+        color: #908f8f;
+        letter-spacing: 1em;
+        text-indent: 1em;
+        z-index: 2;
+        transition: all 0.4s;
+        
+        &--active {
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+      }
+      
+      &__slider {
+        position: absolute;
+        height: inherit;
+        width: calc(476rpx / 2);
+        border-radius: inherit;
+        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+    /* 切换 end */
+    
+    /* 登录注册信息 start */
+    &__info {
+      margin: 0 30rpx;
+      margin-top: 105rpx;
+      padding: 30rpx 51rpx;
+      padding-bottom: 0;
+      border-radius: 20rpx;
+      background-color: #ffff;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      
+      &__item {
+        
+        &__input {
+          margin-top: 59rpx;
+          width: 100%;
+          height: 77rpx;
+          border: 1rpx solid #E6E6E6;
+          border-radius: 39rpx;
+          
+          &__left-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-left: 20rpx;
+            color: #AAAAAA;
+          }
+          
+          &__content {
+            width: 80%;
+            padding-left: 10rpx;
+            
+            &--verify-code {
+              width: 56%;
+            }
+            
+            input {
+              font-size: 24rpx;
+              // letter-spacing: 0.1em;
+            }
+          }
+          
+          &__right-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-right: 20rpx;
+            color: #AAAAAA;
+          }
+          
+          &__right-verify-code {
+            width: 34%;
+            margin-right: 20rpx;
+          }
+        }
+        
+        &__button {
+          margin-top: 75rpx;
+          margin-bottom: 39rpx;
+          width: 100%;
+          height: 77rpx;
+          text-align: center;
+          font-size: 31rpx;
+          font-weight: bold;
+          line-height: 77rpx;
+          letter-spacing: 1em;
+          text-indent: 1em;
+          border-radius: 39rpx;
+          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
+        }
+        
+        &__tips {
+          margin: 30rpx 0;
+          color: #AAAAAA;
+        }
+      }
+    }
+    /* 登录注册信息 end */
+    
+    /* 登录方式切换 start */
+    &__way {
+      margin: 0 auto;
+      margin-top: 110rpx;
+      
+      &__item {
+        &--icon {
+          width: 77rpx;
+          height: 77rpx;
+          font-size: 50rpx;
+          border-radius: 100rpx;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          }
+        }
+      }
+    }
+    /* 登录方式切换 end */
+    /* 内容 end */
+    
+  }
+  
+  /deep/.input-placeholder {
+    font-size: 24rpx;
+    color: #E6E6E6;
+  }
+  
+</style>
diff --git a/templatePage/login/demo2/demo2.vue b/templatePage/login/demo2/demo2.vue
new file mode 100644
index 0000000..0071d32
--- /dev/null
+++ b/templatePage/login/demo2/demo2.vue
@@ -0,0 +1,495 @@
+<template>
+  <view class="template-login2" >
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
+    
+    <view class="login">
+      <!-- 顶部背景图片-->
+      <!-- <view class="login__bg login__bg--top">
+        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
+      </view>
+      <view class="login__bg login__bg--top">
+        <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
+      </view> -->
+      
+      <view class="login__wrapper">
+        <!-- 登录/注册切换 -->
+        <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
+            登录
+          </view>
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
+            注册
+          </view>
+          
+          <!-- 滑块-->
+          <view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
+        </view>
+        
+        <!-- 输入框内容-->
+        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+          <!-- 登录 -->
+          <block v-if="currentModeIndex === 0">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          <!-- 注册 -->
+          <block v-if="currentModeIndex === 1">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-code"></view>
+              </view>
+              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
+                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
+              </view>
+              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          
+          <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
+          
+          <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
+        </view>
+        
+        <!-- 其他登录方式 -->
+        <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-sina"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-qq"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      
+      <!-- 底部背景图片-->
+      <!-- <view class="login__bg login__bg--bottom">
+        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
+      </view> -->
+    </view>
+    
+    <!-- 验证码倒计时 -->
+    <tn-verification-code
+      ref="code"
+      uniqueKey="login-demo-2"
+      :seconds="60"
+      @change="codeChange">
+    </tn-verification-code>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  
+  const Point = class {
+    constructor(x, y) {
+      this.x = x
+      this.y = y
+      this.r = 1 + Math.random() * 2
+      this.sx = Math.random() * 2 - 1
+      this.sy = Math.random() * 2 - 1
+    }
+  
+    draw(ctx) {
+      ctx.beginPath()
+      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
+      ctx.closePath()
+      ctx.fillStyle = '#fff'
+      ctx.fill()
+    }
+  
+    move(w, h) {
+      this.x += this.sx
+      this.y += this.sy
+      if (this.x > w || this.x < 0) this.sx = -this.sx
+      if (this.y > h || this.y < 0) this.sy = -this.sy
+    }
+  
+    drawLine(ctx, p) {
+      const dx = this.x - p.x
+      const dy = this.y - p.y
+      const d = Math.sqrt(dx * dx + dy * dy)
+      if (d < 100) {
+        var alpha = (100 - d) / 300 * 1
+        ctx.beginPath()
+        ctx.moveTo(this.x, this.y)
+        ctx.lineTo(p.x, p.y)
+        ctx.closePath()
+        ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
+        ctx.strokeWidth = 1
+        ctx.stroke()
+      }
+    }
+  }
+  
+  const sysinfo = uni.getSystemInfoSync()
+  const w = 400
+  const h = 1000
+  
+  
+  export default {
+    name: 'login-demo-2',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        ctx: null,
+        screenWidth: sysinfo.screenWidth,
+        screenHeight: sysinfo.screenHeight,
+        timer: null,
+        points: [],
+        
+        // 当前选中的模式
+        currentModeIndex: 0,
+        // 模式选中滑块
+        modeSliderStyle: {
+          left: 0
+        },
+        // 是否显示密码
+        showPassword: false,
+        // 倒计时提示文字
+        tips: '获取验证码'
+      }
+    },
+    onLoad(options) {
+      this.from = options.from || ''
+      
+      for (let i = 0; i < 80; i++) {
+        this.points.push(new Point(Math.random() * w, Math.random() * h))
+      }
+      this.ctx = uni.createCanvasContext('star_canvas')
+      // console.log(points)
+    
+      this.gameloop() //进行
+      // this.ctx.setFillStyle('red')
+      // this.ctx.fillRect(200, 300, 50, 50)
+      // this.ctx.draw()
+    },
+    onUnload() {
+      clearTimeout(this.timer)
+    },
+    
+    watch: {
+      currentModeIndex(value) {
+        const sliderWidth = uni.upx2px(476 / 2)
+        this.modeSliderStyle.left = `${sliderWidth * value}px`
+      }
+    },
+    methods: {
+      /**粒子进行*/
+      gameloop() {
+        this.timer = setTimeout(this.gameloop, 100);
+        // console.log('gameloop')
+        this.paint();
+      },
+      /**清空画布*/
+      paint() {
+        this.ctx.clearRect(0, 0, w, h)
+        for (var i = 0; i < this.points.length; i++) {
+          this.points[i].move(w, h)
+          this.points[i].draw(this.ctx)
+          for (var j = i + 1; j < this.points.length; j++) {
+            this.points[i].drawLine(this.ctx, this.points[j])
+          }
+        }
+        this.ctx.draw();
+      },
+      // 切换模式
+      modeSwitch(index) {
+        this.currentModeIndex = index
+        this.showPassword = false
+      },
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      // 获取验证码倒计时被修改
+      codeChange(event) {
+        this.tips = event
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  
+  /* 粒子背景 start*/
+  .template-login2 {
+    background: linear-gradient(90deg, #892FE8, #3D7EFF);
+    min-height: 100vh
+  }
+  // .template-login2:before {
+  // 		content: "";
+  // 		position: absolute;
+  // 		top: 0;
+  // 		left: 0;
+  // 		bottom: 0;
+  //     right: 0;
+  // 		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
+  // 		-webkit-mask-image: linear-gradient(to bottom, transparent, black);
+  // 		        mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
+  // 		        mask-image: linear-gradient(to bottom, transparent, black);
+  // 		background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
+  // 		background: linear-gradient(90deg, #E72F8C, #892FE8);	
+  //   }
+  
+  .mycanvas {
+    position: absolute;
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+  }
+  
+  
+
+  .login {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    
+    /* 内容 start */
+    &__wrapper {
+      padding-top: 400rpx;
+      width: 100%;
+    }
+    
+    /* 切换 start */
+    &__mode {
+      position: relative;
+      margin: 0 auto;
+      width: 476rpx;
+      height: 77rpx;
+      background-color: rgba(255,255,255,0.2);
+      backdrop-filter: blur(6rpx);
+      -webkit-backdrop-filter: blur(6rpx);
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 39rpx;
+      
+      &__item {
+        height: 77rpx;
+        width: 100%;
+        line-height: 77rpx;
+        text-align: center;
+        font-size: 31rpx;
+        color: #FFFFFF;
+        letter-spacing: 1em;
+        text-indent: 1em;
+        z-index: 2;
+        transition: all 0.4s;
+        
+        &--active {
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+      }
+      
+      &__slider {
+        position: absolute;
+        height: inherit;
+        width: calc(476rpx / 2);
+        border-radius: inherit;
+        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+    /* 切换 end */
+    
+    /* 登录注册信息 start */
+    &__info {
+      margin: 0 50rpx;
+      margin-top: 105rpx;
+      padding: 30rpx 51rpx;
+      padding-bottom: 0;
+      border-radius: 20rpx;
+      background-color: rgba(255,255,255,0.2);
+      backdrop-filter: blur(6rpx);
+      -webkit-backdrop-filter: blur(6rpx);
+      border: 2rpx solid rgba(255, 255, 255, 0.1);
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      
+      &__item {
+        
+        &__input {
+          margin-top: 59rpx;
+          width: 100%;
+          height: 77rpx;
+          border: 1rpx solid #FFFFFF;
+          border-radius: 39rpx;
+          
+          &__left-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-left: 20rpx;
+            color: #FFFFFF;
+          }
+          
+          &__content {
+            width: 80%;
+            padding-left: 10rpx;
+            
+            &--verify-code {
+              width: 56%;
+            }
+            
+            input {
+              font-size: 24rpx;
+              color: #FFFFFF;
+              // letter-spacing: 0.1em;
+            }
+          }
+          
+          &__right-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-right: 20rpx;
+            color: #FFFFFF;
+          }
+          
+          &__right-verify-code {
+            width: 34%;
+            margin-right: 20rpx;
+          }
+        }
+        
+        &__button {
+          margin-top: 75rpx;
+          margin-bottom: 39rpx;
+          width: 100%;
+          height: 77rpx;
+          text-align: center;
+          font-size: 31rpx;
+          font-weight: bold;
+          line-height: 77rpx;
+          letter-spacing: 1em;
+          text-indent: 1em;
+          border-radius: 100rpx;
+          color: #FFFFFF;
+          background-color: rgba(255,255,255,0.2);
+          // border: 2rpx solid #FFFFFF;
+        }
+        
+        &__tips {
+          margin: 30rpx 0;
+          color: #FFFFFF;
+        }
+      }
+    }
+    /* 登录注册信息 end */
+    
+    /* 登录方式切换 start */
+    &__way {
+      margin: 0 auto;
+      margin-top: 110rpx;
+      
+      &__item {
+        &--icon {
+          width: 77rpx;
+          height: 77rpx;
+          font-size: 50rpx;
+          border-radius: 100rpx;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          }
+        }
+      }
+    }
+    /* 登录方式切换 end */
+    /* 内容 end */
+    
+  }
+  
+  /deep/.input-placeholder {
+    font-size: 24rpx;
+    color: #E6E6E6;
+  }
+  
+</style>
diff --git a/templatePage/login/demo3/demo3.vue b/templatePage/login/demo3/demo3.vue
new file mode 100644
index 0000000..8c2de27
--- /dev/null
+++ b/templatePage/login/demo3/demo3.vue
@@ -0,0 +1,401 @@
+<template>
+  <view class="template-login">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="login">
+      <!-- 顶部背景图片-->
+      <view class="login__bg login__bg--top">
+        <image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
+      </view>
+      
+      <view class="login__wrapper">
+        <!-- 登录/注册切换 -->
+        <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
+            登录
+          </view>
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
+            注册
+          </view>
+          
+          <!-- 滑块-->
+          <view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
+        </view>
+        
+        <!-- 输入框内容-->
+        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+          <!-- 登录 -->
+          <block v-if="currentModeIndex === 0">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          <!-- 注册 -->
+          <block v-if="currentModeIndex === 1">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-code"></view>
+              </view>
+              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
+                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
+              </view>
+              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          
+          <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
+          
+          <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
+        </view>
+        
+        <!-- 其他登录方式 -->
+        <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
+              <view class="tn-icon-sina"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
+              <view class="tn-icon-qq"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+  
+    </view>
+    
+    <!-- 验证码倒计时 -->
+    <tn-verification-code
+      ref="code"
+      uniqueKey="login-demo-3"
+      :seconds="60"
+      @change="codeChange">
+    </tn-verification-code>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'login-demo-3',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        // 当前选中的模式
+        currentModeIndex: 0,
+        // 模式选中滑块
+        modeSliderStyle: {
+          left: 0
+        },
+        // 是否显示密码
+        showPassword: false,
+        // 倒计时提示文字
+        tips: '获取验证码'
+      }
+    },
+    watch: {
+      currentModeIndex(value) {
+        const sliderWidth = uni.upx2px(476 / 2)
+        this.modeSliderStyle.left = `${sliderWidth * value}px`
+      }
+    },
+    methods: {
+      // 切换模式
+      modeSwitch(index) {
+        this.currentModeIndex = index
+        this.showPassword = false
+      },
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      // 获取验证码倒计时被修改
+      codeChange(event) {
+        this.tips = event
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 悬浮 */
+  .login-sussuspension{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(0rem , 1rem);
+    }
+  }
+  
+  .login {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    
+    /* 背景图片 start */
+    &__bg {
+      z-index: -1;
+      position: fixed;
+      
+      &--top {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        
+        .bg {
+          width: 100vw;
+          height: 100vh;
+          will-change: transform;
+        }
+      }
+      
+      /* &--bottom {
+        bottom: -10rpx;
+        left: 0;
+        right: 0;
+        width: 100%;
+        margin-bottom: env(safe-area-inset-bottom);
+        
+        image {
+          width: 750rpx;
+          will-change: transform;
+        }
+      } */
+    }
+    /* 背景图片 end */
+    
+    /* 内容 start */
+    &__wrapper {
+      margin-top: 403rpx;
+      width: 100%;
+    }
+    
+    /* 切换 start */
+    &__mode {
+      position: relative;
+      margin: 0 auto;
+      width: 476rpx;
+      height: 77rpx;
+      background-color: rgba(255,255,255,0.6);
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 39rpx;
+      
+      &__item {
+        height: 77rpx;
+        width: 100%;
+        line-height: 77rpx;
+        text-align: center;
+        font-size: 31rpx;
+        color: #FFFFFF;
+        letter-spacing: 1em;
+        text-indent: 1em;
+        z-index: 2;
+        transition: all 0.4s;
+        
+        &--active {
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+      }
+      
+      &__slider {
+        position: absolute;
+        height: inherit;
+        width: calc(476rpx / 2);
+        border-radius: inherit;
+        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+    /* 切换 end */
+    
+    /* 登录注册信息 start */
+    &__info {
+      margin: 0 30rpx;
+      margin-top: 105rpx;
+      padding: 30rpx 51rpx;
+      padding-bottom: 0;
+      border-radius: 20rpx;
+      background-color: rgba(255,255,255,0.3);
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      
+      &__item {
+        
+        &__input {
+          margin-top: 59rpx;
+          width: 100%;
+          height: 77rpx;
+          border: 1rpx solid #E6E6E6;
+          border-radius: 39rpx;
+          
+          &__left-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-left: 20rpx;
+            color: #FFFFFF;
+          }
+          
+          &__content {
+            width: 80%;
+            padding-left: 10rpx;
+            
+            &--verify-code {
+              width: 56%;
+            }
+            
+            input {
+              font-size: 24rpx;
+              // letter-spacing: 0.1em;
+            }
+          }
+          
+          &__right-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-right: 20rpx;
+            color: #AAAAAA;
+          }
+          
+          &__right-verify-code {
+            width: 34%;
+            margin-right: 20rpx;
+          }
+        }
+        
+        &__button {
+          margin-top: 75rpx;
+          margin-bottom: 39rpx;
+          width: 100%;
+          height: 77rpx;
+          text-align: center;
+          font-size: 31rpx;
+          font-weight: bold;
+          line-height: 77rpx;
+          letter-spacing: 1em;
+          text-indent: 1em;
+          border-radius: 39rpx;
+          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
+        }
+        
+        &__tips {
+          margin: 30rpx 0;
+          color: #AAAAAA;
+        }
+      }
+    }
+    /* 登录注册信息 end */
+    
+    /* 登录方式切换 start */
+    &__way {
+      margin: 0 auto;
+      margin-top: 110rpx;
+      
+      &__item {
+        &--icon {
+          width: 77rpx;
+          height: 77rpx;
+          font-size: 50rpx;
+          border-radius: 100rpx;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          }
+        }
+      }
+    }
+    /* 登录方式切换 end */
+    /* 内容 end */
+    
+  }
+  
+  /deep/.input-placeholder {
+    font-size: 24rpx;
+    color: #E6E6E6;
+  }
+  
+</style>
diff --git a/templatePage/login/demo4/demo4.vue b/templatePage/login/demo4/demo4.vue
new file mode 100644
index 0000000..e03a0eb
--- /dev/null
+++ b/templatePage/login/demo4/demo4.vue
@@ -0,0 +1,420 @@
+<template>
+  <view class="template-login">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="login">
+      <!-- 顶部背景图片-->
+      <view class="login__bg login__bg--top">
+        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
+      </view>
+
+      <view class="login__wrapper">
+        <view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
+          欢迎回来
+        </view>
+        <view class="tn-margin tn-color-gray--disabled tn-text-lg">
+          你是不是傻，菜的一撇的北北
+        </view>
+        
+        <!-- 登录/注册切换 -->
+        <!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
+            登录
+          </view>
+          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
+            注册
+          </view>
+          <view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
+        </view> -->
+        
+        <!-- 输入框内容-->
+        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+          <!-- 登录 -->
+          <block v-if="currentModeIndex === 0">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-safe"></view>
+              </view>
+              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
+                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
+              </view>
+              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
+                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
+              </view>
+            </view>
+          </block>
+          <!-- 注册 -->
+          <block v-if="currentModeIndex === 1">
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-phone"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-safe"></view>
+              </view>
+              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
+                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
+              </view>
+              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
+                <tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
+              </view>
+            </view>
+            
+            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
+              <view class="login__info__item__input__left-icon">
+                <view class="tn-icon-lock"></view>
+              </view>
+              <view class="login__info__item__input__content">
+                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
+              </view>
+              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
+                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
+              </view>
+            </view>
+          </block>
+          
+          <view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
+          
+          
+          <view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
+            <view class="tn-flex tn-flex-row-between tn-padding">
+              <view class="" @tap.stop="modeSwitch(0)">前往登录</view>
+            </view>
+          </view>
+          <view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
+            <view class="tn-flex tn-flex-row-between tn-padding">
+              <view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
+              <view class="tn-padding-left tn-color-gray">忘记密码</view>
+            </view>
+          </view>
+          
+        </view>
+        
+        <!-- 其他登录方式 -->
+        <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
+              <view class="tn-icon-sina"></view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs">
+            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
+              <view class="tn-icon-qq"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 底部背景图片-->
+      <view class="login__bg login__bg--bottom">
+        <image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
+      </view>
+  
+    </view>
+    
+    <!-- 验证码倒计时 -->
+    <tn-verification-code
+      ref="code"
+      uniqueKey="login-demo-4"
+      :seconds="60"
+      @change="codeChange">
+    </tn-verification-code>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'login-demo-4',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        // 当前选中的模式
+        currentModeIndex: 0,
+        // 模式选中滑块
+        modeSliderStyle: {
+          left: 0
+        },
+        // 是否显示密码
+        showPassword: false,
+        // 倒计时提示文字
+        tips: '获取验证码'
+      }
+    },
+    watch: {
+      currentModeIndex(value) {
+        const sliderWidth = uni.upx2px(476 / 2)
+        this.modeSliderStyle.left = `${sliderWidth * value}px`
+      }
+    },
+    methods: {
+      // 切换模式
+      modeSwitch(index) {
+        this.currentModeIndex = index
+        this.showPassword = false
+      },
+      // 获取验证码
+      getCode() {
+        if (this.$refs.code.canGetCode) {
+          this.$tn.message.loading('正在获取验证码')
+          setTimeout(() => {
+            this.$tn.message.closeLoading()
+            this.$tn.message.toast('验证码已经发送')
+            // 通知组件开始计时
+            this.$refs.code.start()
+          }, 2000)
+        } else {
+          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
+        }
+      },
+      // 获取验证码倒计时被修改
+      codeChange(event) {
+        this.tips = event
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  /* 悬浮 */
+  /* .login-sussuspension{
+    animation: suspension 3s ease-in-out infinite;
+  }
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translate(0 , 0);
+    }
+    50% {
+      transform: translate(0rem , 1rem);
+    }
+  } */
+  
+  .login {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    
+    /* 背景图片 start */
+    &__bg {
+      z-index: -1;
+      position: fixed;
+      
+      &--top {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        
+        .bg {
+          width: 750rpx;
+          will-change: transform;
+        }
+      }
+      
+      &--bottom {
+        bottom: -10rpx;
+        left: 0;
+        right: 0;
+        width: 100%;
+        // height: 144px;
+        margin-bottom: env(safe-area-inset-bottom);
+        
+        image {
+          width: 750rpx;
+          will-change: transform;
+        }
+      }
+    }
+    /* 背景图片 end */
+    
+    /* 内容 start */
+    &__wrapper {
+      margin-top: 300rpx;
+      width: 100%;
+    }
+    
+    /* 切换 start */
+    &__mode {
+      position: relative;
+      margin: 0 auto;
+      width: 476rpx;
+      height: 77rpx;
+      margin-top: 100rpx;
+      background-color: rgba(255,255,255,0.6);
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 39rpx;
+      
+      &__item {
+        height: 77rpx;
+        width: 100%;
+        line-height: 77rpx;
+        text-align: center;
+        font-size: 31rpx;
+        color: #080808;
+        letter-spacing: 1em;
+        text-indent: 1em;
+        z-index: 2;
+        transition: all 0.4s;
+        
+        &--active {
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+      }
+      
+      &__slider {
+        position: absolute;
+        height: inherit;
+        width: calc(476rpx / 2);
+        border-radius: inherit;
+        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+    /* 切换 end */
+    
+    /* 登录注册信息 start */
+    &__info {
+      margin: 80rpx 30rpx 10rpx 30rpx;
+      padding-bottom: 0;
+      border-radius: 20rpx;
+      
+      &__item {
+        
+        &__input {
+          margin-top: 59rpx;
+          width: 100%;
+          height: 77rpx;
+          border: 1rpx solid #E6E6E6;
+          border-radius: 39rpx;
+          
+          &__left-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-left: 20rpx;
+            color: #838383;
+          }
+          
+          &__content {
+            width: 80%;
+            padding-left: 10rpx;
+            
+            &--verify-code {
+              width: 56%;
+            }
+            
+            input {
+              font-size: 24rpx;
+              // letter-spacing: 0.1em;
+            }
+          }
+          
+          &__right-icon {
+            width: 10%;
+            font-size: 44rpx;
+            margin-right: 20rpx;
+            color: #838383;
+          }
+          
+          &__right-verify-code {
+            width: 34%;
+            margin-right: 20rpx;
+          }
+        }
+        
+        &__button {
+          margin-top: 75rpx;
+          margin-bottom: 39rpx;
+          width: 100%;
+          height: 77rpx;
+          text-align: center;
+          font-size: 31rpx;
+          font-weight: bold;
+          line-height: 77rpx;
+          letter-spacing: 1em;
+          text-indent: 1em;
+          border-radius: 39rpx;
+          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
+        }
+        
+        &__tips {
+          margin: 30rpx 0;
+          color: #AAAAAA;
+        }
+      }
+    }
+    /* 登录注册信息 end */
+    
+    /* 登录方式切换 start */
+    &__way {
+      margin: 0 auto;
+      margin-top: 110rpx;
+      
+      &__item {
+        &--icon {
+          width: 85rpx;
+          height: 85rpx;
+          font-size: 80rpx;
+          // border-radius: 100rpx;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          
+          // &::after {
+          //   content: " ";
+          //   position: absolute;
+          //   z-index: -1;
+          //   width: 100%;
+          //   height: 100%;
+          //   left: 0;
+          //   bottom: 0;
+          //   border-radius: inherit;
+          //   opacity: 1;
+          //   transform: scale(1, 1);
+          //   background-size: 100% 100%;
+          //   background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
+          // }
+        }
+      }
+    }
+    /* 登录方式切换 end */
+    /* 内容 end */
+    
+  }
+  
+  /deep/.input-placeholder {
+    font-size: 24rpx;
+    color: #838383;
+  }
+  
+</style>
diff --git a/templatePage/my/demo1/demo1.vue b/templatePage/my/demo1/demo1.vue
new file mode 100644
index 0000000..6994c96
--- /dev/null
+++ b/templatePage/my/demo1/demo1.vue
@@ -0,0 +1,430 @@
+<template>
+  <view class="template-about tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+
+    
+    
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    <view class="tnwave waveAnimation">
+      <view class="waveWrapperInner bgTop">
+        <view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgMiddle">
+        <view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
+      </view>
+      <view class="waveWrapperInner bgBottom">
+        <view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
+      </view>
+    </view>
+    
+    <view class="about__wrap">
+      <!-- 头像用户信息 -->
+      <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+        <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
+          <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;background-size: cover;">
+          </view>
+          <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
+        </view>
+        <view class="user-info__nick-name">图鸟科技</view>
+      </view>
+      
+
+      
+      <!-- 消息&数据 -->
+      <view class="tn-shadow-warp" style="margin-top: 100rpx;background-color: rgba(255,255,255,1);">
+        <view class="tn-flex">
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-orange">1.29W</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-fire"></text>
+                <text class="tn-padding-left-xs">人气</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-blue">216</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-share-circle"></text>
+                <text class="tn-padding-left-xs">分享</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="">
+                <view class="tn-text-xxl tn-color-red">962</view>
+              </view>
+              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
+                <text class="tn-icon-like"></text>
+                <text class="tn-padding-left-xs">爱心</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view> 
+      
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" > 
+              <view class="tn-icon-logo-tuniao"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
+              <view class="tn-icon-like-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
+            <!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white"> 
+              <view class="tn-icon-set-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">更新日志</view>
+            <!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
+          </view>
+        </tn-list-cell>
+      </view>
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" > 
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white"> 
+              <view class="tn-icon-message-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
+            <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> 
+              <view class="tn-icon-phone-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
+            <view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white"> 
+              <view class="tn-icon-safe-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+          </view>
+        </tn-list-cell>
+      </view>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">案例</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+        </view>
+        <view class="tn-color-black">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+     
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'about-demo-1',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-about{
+  }
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 450rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 波浪*/
+  @keyframes move_wave {
+      0% {
+          transform: translateX(0) translateZ(0) scaleY(1)
+      }
+      50% {
+          transform: translateX(-25%) translateZ(0) scaleY(1)
+      }
+      100% {
+          transform: translateX(-50%) translateZ(0) scaleY(1)
+      }
+  }
+  .tnwave {
+      overflow: hidden;
+      position: absolute;
+      z-index: 9999;
+      height: 200rpx;
+      left: 0;
+      right: 0;
+      top: 290rpx;
+      bottom: auto;
+  }
+  .waveWrapperInner {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+  }
+  .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-repeat: repeat no-repeat;
+      background-position: 0 bottom;
+      transform-origin: center bottom;
+  }
+  
+  .bgTop {
+      opacity: 0.4;
+  }
+  .waveTop {
+      background-size: 50% 45px;
+  }
+  .waveAnimation .waveTop {
+    animation: move_wave 4s linear infinite;
+  }
+  
+  .bgMiddle {
+      opacity: 0.6;
+  }
+  .waveMiddle {
+      background-size: 50% 40px;
+  }
+  .waveAnimation .waveMiddle {
+      animation: move_wave 3.5s linear infinite;
+  }
+  
+  .bgBottom {
+      opacity: 0.95;
+  }
+  .waveBottom {
+      background-size: 50% 35px;
+  }
+  .waveAnimation .waveBottom {
+      animation: move_wave 2s linear infinite;
+  }
+  /* 波浪*/
+  
+  /* 页面 start*/
+  .about-shadow{
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .about {
+    
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      // margin: 20rpx 30rpx;
+      margin-top: -330rpx;
+    }
+  }
+  /* 页面 end*/
+  
+  /* 用户信息 start */
+  .user-info {
+    &__container {
+      
+    }
+    
+    &__avatar {
+      width: 170rpx;
+      height: 170rpx;
+      border: 8rpx solid rgba(255,255,255,0.05);
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    }
+    
+    &__nick-name {
+      margin-top: 26rpx;
+      font-size: 36rpx;
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+  /* 用户信息 end */
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      // width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+    /* 图标容器1 end */
+    
+    /* 底部tabbar start*/
+    .footerfixed{
+     position: fixed;
+     width: 100%;
+     bottom: 0;
+     z-index: 999;
+     background-color: #FFFFFF;
+     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    }
+    
+    .tabbar {
+      display: flex;
+      align-items: center;
+      min-height: 110rpx;
+      justify-content: space-between;
+    	padding: 0;
+    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+    }
+    
+    .tabbar .action {
+    	font-size: 22rpx;
+    	position: relative;
+    	flex: 1;
+    	text-align: center;
+    	padding: 0;
+    	display: block;
+    	height: auto;
+    	line-height: 1;
+    	margin: 0;
+    	overflow: initial;
+    }
+    
+    .tabbar .action .bar-icon {
+    	width: 100rpx;
+    	position: relative;
+    	display: block;
+    	height: auto;
+    	margin: 0 auto 10rpx;
+    	text-align: center;
+    	font-size: 42rpx;
+    }
+    
+    .tabbar .action .bar-icon image {
+    	width: 50rpx;
+    	height: 50rpx;
+    	display: inline-block;
+    }
+</style>
diff --git a/templatePage/my/demo2/demo2.vue b/templatePage/my/demo2/demo2.vue
new file mode 100644
index 0000000..50a2a2b
--- /dev/null
+++ b/templatePage/my/demo2/demo2.vue
@@ -0,0 +1,803 @@
+<template>
+  <view class="template-about tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    
+    <button @click="navTuniaoHome">
+      <view class="dong">
+        <view class="monster">
+          <view class="monster__face">
+            <view class="monster__eye avatar-eye avatar-eye--green eye--left">
+              <view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__eye avatar-eye avatar-eye--violet eye--right">
+              <view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__noses">
+              <view class="monster__nose"></view>
+              <view class="monster__nose"></view>
+            </view>
+            <view class="monster__mouth">
+              <view class="monster__top"></view>
+              <view class="monster__bottom"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </button>
+    
+    
+    
+    <view class="about__wrap">
+      
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+        <view class="justify-content-item">
+          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+            <!-- 图标logo -->
+            <view class="logo-pic tn-shadow" >
+              <view class="logo-image">
+                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
+                </view>
+                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
+              </view>
+            </view>
+            <view class="tn-padding-right tn-color-white">
+              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
+                图鸟小伙伴
+              </view>
+              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
+            </view>
+            
+          </view>
+        </view>
+      </view>
+      
+      <!-- 方式7 start-->
+      <view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx;">
+        <view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
+            </view>
+            <view class="tn-text-center">
+              <view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式7 end-->
+      
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" > 
+              <view class="tn-icon-logo-tuniao"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
+              <view class="tn-icon-like-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
+            <!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white"> 
+              <view class="tn-icon-set-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">更新日志</view>
+            <!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
+          </view>
+        </tn-list-cell>
+      </view>
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" > 
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white"> 
+              <view class="tn-icon-message-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
+            <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> 
+              <view class="tn-icon-phone-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
+            <view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white"> 
+              <view class="tn-icon-safe-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+          </view>
+        </tn-list-cell>
+      </view>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">案例</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+        </view>
+        <view class="tn-color-black">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+     
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'about-demo-2',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转到
+      navTuniaoHome(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-about{
+  }
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 450rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 用户头像 start */
+  .logo-image{
+    width: 120rpx;
+    height: 120rpx;
+    position: relative;
+    background-color: #FFFFFF;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  
+  /* 页面 start*/
+  .about-shadow{
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .about {
+    
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 30rpx;
+      margin-top: -230rpx;
+    }
+  }
+  /* 页面 end*/
+  
+  .my-shadow{
+      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
+      border-radius: 20rpx;
+  }
+  
+  /* 图标容器7 start */
+  .icon7 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 10rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 0;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }    
+  
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      // width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+    /* 图标容器1 end */
+    
+    /* 底部tabbar start*/
+    .footerfixed{
+     position: fixed;
+     width: 100%;
+     bottom: 0;
+     z-index: 999;
+     background-color: #FFFFFF;
+     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    }
+    
+    .tabbar {
+      display: flex;
+      align-items: center;
+      min-height: 110rpx;
+      justify-content: space-between;
+    	padding: 0;
+    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+    }
+    
+    .tabbar .action {
+    	font-size: 22rpx;
+    	position: relative;
+    	flex: 1;
+    	text-align: center;
+    	padding: 0;
+    	display: block;
+    	height: auto;
+    	line-height: 1;
+    	margin: 0;
+    	overflow: initial;
+    }
+    
+    .tabbar .action .bar-icon {
+    	width: 100rpx;
+    	position: relative;
+    	display: block;
+    	height: auto;
+    	margin: 0 auto 10rpx;
+    	text-align: center;
+    	font-size: 42rpx;
+    }
+    
+    .tabbar .action .bar-icon image {
+    	width: 50rpx;
+    	height: 50rpx;
+    	display: inline-block;
+    }
+    
+    
+    /* 大嘴鸟*/
+    .dong {
+    	z-index: 9999;
+    	position: fixed;
+    	top: -40px;
+    	right: -80px;
+    	transform: scale(0.24);
+    	-webkit-transform: scale(0.24);
+    	-moz-transform: scale(0.24);
+    
+    }
+    
+    .monster {
+    	transform: rotate(-50deg);
+    	-ms-transform: rotate(-50deg);
+    	/* IE 9 */
+    	-moz-transform: rotate(-50deg);
+    	/* Firefox */
+    	-webkit-transform: rotate(-50deg);
+    	/* Safari 和 Chrome */
+    	-o-transform: rotate(-50deg);
+    	/* Opera */
+    	display: flex;
+    	justify-content: center;
+    	position: relative;
+    	width: 170px;
+    	height: 400px;
+    	border-top-left-radius: 200px;
+    	border-top-right-radius: 200px;
+    	background-color: #3C47D7;
+    	box-shadow: 20px 20px 60px #4650E5;
+    }
+    
+    .monster__face {
+    	display: flex;
+    	justify-content: center;
+    	align-items: center;
+    	flex-direction: column;
+    	position: absolute;
+    	top: 14%;
+    	width: 75%;
+    	height: 160px;
+    }
+    
+    .monster__noses {
+    	top: 50%;
+    	display: flex;
+    	justify-content: space-between;
+    	width: 28%;
+    	height: auto;
+    	margin-bottom: 10px;
+    }
+    
+    .monster__nose {
+    	width: 8px;
+    	height: 12px;
+    	border-radius: 20px;
+    	background: rgba(0, 0, 0, 0.5);
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .monster__mouth {
+    	display: flex;
+    	justify-content: center;
+    	align-items: center;
+    	position: relative;
+    	width: 100%;
+    	height: 0%;
+    	overflow: hidden;
+    	border: 25px solid #FFC333;
+    	border-radius: 100px;
+    	background-color: #810332;
+    	animation: mouth 1.75s infinite;
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    	box-sizing: border-box;
+    }
+    
+    .monster__mouth::before {
+    	content: '';
+    	position: absolute;
+    	width: 150px;
+    	height: 80px;
+    	border-radius: 100px;
+    	background-color: #400018;
+    }
+    
+    .monster__mouth::after {
+    	content: '';
+    	position: absolute;
+    	bottom: -80px;
+    	width: 160px;
+    	height: 80px;
+    	border-top-left-radius: 50%;
+    	border-top-right-radius: 50%;
+    	background-color: #DC1B50;
+    	animation: tongue 1.75s infinite;
+    }
+    
+    .monster__top {
+    	position: absolute;
+    	top: -30px;
+    	width: 170px;
+    	height: 30px;
+    	border-bottom-left-radius: 10px;
+    	border-bottom-right-radius: 10px;
+    	background-color: #ffffff;
+    	z-index: 100;
+    	animation: t 1.75s infinite;
+    }
+    
+    .monster__bottom {
+    	position: absolute;
+    	bottom: 0;
+    	width: 100px;
+    	height: 30px;
+    	border-top-left-radius: 10px;
+    	border-top-right-radius: 10px;
+    	background-color: #ffffff;
+    	z-index: 100;
+    	animation: b 1.75s infinite;
+    }
+    
+    
+    .avatar-eye {
+    	position: absolute;
+    	top: -10%;
+    	width: 65px;
+    	height: 65px;
+    	background: linear-gradient(105deg, white, #cb87f4);
+    	border-radius: 100%;
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    	margin: 3px;
+    	-webkit-transform: translateX(-50%);
+    	transform: translateX(-50%);
+    }
+    
+    
+    .avatar-eye--green {
+    	background: linear-gradient(to bottom, #fdfdfd, #c3efea);
+    }
+    
+    .avatar-eye--violet {
+    	background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
+    }
+    
+    
+    .eye--left {
+    	left: 10%;
+    }
+    
+    .eye--right {
+    	left: 85%;
+    }
+    
+    .eye--center {
+    	left: 45%;
+    	top: 10%;
+    }
+    
+    .avatar-eye-pupil {
+    	position: absolute;
+    	width: 55%;
+    	height: 55%;
+    	left: 50%;
+    	top: 25%;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	z-index: 100;
+    	border-radius: 100%;
+    }
+    
+    
+    .pupil--green {
+    	background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
+    }
+    
+    .pupil--pink {
+    	background: linear-gradient(135deg, #f1a183, #8535cd);
+    }
+    
+    
+    .avatar-eye-pupil-blackThing {
+    	position: absolute;
+    	width: 55%;
+    	height: 55%;
+    	left: 50%;
+    	top: 25%;
+    	background: #2c2f32;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	border-radius: 100%;
+    	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    .avatar-eye-pupil-lightReflection {
+    	position: absolute;
+    	width: 7px;
+    	height: 7px;
+    	left: 25%;
+    	top: 10%;
+    	background: #ebebeb;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	border-radius: 100%;
+    	box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
+    }
+    
+    
+    
+    
+    
+    /**/
+    @keyframes t {
+    
+    	0%,
+    	10%,
+    	80%,
+    	100% {
+    		top: -30px;
+    	}
+    
+    	20% {
+    		top: 0px;
+    	}
+    
+    	30% {
+    		top: -20px;
+    	}
+    
+    	40% {
+    		top: -0px;
+    	}
+    
+    	50% {
+    		top: -25px;
+    	}
+    
+    	70% {
+    		top: 0px;
+    	}
+    }
+    
+    @keyframes b {
+    
+    	0%,
+    	10%,
+    	80%,
+    	100% {
+    		bottom: -30px;
+    	}
+    
+    	20% {
+    		bottom: 0px;
+    	}
+    
+    	30% {
+    		bottom: -20px;
+    	}
+    
+    	40% {
+    		bottom: -0px;
+    	}
+    
+    	50% {
+    		bottom: -25px;
+    	}
+    
+    	70% {
+    		bottom: 0px;
+    	}
+    }
+    
+    @keyframes mouth {
+    
+    	0%,
+    	10%,
+    	100% {
+    		width: 100%;
+    		height: 0%;
+    	}
+    
+    	15% {
+    		width: 90%;
+    		height: 30%;
+    	}
+    
+    	20% {
+    		width: 50%;
+    		height: 70%;
+    	}
+    
+    	25% {
+    		width: 70%;
+    		height: 70%;
+    	}
+    
+    	30% {
+    		width: 80%;
+    		height: 60%;
+    	}
+    
+    	35% {
+    		width: 60%;
+    		height: 70%;
+    	}
+    
+    	40% {
+    		width: 55%;
+    		height: 75%;
+    	}
+    
+    	45% {
+    		width: 50%;
+    		height: 90%;
+    	}
+    
+    	50% {
+    		width: 40%;
+    		height: 70%;
+    	}
+    
+    	55% {
+    		width: 70%;
+    		height: 95%;
+    	}
+    
+    	60% {
+    		width: 40%;
+    		height: 50%;
+    	}
+    
+    	65% {
+    		width: 100%;
+    		height: 60%;
+    	}
+    
+    	70% {
+    		width: 100%;
+    		height: 70%;
+    	}
+    
+    	75% {
+    		width: 90%;
+    		height: 70%;
+    	}
+    
+    	80% {
+    		width: 50%;
+    		height: 70%;
+    	}
+    
+    	85% {
+    		width: 90%;
+    		height: 50%;
+    	}
+    
+    	85% {
+    		width: 40%;
+    		height: 70%;
+    	}
+    
+    	90% {
+    		width: 90%;
+    		height: 30%;
+    	}
+    
+    	95% {
+    		width: 100%;
+    		height: 10%;
+    	}
+    }
+    
+    @keyframes tongue {
+    
+    	0%,
+    	20%,
+    	100% {
+    		bottom: -80px;
+    	}
+    
+    	30%,
+    	90% {
+    		bottom: -40px;
+    	}
+    
+    	40% {
+    		bottom: -45px;
+    	}
+    
+    	50% {
+    		bottom: -50px;
+    	}
+    
+    	70% {
+    		bottom: -80px;
+    	}
+    
+    	90% {
+    		bottom: -40px;
+    	}
+    }
+    
+</style>
diff --git a/templatePage/my/demo3/demo3.vue b/templatePage/my/demo3/demo3.vue
new file mode 100644
index 0000000..cd2a12b
--- /dev/null
+++ b/templatePage/my/demo3/demo3.vue
@@ -0,0 +1,957 @@
+<template>
+  <view class="template-about tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+    
+    
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
+    </view>
+    
+    
+    <button @click="navTuniaoHome">
+      <view class="dong">
+        <view class="monster">
+          <view class="monster__face">
+            <view class="monster__eye avatar-eye avatar-eye--green eye--left">
+              <view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__eye avatar-eye avatar-eye--violet eye--right">
+              <view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
+            </view>
+            <view class="monster__noses">
+              <view class="monster__nose"></view>
+              <view class="monster__nose"></view>
+            </view>
+            <view class="monster__mouth">
+              <view class="monster__top"></view>
+              <view class="monster__bottom"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </button>
+    
+    
+    
+    <view class="about__wrap">
+      
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+        <view class="justify-content-item">
+          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+            <!-- 图标logo -->
+            <view class="logo-pic tn-shadow" >
+              <view class="logo-image">
+                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
+                </view>
+                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
+              </view>
+            </view>
+            <view class="tn-padding-right tn-color-white">
+              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
+                图鸟小伙伴
+              </view>
+              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
+            </view>
+            
+          </view>
+        </view>
+      </view>
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
+        <!-- 方式12 start-->
+        <view class="tn-flex tn-flex-row-center tn-radius"> 
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-vip"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">我的订单</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-money"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">余额充值</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-ticket"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">消费明细</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-lucky-money"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">红包卡券</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-center tn-radius">
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-shop"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分商城</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-order"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分订单</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-star"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">店铺收藏</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-map"></view>
+              </view>  
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">收货地址</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 方式12 end-->
+      </view>
+      
+      <view class="tn-flex tn-flex-row-between tn-padding-top-xl">
+        <view class="justify-content-item tn-text-bold tn-text-lg">
+          <text class="">更多功能</text>
+        </view>
+        <view class="justify-content-item tn-text-df">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>  
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
+          <view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
+            <block v-for="(item, index) in historyData" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                    <view :class="[`tn-icon-${item.icon}`]"></view>
+                  </view>  
+                  <view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
+                    <text class="tn-text-ellipsis" >{{ item.title }}</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </view>
+      
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" > 
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white"> 
+              <view class="tn-icon-message-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
+            <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> 
+              <view class="tn-icon-phone-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
+            <view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white"> 
+              <view class="tn-icon-safe-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+          </view>
+        </tn-list-cell>
+      </view>
+      
+    </view>
+    
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+        </view>
+        <view class="tn-color-gray">福利</view>
+      </view>
+      <view class="action">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+        </view>
+        <view class="tn-color-black">我的</view>
+      </view>
+    </view>
+    <view class="tn-padding-xl"></view>
+     
+    
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'about-demo-3',
+    mixins: [template_page_mixin],
+    components: { NavIndexButton },
+    data(){
+      return {
+        historyData: [
+          {
+            title: '分销中心',
+            icon: 'organizatio',
+            color: 'orange',
+          },
+          {
+            title: '积分商城',
+            icon: 'level',
+            color: 'purple',
+          },
+          {
+            title: '限时秒杀',
+            icon: 'clock',
+            color: 'blue',
+          },
+          {
+            title: '社区团购',
+            icon: 'team',
+            color: 'purplered',
+          },
+          {
+            title: '大转盘',
+            icon: 'group-circle',
+            color: 'teal',
+          },
+          {
+            title: '商品核销',
+            icon: 'scan',
+            color: 'orangered',
+          },
+          {
+            title: '满减优惠',
+            icon: 'coupon',
+            color: 'indigo',
+          },
+          {
+            title: '视频直播',
+            icon: 'video',
+            color: 'green',
+          }
+        ]
+      }
+    },
+    methods: {
+      // 跳转到
+      navTuniaoHome(e) {
+        wx.vibrateLong();
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-about{
+  }
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+  
+    .backgroud-image {
+      width: 100%;
+      height: 450rpx;
+      // z-index: -1;
+    }
+  }
+  /* 顶部背景图 end */
+  
+  /* 用户头像 start */
+  .logo-image{
+    width: 120rpx;
+    height: 120rpx;
+    position: relative;
+  }
+  .logo-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:top;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: #FFFFFF;
+  }
+  
+  /* 页面 start*/
+  .about-shadow{
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+  
+  .about {
+    
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 30rpx;
+      margin-top: -230rpx;
+    }
+  }
+  /* 页面 end*/
+  
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      // width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+    /* 图标容器1 end */
+    
+    /* 底部tabbar start*/
+    .footerfixed{
+     position: fixed;
+     width: 100%;
+     bottom: 0;
+     z-index: 999;
+     background-color: #FFFFFF;
+     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    }
+    
+    .tabbar {
+      display: flex;
+      align-items: center;
+      min-height: 110rpx;
+      justify-content: space-between;
+    	padding: 0;
+    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+    }
+    
+    .tabbar .action {
+    	font-size: 22rpx;
+    	position: relative;
+    	flex: 1;
+    	text-align: center;
+    	padding: 0;
+    	display: block;
+    	height: auto;
+    	line-height: 1;
+    	margin: 0;
+    	overflow: initial;
+    }
+    
+    .tabbar .action .bar-icon {
+    	width: 100rpx;
+    	position: relative;
+    	display: block;
+    	height: auto;
+    	margin: 0 auto 10rpx;
+    	text-align: center;
+    	font-size: 42rpx;
+    }
+    
+    .tabbar .action .bar-icon image {
+    	width: 50rpx;
+    	height: 50rpx;
+    	display: inline-block;
+    }
+      
+    /* 图标容器12 start */
+    .icon12 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 100rpx;
+          height: 100rpx;
+          font-size: 60rpx;
+          // border-radius: 50%;
+          margin-bottom: 0rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+    
+              
+          }
+        }
+      }
+    }
+    
+    /* 图标容器11 start */
+    .icon11 {
+      &__item {
+        width: 30%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+        padding: 30rpx;
+        margin: 20rpx 10rpx;
+        transform: scale(1);
+        transition: transform 0.3s linear;
+        transform-origin: center center;
+        
+        &--icon {
+          width: 100rpx;
+          height: 100rpx;
+          font-size: 60rpx;
+          border-radius: 50%;
+          margin-bottom: 18rpx;
+          position: relative;
+          z-index: 1;
+          
+          &::after {
+            content: " ";
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            border-radius: inherit;
+            opacity: 1;
+            transform: scale(1, 1);
+            background-size: 100% 100%;
+            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+          }
+        }
+      }
+    }  
+    
+    /* 大嘴鸟*/
+    .dong {
+    	z-index: 9999;
+    	position: fixed;
+    	top: -40px;
+    	right: -80px;
+    	transform: scale(0.24);
+    	-webkit-transform: scale(0.24);
+    	-moz-transform: scale(0.24);
+    
+    }
+    
+    .monster {
+    	transform: rotate(-50deg);
+    	-ms-transform: rotate(-50deg);
+    	/* IE 9 */
+    	-moz-transform: rotate(-50deg);
+    	/* Firefox */
+    	-webkit-transform: rotate(-50deg);
+    	/* Safari 和 Chrome */
+    	-o-transform: rotate(-50deg);
+    	/* Opera */
+    	display: flex;
+    	justify-content: center;
+    	position: relative;
+    	width: 170px;
+    	height: 400px;
+    	border-top-left-radius: 200px;
+    	border-top-right-radius: 200px;
+    	background-color: #3C47D7;
+    	box-shadow: 20px 20px 60px #4650E5;
+    }
+    
+    .monster__face {
+    	display: flex;
+    	justify-content: center;
+    	align-items: center;
+    	flex-direction: column;
+    	position: absolute;
+    	top: 14%;
+    	width: 75%;
+    	height: 160px;
+    }
+    
+    .monster__noses {
+    	top: 50%;
+    	display: flex;
+    	justify-content: space-between;
+    	width: 28%;
+    	height: auto;
+    	margin-bottom: 10px;
+    }
+    
+    .monster__nose {
+    	width: 8px;
+    	height: 12px;
+    	border-radius: 20px;
+    	background: rgba(0, 0, 0, 0.5);
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .monster__mouth {
+    	display: flex;
+    	justify-content: center;
+    	align-items: center;
+    	position: relative;
+    	width: 100%;
+    	height: 0%;
+    	overflow: hidden;
+    	border: 25px solid #FFC333;
+    	border-radius: 100px;
+    	background-color: #810332;
+    	animation: mouth 1.75s infinite;
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    	box-sizing: border-box;
+    }
+    
+    .monster__mouth::before {
+    	content: '';
+    	position: absolute;
+    	width: 150px;
+    	height: 80px;
+    	border-radius: 100px;
+    	background-color: #400018;
+    }
+    
+    .monster__mouth::after {
+    	content: '';
+    	position: absolute;
+    	bottom: -80px;
+    	width: 160px;
+    	height: 80px;
+    	border-top-left-radius: 50%;
+    	border-top-right-radius: 50%;
+    	background-color: #DC1B50;
+    	animation: tongue 1.75s infinite;
+    }
+    
+    .monster__top {
+    	position: absolute;
+    	top: -30px;
+    	width: 170px;
+    	height: 30px;
+    	border-bottom-left-radius: 10px;
+    	border-bottom-right-radius: 10px;
+    	background-color: #ffffff;
+    	z-index: 100;
+    	animation: t 1.75s infinite;
+    }
+    
+    .monster__bottom {
+    	position: absolute;
+    	bottom: 0;
+    	width: 100px;
+    	height: 30px;
+    	border-top-left-radius: 10px;
+    	border-top-right-radius: 10px;
+    	background-color: #ffffff;
+    	z-index: 100;
+    	animation: b 1.75s infinite;
+    }
+    
+    
+    .avatar-eye {
+    	position: absolute;
+    	top: -10%;
+    	width: 65px;
+    	height: 65px;
+    	background: linear-gradient(105deg, white, #cb87f4);
+    	border-radius: 100%;
+    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
+    	margin: 3px;
+    	-webkit-transform: translateX(-50%);
+    	transform: translateX(-50%);
+    }
+    
+    
+    .avatar-eye--green {
+    	background: linear-gradient(to bottom, #fdfdfd, #c3efea);
+    }
+    
+    .avatar-eye--violet {
+    	background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
+    }
+    
+    
+    .eye--left {
+    	left: 10%;
+    }
+    
+    .eye--right {
+    	left: 85%;
+    }
+    
+    .eye--center {
+    	left: 45%;
+    	top: 10%;
+    }
+    
+    .avatar-eye-pupil {
+    	position: absolute;
+    	width: 55%;
+    	height: 55%;
+    	left: 50%;
+    	top: 25%;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	z-index: 100;
+    	border-radius: 100%;
+    }
+    
+    
+    .pupil--green {
+    	background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
+    }
+    
+    .pupil--pink {
+    	background: linear-gradient(135deg, #f1a183, #8535cd);
+    }
+    
+    
+    .avatar-eye-pupil-blackThing {
+    	position: absolute;
+    	width: 55%;
+    	height: 55%;
+    	left: 50%;
+    	top: 25%;
+    	background: #2c2f32;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	border-radius: 100%;
+    	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    .avatar-eye-pupil-lightReflection {
+    	position: absolute;
+    	width: 7px;
+    	height: 7px;
+    	left: 25%;
+    	top: 10%;
+    	background: #ebebeb;
+    	-webkit-transform: translate(-50%);
+    	transform: translate(-50%);
+    	border-radius: 100%;
+    	box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
+    }
+    
+    
+    
+    
+    
+    /**/
+    @keyframes t {
+    
+    	0%,
+    	10%,
+    	80%,
+    	100% {
+    		top: -30px;
+    	}
+    
+    	20% {
+    		top: 0px;
+    	}
+    
+    	30% {
+    		top: -20px;
+    	}
+    
+    	40% {
+    		top: -0px;
+    	}
+    
+    	50% {
+    		top: -25px;
+    	}
+    
+    	70% {
+    		top: 0px;
+    	}
+    }
+    
+    @keyframes b {
+    
+    	0%,
+    	10%,
+    	80%,
+    	100% {
+    		bottom: -30px;
+    	}
+    
+    	20% {
+    		bottom: 0px;
+    	}
+    
+    	30% {
+    		bottom: -20px;
+    	}
+    
+    	40% {
+    		bottom: -0px;
+    	}
+    
+    	50% {
+    		bottom: -25px;
+    	}
+    
+    	70% {
+    		bottom: 0px;
+    	}
+    }
+    
+    @keyframes mouth {
+    
+    	0%,
+    	10%,
+    	100% {
+    		width: 100%;
+    		height: 0%;
+    	}
+    
+    	15% {
+    		width: 90%;
+    		height: 30%;
+    	}
+    
+    	20% {
+    		width: 50%;
+    		height: 70%;
+    	}
+    
+    	25% {
+    		width: 70%;
+    		height: 70%;
+    	}
+    
+    	30% {
+    		width: 80%;
+    		height: 60%;
+    	}
+    
+    	35% {
+    		width: 60%;
+    		height: 70%;
+    	}
+    
+    	40% {
+    		width: 55%;
+    		height: 75%;
+    	}
+    
+    	45% {
+    		width: 50%;
+    		height: 90%;
+    	}
+    
+    	50% {
+    		width: 40%;
+    		height: 70%;
+    	}
+    
+    	55% {
+    		width: 70%;
+    		height: 95%;
+    	}
+    
+    	60% {
+    		width: 40%;
+    		height: 50%;
+    	}
+    
+    	65% {
+    		width: 100%;
+    		height: 60%;
+    	}
+    
+    	70% {
+    		width: 100%;
+    		height: 70%;
+    	}
+    
+    	75% {
+    		width: 90%;
+    		height: 70%;
+    	}
+    
+    	80% {
+    		width: 50%;
+    		height: 70%;
+    	}
+    
+    	85% {
+    		width: 90%;
+    		height: 50%;
+    	}
+    
+    	85% {
+    		width: 40%;
+    		height: 70%;
+    	}
+    
+    	90% {
+    		width: 90%;
+    		height: 30%;
+    	}
+    
+    	95% {
+    		width: 100%;
+    		height: 10%;
+    	}
+    }
+    
+    @keyframes tongue {
+    
+    	0%,
+    	20%,
+    	100% {
+    		bottom: -80px;
+    	}
+    
+    	30%,
+    	90% {
+    		bottom: -40px;
+    	}
+    
+    	40% {
+    		bottom: -45px;
+    	}
+    
+    	50% {
+    		bottom: -50px;
+    	}
+    
+    	70% {
+    		bottom: -80px;
+    	}
+    
+    	90% {
+    		bottom: -40px;
+    	}
+    }
+    
+</style>
diff --git a/templatePage/my/demo4/demo4.vue b/templatePage/my/demo4/demo4.vue
new file mode 100644
index 0000000..1c1cc5a
--- /dev/null
+++ b/templatePage/my/demo4/demo4.vue
@@ -0,0 +1,1089 @@
+<template>
+  <view class="template-myblog tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <!-- <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar> -->
+
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
+      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
+        <!-- 图标logo -->
+        <view class="custom-nav__back">
+          <view class="tn-icon-notice tn-color-white tn-text-shadow-brown" style="font-size: 50rpx;">
+            <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
+              <text>12</text>
+            </tn-badge>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+    
+
+    <view class="top-backgroup">
+      <image src='https://tnuiimage.tnkjapp.com/my/my-vip.jpg' mode='widthFix' class='backgroud-image'></image>
+    </view>
+
+
+    <view class="about__wrap">
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+        <view class="justify-content-item">
+          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
+            <!-- 图标logo -->
+            <view class="logo-pic tn-shadow">
+              <view class="logo-image">
+                <view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 100rpx;height: 100rpx;background-size: cover;">
+                </view>
+                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 100rpx;color: #01BEFF;padding: 16rpx 0;"></view> -->
+              </view>
+            </view>
+            <view class="tn-padding-right tn-color-white">
+              <view class="tn-padding-right tn-padding-left-sm tn-text-xl tn-text-bold">
+                抓住那只北北猪
+              </view>
+              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
+                <text class="" style="opacity: 0.5;">终身会员</text>
+                <text class="tn-color-orange--dark tn-text-bold tn-padding-left-sm">SVIP 6</text>
+              </view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+      
+      <view class="" style="padding-top: 170rpx;">
+        <view class="nav_title--wrap">
+          <view class="nav_title">
+            <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
+            <text class="tn-text-xl">会员尊享 · 超值特权</text>
+            <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
+          </view>
+        </view>
+      </view> 
+      
+      <!-- 方式15 start-->
+      <view class="tn-flex tn-margin tn-flex-row-center tn-radius" style="color: #0E122A;"> 
+        <view class="tn-padding-sm tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange">
+              <view class="tn-icon-cart"></view>
+            </view>  
+            <view class="tn-text-center" style="opacity: 0.4;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+              <text class="tn-text-ellipsis">购物特权</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange">
+              <view class="tn-icon-brand"></view>
+            </view>  
+            <view class="tn-text-center" style="opacity: 0.4;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+              <text class="tn-text-ellipsis">品牌特权</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange">
+              <view class="tn-icon-live-stream"></view>
+            </view>  
+            <view class="tn-text-center" style="opacity: 0.4;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+              <text class="tn-text-ellipsis">娱乐特权</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange">
+              <view class="tn-icon-moon"></view>
+            </view>  
+            <view class="tn-text-center" style="opacity: 0.4;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+              <text class="tn-text-ellipsis">生日特权</text>
+            </view>
+          </view>
+        </view>
+        <view class="tn-padding-sm tn-radius">
+          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange">
+              <view class="tn-icon-service"></view>
+            </view>  
+            <view class="tn-text-center" style="opacity: 0.4;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+              <text class="tn-text-ellipsis">客服特权</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 方式15 end-->
+      
+      <view class="tn-flex tn-flex-row-between tn-padding-top-xl">
+        <view class="justify-content-item tn-text-bold tn-text-lg">
+          <text class="">常用功能</text>
+        </view>
+        <view class="justify-content-item tn-text-df">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>
+
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white" style="color: #0E122A;text-shadow:#0E122A 0rpx 0rpx 0rpx;">
+        <!-- 方式12 start-->
+        <view class="tn-flex tn-flex-row-center tn-radius">
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-vip"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">会员充值</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-money"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">余额明细</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-ticket"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">消费明细</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-lucky-money"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">红包卡券</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-center tn-radius">
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-shop"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分商城</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-order"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">积分订单</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-star"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">店铺收藏</text>
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-sm tn-margin-xs tn-radius">
+            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                <view class="tn-icon-map"></view>
+              </view>
+              <view class="tn-text-center">
+                <text class="tn-text-ellipsis">收货地址</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 方式12 end-->
+      </view>
+
+      <view class="tn-flex tn-flex-row-between tn-padding-top-xl">
+        <view class="justify-content-item tn-text-bold tn-text-lg">
+          <text class="">更多功能</text>
+        </view>
+        <view class="justify-content-item tn-text-df">
+          <text class="tn-padding-xs">全部</text>
+          <text class="tn-icon-right"></text>
+        </view>
+      </view>
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9"
+          indicatorActiveColor="#FF7043">
+          <view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
+            <block v-for="(item, index) in historyData" :key="index">
+              <view class="tn-flex-1 tn-padding-sm tn-radius">
+                <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                  <view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
+                    :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
+                    <view :class="[`tn-icon-${item.icon}`]"></view>
+                  </view>
+                  <view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
+                    <text class="tn-text-ellipsis">{{ item.title }}</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </tn-scroll-list>
+      </view>
+
+      <!-- 更多信息-->
+      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white">
+              <view class="tn-icon-wechat-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
+            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
+              <view class="tn-icon-message-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
+            <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
+              <view class="tn-icon-phone-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
+            <view
+              class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">
+              136****0470</view>
+          </view>
+        </tn-list-cell>
+        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
+          <view class="tn-flex tn-flex-col-center">
+            <view
+              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
+              <view class="tn-icon-safe-fill"></view>
+            </view>
+            <view class="tn-margin-left-sm tn-flex-1">会员协议</view>
+            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
+          </view>
+        </tn-list-cell>
+      </view>
+
+    </view>
+
+    <!-- 底部tabbar start-->
+    <view class="tabbar footerfixed">
+
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-home-smile tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
+        </view>
+        <view class="tn-color-gray">首页</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-discover tn-color-gray--dark">
+          </view>  -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
+        </view>
+        <view class="tn-color-gray">圈子</view>
+      </view>
+
+      <!-- <view class="action bar-center">
+        <view class="bar-circle tn-shadow-blur">
+          <view class="tn-icon-camera-fill tn-color-white">
+          </view>
+        </view>
+        <view class="tn-color-gray">发布</view>
+      </view> -->
+
+      <view class="action bar-center" @click="">
+        <view class="nav-index-button">
+          <view class="nav-index-button__content">
+            <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
+              <!-- <view class="tn-icon-logo-tuniao"></view> -->
+              <view class="bar-circle">
+                <!-- <image class="" src='https://tnuiimage.tnkjapp.com/login/1/login_top3.png'></image> -->
+                <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image>
+              </view>
+            </view>
+          </view>
+
+          <view class="nav-index-button__meteor">
+            <view class="nav-index-button__meteor__wrapper">
+              <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
+                :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+                <view class="nav-index-button__meteor__item--pic"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- <view class="tn-color-gray">发布</view> -->
+      </view>
+
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-image-text tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
+        </view>
+        <view class="tn-color-gray">优选</view>
+      </view>
+      <view class="action" @click="">
+        <view class="bar-icon">
+          <!-- <view class="tn-icon-my tn-color-gray--dark">
+          </view> -->
+          <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
+          <!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
+        </view>
+        <view class="tn-color-gray">我的</view>
+      </view>
+    </view>
+
+
+
+    <view class="tn-padding-xl tn-margin-top"></view>
+
+
+    <!-- 回到首页悬浮按钮-->
+    <nav-index-button></nav-index-button>
+
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  import NavIndexButton from '@/libs/components/nav-index-button.vue'
+  export default {
+    name: 'TemplateMyblog',
+    mixins: [template_page_mixin],
+    components: {NavIndexButton},
+    data() {
+      return {
+        historyData: [{
+            title: '分销中心',
+            icon: 'organizatio',
+            color: 'orange',
+          },
+          {
+            title: '积分商城',
+            icon: 'level',
+            color: 'purple',
+          },
+          {
+            title: '限时秒杀',
+            icon: 'clock',
+            color: 'blue',
+          },
+          {
+            title: '社区团购',
+            icon: 'team',
+            color: 'purplered',
+          },
+          {
+            title: '大转盘',
+            icon: 'group-circle',
+            color: 'teal',
+          },
+          {
+            title: '商品核销',
+            icon: 'scan',
+            color: 'orangered',
+          },
+          {
+            title: '满减优惠',
+            icon: 'coupon',
+            color: 'indigo',
+          },
+          {
+            title: '视频直播',
+            icon: 'video',
+            color: 'green',
+          }
+        ]
+      }
+    },
+    methods: {
+      // 跳转到
+      navTuniaoUI(e) {
+        uni.navigateTo({
+          url: '/pages/index/index'
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+
+  .template-myblog {}
+  
+  /* 自定义导航栏内容 start */
+  .custom-nav {
+    height: 100%;
+    
+    &__back {
+      margin: auto 5rpx;
+      font-size: 40rpx;
+      margin-right: 10rpx;
+      flex-basis: 5%;
+      width: 100rpx;
+      position: absolute;
+    }
+  }
+  /* 自定义导航栏内容 end */
+
+  /* 顶部背景图 start */
+  .top-backgroup {
+    height: 450rpx;
+    z-index: -1;
+
+    .backgroud-image {
+      width: 100%;
+      height: 450rpx;
+      // z-index: -1;
+    }
+  }
+
+  /* 顶部背景图 end */
+  
+  /* 标题 start */
+  .nav_title {
+    -webkit-background-clip: text;
+    color: #0E122A;
+    
+    
+    &--wrap {
+      position: relative;
+      display: flex;
+      height: 120rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
+      background-size: cover;
+    }
+  }
+  /* 标题 end */
+
+  /* 用户头像 start */
+  .logo-image {
+    width: 100rpx;
+    height: 100rpx;
+    position: relative;
+  }
+
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: #FFFFFF;
+  }
+
+  /* 页面 start*/
+  .about-shadow {
+    border-radius: 15rpx;
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .about {
+
+    &__wrap {
+      position: relative;
+      z-index: 1;
+      margin: 20rpx 30rpx;
+      margin-top: -230rpx;
+    }
+  }
+
+  /* 页面 end*/
+  
+  /* 图标容器15 start */
+  .icon15 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 15rpx;
+        height: 15rpx;
+        font-size: 66rpx;
+        border-radius: 50%;
+        margin-bottom: 38rpx;
+        position: relative;
+        text-shadow:#0E122A 0rpx 0rpx 0rpx;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+            
+        }
+      }
+    }
+  }
+
+  /* 图标容器1 start */
+  .icon1 {
+    &__item {
+      // width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+
+      &--icon {
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 28rpx;
+        border-radius: 50%;
+        position: relative;
+        z-index: 1;
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+
+  /* 图标容器1 end */
+
+  /* 底部tabbar start*/
+  .footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 999;
+    background-color: #FFFFFF;
+    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+  }
+
+  .tabbar {
+    display: flex;
+    align-items: center;
+    min-height: 110rpx;
+    justify-content: space-between;
+    padding: 0;
+    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
+    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+  }
+
+  .tabbar .action {
+    font-size: 22rpx;
+    position: relative;
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    display: block;
+    height: auto;
+    line-height: 1;
+    margin: 0;
+    overflow: initial;
+  }
+
+  .bar-center {
+    animation: suspension 3s ease-in-out infinite;
+  }
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+
+  .tabbar .action .bar-icon {
+    width: 100rpx;
+    position: relative;
+    display: block;
+    height: auto;
+    margin: 0 auto 10rpx;
+    text-align: center;
+    font-size: 42rpx;
+    // line-height: 50rpx;
+  }
+
+  .tabbar .action .bar-icon image {
+    width: 50rpx;
+    height: 50rpx;
+    display: inline-block;
+  }
+
+  .tabbar .action .bar-circle {
+    position: relative;
+    display: block;
+    margin: 0rpx auto 0rpx;
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 90rpx;
+    // background-color: #01BEFF;
+    width: 100rpx !important;
+    height: 100rpx !important;
+    overflow: hidden;
+    // border-radius: 50%;
+    // box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
+    //   0px -8px 40px rgba(255, 255, 255, 1),
+    //   inset 0px -10px 10px rgba(70,23,129, 0.05),
+    //   inset 0px 10px 20px rgba(255, 255, 255, 1);
+    // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
+  }
+
+  .tabbar .action .bar-circle image {
+    width: 100rpx;
+    height: 100rpx;
+    display: inline-block;
+    margin: 0rpx auto 0rpx;
+  }
+
+  /* 流星+悬浮 */
+  .nav-index-button {
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+
+
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+
+
+  @keyframes suspension {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-0.6rem);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+
+  /* 图标容器12 start */
+  .icon12 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        // border-radius: 50%;
+        margin-bottom: 0rpx;
+        position: relative;
+        z-index: 1;
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          // background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+
+
+        }
+      }
+    }
+  }
+
+  /* 图标容器11 start */
+  .icon11 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
+        }
+      }
+    }
+  }
+
+  /**/
+  @keyframes t {
+
+    0%,
+    10%,
+    80%,
+    100% {
+      top: -30px;
+    }
+
+    20% {
+      top: 0px;
+    }
+
+    30% {
+      top: -20px;
+    }
+
+    40% {
+      top: -0px;
+    }
+
+    50% {
+      top: -25px;
+    }
+
+    70% {
+    		top: 0px;
+    }
+  }
+
+  @keyframes b {
+
+    0%,
+    10%,
+    80%,
+    100% {
+      bottom: -30px;
+    }
+
+    20% {
+      bottom: 0px;
+    }
+
+    30% {
+      bottom: -20px;
+    }
+
+    40% {
+      bottom: -0px;
+    }
+
+    50% {
+      bottom: -25px;
+    }
+
+    70% {
+      bottom: 0px;
+    }
+  }
+
+  @keyframes mouth {
+
+    0%,
+    10%,
+    100% {
+      width: 100%;
+      height: 0%;
+    }
+
+    15% {
+      width: 90%;
+      height: 30%;
+    }
+
+    20% {
+      width: 50%;
+      height: 70%;
+    }
+
+    25% {
+      width: 70%;
+    	 height: 70%;
+    }
+
+    30% {
+    		width: 80%;
+      height: 60%;
+    }
+
+    35% {
+      width: 60%;
+      height: 70%;
+    }
+
+    40% {
+      width: 55%;
+      height: 75%;
+    }
+
+    45% {
+    		width: 50%;
+      height: 90%;
+    }
+
+    50% {
+      width: 40%;
+      height: 70%;
+    }
+
+    55% {
+      width: 70%;
+      height: 95%;
+    }
+
+    60% {
+    	 width: 40%;
+      height: 50%;
+    }
+
+    65% {
+      width: 100%;
+      height: 60%;
+    }
+
+    70% {
+      width: 100%;
+      height: 70%;
+    }
+
+    75% {
+      width: 90%;
+      height: 70%;
+    }
+
+    80% {
+      width: 50%;
+      height: 70%;
+    }
+
+    85% {
+      width: 90%;
+      height: 50%;
+    }
+
+    85% {
+      width: 40%;
+      height: 70%;
+    }
+
+    90% {
+      width: 90%;
+      height: 30%;
+    }
+
+    95% {
+      width: 100%;
+      height: 10%;
+    }
+  }
+
+  @keyframes tongue {
+
+    0%,
+    20%,
+    100% {
+      bottom: -80px;
+    }
+
+    30%,
+    90% {
+    		bottom: -40px;
+    }
+
+    40% {
+      bottom: -45px;
+    }
+
+    50% {
+      bottom: -50px;
+    }
+
+    70% {
+      bottom: -80px;
+    }
+
+    90% {
+      bottom: -40px;
+    }
+  }
+</style>
diff --git a/templatePage/time/clock/clock.vue b/templatePage/time/clock/clock.vue
new file mode 100644
index 0000000..dd31b79
--- /dev/null
+++ b/templatePage/time/clock/clock.vue
@@ -0,0 +1,874 @@
+<template>
+  <view class="template-clock">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    <view class="clock">
+    	<view class="clock__hand clock__hand--hr"></view>
+    	<view class="clock__hand clock__hand--min"></view>
+    	<view class="clock__hand clock__hand--sec"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateClock',
+    mixins: [template_page_mixin],
+    data(){
+      return {}
+    },
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/css/templatePage/custom_nav_bar.scss';
+  .template-clock{
+    // background: linear-gradient(#e3e4e8, #abafba);
+  }
+  /* 时钟 start*/
+  
+ /* * {
+    border: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  */
+  /* :root {
+    --bg: linear-gradient(#e3e4e8, #abafba);
+
+    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+  } */
+  
+  /* body {
+    background: var(--bg);
+    color: var(--fg);
+    font: 1em/1.5 sans-serif;
+    height: 100vh;
+    min-height: 480px;
+    display: grid;
+    place-items: center;
+  } */
+  
+  .clock {
+    margin: 20% auto;
+    box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
+    position: relative;
+    width: 16em;
+    height: 16em;
+  }
+  .clock, .clock:before, .clock:after {
+    border-radius: 50%;
+  }
+  .clock:before, .clock:after, .clock__hand {
+    position: absolute;
+  }
+  .clock:before, .clock:after {
+    content: "";
+    display: block;
+  }
+  .clock:before {
+    box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
+    top: 2.5em;
+    left: 2.5em;
+    width: 11em;
+    height: 11em;
+  }
+  .clock:after {
+    box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+    width: 1em;
+    height: 1em;
+  }
+  .clock__hand {
+    box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
+    bottom: 50%;
+    transform-origin: 50% 100%;
+    transform: rotate(0) translateY(-1.25em);
+  }
+  .clock__hand--hr {
+    animation: shortHand 86400s linear infinite;
+    background: #255ff4;;
+    border-radius: 0.5em;
+    left: calc(50% - 0.5em);
+    width: 1em;
+    height: 3.2em;
+  }
+  .clock__hand--min {
+    animation: longHand 3600s linear infinite;
+    background: #5583f6;
+    border-radius: 0.4em;
+    left: calc(50% - 0.4em);
+    width: 0.8em;
+    height: 3.6em;
+  }
+  .clock__hand--sec {
+    animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
+    background: #17181c;
+    border-radius: 0.3em;
+    left: calc(50% - 0.3em);
+    width: 0.6em;
+    height: 4em;
+  }
+  
+  /* Dark theme */
+  @media (prefers-color-scheme: dark) {
+    
+  
+    .clock {
+      box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
+    }
+    .clock:before {
+      box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
+    }
+    .clock:after {
+      box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
+    }
+  }
+  /* Animations */
+  @keyframes shortHand {
+    0% {
+      box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(0deg) translateY(-1.25em);
+    }
+    0.83% {
+      box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(6deg) translateY(-1.25em);
+    }
+    1.67% {
+      box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(12deg) translateY(-1.25em);
+    }
+    2.5% {
+      box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(18deg) translateY(-1.25em);
+    }
+    3.33% {
+      box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(24deg) translateY(-1.25em);
+    }
+    4.17% {
+      box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(30deg) translateY(-1.25em);
+    }
+    5% {
+      box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(36deg) translateY(-1.25em);
+    }
+    5.83% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(42deg) translateY(-1.25em);
+    }
+    6.67% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(48deg) translateY(-1.25em);
+    }
+    7.5% {
+      box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(54deg) translateY(-1.25em);
+    }
+    8.33% {
+      box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(60deg) translateY(-1.25em);
+    }
+    9.17% {
+      box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(66deg) translateY(-1.25em);
+    }
+    10% {
+      box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(72deg) translateY(-1.25em);
+    }
+    10.83% {
+      box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(78deg) translateY(-1.25em);
+    }
+    11.67% {
+      box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(84deg) translateY(-1.25em);
+    }
+    12.5% {
+      box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(90deg) translateY(-1.25em);
+    }
+    13.33% {
+      box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(96deg) translateY(-1.25em);
+    }
+    14.17% {
+      box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(102deg) translateY(-1.25em);
+    }
+    15% {
+      box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(108deg) translateY(-1.25em);
+    }
+    15.83% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(114deg) translateY(-1.25em);
+    }
+    16.67% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(120deg) translateY(-1.25em);
+    }
+    17.5% {
+      box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(126deg) translateY(-1.25em);
+    }
+    18.33% {
+      box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(132deg) translateY(-1.25em);
+    }
+    19.17% {
+      box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(138deg) translateY(-1.25em);
+    }
+    20% {
+      box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(144deg) translateY(-1.25em);
+    }
+    20.83% {
+      box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(150deg) translateY(-1.25em);
+    }
+    21.67% {
+      box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(156deg) translateY(-1.25em);
+    }
+    22.5% {
+      box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(162deg) translateY(-1.25em);
+    }
+    23.33% {
+      box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(168deg) translateY(-1.25em);
+    }
+    24.17% {
+      box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(174deg) translateY(-1.25em);
+    }
+    25% {
+      box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(180deg) translateY(-1.25em);
+    }
+    25.83% {
+      box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(186deg) translateY(-1.25em);
+    }
+    26.67% {
+      box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(192deg) translateY(-1.25em);
+    }
+    27.5% {
+      box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(198deg) translateY(-1.25em);
+    }
+    28.33% {
+      box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(204deg) translateY(-1.25em);
+    }
+    29.17% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(210deg) translateY(-1.25em);
+    }
+    30% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(216deg) translateY(-1.25em);
+    }
+    30.83% {
+      box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(222deg) translateY(-1.25em);
+    }
+    31.67% {
+      box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(228deg) translateY(-1.25em);
+    }
+    32.5% {
+      box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(234deg) translateY(-1.25em);
+    }
+    33.33% {
+      box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(240deg) translateY(-1.25em);
+    }
+    34.17% {
+      box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(246deg) translateY(-1.25em);
+    }
+    35% {
+      box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(252deg) translateY(-1.25em);
+    }
+    35.83% {
+      box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(258deg) translateY(-1.25em);
+    }
+    36.67% {
+      box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(264deg) translateY(-1.25em);
+    }
+    37.5% {
+      box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(270deg) translateY(-1.25em);
+    }
+    38.33% {
+      box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(276deg) translateY(-1.25em);
+    }
+    39.17% {
+      box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(282deg) translateY(-1.25em);
+    }
+    40% {
+      box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(288deg) translateY(-1.25em);
+    }
+    40.83% {
+      box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(294deg) translateY(-1.25em);
+    }
+    41.67% {
+      box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(300deg) translateY(-1.25em);
+    }
+    42.5% {
+      box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(306deg) translateY(-1.25em);
+    }
+    43.33% {
+      box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(312deg) translateY(-1.25em);
+    }
+    44.17% {
+      box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(318deg) translateY(-1.25em);
+    }
+    45% {
+      box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(324deg) translateY(-1.25em);
+    }
+    45.83% {
+      box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(330deg) translateY(-1.25em);
+    }
+    46.67% {
+      box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(336deg) translateY(-1.25em);
+    }
+    47.5% {
+      box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(342deg) translateY(-1.25em);
+    }
+    48.33% {
+      box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(348deg) translateY(-1.25em);
+    }
+    49.17% {
+      box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(354deg) translateY(-1.25em);
+    }
+    50% {
+      box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(360deg) translateY(-1.25em);
+    }
+    50.83% {
+      box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(366deg) translateY(-1.25em);
+    }
+    51.67% {
+      box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(372deg) translateY(-1.25em);
+    }
+    52.5% {
+      box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(378deg) translateY(-1.25em);
+    }
+    53.33% {
+      box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(384deg) translateY(-1.25em);
+    }
+    54.17% {
+      box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(390deg) translateY(-1.25em);
+    }
+    55% {
+      box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(396deg) translateY(-1.25em);
+    }
+    55.83% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(402deg) translateY(-1.25em);
+    }
+    56.67% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(408deg) translateY(-1.25em);
+    }
+    57.5% {
+      box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(414deg) translateY(-1.25em);
+    }
+    58.33% {
+      box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(420deg) translateY(-1.25em);
+    }
+    59.17% {
+      box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(426deg) translateY(-1.25em);
+    }
+    60% {
+      box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(432deg) translateY(-1.25em);
+    }
+    60.83% {
+      box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(438deg) translateY(-1.25em);
+    }
+    61.67% {
+      box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(444deg) translateY(-1.25em);
+    }
+    62.5% {
+      box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(450deg) translateY(-1.25em);
+    }
+    63.33% {
+      box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(456deg) translateY(-1.25em);
+    }
+    64.17% {
+      box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(462deg) translateY(-1.25em);
+    }
+    65% {
+      box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(468deg) translateY(-1.25em);
+    }
+    65.83% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(474deg) translateY(-1.25em);
+    }
+    66.67% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(480deg) translateY(-1.25em);
+    }
+    67.5% {
+      box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(486deg) translateY(-1.25em);
+    }
+    68.33% {
+      box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(492deg) translateY(-1.25em);
+    }
+    69.17% {
+      box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(498deg) translateY(-1.25em);
+    }
+    70% {
+      box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(504deg) translateY(-1.25em);
+    }
+    70.83% {
+      box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(510deg) translateY(-1.25em);
+    }
+    71.67% {
+      box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(516deg) translateY(-1.25em);
+    }
+    72.5% {
+      box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(522deg) translateY(-1.25em);
+    }
+    73.33% {
+      box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(528deg) translateY(-1.25em);
+    }
+    74.17% {
+      box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(534deg) translateY(-1.25em);
+    }
+    75% {
+      box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(540deg) translateY(-1.25em);
+    }
+    75.83% {
+      box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(546deg) translateY(-1.25em);
+    }
+    76.67% {
+      box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(552deg) translateY(-1.25em);
+    }
+    77.5% {
+      box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(558deg) translateY(-1.25em);
+    }
+    78.33% {
+      box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(564deg) translateY(-1.25em);
+    }
+    79.17% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(570deg) translateY(-1.25em);
+    }
+    80% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(576deg) translateY(-1.25em);
+    }
+    80.83% {
+      box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(582deg) translateY(-1.25em);
+    }
+    81.67% {
+      box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(588deg) translateY(-1.25em);
+    }
+    82.5% {
+      box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(594deg) translateY(-1.25em);
+    }
+    83.33% {
+      box-shadow: -0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(600deg) translateY(-1.25em);
+    }
+    84.17% {
+      box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(606deg) translateY(-1.25em);
+    }
+    85% {
+      box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(612deg) translateY(-1.25em);
+    }
+    85.83% {
+      box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(618deg) translateY(-1.25em);
+    }
+    86.67% {
+      box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(624deg) translateY(-1.25em);
+    }
+    87.5% {
+      box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(630deg) translateY(-1.25em);
+    }
+    88.33% {
+      box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(636deg) translateY(-1.25em);
+    }
+    89.17% {
+      box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(642deg) translateY(-1.25em);
+    }
+    90% {
+      box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(648deg) translateY(-1.25em);
+    }
+    90.83% {
+      box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(654deg) translateY(-1.25em);
+    }
+    91.67% {
+      box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(660deg) translateY(-1.25em);
+    }
+    92.5% {
+      box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(666deg) translateY(-1.25em);
+    }
+    93.33% {
+      box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(672deg) translateY(-1.25em);
+    }
+    94.17% {
+      box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(678deg) translateY(-1.25em);
+    }
+    95% {
+      box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(684deg) translateY(-1.25em);
+    }
+    95.83% {
+      box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(690deg) translateY(-1.25em);
+    }
+    96.67% {
+      box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(696deg) translateY(-1.25em);
+    }
+    97.5% {
+      box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(702deg) translateY(-1.25em);
+    }
+    98.33% {
+      box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(708deg) translateY(-1.25em);
+    }
+    99.17% {
+      box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(714deg) translateY(-1.25em);
+    }
+    100% {
+      box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(720deg) translateY(-1.25em);
+    }
+  }
+  @keyframes longHand {
+    0% {
+      box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(0deg) translateY(-1.25em);
+    }
+    1.67% {
+      box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(6deg) translateY(-1.25em);
+    }
+    3.33% {
+      box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(12deg) translateY(-1.25em);
+    }
+    5% {
+      box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(18deg) translateY(-1.25em);
+    }
+    6.67% {
+      box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(24deg) translateY(-1.25em);
+    }
+    8.33% {
+      box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(30deg) translateY(-1.25em);
+    }
+    10% {
+      box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(36deg) translateY(-1.25em);
+    }
+    11.67% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(42deg) translateY(-1.25em);
+    }
+    13.33% {
+      box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(48deg) translateY(-1.25em);
+    }
+    15% {
+      box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(54deg) translateY(-1.25em);
+    }
+    16.67% {
+      box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(60deg) translateY(-1.25em);
+    }
+    18.33% {
+      box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(66deg) translateY(-1.25em);
+    }
+    20% {
+      box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(72deg) translateY(-1.25em);
+    }
+    21.67% {
+      box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(78deg) translateY(-1.25em);
+    }
+    23.33% {
+      box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(84deg) translateY(-1.25em);
+    }
+    25% {
+      box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(90deg) translateY(-1.25em);
+    }
+    26.67% {
+      box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(96deg) translateY(-1.25em);
+    }
+    28.33% {
+      box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(102deg) translateY(-1.25em);
+    }
+    30% {
+      box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(108deg) translateY(-1.25em);
+    }
+    31.67% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(114deg) translateY(-1.25em);
+    }
+    33.33% {
+      box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(120deg) translateY(-1.25em);
+    }
+    35% {
+      box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(126deg) translateY(-1.25em);
+    }
+    36.67% {
+      box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(132deg) translateY(-1.25em);
+    }
+    38.33% {
+      box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(138deg) translateY(-1.25em);
+    }
+    40% {
+      box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(144deg) translateY(-1.25em);
+    }
+    41.67% {
+      box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(150deg) translateY(-1.25em);
+    }
+    43.33% {
+      box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(156deg) translateY(-1.25em);
+    }
+    45% {
+      box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(162deg) translateY(-1.25em);
+    }
+    46.67% {
+      box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(168deg) translateY(-1.25em);
+    }
+    48.33% {
+      box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(174deg) translateY(-1.25em);
+    }
+    50% {
+      box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(180deg) translateY(-1.25em);
+    }
+    51.67% {
+      box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(186deg) translateY(-1.25em);
+    }
+    53.33% {
+      box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(192deg) translateY(-1.25em);
+    }
+    55% {
+      box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(198deg) translateY(-1.25em);
+    }
+    56.67% {
+      box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(204deg) translateY(-1.25em);
+    }
+    58.33% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(210deg) translateY(-1.25em);
+    }
+    60% {
+      box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(216deg) translateY(-1.25em);
+    }
+    61.67% {
+      box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(222deg) translateY(-1.25em);
+    }
+    63.33% {
+      box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(228deg) translateY(-1.25em);
+    }
+    65% {
+      box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(234deg) translateY(-1.25em);
+    }
+    66.67% {
+      box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(240deg) translateY(-1.25em);
+    }
+    68.33% {
+      box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(246deg) translateY(-1.25em);
+    }
+    70% {
+      box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(252deg) translateY(-1.25em);
+    }
+    71.67% {
+      box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(258deg) translateY(-1.25em);
+    }
+    73.33% {
+      box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(264deg) translateY(-1.25em);
+    }
+    75% {
+      box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(270deg) translateY(-1.25em);
+    }
+    76.67% {
+      box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(276deg) translateY(-1.25em);
+    }
+    78.33% {
+      box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(282deg) translateY(-1.25em);
+    }
+    80% {
+      box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(288deg) translateY(-1.25em);
+    }
+    81.67% {
+      box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(294deg) translateY(-1.25em);
+    }
+    83.33% {
+      box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(300deg) translateY(-1.25em);
+    }
+    85% {
+      box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(306deg) translateY(-1.25em);
+    }
+    86.67% {
+      box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(312deg) translateY(-1.25em);
+    }
+    88.33% {
+      box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(318deg) translateY(-1.25em);
+    }
+    90% {
+      box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(324deg) translateY(-1.25em);
+    }
+    91.67% {
+      box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(330deg) translateY(-1.25em);
+    }
+    93.33% {
+      box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(336deg) translateY(-1.25em);
+    }
+    95% {
+      box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(342deg) translateY(-1.25em);
+    }
+    96.67% {
+      box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(348deg) translateY(-1.25em);
+    }
+    98.33% {
+      box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(354deg) translateY(-1.25em);
+    }
+    100% {
+      box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
+      transform: rotate(360deg) translateY(-1.25em);
+    }
+  }
+
+</style>
diff --git a/thirdPage/short-video/short-video.vue b/thirdPage/short-video/short-video.vue
new file mode 100644
index 0000000..f207a29
--- /dev/null
+++ b/thirdPage/short-video/short-video.vue
@@ -0,0 +1,456 @@
+<template>
+  <view class="third-page-short-video tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>短视频</tn-nav-bar>
+        
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="container" :style="{height: containerHeight + 'px'}">
+        <tn-custom-swiper
+          class="swiper"
+          :current="current"
+          :duration="250"
+          :circular="!loadingFirst"
+          :vertical="true"
+          @change="handleSwiperChange"
+        >
+          <block v-for="(item, index) in swiperList" :key="index">
+            <tn-custom-swiper-item class="swiper__item">
+              <view class="item__container">
+                
+                
+                <video
+                  v-if="item.loading"
+                  class="item__video"
+                  :id="`video-${index}`"
+                  :src="item.src"
+                  objectFit="cover"
+                  :autoplay="false"
+                  :loop="true"
+                  :controls="false"
+                  :show-progress="false"
+                  :show-fullscreen-btn="false"
+                  :show-center-play-btn="true"
+                  :show-loading="false"
+                  @error="handleVideoError($event, index)"
+                  @loadedmetadata="handleVideoLoadedmetadata($event, index)"
+                ></video>
+                
+                <block v-if="current === index">
+                  <view class="item__content">
+                    <view class="author-name">@{{item.author.name}}</view>
+                    <view class="desc">{{item.desc}}</view>
+                  </view>
+                  
+                  <view class="item__operation">
+                    <view class="avatar">
+                      <image class="image" :src="item.author.avatar"></image>
+                    </view>
+                    <view class="options like" @tap="clickLike(index)">
+                      <view class="icon" :class="[item.like.flag ? 'icon__select tn-icon-like-fill' : 'tn-icon-like']"></view>
+                      <view class="text">{{item.like.count}}</view>
+                    </view>
+                    <view class="options message">
+                      <view class="icon tn-icon-comment"></view>
+                      <view class="text">{{item.message}}</view>
+                    </view>
+                    <view class="options star" @tap="clickStar(index)">
+                      <view class="icon" :class="[item.star.flag ? 'icon__select tn-icon-star-fill' : 'tn-icon-star']"></view>
+                      <view class="text">{{item.star.count}}</view>
+                    </view>
+                    <view class="options share">
+                      <view class="icon tn-icon-share-triangle"></view>
+                      <view class="text">{{item.share}}</view>
+                    </view>
+                  </view>
+                </block>
+              </view>
+            </tn-custom-swiper-item>
+          </block>
+        </tn-custom-swiper>
+        
+        <!-- <video
+          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+        ></video>
+        <video
+          src="http://vjs.zencdn.net/v/oceans.mp4"
+        ></video> -->
+      </view>
+        
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'ThirdPageShortVideo',
+    data() {
+      return {
+        containerHeight: 0,
+        current: 0,
+        videoSrc: ['http://vjs.zencdn.net/v/oceans.mp4','http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'],
+        h5FirstPlay: true,
+        loadingFirst: true,
+        swiperList: [
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。基于图鸟UI开发的第三方插件，图鸟加油，可以的。基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          },
+          {
+            author: {
+              name: '小泡泡',
+              avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'
+            },
+            desc: '基于图鸟UI开发的第三方插件，图鸟加油，可以的。',
+            like: {
+              flag: true,
+              count: 100
+            },
+            message: 800,
+            star: {
+              flag: false,
+              count: 200
+            },
+            share: 300,
+            loading: false,
+            src: ''
+          }
+        ],
+        // 存放当前缓冲视频是否加载成功
+        loadingVideoFlag: []
+      }
+    },
+    computed: {
+      listLength() {
+        return this.swiperList.length
+      }
+    },
+    onLoad() {
+      this.getContainerHeight()
+      this.initData()
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.loadVideo()
+      })
+    },
+    methods: {
+      // 点击喜欢按钮
+      clickLike(index) {
+        let item = this.swiperList[index]
+        item.like.flag = !item.like.flag
+        this.$set(this.swiperList, index, item)
+      },
+      // 点击收藏按钮
+      clickStar(index) {
+        let item = this.swiperList[index]
+        item.star.flag = !item.star.flag
+        this.$set(this.swiperList, index, item)
+      },
+      // 获取可用区域的高度
+      getContainerHeight() {
+        const systemInfo = uni.getSystemInfoSync()
+        this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
+      },
+      // 初始化数据
+      initData() {
+        this.loadingVideoFlag = Array(this.listLength).fill(false)
+      },
+      // 加载以当前current为基准的的前后各一个视频
+      loadVideo() {
+        // 获取当前轮播的index
+        const index = this.current
+        let prevIndex = index - 1 < 0 ? this.listLength - 1 : index - 1
+        let nextIndex = index + 1 > this.listLength - 1 ? 0 : index + 1
+        let currentItem = this.swiperList[index]
+        let prevItem = this.swiperList[prevIndex]
+        let nextItem = this.swiperList[nextIndex]
+        
+        if (!currentItem.loading) {
+          currentItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          currentItem.loading = true
+          this.$set(this.swiperList, index, currentItem)
+        }
+        if (!prevItem.loading) {
+          prevItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          prevItem.loading = true
+          this.$set(this.swiperList, prevIndex, prevItem)
+        }
+        if (!nextItem.loading) {
+          nextItem.src = this.videoSrc[this.$tn.number.randomInt(0, 1)]
+          nextItem.loading = true
+          this.$set(this.swiperList, nextIndex, nextItem)
+        }
+        
+        // 如果为非当前和前后的item，则进行重置
+        for (let i = 0; i < this.listLength; i++) {
+          if (![index, prevIndex, nextIndex].includes(i)) {
+            let tempItem = this.swiperList[i]
+            tempItem.loading = false
+            tempItem.src = ''
+            this.$set(this.swiperList, i, tempItem)
+            // 重置视频加载标记位
+            this.loadingVideoFlag[i] = false
+          }
+        }
+        
+        // 开始播放当前视频
+        this.playCurrentVideo()
+      },
+      // 开始播放当前视频
+      playCurrentVideo() {
+        // 获取当前轮播的index
+        const index = this.current
+        // 开始播放当前的视频，并且停止其他视频
+        setTimeout(() => {
+          if (!this.loadingVideoFlag[index]) {
+            this.$tn.message.toast('播放失败，请看其他视频')
+            return
+          }
+        }, 800)
+        for (let i = 0; i < this.listLength; i++) {
+          const videoContext = uni.createVideoContext(`video-${i}`, this)
+          if (i === index) {
+            // #ifdef H5
+            if (!this.h5FirstPlay) {
+              videoContext.play()
+            }
+            // #endif
+            // #ifndef H5
+            videoContext.play()
+            // #endif
+            
+          } else {
+            // #ifdef MP-WEIXIN
+            videoContext.stop()
+            // #endif
+            // #ifndef MP-WEIXIN
+            videoContext.pause()
+            // #endif
+          }
+        }
+      },
+      // 处理轮播的切换
+      handleSwiperChange(e) {
+        // console.log(e);
+        this.current = e.current
+        this.loadVideo()
+        // #ifdef H5
+        if (this.h5FirstPlay) {
+          this.h5FirstPlay = false
+        }
+        // #endif
+        
+        // 当滑动到第3个并且是第一次滑动到该位置
+        if (this.loadingFirst && e.current === 2) {
+          this.loadingFirst = false
+        }
+      },
+      // 视频出现元数据时触发
+      handleVideoLoadedmetadata(e, index) {
+        // console.log(index, e);
+        if (!this.loadingVideoFlag[index] && this.current === index) {
+          console.log('loadmetadata');
+          // #ifdef H5
+          if (!this.h5FirstPlay) {
+            const videoContext = uni.createVideoContext(`video-${index}`, this)
+            videoContext.play()
+          }
+          // #endif
+          // #ifndef H5
+          const videoContext = uni.createVideoContext(`video-${index}`, this)
+          videoContext.play()
+          // #endif
+        }
+        this.loadingVideoFlag[index] = true
+      },
+      // 视频加载失败时触发
+      handleVideoError(e, index) {
+        // console.log(index, e);
+        this.loadingVideoFlag[index] = false
+        if (index === this.current) {
+          this.$tn.message.toast('播放失败，请看其他视频')
+        }
+      }
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .swiper {
+    width: 100%;
+    height: 100%;
+    display: block;
+    
+    &__item {
+      background-color: #000000;
+      
+      .item {
+        &__container {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        
+        &__video {
+          width: 100%;
+          height: 100%;
+        }
+        
+        &__content {
+          width: 70%;
+          color: #FFFFFF;
+          position: absolute;
+          bottom: 30rpx;
+          left: 30rpx;
+          z-index: 1;
+          transition-duration: 0s;
+          
+          .author-name {
+            font-size: 38rpx;
+            font-weight: bold;
+            margin-bottom: 10rpx;
+          }
+          .desc {
+            width: 100%;
+            line-height: 1.3em;
+            white-space: normal !important;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            -webkit-line-clamp: 5;
+          }
+        }
+        
+        &__operation {
+          color: #FFFFFF;
+          position: absolute;
+          right: 30rpx;
+          bottom: 120rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 1;
+          transition-duration: 0s;
+          
+          .avatar {
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 6rpx solid #FFFFFF;
+            margin-bottom: 20rpx;
+            
+            .image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          
+          .icon {
+            font-size: 60rpx;
+            
+            &__select {
+              color: #FFCA28;
+              animation: select-keyframes 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            }
+          }
+          
+          .options {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 10rpx;
+            
+            .text {
+              font-size: 24rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @keyframes select-keyframes {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+</style>
diff --git a/tuniao-ui/README.md b/tuniao-ui/README.md
new file mode 100644
index 0000000..ccb9fcb
--- /dev/null
+++ b/tuniao-ui/README.md
@@ -0,0 +1,4 @@
+TuniaoUi for uniApp v1.0.0 | by 图鸟 2021-09-01
+仅供开发，如作它用所承受的法律责任一概与作者无关
+
+*使用TuniaoUi开发扩展与插件时，请注明基于tuniao字眼
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue b/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
new file mode 100644
index 0000000..eed4999
--- /dev/null
+++ b/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
@@ -0,0 +1,202 @@
+<template>
+  <view v-if="value" class="tn-action-sheet-class tn-action-sheet">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      length="auto"
+      :popup="false"
+      :borderRadius="borderRadius"
+      :maskCloseable="maskCloseable"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <!-- 提示信息 -->
+      <view
+        v-if="tips.text"
+        class="tn-action-sheet__tips tn-border-solid-bottom"
+        :style="[tipsStyle]"
+      >
+        {{tips.text}}
+      </view>
+      <!-- 按钮列表 -->
+      <block v-for="(item, index) in list" :key="index">
+        <view
+          class="tn-action-sheet__item tn-text-ellipsis"
+          :class="[ index < list.length - 1 ? 'tn-border-solid-bottom' : '']"
+          :style="[itemStyle(index)]"
+          hover-class="tn-hover-class"
+          :hover-stay-time="150"
+          @tap="itemClick(index)"
+          @touchmove.stop.prevent
+        >
+          <text>{{item.text}}</text>
+          <text v-if="item.subText" class="tn-action-sheet__item__subtext tn-text-ellipsis">{{item.subText}}</text>
+        </view>
+      </block>
+      
+      <!-- 取消按钮 -->
+      <block v-if="cancelBtn">
+        <view class="tn-action-sheet__cancel--gab"></view>
+        <view
+          class="tn-action-sheet__cancel tn-action-sheet__item"
+          hover-class="tn-hover-class"
+          :hover-stay-time="150"
+          @tap="close"
+        >{{cancelText}}</view>
+      </block>
+      
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-action-sheet',
+    props: {
+      // 通过v-model控制弹出和收起
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 按钮文字数组，可以自定义颜色和字体大小
+      // return [{
+      // 	text: '确定',
+      //  subText: '这是一个确定按钮',
+      // 	color: '',
+      // 	fontSize: '',
+      //  disabled: true
+      // }]
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 顶部提示文字
+      tips: {
+        type: Object,
+        default() {
+          return {
+            text: '',
+            color: '',
+            fontSize: 26
+          }
+        }
+      },
+      // 弹出的顶部圆角值
+      borderRadius: {
+        type: Number,
+        default: 0
+      },
+      // 点击遮罩可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 底部取消按钮
+      cancelBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 底部取消按钮的文字
+      cancelText: {
+        type: String,
+        default: '取消'
+      },
+      // 开启底部安全区域
+      // 在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // z-index值
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 顶部提示样式
+      tipsStyle() {
+        let style = {}
+        if (this.tips.color) style.color = this.tips.color
+        if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx'
+        
+        return style
+      },
+      // 操作项目的样式
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          if (this.list[index].color) style.color = this.list[index].color
+          if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx'
+          
+          // 选项被禁用的样式
+          if (this.list[index].disabled) style.color = '#AAAAAA'
+          
+          return style
+        }
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      }
+    },
+    methods: {
+      // 点击取消按钮
+      close() {
+        // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+        this.popupClose();
+        this.$emit('close');
+      },
+      // 关闭弹窗
+      popupClose() {
+        this.$emit('input', false)
+      },
+      // 点击对应的item
+      itemClick(index) {
+        // 如果是禁用项则不进行操作
+        if (this.list[index].disabled) return
+        this.$emit('click', index)
+        this.popupClose()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-action-sheet {
+    &__tips {
+      font-size: 26rpx;
+      text-align: center;
+      padding: 34rpx 0;
+      line-height: 1;
+      color: $tn-content-color;
+    }
+    
+    &__item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      padding: 34rpx 0;
+      
+      &__subtext {
+        font-size: 24rpx;
+        color: $tn-content-color;
+        margin-top: 20rpx;
+      }
+    }
+    
+    &__cancel {
+      color: $tn-font-color;
+      
+      &--gab {
+        height: 12rpx;
+        background-color: #eaeaec;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue b/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
new file mode 100644
index 0000000..4a7f11c
--- /dev/null
+++ b/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
@@ -0,0 +1,103 @@
+<template>
+  <view class="tn-avatar-group-class tn-avatar-group">
+    <view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
+      <tn-avatar
+        :src="item.src || ''"
+        :text="item.text || ''"
+        :icon="item.icon || ''"
+        :size="size"
+        :shape="shape"
+        :imgMode="imgMode"
+        :border="true"
+        :borderSize="4"
+      ></tn-avatar>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-avatar-group',
+    props: {
+      // 头像列表
+      lists: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 头像类型
+      // square 带圆角正方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 大小
+      // sm 小头像 lg 大头像 xl 加大头像
+      // 如果为其他则认为是直接设置大小
+      size: {
+        type: [Number, String],
+        default: ''
+      },
+      // 当设置为显示头像信息时，
+      // 图片的裁剪模式
+      imgMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 头像之间的遮挡比例
+      // 0.4 代表 40%
+      gap: {
+        type: Number,
+        default: 0.4
+      }
+    },
+    computed: {
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          if (this._checkSizeIsInline()) {
+            switch(this.size) {
+              case 'sm':
+                style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
+                break
+              case 'lg':
+                style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
+                break
+              case 'xl':
+                style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
+                break
+            }
+          } else {
+            const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
+            style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 检查是否使用内置的大小进行设置
+      _checkSizeIsInline() {
+        if (/(xs|sm|md|lg|xl|xxl)/.test(this.size)) return true
+        else return false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-avatar-group {
+    display: flex;
+    flex-direction: row;
+    
+    &__item {
+      position: relative;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-avatar/tn-avatar.vue b/tuniao-ui/components/tn-avatar/tn-avatar.vue
new file mode 100644
index 0000000..96e7100
--- /dev/null
+++ b/tuniao-ui/components/tn-avatar/tn-avatar.vue
@@ -0,0 +1,298 @@
+<template>
+  <view
+    class="tn-avatar-class tn-avatar"
+    :class="[backgroundColorClass,avatarClass]"
+    :style="[avatarStyle]"
+    @tap="click"
+  >
+    <image
+      v-if="showImg"
+      class="tn-avatar__img"
+      :class="[imgClass]"
+      :src="src"
+      :mode="imgMode || 'aspectFill'"
+      @error="loadImageError"
+    ></image>
+    <view v-else class="tn-avatar__text" >
+      <view v-if="text">{{ text }}</view>
+      <view v-else :class="[`tn-icon-${icon}`]"></view>
+    </view>
+    
+    <!-- 角标 -->
+    <tn-badge
+      v-if="badge && (badgeIcon || badgeText)"
+      :radius="badgeSize"
+      :backgroundColor="badgeBgColor"
+      :fontColor="badgeColor"
+      :fontSize="badgeSize - 8"
+      :absolute="true"
+      :top="badgePosition[0]"
+      :right="badgePosition[1]"
+    >
+      <view v-if="badgeIcon && badgeText === ''">
+        <view :class="[`tn-icon-${badgeIcon}`]"></view>
+      </view>
+      <view v-else>
+        {{ badgeText }}
+      </view>
+    </tn-badge>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-avatar',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: 0
+      },
+      // 头像类型
+      // square 带圆角正方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 大小 
+      // sm 小头像 lg 大头像 xl 加大头像
+      // 如果为其他则认为是直接设置大小
+      size: {
+        type: [Number, String],
+        default: ''
+      },
+      // 是否显示阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示边框
+      border: {
+        type: Boolean,
+        default: false
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: 'rgba(0, 0, 0, 0.1)'
+      },
+      // 边框大小, rpx
+      borderSize: {
+        type: Number,
+        default: 2
+      },
+      // 头像路径
+      src: {
+        type: String,
+        default: ''
+      },
+      // 文字
+      text: {
+        type: String,
+        default: ''
+      },
+      // 图标
+      icon: {
+        type: String,
+        default: ''
+      },
+      // 当设置为显示头像信息时，
+      // 图片的裁剪模式
+      imgMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 是否显示角标
+      badge: {
+        type: Boolean,
+        default: false
+      },
+      // 设置显示角标后，角标大小
+      badgeSize: {
+        type: Number,
+        default: 0
+      },
+      // 角标背景颜色
+      badgeBgColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 角标字体颜色
+      badgeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 角标图标
+      badgeIcon: {
+        type: String,
+        default: ''
+      },
+      // 角标文字，优先级比icon高
+      badgeText: {
+        type: String,
+        default: ''
+      },
+      // 角标坐标
+      // [top, right]
+      badgePosition: {
+        type: Array,
+        default() {
+          return [0, 0]
+        }
+      }
+    },
+    data() {
+      return {
+        // 图片显示是否发生错误
+        imgLoadError: false
+      }
+    },
+    computed: {
+      showImg() {
+        // 如果设置了图片地址，则为显示图片，否则为显示文本
+        return this.text === '' && this.icon === ''
+      },
+      avatarClass() {
+        let clazz = ''
+        clazz += ` tn-avatar--${this.shape}`
+        
+        if (this._checkSizeIsInline()) {
+          clazz += ` tn-avatar--${this.size}`
+        }
+        
+        if (this.shadow) {
+          clazz += ' tn-avatar--shadow'
+        }
+        
+        return clazz
+      },
+      avatarStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.background = this.backgroundColorStyle
+        } else if (this.shadow && this.showImg) {
+          style.backgroundImage = `url(${this.src})`
+        }
+        
+        if (this.border) {
+          style.border = `${this.borderSize}rpx solid ${this.borderColor}`
+        }
+        
+        if (!this._checkSizeIsInline()) {
+          style.width = this.size
+          style.height = this.size
+        }
+        
+        return style
+      },
+      imgClass() {
+        let clazz = ''
+        clazz += ` tn-avatar__img--${this.shape}`
+        
+        return clazz
+      }
+    },
+    methods: {
+      // 加载图片失败
+      loadImageError() {
+        this.imgLoadError = true
+      },
+      // 点击事件
+      click() {
+        this.$emit("click", this.index)
+      },
+      
+      // 检查是否使用内置的大小进行设置
+      _checkSizeIsInline() {
+        if (/^(xs|sm|md|lg|xl|xxl)$/.test(this.size)) return true
+        else return false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-avatar {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    background-color: $tn-font-holder-color;
+    // color: #FFFFFF;
+    white-space: nowrap;
+    position: relative;
+    width: 64rpx;
+    height: 64rpx;
+    z-index: 1;
+    
+    &--sm {
+      width: 48rpx;
+      height: 48rpx;
+    }
+    &--lg {
+      width: 96rpx;
+      height: 96rpx;
+    }
+    &--xl {
+      width: 128rpx;
+      height: 128rpx;
+    }
+    
+    &--square {
+      border-radius: 10rpx;
+    }
+    
+    &--circle {
+      border-radius: 5000rpx;
+    }
+    
+    &--shadow {
+      position: relative;
+      
+      &::after {
+        content: " ";
+        display: block;
+        background: inherit;
+        filter: blur(10rpx);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 10rpx;
+        left: 10rpx;
+        z-index: -1;
+        opacity: 0.4;
+        transform-origin: 0 0;
+        border-radius: inherit;
+        transform: scale(1, 1);
+      }
+    }
+    
+    &__img {
+      width: 100%;
+      height: 100%;
+      
+      &--square {
+        border-radius: 10rpx;
+      }
+      
+      &--circle {
+        border-radius: 5000rpx;
+      }
+    }
+    
+    &__text {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-badge/tn-badge.vue b/tuniao-ui/components/tn-badge/tn-badge.vue
new file mode 100644
index 0000000..d92f5f6
--- /dev/null
+++ b/tuniao-ui/components/tn-badge/tn-badge.vue
@@ -0,0 +1,173 @@
+<template>
+  <view
+    class="tn-badge-class tn-badge"
+    :class="[
+      backgroundColorClass,
+      fontColorClass,
+      badgeClass
+    ]"
+    :style="[badgeStyle]"
+    @click="handleClick"
+  >
+    <slot v-if="!dot"></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-badge',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 徽章的大小 rpx
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: ''
+      },
+      // 是否为一个点
+      dot: {
+        type: Boolean,
+        default: false
+      },
+      // 是否使用绝对定位
+      absolute: {
+        type: Boolean,
+        default: false
+      },
+      // top
+      top: {
+        type: [String, Number],
+        default: ''
+      },
+      // right
+      right: {
+        type: [String, Number],
+        default: ''
+      },
+      // 居中 对齐右上角
+      translateCenter: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      badgeClass() {
+        let clazz = ''
+        if (this.dot) {
+          clazz += ' tn-badge--dot'
+        }
+        if (this.absolute) {
+          clazz += ' tn-badge--absolute'
+          
+          if (this.translateCenter) {
+            clazz += ' tn-badge--center-position'
+          }
+        }
+        
+        return clazz
+      },
+      badgeStyle() {
+        let style = {}
+        
+        if (this.radius !== 0) {
+          style.width = this.radius + 'rpx'
+          style.height = this.radius + 'rpx'
+          style.lineHeight = this.radius + 'rpx'
+          
+          // style.borderRadius = (this.radius * 8) + 'rpx'
+        }
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.top) {
+          style.top = this.$tn.string.getLengthUnitValue(this.top)
+        }
+        if (this.right) {
+          style.right = this.$tn.string.getLengthUnitValue(this.right)
+        }
+        
+        return style
+      },
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-badge {
+    width: auto;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    font-size: 20rpx;
+    background-color: #FFFFFF;
+    // color: #FFFFFF;
+    border-radius: 100rpx;
+    padding: 4rpx 8rpx;
+    line-height: initial;
+    
+    &--dot {
+      width: 8rpx;
+      height: 8rpx;
+      border-radius: 50%;
+      padding: 0;
+    }
+    &--absolute {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    &--center-position {
+      transform: translate(50%, -50%);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-button/tn-button.vue b/tuniao-ui/components/tn-button/tn-button.vue
new file mode 100644
index 0000000..820ce2f
--- /dev/null
+++ b/tuniao-ui/components/tn-button/tn-button.vue
@@ -0,0 +1,302 @@
+<template>
+  <button
+    class="tn-btn-class tn-btn"
+    :class="[
+      buttonClass,
+      backgroundColorClass,
+      fontColorClass
+    ]"
+    :style="[buttonStyle]"
+    hover-class="tn-hover"
+    :loading="loading"
+    :disabled="disabled"
+    :form-type="formType"
+    :open-type="openType"
+    @getuserinfo="handleGetUserInfo"
+    @getphonenumber="handleGetPhoneNumber"
+    @contact="handleContact"
+    @error="handleError"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: "tn-button",
+    // 解决再微信小程序种，自定义按钮无法触发bindsubmit
+    behaviors: ['wx://form-field-button'],
+    props: {
+      // 按钮索引，用于区分多个按钮
+      index: {
+        type: [Number, String],
+        default: 0
+      },
+      // 按钮形状 default 默认 round 圆角 icon 图标按钮
+      shape: {
+        type: String,
+        default: 'default'
+      },
+      // 是否加阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 宽度 rpx或%
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 高度 rpx或%
+      height: {
+        type: String,
+        default: ''
+      },
+      // 按钮的尺寸 sm lg
+      size: {
+        type: String,
+        default: ''
+      },
+      // 字体是否加粗
+      fontBold: {
+        type: Boolean,
+        default: false
+      },
+      padding: {
+        type: String,
+        default: '0 30rpx'
+      },
+      // 外边距 与css的margin参数用法相同
+      margin: {
+        type: String,
+        default: ''
+      },
+      // 是否镂空
+      plain: {
+        type: Boolean,
+        default: false
+      },
+      // 当plain=true时，是否显示边框
+      border: {
+        type: Boolean,
+        default: true
+      },
+      // 当plain=true时，是否加粗显示边框
+      borderBold: {
+        type: Boolean,
+        default: false
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示加载图标
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      // 触发form表单的事件类型
+      formType: {
+        type: String,
+        default: ''
+      },
+      // 开放能力
+      openType: {
+        type: String,
+        default: ''
+      },
+      // 是否阻止重复点击(默认间隔是200ms)
+      blockRepeatClick: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 根据不同的参数动态生成class
+      buttonClass() {
+        let clazz = ''
+        // 按钮形状
+        switch (this.shape) {
+          case 'icon':
+          case 'round':
+            clazz += ' tn-round'
+            break
+        }
+        
+        // 阴影
+        if (this.shadow) {
+          if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
+            const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+            clazz += ` tn-shadow-${color}`
+          } else {
+            clazz += ' tn-shadow-blur'
+          }
+        }
+        
+        // 字体加粗
+        if (this.fontBold) {
+          clazz += ' tn-text-bold'
+        }
+        
+        // 设置为镂空并且设置镂空便可才进行设置
+        if (this.plain) {
+          clazz += ' tn-btn--plain'
+          if (this.border) {
+            clazz += ' tn-border-solid'
+            if (this.borderBold) {
+              clazz += ' tn-bold-border'
+            }
+            if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
+              const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+              clazz += ` tn-border-${color}`
+            }
+          }
+        }
+        
+        return clazz
+      },
+      // 按钮的样式
+      buttonStyle() {
+        let style = {}
+        switch(this.size) {
+          case 'sm':
+            style.padding = '0 20rpx'
+            style.fontSize = '22rpx'
+            style.height = this.height || '48rpx'
+            break
+          case 'lg':
+            style.padding = '0 40rpx'
+            style.fontSize = '32rpx'
+            style.height = this.height || '80rpx'
+            break
+          default :
+            style.padding = '0 30rpx'
+            style.fontSize = '28rpx'
+            style.height = this.height || '64rpx'
+        }
+        
+        // 是否手动设置了内边距
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        
+        // 是否手动设置外边距
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        
+        // 是否手动设置了字体大小
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        style.width = this.shape === 'icon' ? style.height : this.width
+        style.padding = this.shape === 'icon' ? '0' : style.padding
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        if (!this.backgroundColorClass) {
+          if (this.plain) {
+            style.borderColor = this.backgroundColorStyle || '#080808'
+          } else {
+            style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
+          }
+        }
+        
+        // 设置阴影
+        if (this.shadow && !this.backgroundColorClass) {
+          if (this.backgroundColorStyle.indexOf('#') != -1) {
+            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
+          } else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
+            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
+          }
+          
+        }
+        
+        return style
+      },
+    },
+    data() {
+      return {
+        // 上次点击的时间
+        clickTime: 0,
+        // 两次点击防抖的间隔时间
+        clickIntervalTime: 200
+      }
+    },
+    methods: {
+      // 按钮点击事件
+      handleClick() {
+        if (this.disabled) {
+          return
+        }
+        if (this.blockRepeatClick) {
+          const nowTime = new Date().getTime()
+          if (nowTime - this.clickTime <= this.clickIntervalTime) {
+            return
+          }
+          this.clickTime = nowTime
+          setTimeout(() => {
+            this.clickTime = 0
+          }, this.clickIntervalTime)
+        }
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        // 兼容tap事件
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+      handleGetUserInfo({ detail = {} } = {}) {
+      	this.$emit('getuserinfo', detail);
+      },
+      handleContact({ detail = {} } = {}) {
+      	this.$emit('contact', detail);
+      },
+      handleGetPhoneNumber({ detail = {} } = {}) {
+      	this.$emit('getphonenumber', detail);
+      },
+      handleError({ detail = {} } = {}) {
+      	this.$emit('error', detail);
+      },
+      
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    overflow: visible;
+    transform: translate(0rpx, 0rpx);
+    // background-color: $tn-mai
+    border-radius: 12rpx;
+    // color: $tn-font-color;
+    margin: 0;
+    
+    &--plain {
+      background-color: transparent !important;
+      background-image: none;
+      
+      &.tn-round {
+        border-radius: 1000rpx !important;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-calendar/tn-calendar.vue b/tuniao-ui/components/tn-calendar/tn-calendar.vue
new file mode 100644
index 0000000..289b67b
--- /dev/null
+++ b/tuniao-ui/components/tn-calendar/tn-calendar.vue
@@ -0,0 +1,707 @@
+<template>
+  <tn-popup
+    v-model="value"
+    mode="bottom"
+    :popup="false"
+    length="auto"
+    :borderRadius="borderRadius"
+    :safeAreaInsetBottom="safeAreaInsetBottom"
+    :maskCloseable="maskCloseable"
+    :closeBtn="closeBtn"
+    :zIndex="elIndex"
+    @close="close"
+  >
+    <view class="tn-calendar-class tn-calendar">
+      <!-- 头部 -->
+      <view class="tn-calendar__header">
+        <view v-if="!$slots.tooltip || !$slots.$tooltip" class="tn-calendar__header__text">
+          {{ toolTips }}
+        </view>
+        <view v-else>
+          <slot name="tooltip"></slot>
+        </view>
+      </view>
+      
+      <!-- 操作提示信息 -->
+      <view class="tn-calendar__action">
+        <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(false)">
+          <view><text class="tn-icon-left"></text></view>
+        </view>
+        <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(false)">
+          <view><text class="tn-icon-left"></text></view>
+        </view>
+        <view class="tn-calendar__action__text">{{ dateTitle }}</view>
+        <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(true)">
+          <view><text class="tn-icon-right"></text></view>
+        </view>
+        <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(true)">
+          <view><text class="tn-icon-right"></text></view>
+        </view>
+      </view>
+      
+      <!-- 星期中文标识 -->
+      <view class="tn-calendar__week-day-zh">
+        <view v-for="(item,index) in weekDayZh" :key="index" class="tn-calendar__week-day-zh__text">{{ item }}</view>
+      </view>
+      
+      <!-- 日历主体 -->
+      <view class="tn-calendar__content">
+        <!-- 前置空白部分 -->
+        <block v-for="(item, index) in weekdayArr" :key="index">
+          <view class="tn-calendar__content__item"></view>
+        </block>
+        <view
+          v-for="(item, index) in daysArr"
+          :key="index"
+          class="tn-calendar__content__item"
+          :class="{
+            'tn-hover': disabledChoose(year, month, index + 1),
+            'tn-calendar__content--start-date': (mode === 'range' && startDate == `${year}-${month}-${index+1}`) || mode === 'date',
+            'tn-calendar__content--end-date': (mode === 'range' && endDate == `${year}-${month}-${index+1}`) || mode === 'date'
+          }"
+          :style="{
+            backgroundColor: colorValue(index, 'bg')
+          }"
+          @tap.stop="dateClick(index)"
+        >
+          <view class="tn-calendar__content__item__text" :style="{color: colorValue(index, 'text')}">
+            <view>{{ item.day }}</view>
+          </view>
+          <view class="tn-calendar__content__item__tips" :style="{color: item.color}">
+            {{ item.bottomInfo }}
+          </view>
+        </view>
+        
+        <view class="tn-calendar__content__month--bg">{{ month }}</view>
+      </view>
+      
+      <!-- 底部 -->
+      <view class="tn-calendar__bottom">
+        <view class="tn-calendar__bottom__choose">
+          <text>{{ mode === 'date' ? activeDate : startDate }}</text>
+          <text v-if="endDate">至{{ endDate }}</text>
+        </view>
+        <view class="tn-calendar__bottom__btn" :style="{backgroundColor: btnColor}" @click="handleBtnClick(false)">
+          <view class="tn-calendar__bottom__btn--text">确定</view>
+        </view>
+      </view>
+    </view>
+  </tn-popup>
+</template>
+
+<script>
+  import Calendar from '../../libs/utils/calendar.js'
+  
+  export default {
+    name: 'tn-calendar',
+    props: {
+      // 双向绑定控制组件弹出与收起
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 模式
+      // date -> 单日期 range -> 日期范围
+      mode: {
+        type: String,
+        default: 'date'
+      },
+      // 是否允许切换年份
+      changeYear: {
+        type: Boolean,
+        default: true
+      },
+      // 是否允许切换月份
+      changeMonth: {
+        type: Boolean,
+        default: true
+      },
+      // 可切换的最大年份
+      maxYear: {
+        type: [Number, String],
+        default: 2100
+      },
+      // 可切换的最小年份
+      minYear: {
+        type: [Number, String],
+        default: 1970
+      },
+      // 最小日期(不在范围被不允许选择)
+      minDate: {
+        type: String,
+        default: '1970-01-01'
+      },
+      // 最大日期，如果为空则默认为今天
+      maxDate: {
+        type: String,
+        default: ''
+      },
+      // 切换月份按钮的颜色
+      monthArrowColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 切换年份按钮的颜色
+      yearArrowColor: {
+        type: String,
+        default: '#C8C8C8'
+      },
+      // 默认字体颜色
+      color: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中|起始结束日期背景颜色
+      activeBgColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 选中|起始结束日期文字颜色
+      activeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 范围日期内的背景颜色
+      rangeBgColor: {
+        type: String,
+        default: '#E6E6E655'
+      },
+      // 范围日期内的文字颜色
+      rangeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 起始日期显示的文字，mode=range时生效
+      startText: {
+        type: String,
+        default: '开始'
+      },
+      // 结束日期显示的文字，mode=range时生效
+      endText: {
+        type: String,
+        default: '结束'
+      },
+      // 按钮背景颜色
+      btnColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 农历文字的颜色
+      lunarColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 选中日期是否有选中效果
+      isActiveCurrent: {
+        type: Boolean,
+        default: true
+      },
+      // 切换年月是否触发事件，mode=date时生效
+      isChange: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示农历
+      showLunar: {
+        type: Boolean,
+        default: true
+      },
+      // 顶部提示文字
+      toolTips: {
+        type: String,
+        default: '请选择日期'
+      },
+      // 显示圆角的大小
+      borderRadius: {
+        type: Number,
+        default: 8
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+    },
+    computed: {
+      dateChange() {
+        return `${this.mode}-${this.minDate}-${this.maxDate}`
+      },
+      elIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      },
+      colorValue() {
+        return (index, type) => {
+          let color = type === 'bg' ? '' : this.color
+          let day = index + 1
+          let date = `${this.year}-${this.month}-${day}`
+          let timestamp = new Date(date.replace(/\-/g,'/')).getTime()
+          let start = this.startDate.replace(/\-/g,'/')
+          let end = this.endDate.replace(/\-/g,'/')
+          if ((this.mode === 'date' && this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+            color = type === 'bg' ? this.activeBgColor : this.activeColor
+          } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+            color = type === 'bg' ? this.rangeBgColor : this.rangeColor
+          }
+          return color
+        }
+      }
+    },
+    data() {
+      return {
+        // 星期几，1-7
+        weekday: 1,
+        weekdayArr: [],
+        // 星期对应的中文
+        weekDayZh: ['日','一','二','三','四','五','六'],
+        // 当前月有多少天
+        days: 0,
+        daysArr: [],
+        year: 2021,
+        month: 0,
+        day: 0,
+        startYear: 0,
+        startMonth: 0,
+        startDay: 0,
+        endYear: 0,
+        endMonth: 0,
+        endDay: 0,
+        today: '',
+        activeDate: '',
+        startDate: '',
+        endDate: '',
+        min: null,
+        max: null,
+        // 日期标题
+        dateTitle: '',
+        // 标记是否已经选择了开始日期
+        chooseStart: false
+      }
+    },
+    watch: {
+      dateChange() {
+        this.init()
+      }
+    },
+    created() {
+      this.init()
+    },
+    methods: {
+      // 初始化
+      init() {
+        let now = new Date()
+        this.year = now.getFullYear()
+        this.month = now.getMonth() + 1
+        this.day = now.getDate()
+        this.today = `${this.year}-${this.month}-${this.day}`
+        this.activeDate = this.today
+        this.min = this.initDate(this.minDate)
+        this.max = this.initDate(this.maxDate || this.today)
+        this.startDate = ''
+        this.startYear = 0
+        this.startMonth = 0
+        this.startDay = 0
+        this.endDate = ''
+        this.endYear = 0
+        this.endMonth = 0
+        this.endDay = 0
+        this.chooseStart = false
+        this.changeData()
+      },
+      // 切换月份
+      changeMonthHandler(add) {
+        if (add) {
+          let month = this.month + 1
+          let year = month > 12 ? this.year + 1 : this.year
+          if (!this.checkRange(year)) {
+            this.month = month > 12 ? 1 : month
+            this.year = year
+            this.changeData()
+          }
+        } else {
+          let month = this.month - 1
+          let year = month < 1 ? this.year - 1 : this.year
+          if (!this.checkRange(year)) {
+            this.month = month < 1 ? 12 : month
+            this.year = year
+            this.changeData()
+          }
+        }
+      },
+      // 切换年份
+      changeYearHandler(add) {
+        let year = add ? this.year + 1 : this.year - 1
+        if (!this.checkRange(year)) {
+          this.year = year
+          this.changeData()
+        }
+      },
+      // 日期点击事件
+      dateClick(day) {
+        day += 1
+        if (!this.disabledChoose(this.year, this.month, day)) {
+          this.day = day
+          let date = `${this.year}-${this.month}-${day}`
+          if (this.mode === 'date') {
+            this.activeDate = date
+          } else {
+            let startTimeCompare = new Date(date.replace(/\-/g,'/')).getTime() < new Date(this.startDate.replace(/\-/g,'/')).getTime()
+            if (!this.chooseStart || startTimeCompare) {
+              this.startDate = date
+              this.startYear = this.year
+              this.startMonth = this.month
+              this.startDay = this.day
+              this.endYear = 0
+              this.endMonth = 0
+              this.endDay = 0
+              this.endDate = ''
+              this.activeDate = ''
+              this.chooseStart = true
+            } else {
+              this.endDate = date
+              this.endYear = this.year
+              this.endMonth = this.month
+              this.endDay = this.day
+              this.chooseStart = false
+            }
+          }
+          this.daysArr = this.handleDaysArr()
+        }
+      },
+      // 修改日期数据
+      changeData() {
+        this.days = this.getMonthDay(this.year, this.month)
+        this.daysArr = this.handleDaysArr()
+        this.weekday = this.getMonthFirstWeekDay(this.year, this.month)
+        this.weekdayArr = this.generateArray(1, this.weekday)
+        this.dateTitle = `${this.year}年${this.month}月`
+        if (this.isChange && this.mode === 'date') {
+          this.handleBtnClick(true)
+        }
+      },
+      // 处理按钮点击
+      handleBtnClick(show) {
+        if (!show) {
+          this.close()
+        }
+        if (this.mode === 'date') {
+          let arr = this.activeDate.split('-')
+          let year = this.isChange ? this.year : Number(arr[0])
+          let month = this.isChange ? this.month : Number(arr[1])
+          let day = this.isChange ? this.day : Number(arr[2])
+          let days = this.getMonthDay(year, month)
+          let result = `${year}-${this.formatNumber(month)}-${this.formatNumber(day)}`
+          let weekText = this.getWeekText(result)
+          let isToday = false
+          if (`${year}-${month}-${day}` === this.today) {
+            isToday = true
+          }
+          this.$emit('change', {
+            year,
+            month,
+            day,
+            days,
+            week: weekText,
+            isToday,
+            date: result,
+            // 是否为切换年月操作
+            switch: show
+          })
+        } else {
+          if (!this.startDate || !this.endDate) return
+          
+          let startMonth = this.formatNumber(this.startMonth)
+          let startDay = this.formatNumber(this.startDay)
+          let startDate = `${this.startYear}-${startMonth}-${startDay}`
+          let startWeek = this.getWeekText(startDate)
+          
+          let endMonth = this.formatNumber(this.endMonth)
+          let endDay = this.formatNumber(this.endDay)
+          let endDate = `${this.endYear}-${endMonth}-${endDay}`
+          let endWeek = this.getWeekText(endDate)
+          
+          this.$emit('change', {
+            startYear: this.startYear,
+            startMonth: this.startMonth,
+            startDay: this.startDay,
+            startDate,
+            startWeek,
+            endYear: this.endYear,
+            endMonth: this.endMonth,
+            endDay: this.endDay,
+            endDate,
+            endWeek
+          })
+        }
+      },
+      // 判断是否允许选择
+      disabledChoose(year, month, day) {
+        let flag = true
+        let date = `${year}/${month}/${day}`
+        let min = `${this.min.year}/${this.min.month}/${this.min.day}`
+        let max = `${this.max.year}/${this.max.month}/${this.max.day}`
+        let timestamp = new Date(date).getTime()
+        if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+          flag = false
+        }
+        return flag
+      },
+      // 检查是否在日期范围内
+      checkRange(year) {
+        let overstep = false
+        if (year < this.minYear || year > this.maxYear) {
+          uni.showToast({
+            title: '所选日期超出范围',
+            icon: 'none'
+          })
+          overstep = true
+        }
+        return overstep
+      },
+      // 处理日期
+      initDate(date) {
+        let fdate = date.split('-')
+        return {
+          year: Number(fdate[0] || 1970),
+          month: Number(fdate[1] || 1),
+          day: Number(fdate[2] || 1)
+        }
+      },
+      // 处理日期数组
+      handleDaysArr() {
+        let days = this.generateArray(1, this.days)
+        let daysArr = days.map((item) => {
+          let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
+          let color = this.showLunar ? this.lunarColor : this.activeColor
+          if (
+            (this.mode === 'date' && this.day == item) || 
+            (this.mode === 'range' && (this.startDay == item || this.endDay == item))
+          ) {
+            color = this.activeColor
+          }
+          if (this.mode === 'range') {
+            if (this.startDay == item && this.startDay != this.endDay) {
+              bottomInfo = this.startText
+            }
+            if (this.endDay == item) {
+              bottomInfo = this.endText
+            }
+          }
+          
+          return {
+            day: item,
+            color: color,
+            bottomInfo: bottomInfo
+          }
+        })
+        return daysArr
+      },
+      // 获取对应月有多少天
+      getMonthDay(year, month) {
+        return new Date(year, month, 0).getDate()
+      },
+      // 获取对应月的第一天时星期几
+      getMonthFirstWeekDay(year, month) {
+        return new Date(`${year}/${month}/01 00:00:00`).getDay()
+      },
+      // 获取对应星期的文本
+      getWeekText(date) {
+        date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`)
+        let week = date.getDay()
+        return '星期' + this.weekDayZh[week]
+      },
+      // 生成日期天数数组
+      generateArray(start, end) {
+        return Array.from(new Array(end + 1).keys()).slice(start)
+      },
+      // 格式化数字
+      formatNumber(num) {
+        return num < 10 ? '0' + num : num + ''
+      },
+      // 关闭窗口
+      close() {
+        this.$emit('input', false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-calendar {
+    color: $tn-font-color;
+    
+    &__header {
+      width: 100%;
+      box-sizing: border-box;
+      font-size: 30rpx;
+      background-color: #FFFFFF;
+      color: $tn-main-color;
+      
+      &__text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30rpx;
+        padding: 0 60rpx;
+      }
+    }
+    
+    &__action {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 40rpx 0 40rpx 0;
+      
+      &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 16rpx;
+        width: 32rpx;
+        height: 32rpx;
+        font-size: 20rpx;
+        // line-height: 32rpx;
+        border-radius: 50%;
+        color: #FFFFFF;
+      }
+      
+      &__text {
+        padding: 0 16rpx;
+        color: $tn-font-color;
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+    }
+    
+    &__week-day-zh {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 12rpx 0;
+      overflow: hidden;
+      box-shadow: 16rpx 6rpx 8rpx 0 #E6E6E6;
+      margin-bottom: 2rpx;
+      
+      &__text {
+        flex: 1;
+        text-align: center;
+      }
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 12rpx 0;
+      box-sizing: border-box;
+      background-color: #F7F7F7;
+      position: relative;
+      
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 14.2857%;
+        padding: 12rpx 0;
+        margin: 6rpx 0;
+        overflow: hidden;
+        position: relative;
+        z-index: 2;
+        // box-shadow: inset 0rpx 0rpx 22rpx 4rpx rgba(255,255,255, 0.52);
+        
+        &__text {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 80rpx;
+          font-size: 32rpx;
+          position: relative;
+        }
+        
+        &__tips {
+          position: absolute;
+          width: 100%;
+          line-height: 24rpx;
+          left: 0;
+          bottom: 8rpx;
+          text-align: center;
+          z-index: 2;
+          transform-origin: center center;
+          transform: scale(0.8);
+        }
+      }
+      
+      &--start-date {
+        border-top-left-radius: 8rpx;
+        border-bottom-left-radius: 8rpx;
+      }
+      
+      &--end-date {
+        border-top-right-radius: 8rpx;
+        border-bottom-right-radius: 8rpx;
+      }
+      
+      &__month {
+        &--bg {
+          position: absolute;
+          font-size: 200rpx;
+          line-height: 200rpx;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          color: $tn-font-holder-color;
+          z-index: 1;
+        }
+      }
+    }
+    
+    &__bottom {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      background-color: #F7F7F7;
+      padding: 0 40rpx 30rpx;
+      box-sizing: border-box;
+      font-size: 24rpx;
+      color: $tn-font-sub-color;
+      
+      &__choose {
+        height: 50rpx;
+      }
+      
+      &__btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 60rpx;
+        border-radius: 40rpx;
+        color: #FFFFFF;
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue b/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
new file mode 100644
index 0000000..2e4c6cc
--- /dev/null
+++ b/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
@@ -0,0 +1,320 @@
+<template>
+  <view class="tn-car-keyboard-class tn-car-keyboard" @touchmove.stop.prevent="() => {}">
+    <view class="tn-car-keyboard__grids">
+      
+      <view
+        v-for="(data, index) in inputCarNumber ? endKeyBoardList : areaList"
+        :key="index"
+        class="tn-car-keyboard__grids__item"
+      >
+        <view
+          v-for="(sub_data, sub_index) in data"
+          :key="sub_index"
+          class="tn-car-keyboard__grids__btn"
+          :class="{'tn-car-keyboard__grids__btn--disabled': sub_data === 'I'}"
+          :hover-class="sub_data !== 'I' ? 'tn-car-keyboard--hover' : ''"
+          :hover-stay-time="100"
+          @tap="click(index, sub_index)"
+        >
+          {{ sub_data }}
+        </view>
+      </view>
+      
+      <view
+        class="tn-car-keyboard__back"
+        hover-class="tn-hover-class"
+        :hover-stay-time="150"
+        @touchstart.stop="backspaceClick"
+        @touchend="clearTimer"
+      >
+        <view class="tn-icon-left-arrow tn-car-keyboard__back__icon"></view>
+      </view>
+      
+      <view
+        class="tn-car-keyboard__change"
+        hover-class="tn-car-keyboard--hover"
+        :hover-stay-time="150"
+        @tap="changeMode"
+      >
+        <text class="tn-car-keyboard__mode--zh" :class="[`tn-car-keyboard__mode--${!inputCarNumber ? 'active' : 'inactive'}`]">中</text>
+        /
+        <text class="tn-car-keyboard__mode--en" :class="[`tn-car-keyboard__mode--${inputCarNumber ? 'active' : 'inactive'}`]">英</text>
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-car-keyboard',
+    props: {
+      // 是否打乱键盘顺序
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      },
+      // 切换中英文输入
+      switchEnMode: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      areaList() {
+        let data = [
+          '京',
+          '沪',
+          '粤',
+          '津',
+          '冀',
+          '豫',
+          '云',
+          '辽',
+          '黑',
+          '湘',
+          '皖',
+          '鲁',
+          '苏',
+          '浙',
+          '赣',
+          '鄂',
+          '桂',
+          '甘',
+          '晋',
+          '陕',
+          '蒙',
+          '吉',
+          '闽',
+          '贵',
+          '渝',
+          '川',
+          '青',
+          '琼',
+          '宁',
+          '藏',
+          '港',
+          '澳',
+          '新',
+          '使',
+          '学',
+          '临',
+          '警'
+        ]
+        // 打乱顺序
+        if (this.randomEnabled) data = this.$tn.array.random(data)
+        // 切割二维数组
+        let showData = []
+        showData[0] = data.slice(0, 10)
+        showData[1] = data.slice(10, 20)
+        showData[2] = data.slice(20, 30)
+        showData[3] = data.slice(30, 37)
+        return showData
+      },
+      endKeyBoardList() {
+        let data = [
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          0,
+          'Q',
+          'W',
+          'E',
+          'R',
+          'T',
+          'Y',
+          'U',
+          'I',
+          'O',
+          'P',
+          'A',
+          'S',
+          'D',
+          'F',
+          'G',
+          'H',
+          'J',
+          'K',
+          'L',
+          'Z',
+          'X',
+          'C',
+          'V',
+          'B',
+          'N',
+          'M'
+        ]
+        // 打乱顺序
+        if (this.randomEnabled) data = this.$tn.array.random(data)
+        // 切割二维数组
+        let showData = []
+        showData[0] = data.slice(0, 10)
+        showData[1] = data.slice(10, 20)
+        showData[2] = data.slice(20, 29)
+        showData[3] = data.slice(29, 36)
+        return showData
+      }
+    },
+    data() {
+      return {
+        // 标记是否输入车牌号码
+        inputCarNumber: false,
+        // 长按多次删除事件监听
+        longPressDeleteTimer: null
+      }
+    },
+    watch:{
+      switchEnMode: {
+        handler(value) {
+          if (value) {
+            this.inputCarNumber = true
+          } else {
+            this.inputCarNumber = false
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 点击键盘按钮
+      click(i, j) {
+        let value = ''
+        // 根据不同模式获取不同数组的值
+        if (this.inputCarNumber) value = this.endKeyBoardList[i][j]
+        else value = this.areaList[i][j]
+        
+        // 车牌里不包含I
+        if (value === 'I') return
+        
+        this.$emit('change', value)
+      },
+      // 修改输入模式
+      // 中文/英文
+      changeMode() {
+        this.inputCarNumber = !this.inputCarNumber
+      },
+      // 点击退格
+      backspaceClick() {
+        this.$emit('backspace')
+        this.clearTimer()
+        this.longPressDeleteTimer = setInterval(() => {
+          this.$emit('backspace')
+        }, 250)
+      },
+      // 清空定时器
+      clearTimer() {
+        if (this.longPressDeleteTimer) {
+          clearInterval(this.longPressDeleteTimer)
+          this.longPressDeleteTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-car-keyboard {
+    position: relative;
+    padding: 24rpx 0;
+    background-color: #E6E6E6;
+    
+    &__grids {
+      
+      &__item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      &__btn {
+        display: inline-flex;
+        justify-content: center;
+        flex: 0 0 64rpx;
+        width: 62rpx;
+        height: 80rpx;
+        font-size: 38rpx;
+        line-height: 80rpx;
+        font-weight: 500;
+        text-decoration: none;
+        text-align: center;
+        background-color: #FFFFFF;
+        margin: 8rpx 5rpx;
+        border-radius: 8rpx;
+        box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+        
+        &--disabled {
+          opacity: 0.6;
+        }
+      }
+    }
+    
+    &__back {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 96rpx;
+      height: 80rpx;
+      right: 22rpx;
+      bottom: 32rpx;
+      background-color: #E6E6E6;
+      border-radius: 8rpx;
+      box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+    }
+    
+    &__change {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 96rpx;
+      height: 80rpx;
+      left: 22rpx;
+      bottom: 32rpx;
+      line-height: 1;
+      background-color: #FFFFFF;
+      border-radius: 8rpx;
+      box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+    }
+    
+    &__mode {
+      &--zh {
+        transform: translateY(-10rpx);
+      }
+      &--en {
+        transform: translateY(10rpx);
+      }
+      
+      &--active {
+        color: $tn-main-color;
+        font-size: 30rpx;
+      }
+      
+      &--inactive {
+        &.tn-car-keyboard__mode--zh {
+          transform: scale(0.85) translateY(-10rpx);
+        }
+      }
+      
+      &--inactive {
+        &.tn-car-keyboard__mode--en {
+          transform: scale(0.85) translateY(10rpx);
+        }
+      }
+    }
+    
+    &--hover {
+      background-color: #E6E6E6 !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue b/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue
new file mode 100644
index 0000000..02ac406
--- /dev/null
+++ b/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue
@@ -0,0 +1,654 @@
+<template>
+  <view class="tn-cascade-selection tn-cascade-selection-class">
+    <scroll-view
+      class="selection__scroll-view"
+      :class="[{'tn-border-solid-bottom': headerLine}]"
+      :style="[scrollViewStyle]"
+      scroll-x
+      scroll-with-animation
+      :scroll-into-view="scrollViewId"
+    >
+      <view class="selection__header" :class="[backgroundColorClass]" :style="[headerStyle]">
+        <view
+          v-for="(item, index) in selectedArr"
+          :key="index"
+          :id="`select__${index}`"
+          class="selection__header__item"
+          :class="[headerItemClass(index)]"
+          :style="[headerItemStyle(index)]"
+          @tap.stop="clickNav(index)"
+        >
+          {{ item.text }}
+          <view
+            v-if="index===currentTab && showActiveLine"
+            class="selection__header__line"
+            :style="{backgroundColor: activeLineColor}"
+          ></view>
+        </view>
+      </view>
+    </scroll-view>
+    
+    <swiper
+      class="selection__list"
+      :class="[backgroundColorClass]"
+      :style="[listStyle]"
+      :current="currentTab"
+      :duration="300"
+      @change="switchTab"
+    >
+      <swiper-item
+        v-for="(item, index) in selectedArr"
+        :key="index"
+      >
+        <scroll-view
+          class="selection__list__item"
+          :style="{height: selectionContainerHeight + 'rpx'}"
+          scroll-y
+          :scroll-into-view="item.scrollViewId"
+        >
+          <view class="selection__list__item--first"></view>
+          <view
+            v-for="(subItem, subIndex) in item.list"
+            :key="subIndex"
+            :id="`select__${subIndex}`"
+            class="selection__list__item__cell"
+            :style="[itemStyle]"
+            @tap="change(index, subIndex, subItem)"
+          >
+            <view
+              v-if="item.index === subIndex"
+              class="selection__list__item__icon tn-icon-success"
+              :style="[itemIconStyle]"
+            ></view>
+            <image
+              v-if="subItem.src"
+              class="selection__list__item__image"
+              :style="[itemImageStyle]"
+              :src="subItem.src"
+            ></image>
+            <view
+              class="selection__list__item__title"
+              :class="[{'tn-text-bold': item.index === subIndex && itemActiveBold}]"
+              :style="[itemTitleStyle(index, subIndex)]"
+            >
+              {{ subItem.text }}
+            </view>
+            <view
+              v-if="subItem.subText"
+              class="selection__list__item__title--sub"
+              :style="[itemSubTitleStyle]"
+            >
+              {{ subItem.subText }}
+            </view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-cascade-selection',
+    mixins: [ componentsColorMixin ],
+    props: {
+      // 如果下一级是请求返回，则为第一级数据，否则为所有数据
+      /* {
+        text: '', // 标题
+        subText: '', // 子标题
+        src: '', // 图片地址
+        value: 0, // 选中的值
+        children: [
+          {
+            text: '',
+            subText: '',
+            value: 0,
+            children: []
+          }
+        ]
+      } */
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 默认选中值
+      // ['value1','value2','value3']
+      defaultValue: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 子集数据通过请求来获取
+      request: {
+        type: Boolean,
+        default: false
+      },
+      // request为true时生效, 获取到的子集数据
+      receiveData: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 显示header底部细线
+      headerLine: {
+        type: Boolean,
+        default: true
+      },
+      // header背景颜色
+      headerBgColor: {
+        type: String,
+        default: ''
+      },
+      // 顶部标签栏高度,单位rpx
+      tabsHeight: {
+        type: Number,
+        default: 88
+      },
+      // 默认显示文字
+      text: {
+        type: String,
+        default: '请选择'
+      },
+      // 选中的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 选中后加粗
+      activeBold: {
+        type: Boolean,
+        default: true
+      },
+      // 选中显示底部线条
+      showActiveLine: {
+        type: Boolean,
+        default: true
+      },
+      // 线条颜色
+      activeLineColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // icon大小,单位rpx
+      activeIconSize: {
+        type: Number,
+        default: 0
+      },
+      // icon颜色
+      activeIconColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // item图片宽度, 单位rpx
+      itemImgWidth: {
+        type: Number,
+        default: 0
+      },
+      // item图片高度, 单位rpx
+      itemImgHeight: {
+        type: Number,
+        default: 0
+      },
+      // item图片圆角
+      itemImgRadius: {
+        type: String,
+        default: '50%'
+      },
+      // item text颜色
+      itemTextColor: {
+        type: String,
+        default: ''
+      },
+      // item text选中颜色
+      itemActiveTextColor: {
+        type: String,
+        default: ''
+      },
+      // item text选中加粗
+      itemActiveBold: {
+        type: Boolean,
+        default: true
+      },
+      // item text文字大小, 单位rpx
+      itemTextSize: {
+        type: Number,
+        default: 0
+      },
+      // item subText颜色
+      itemSubTextColor: {
+        type: String,
+        default: ''
+      },
+      // item subText字体大小, 单位rpx
+      itemSubTextSize: {
+        type: Number,
+        default: 0
+      },
+      // item样式
+      itemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // selection选项容器高度, 单位rpx
+      selectionContainerHeight: {
+        type: Number,
+        default: 300
+      }
+    },
+    computed: {
+      scrollViewStyle() {
+        let style = {}
+        if (this.headerBgColor) {
+          style.backgroundColor = this.headerBgColor
+        }
+        return style
+      },
+      headerStyle() {
+        let style = {}
+        style.height = `${this.tabsHeight}rpx`
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      headerItemClass() {
+        return (index) => {
+          let clazz = ''
+          if (index !== this.currentTab) {
+            clazz += ` ${this.fontColorClass}`
+          } else {
+            if (this.activeBold) {
+              clazz += ' tn-text-bold'
+            }
+          }
+          return clazz
+        }
+      },
+      headerItemStyle() {
+        return (index) => {
+          let style = {}
+          style.color = index === this.currentTab ? this.activeColor : (this.fontColorStyle ? this.fontColorStyle : '')
+          if (this.fontSizeStyle) {
+            style.fontSize = this.fontSizeStyle
+          }
+          return style
+        }
+      },
+      listStyle() {
+        let style = {}
+        style.height = `${this.selectionContainerHeight}rpx`
+        if (this.backgroundColorStyle) {
+          style.color = this.backgroundColorStyle
+        }
+        return style
+      },
+      itemIconStyle() {
+        let style = {}
+        if (this.activeIconColor) {
+          style.color = this.activeIconColor
+        }
+        if (this.activeIconSize) {
+          style.fontSize = this.activeIconSize + 'rpx'
+        }
+        return style
+      },
+      itemImageStyle() {
+        let style = {}
+        if (this.itemImgWidth) {
+          style.width = this.itemImgWidth + 'rpx'
+        }
+        if (this.itemImgHeight) {
+          style.height = this.itemImgHeight + 'rpx'
+        }
+        if (this.itemImgRadius) {
+          style.borderRadius = this.itemImgRadius
+        }
+        return style
+      },
+      itemTitleStyle() {
+        return (index, subIndex) => {
+          let style = {}
+          if (index === subIndex) {
+            if (this.itemActiveTextColor) {
+              style.color = this.itemActiveTextColor
+            }
+          } else {
+            if (this.itemTextColor) {
+              style.color = this.itemTextColor
+            }
+          }
+          if (this.itemTextSize) {
+            style.fontSize = this.itemTextSize + 'rpx'
+          }
+          return style
+        }
+      },
+      itemSubTitleStyle() {
+        let style = {}
+        if (this.itemSubTextColor) {
+          style.color = this.itemSubTextColor
+        }
+        if (this.itemSubTextSize) {
+          style.fontSize = this.itemSubTextSize + 'rpx'
+        }
+        return {}
+      }
+    },
+    watch: {
+      list(val) {
+        this.initData(val, -1)
+      },
+      defaultValue(val) {
+        this.setDefaultValue(val)
+      },
+      receiveData(val) {
+        this.addSubData(val, this.currentTab)
+      },
+    },
+    data() {
+      return {
+        // 当前选中的子集
+        currentTab: 0,
+        // tabs栏scrollView滚动的位置
+        scrollViewId: 'select__0',
+        // 选项数组
+        selectedArr: []
+      }
+    },
+    created() {
+      this.setDefaultValue(this.defaultValue)
+    },
+    methods: {
+      // 初始化数据
+      initData(data, index) {
+        if (!data || data.length === 0) return
+        if (this.request) {
+          // 第一级数据
+          this.addSubData(data, index)
+        } else {
+          this.addSubData(this.getItemList(index, -1), index)
+        }
+      },
+      // 重置数据
+      reset() {
+        this.initData(this.list, -1)
+      },
+      // 滚动切换
+      switchTab(e) {
+        this.currentTab = e.detail.current
+        this.checkSelectPosition()
+      },
+      // 点击标题切换
+      clickNav(index) {
+        if (this.currentTab !== index) {
+          this.currentTab = index
+        }
+      },
+      // 列表数据发生改变
+      change(index, subIndex, subItem) {
+        let item = this.selectedArr[index]
+        if (item.index === subIndex) return
+        item.index = subIndex
+        item.text = subItem.text
+        item.subText = subItem.subText || ''
+        item.value = subItem.value
+        item.src = subItem.src || ''
+        this.$emit('change', {
+          index: index,
+          subIndex: subIndex,
+          ...subItem
+        })
+        
+        // 如果不是异步加载，则取出对应的数据
+        if (!this.request) {
+          let data = this.getItemList(index, subIndex)
+          this.addSubData(data, index)
+        }
+      },
+      // 设置默认的数据
+      setDefaultValue(val) {
+        let defaultValues = val || []
+        if (defaultValues.length > 0) {
+          this.selectedArr = this.getItemListWithValues(JSON.parse(JSON.stringify(this.list)), defaultValues)
+          if (!this.selectedArr) return
+          this.currentTab = this.selectedArr.length - 1
+          this.$nextTick(() => {
+            this.checkSelectPosition()
+          })
+          // defaultItemList.map((item) => {
+          //   item.scrollViewId = `select__${item.index}`
+          // })
+          // this.selectedArr = defaultItemList
+          // this.currentTab = defaultItemList.length - 1
+          // this.$nextTick(() => {
+          //   this.checkSelectPosition()
+          // })
+        } else {
+          this.initData(this.list, -1)
+        }
+      },
+      // 获取对应选项的item数据
+      getItemList(index, subIndex) {
+        let list = []
+        let arr = JSON.parse(JSON.stringify(this.list))
+        // 初始化数据
+        if (index === -1) {
+          list = this.removeChildren(arr)
+        } else {
+          // 判断第一项是否已经选择
+          let value = this.selectedArr[0].index
+          value = value === -1 ? subIndex : value
+          list = arr[value].children || []
+          if (index > 0) {
+            for (let i = 1; i < index + 1; i++) {
+              // 获取当前数据选中的序号
+              let val = index === i ? subIndex : this.selectedArr[i].index
+              list = list[val].children || []
+              if (list.length === 0) break
+            }
+          }
+          list = this.removeChildren(list)
+        }
+        return list
+      },
+      // 根据数组中的值获取对应的item数据
+      getItemListWithValues(data, values) {
+        const defaultValues = JSON.parse(JSON.stringify(values))
+        if (!defaultValues || defaultValues.length === 0) return
+        // 取出第一个值所对应的item
+        const itemIndex = data.findIndex((item) => {
+          return item.value === defaultValues[0]
+        })
+        if (itemIndex === -1) return
+        const item = data[itemIndex]
+        item.index = itemIndex
+        item.scrollViewId = `select__${itemIndex}`
+        item.list = this.removeChildren(JSON.parse(JSON.stringify(data)))
+        // 判断是否只有1个值
+        if (defaultValues.length === 1 || (!item.hasOwnProperty('children') || item.children.length === 0)) {
+          return this.removeChildren([item])
+        } else {
+          let selectItemList = []
+          const children = item.children
+          selectItemList.push(item)
+          // 移除已经获取的值
+          defaultValues.splice(0, 1)
+          const childrenValue = this.getItemListWithValues(children, defaultValues)
+          selectItemList = selectItemList.concat(childrenValue)
+          
+          return this.removeChildren(selectItemList)
+        }
+      },
+      // 删除子元素
+      removeChildren(data) {
+        let list = data.map((item) => {
+          if (item.hasOwnProperty('children')) {
+            delete item['children']
+          }
+          return item
+        })
+        return list
+      },
+      // 新增子集数据时处理
+      addSubData(data, index) {
+        // 判断是否已经完成选择数据或者为初始化数据
+        if (!data || data.length === 0) {
+          if (index == -1) return
+          // 完成选择
+          let arr = this.selectedArr
+          // 如果当前选中项的序号比已选数据的长度小，则表示当前重新选择了数据
+          if (index < arr.length - 1) {
+            let newArr = arr.slice(0, index + 1)
+            this.selectedArr = newArr
+          }
+          let result = JSON.parse(JSON.stringify(this.selectedArr))
+          let lastItem = result[result.length - 1] || {}
+          let text = ''
+          result.map(item => {
+            text += item.text
+            delete item['list']
+            delete item['scrollViewId']
+            return item
+          })
+          this.$emit('complete', {
+            result: result,
+            value: lastItem.value,
+            text: text,
+            subText: lastItem.subText,
+            src: lastItem.src
+          })
+        } else {
+          // 重置数据
+          let item = [{
+            text: this.text,
+            subText: '',
+            value: '',
+            src: '',
+            index: -1,
+            scrollViewId: 'select__0',
+            list: data
+          }]
+          // 初始化数据
+          if (index === -1) {
+            this.selectedArr = item
+          } else {
+            // 拼接新旧数据并且判断是否为重新选择了数据（如果为重新选择了数据则重置之后的选项数据）
+            let retainArr = this.selectedArr.slice(0, index + 1)
+            this.selectedArr = retainArr.concat(item)
+          }
+          this.$nextTick(() => {
+            this.currentTab = this.selectedArr.length - 1
+          })
+        }
+      },
+      // 检查当前选中项，并将选项设置位置信息
+      checkSelectPosition() {
+        let item = this.selectedArr[this.currentTab]
+        item.scrollViewId = 'select__0'
+        this.$nextTick(() => {
+          setTimeout(() => {
+            // 设置当前数据滚动到的位置
+            let val = item.index < 2 ? 0 : Number(item.index - 2)
+            item.scrollViewId = `select__${val}`
+          }, 10)
+        })
+        
+        // 设置选项滚动到所在的位置
+        if (this.currentTab > 1) {
+          this.scrollViewId = `select__${this.currentTab - 1}`
+        } else {
+          this.scrollViewId = `select__0`
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-cascade-selection {
+    width: 100%;
+  }
+  
+  .selection {
+    &__scroll-view {
+      background-color: #FFFFFF;
+    }
+    
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      position: relative;
+      
+      &__item {
+        max-width: 240rpx;
+        padding: 15rpx 30rpx;
+        flex-shrink: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+      }
+      
+      &__line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 4rpx;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    
+    &__list {
+      background-color: #FFFFFF;
+      &__item {
+        &--first {
+          width: 100%;
+          height: 20rpx;
+        }
+        
+        &__cell {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          padding: 20rpx 30rpx;
+        }
+        
+        &__icon {
+          margin-right: 12rpx;
+          font-size: 24rpx;
+        }
+        
+        &__image {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
+        
+        &__title {
+          word-break: break-all;
+          color: #333333;
+          font-size: 28rpx;
+          
+          &--sub {
+            margin-left: 20rpx;
+            word-break: break-all;
+            color: $tn-font-sub-color;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue b/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue
new file mode 100644
index 0000000..5472ad5
--- /dev/null
+++ b/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue
@@ -0,0 +1,134 @@
+<template>
+  <view class="tn-checkbox-group-class tn-checkbox-group">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [ Emitter ],
+    name: 'tn-checkbox-group',
+    props: {
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 可以选中多少个checkbox
+      max: {
+        type: Number,
+        default: 999
+      },
+      // 表单提交时的标识符
+      name: {
+        type: String,
+        default: ''
+      },
+      // 禁用选择
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'square'
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 34
+      },
+      // 每个checkbox占的宽度
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 是否换行
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 20
+      }
+    },
+    computed: {
+      // 这里computed的变量，都是子组件tn-checkbox需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+      // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(tn-checkbox-group)
+      // 拉取父组件新的变化后的参数
+      parentData() {
+        return [this.value, this.disabled, this.disabledLabel, this.shape, this.activeColor, this.size, this.width, this.wrap, this.iconSize]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件中的子组件需要共享的参数发生了变化，手动通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-checkbox)如果有updateParentData方法的话，子组件重新从父组件拉取了最新的值
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      this.children = []
+    },
+    methods: {
+      initValue(values) {
+        this.$emit('input', values)
+      },
+      // 触发事件
+      emitEvent() {
+        let values = []
+        this.children.map(child => {
+          if (child.checkValue) values.push(child.name)
+        })
+        this.$emit('change', values)
+        this.$emit('input', values)
+        // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
+        // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+        setTimeout(() => {
+        	// 将当前的值发送到 tn-form-item 进行校验
+        	this.dispatch('tn-form-item', 'on-form-change', values)
+        }, 60)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-checkbox-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+    &::after {
+      content: " ";
+      display: table;
+      clear: both;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-checkbox/tn-checkbox.vue b/tuniao-ui/components/tn-checkbox/tn-checkbox.vue
new file mode 100644
index 0000000..0ad3a3f
--- /dev/null
+++ b/tuniao-ui/components/tn-checkbox/tn-checkbox.vue
@@ -0,0 +1,328 @@
+<template>
+  <view class="tn-checkbox-class tn-checkbox" :style="[checkboxStyle]">
+    <view
+      class="tn-checkbox__icon-wrap"
+      :class="[iconClass]"
+      :style="[iconStyle]"
+      @tap="toggle"
+    >
+      <view class="tn-checkbox__icon-wrap__icon" :class="[`tn-icon-${iconName}`]"></view>
+    </view>
+    
+    <view
+      class="tn-checkbox__label"
+      :class="[labelClass]"
+      :style="{
+        fontSize: labelSize ? labelSize + 'rpx' : ''
+      }"
+      @tap="onClickLabel"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-checkbox',
+    props: {
+      // checkbox名称
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 是否为选中状态
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用选择
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 0
+      },
+      // 图标名称
+      iconName: {
+        type: String,
+        default: 'success'
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // label的字体大小
+      labelSize: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 是否禁用选中，父组件的禁用会覆盖当前的禁用状态
+      isDisabled() {
+        return this.disabled ? this.disabled : (this.parent ? this.parentData.disabled : false)
+      },
+      // 是否禁用点击label选中，父组件的禁用会覆盖当前的禁用状态
+      isDisabledLabel() {
+        return this.disabledLabel ? this.disabledLabel : (this.parent ? this.parentData.disabledLabel : false)
+      },
+      // 尺寸
+      checkboxSize() {
+        return this.size ? this.size : (this.parent ? this.parentData.size : 34)
+      },
+      // 激活时的颜色
+      elAvtiveColor() {
+        return this.activeColor ? this.activeColor : (this.parent ? this.parentData.activeColor : '#01BEFF')
+      },
+      // 形状
+      elShape() {
+        return this.shape ? this.shape : (this.parent ? this.parentData.shape : 'square')
+      },
+      iconClass() {
+        let clazz = ''
+        clazz += (' tn-checkbox__icon-wrap--' + this.elShape)
+        
+        if (this.checkValue) clazz += ' tn-checkbox__icon-wrap--checked'
+        if (this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled'
+        if (this.value && this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled--checked'
+        
+        return clazz
+      },
+      iconStyle() {
+        let style = {}
+        // 判断是否用户手动禁用和传递的值
+        if (this.elAvtiveColor && this.checkValue && !this.isDisabled) {
+          style.borderColor = this.elAvtiveColor
+          style.backgroundColor = this.elAvtiveColor
+        }
+        
+        // checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+        style.color = this.checkValue ? '#FFFFFF' : 'transparent'
+        
+        style.width = this.checkboxSize + 'rpx'
+        style.height = style.width
+        
+        style.fontSize = (this.iconSize ? this.iconSize : (this.parent ? this.parentData.iconSize : 20)) + 'rpx'
+        
+        return style
+      },
+      checkboxStyle() {
+        let style = {}
+        if (this.parent && this.parentData.width) {
+          // #ifdef MP
+          // 各家小程序因为它们特殊的编译结构，使用float布局
+          style.float = 'left';
+          // #endif
+          // #ifndef MP
+          // H5和APP使用flex布局
+          style.flex = `0 0 ${this.parentData.width}`;
+          // #endif
+        }
+        if(this.parent && this.parentData.wrap) {
+        	style.width = '100%';
+        	// #ifndef MP
+        	// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+        	style.flex = '0 0 100%';
+        	// #endif
+        }
+        
+        return style
+      },
+      labelClass() {
+        let clazz = ''
+        if (this.isDisabled) {
+          clazz += ' tn-checkbox__label--disabled'
+        }
+        return clazz
+      }
+    },
+    data() {
+      return {
+        // 当前checkbox的value值
+        checkValue: false,
+        parentData: {
+          value: null,
+          max: null,
+          disabled: null,
+          disabledLabel: null,
+          shape: null,
+          activeColor: null,
+          size: null,
+          width: null,
+          wrap: null,
+          iconSize: null
+        }
+      }
+    },
+    watch: {
+      value(val) {
+        this.checkValue = val
+      }
+    },
+    created() {
+      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+      // this.parent = this.$tn.$parent.call(this, 'tn-checkbox-group')
+      // // 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
+      // this.parent && this.parent.children.push(this)
+      // // 初始化父组件的value值
+      // this.parent && this.parent.emitEvent()
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      updateCheckValue() {
+        // 更新当前checkbox的选中状态
+        this.checkValue = (this.parent && this.parentData.value.includes(this.name)) || this.value === true
+        if (this.parent) {
+          if (this.value && !this.parentData.value.includes(this.name)) {
+            this.parentData.value.push(this.name)
+            this.parent.initValue(this.parentData.value)
+          }
+        }
+      },
+      updateParentData() {
+        this.getParentData('tn-checkbox-group')
+        this.updateCheckValue()
+      },
+      onClickLabel() {
+        if (!this.isDisabled && !this.isDisabledLabel) {
+          this.setValue()
+        }
+      },
+      toggle() {
+        if (!this.isDisabled) {
+          this.setValue()
+        }
+      },
+      emitEvent() {
+        this.$emit('change', {
+          name: this.name,
+          value: !this.checkValue
+        })
+        if (this.parent) {
+          this.checkValue = !this.checkValue
+          // 执行父组件tn-checkbox-group的事件方法
+          // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+          setTimeout(() => {
+            if(this.parent.emitEvent) this.parent.emitEvent();
+          }, 80)
+        }
+      },
+      // 设置input的值，通过v-modal绑定组件的值
+      setValue() {
+        // 判断是否为可选项组
+        if (this.parent) {
+          // 反转状态
+          if (this.checkValue === true) {
+            this.emitEvent()
+            // this.$emit('input', !this.checkValue)
+          } else {
+            // 超出最大可选项，弹出提示
+            if (this.parentData.value.length >= this.parentData.max) {
+              return this.$tn.message.toast(`最多可选${this.parent.max}项`)
+            }
+            // 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
+            this.emitEvent();
+            // this.$emit('input', !this.checkValue);
+          }
+        } else {
+          // 只有一个可选项
+          this.emitEvent()
+          this.$emit('input', !this.checkValue)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-checkbox {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+    
+    &__icon-wrap {
+      color: $tn-font-color;
+      flex: none;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 42rpx;
+      height: 42rpx;
+      color: transparent;
+      text-align: center;
+      transition-property: color, border-color, background-color;
+      border: 1px solid $tn-font-sub-color;
+      transition-duration: 0.2s;
+      
+      /* #ifdef MP-TOUTIAO */
+      // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+      &__icon {
+      	line-height: 0;
+      }
+      /* #endif */
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 6rpx;
+      }
+      
+      &--checked {
+        color: #FFFFFF;
+        background-color: $tn-main-color;
+        border-color: $tn-main-color;
+      }
+      
+      &--disabled {
+        background-color: $tn-font-holder-color;
+        border-color: $tn-font-sub-color;
+      }
+      
+      &--disabled--checked {
+        color: $tn-font-sub-color !important;
+      }
+    }
+    
+    &__label {
+      word-wrap: break-word;
+      margin-left: 10rpx;
+      margin-right: 24rpx;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      
+      &--disabled {
+        color: $tn-font-sub-color;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue b/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
new file mode 100644
index 0000000..31c1a38
--- /dev/null
+++ b/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
@@ -0,0 +1,223 @@
+<template>
+  <view
+    class="tn-circle-progress-class tn-circle-progress"
+    :style="{
+      width: widthPx + 'px',
+      height: widthPx + 'px'
+    }"
+  >
+    <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+    <!-- 默认圆环 -->
+    <canvas
+      class="tn-circle-progress__canvas-bg"
+      :canvas-id="elBgId"
+      :id="elBgId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px'
+      }"
+    ></canvas>
+    <!-- 进度圆环 -->
+    <canvas
+      class="tn-circle-progress__canvas"
+      :canvas-id="elId"
+      :id="elId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px'
+      }"
+    ></canvas>
+    <view class="tn-circle-progress__content">
+      <slot v-if="$slots.default || $slots.$default"></slot>
+      <view v-else-if="showPercent" class="tn-circle-progress__content__percent">{{ percent + '%' }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-circle-progress',
+    props: {
+      // 进度（百分比）
+      percent: {
+        type: Number,
+        default: 0,
+        validator: val => {
+          return val >= 0 && val <= 100
+        }
+      },
+      // 圆环线宽
+      borderWidth: {
+        type: Number,
+        default: 14
+      },
+      // 整体圆的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 是否显示条纹
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      // 条纹是否运动
+      stripedActive: {
+        type: Boolean,
+        default: true
+      },
+      // 激活部分颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活部分颜色
+      inactiveColor: {
+        type: String,
+        default: '#f0f0f0'
+      },
+      // 是否显示进度条内部百分比值
+      showPercent: {
+        type: Boolean,
+        default: false
+      },
+      // 圆环执行动画的时间，ms
+      duration: {
+        type: Number,
+        default: 1500
+      }
+    },
+    data() {
+      return {
+        // 微信小程序中不能使用this.$tn.uuid()形式动态生成id值，否则会报错
+        // #ifdef MP-WEIXIN
+        elBgId: 'tCircleProgressBgId',
+        elId: 'tCircleProgressElId',
+        // #endif
+        // #ifndef MP-WEIXIN
+        elBgId: this.$tn.uuid(),
+        elId: this.$tn.uuid(),
+        // #endif
+        // 活动圆上下文
+        progressContext: null,
+        // 转换成px为单位的背景宽度
+        widthPx: uni.upx2px(this.width || 200),
+        // 转换成px为单位的圆环宽度
+        borderWidthPx: uni.upx2px(this.borderWidth || 14),
+        // canvas画圆的起始角度，默认为-90度，顺时针
+        startAngle: -90 * Math.PI / 180,
+        // 动态修改进度值的时候，保存进度值的变化前后值
+        newPercent: 0,
+        oldPercent: 0
+      }
+    },
+    watch: {
+      percent(newVal, oldVal = 0) {
+        if (newVal > 100) newVal = 100
+        if (oldVal < 0) oldVal = 0
+        
+        this.newPercent = newVal
+        this.oldPercent = oldVal
+        setTimeout(() => {
+        	// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+        	// 将此值减少或者新增到新的百分比值
+        	this.drawCircleByProgress(oldVal)
+        }, 50)
+      }
+    },
+    created() {
+      // 赋值，用于加载后第一个画圆使用
+      this.newPercent = this.percent;
+      this.oldPercent = 0;
+    },
+    mounted() {
+      setTimeout(() => {
+      	this.drawProgressBg()
+      	this.drawCircleByProgress(this.oldPercent)
+      }, 50)
+    },
+    methods: {
+      // 绘制进度条背景
+      drawProgressBg() {
+        let ctx = uni.createCanvasContext(this.elBgId, this)
+        // 设置线宽
+        ctx.setLineWidth(this.borderWidthPx)
+        // 设置颜色
+        ctx.setStrokeStyle(this.inactiveColor)
+        ctx.beginPath()
+        let radius = this.widthPx / 2
+        ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 360 * Math.PI / 180, false)
+        ctx.stroke()
+        ctx.draw()
+      },
+      // 绘制圆弧的进度
+      drawCircleByProgress(progress) {
+        // 如果已经存在则拿来使用
+        let ctx = this.progressContext
+        if (!ctx) {
+          ctx =uni.createCanvasContext(this.elId, this)
+          this.progressContext = ctx
+        }
+        ctx.setLineCap('round')
+        // 设置线条宽度和颜色
+        ctx.setLineWidth(this.borderWidthPx)
+        ctx.setStrokeStyle(this.activeColor)
+        // 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+        let preSecondTime = Math.floor(this.duration / 100)
+        // 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+        let endAngle = ((360 * Math.PI / 180) / 100) * progress + this.startAngle
+        let radius = this.widthPx / 2
+        ctx.beginPath()
+        ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false)
+        ctx.stroke()
+        ctx.draw()
+        
+        // 如果变更后新值大于旧值，意味着增大了百分比
+        if (this.newPercent > this.oldPercent) {
+          // 每次递增百分之一
+          progress++
+          // 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+          if (progress > this.newPercent) return
+        } else {
+          progress--
+          if (progress < this.newPercent) return
+        }
+        setTimeout(() => {
+          // 定时器，每次操作间隔为time值，为了让进度条有动画效果
+          this.drawCircleByProgress(progress)
+        }, preSecondTime)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-circle-progress {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;		
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    
+    &__canvas {
+      position: absolute;
+      
+      &-bg {
+        position: absolute;
+      }
+    }
+    
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &__percent {
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue b/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
new file mode 100644
index 0000000..998879f
--- /dev/null
+++ b/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
@@ -0,0 +1,236 @@
+<template>
+  <view class="tn-collapse-item-class tn-collapse-item" :style="[itemStyle]">
+    <!-- 头部 -->
+    <view
+      class="tn-collapse-item__head"
+      :style="[headStyle]"
+      :hover-stay-time="200"
+      :hover-class="hoverClass"
+      @tap.stop="headClick"
+    >
+      <block v-if="!$slots['title-all'] || !$slots['$title-all']">
+        <view
+          v-if="!$slots.title || !$slots.$title"
+          class="tn-collapse-item__head__title tn-text-ellipsis"
+          :style="[
+            { textAlign: align ? align : 'left'},
+            isShow && activeStyle && !arrow ? activeStyle : ''
+          ]"
+        >{{ title }}</view>
+        <view v-else>
+          <slot name="title"></slot>
+        </view>
+        <view class="tn-collapse-item__head__icon__wrap">
+          <view
+            v-if="arrow"
+            class="tn-icon-down tn-collapse-item__head__icon__arrow"
+            :class="{'tn-collapse-item__head__icon__arrow--active': isShow}"
+            :style="[arrowIconStyle]"
+          ></view>
+        </view>
+      </block>
+      <view v-else>
+        <slot name="title-all"></slot>
+      </view>
+    </view>
+    <!-- 内容 -->
+    <view
+      class="tn-collapse-item__body"
+      :style="[{
+        height: isShow ? height + 'px' : '0'
+      }]"
+    >
+      <view class="tn-collapse-item__body__content" :id="elId" :style="[bodyStyle]">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-collapse-item',
+    props: {
+      // 展开
+      open: {
+        type: Boolean,
+        default: false
+      },
+      // 唯一标识
+      name: {
+        type: String,
+        default: ''
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 标题对齐方式
+      align: {
+        type: String,
+        default: 'left'
+      },
+      // 点击不收起
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 活动时样式
+      activeStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 标识
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      arrowIconStyle() {
+        let style = {}
+        if (this.arrowColor) {
+          style.color = this.arrowColor
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        isShow: false,
+        elId: this.$tn.uuid(),
+        // body高度
+        height: 0,
+        // 头部样式
+        headStyle: {},
+        // 主体样式
+        bodyStyle: {},
+        // item样式
+        itemStyle: {},
+        // 显示右边箭头
+        arrow: true,
+        // 箭头颜色
+        arrowColor: '',
+        // 点击头部时的效果样式
+        hoverClass: ''
+      }
+    },
+    watch: {
+      open(value) {
+        this.isShow = value
+      }
+    },
+    created() {
+      this.parent = false
+      this.isShow = this.open
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 异步获取内容或者修改了内容时重新获取内容的信息
+      init() {
+        this.parent = this.$tn.$parent.call(this, 'tn-collapse')
+        if (this.parent) {
+          this.nameSync = this.name ? this.name : this.parent.childrens.length
+          // 不存在才添加对应实例
+          !this.parent.childrens.includes(this) && this.parent.childrens.push(this)
+          this.headStyle = this.parent.headStyle
+          this.bodyStyle = this.parent.bodyStyle
+          this.itemStyle = this.parent.itemStyle
+          this.arrow = this.parent.arrow
+          this.arrowColor = this.parent.arrowColor
+          this.hoverClass = this.parent.hoverClass
+        }
+        this.$nextTick(() => {
+          this.queryRect()
+        })
+      },
+      // 点击头部
+      headClick() {
+        if (this.disabled) return
+        if (this.parent && this.parent.accordion) {
+          this.parent.childrens.map(child => {
+            // 如果是手风琴模式，将其他的item关闭
+            if (this !== child) {
+              child.isShow = false
+            }
+          })
+        }
+        
+        this.isShow = !this.isShow
+        // 触发修改事件
+        this.$emit('change', {
+          index: this.index,
+          show: this.isShow
+        })
+        // 只有在打开时才触发父元素的change
+        if (this.isShow) this.parent && this.parent.onChange()
+        this.$forceUpdate()
+      },
+      // 查询内容高度
+      queryRect() {
+        this._tGetRect('#'+this.elId).then(res => {
+          this.height = res.height
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-collapse-item {
+    
+    &__head {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      line-height: 1;
+      padding: 24rpx 0;
+      padding-left: 24rpx;
+      text-align: left;
+      background-color: #FFFFFF;
+      
+      &__title {
+        flex: 1;
+        overflow: hidden;
+      }
+      
+      &__icon {
+        &__arrow {
+          transition: all 0.3s;
+          margin-right: 20rpx;
+          margin-left: 14rpx;
+          font-size: inherit;
+          
+          &--active {
+            transform: rotate(180deg);
+            transform-origin: center center;
+          }
+        }
+      }
+    }
+    
+    &__body {
+      transition: all 0.3s;
+      overflow: hidden;
+      
+      &__content {
+        overflow: hidden;
+        font-size: 28rpx;
+        color: $tn-font-color;
+        text-align: left;
+        background-color: #FFFFFF;
+        padding-left: 24rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-collapse/tn-collapse.vue b/tuniao-ui/components/tn-collapse/tn-collapse.vue
new file mode 100644
index 0000000..00ec9a2
--- /dev/null
+++ b/tuniao-ui/components/tn-collapse/tn-collapse.vue
@@ -0,0 +1,98 @@
+<template>
+  <view class="tn-collapse-class tn-collapse">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-collapse',
+    props: {
+      // 是否为手风琴
+      accordion: {
+        type: Boolean,
+        default: true
+      },
+      // 头部样式
+      headStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 主题样式
+      bodyStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 每一个item的样式
+      itemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 显示箭头
+      arrow: {
+        type: Boolean,
+        default: true
+      },
+      // 箭头颜色
+      arrowColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 点击标题栏时的按压样式
+      hoverClass: {
+        type: String,
+        default: 'tn-hover'
+      }
+    },
+    computed: {
+      parentData() {
+        return [this.headStyle, this.bodyStyle, this.itemStyle, this.arrow, this.arrowColor, this.hoverClass]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      parentData() {
+        // 如果父组件的参数发生变化重新初始化子组件的信息
+        if (this.childrens.length > 0) {
+          this.init()
+        }
+      }
+    },
+    created() {
+      this.childrens = []
+    },
+    methods: {
+      // 重新初始化内部所有子元素计算高度，异步获取数据时重新渲染
+      init() {
+        this.childrens.forEach((child, index) => {
+          child.init()
+        })
+      },
+      // collapseItem被点击时由collapseItem调用父组件
+      onChange() {
+        let activeItem = []
+        this.childrens.forEach((child, index) => {
+          if (child.isShow) {
+            activeItem.push(child.nameSync)
+          }
+        })
+        // 如果时手风琴模式，只有一个匹配结果，即activeItem长度为1
+        if (this.accordion) activeItem = activeItem.join(',')
+        this.$emit('change', activeItem)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/tuniao-ui/components/tn-color-icon/tn-color-icon.vue b/tuniao-ui/components/tn-color-icon/tn-color-icon.vue
new file mode 100644
index 0000000..c7ad83b
--- /dev/null
+++ b/tuniao-ui/components/tn-color-icon/tn-color-icon.vue
@@ -0,0 +1,318 @@
+<template>
+  <text
+    class="tn-color-icon-class tn-color-icon"
+    :class="[
+      'tn-color-icon-' + name
+    ]"
+    :style="{
+      fontSize: size + unit,
+      margin: margin
+    }"
+    @tap="handleClick"
+  ></text>
+</template>
+
+<script>
+  export default {
+    name: 'tn-color-icon',
+    props: {
+      // 索引
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 图标名称
+      name: {
+        type: String,
+        default: ''
+      },
+      // 图标大小
+      size: {
+        type: Number,
+        default:32
+      },
+      // 大小单位
+      unit: {
+        type: String,
+        default: 'px'
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: '0'
+      }
+    },
+    computed: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit("click", {
+          index: Number(this.index)
+        })
+        this.$emit("tap", {
+          index: Number(this.index)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  @charset "UTF-8";
+  
+  @font-face {
+    font-family: "tuniaoColorFont"; /* Project id 2445412 */
+    /* Color fonts */
+    src: url('iconfont.woff2?t=1632654518618') format('woff2');
+  }
+  
+  .tn-color-icon {
+    font-family: "tuniaoColorFont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    text-decoration: none;
+  }
+  
+  .tn-color-icon-logo-github:before {
+    content: "\e601";
+  }
+  
+  .tn-color-icon-logo-qq:before {
+    content: "\e602";
+  }
+  
+  .tn-color-icon-logo-weixin:before {
+    content: "\e603";
+  }
+  
+  .tn-color-icon-logo-alipay:before {
+    content: "\e604";
+  }
+  
+  .tn-color-icon-logo-weibo:before {
+    content: "\e605";
+  }
+  
+  .tn-color-icon-logo-dingtalk:before {
+    content: "\e606";
+  }
+  
+  .tn-color-icon-safe:before {
+    content: "\e607";
+  }
+  
+  .tn-color-icon-wifi:before {
+    content: "\e608";
+  }
+  
+  .tn-color-icon-help:before {
+    content: "\e609";
+  }
+  
+  .tn-color-icon-tag:before {
+    content: "\e60a";
+  }
+  
+  .tn-color-icon-play:before {
+    content: "\e60b";
+  }
+  
+  .tn-color-icon-stopwatch:before {
+    content: "\e60c";
+  }
+  
+  .tn-color-icon-home:before {
+    content: "\e60d";
+  }
+  
+  .tn-color-icon-map:before {
+    content: "\e60e";
+  }
+  
+  .tn-color-icon-book:before {
+    content: "\e60f";
+  }
+  
+  .tn-color-icon-qrcode:before {
+    content: "\e610";
+  }
+  
+  .tn-color-icon-discover:before {
+    content: "\e611";
+  }
+  
+  .tn-color-icon-visitor:before {
+    content: "\e612";
+  }
+  
+  .tn-color-icon-menu:before {
+    content: "\e613";
+  }
+  
+  .tn-color-icon-renew:before {
+    content: "\e614";
+  }
+  
+  .tn-color-icon-business:before {
+    content: "\e615";
+  }
+  
+  .tn-color-icon-telephone:before {
+    content: "\e616";
+  }
+  
+  .tn-color-icon-medicine:before {
+    content: "\e617";
+  }
+  
+  .tn-color-icon-chicken:before {
+    content: "\e618";
+  }
+  
+  .tn-color-icon-clock:before {
+    content: "\e619";
+  }
+  
+  .tn-color-icon-download:before {
+    content: "\e61a";
+  }
+  
+  .tn-color-icon-lamp:before {
+    content: "\e61b";
+  }
+  
+  .tn-color-icon-hourglass:before {
+    content: "\e61c";
+  }
+  
+  .tn-color-icon-calendar:before {
+    content: "\e61d";
+  }
+  
+  .tn-color-icon-bluetooth:before {
+    content: "\e61e";
+  }
+  
+  .tn-color-icon-fish:before {
+    content: "\e61f";
+  }
+  
+  .tn-color-icon-seal:before {
+    content: "\e620";
+  }
+  
+  .tn-color-icon-remind:before {
+    content: "\e621";
+  }
+  
+  .tn-color-icon-music:before {
+    content: "\e622";
+  }
+  
+  .tn-color-icon-email:before {
+    content: "\e623";
+  }
+  
+  .tn-color-icon-medal:before {
+    content: "\e624";
+  }
+  
+  .tn-color-icon-image:before {
+    content: "\e625";
+  }
+  
+  .tn-color-icon-network:before {
+    content: "\e626";
+  }
+  
+  .tn-color-icon-wallet:before {
+    content: "\e627";
+  }
+  
+  .tn-color-icon-program:before {
+    content: "\e628";
+  }
+  
+  .tn-color-icon-shrimp:before {
+    content: "\e629";
+  }
+  
+  .tn-color-icon-collect:before {
+    content: "\e62a";
+  }
+  
+  .tn-color-icon-screw:before {
+    content: "\e62b";
+  }
+  
+  .tn-color-icon-set:before {
+    content: "\e62c";
+  }
+  
+  .tn-color-icon-userfavorite:before {
+    content: "\e62d";
+  }
+  
+  .tn-color-icon-useradd:before {
+    content: "\e62e";
+  }
+  
+  .tn-color-icon-honor:before {
+    content: "\e62f";
+  }
+  
+  .tn-color-icon-shop:before {
+    content: "\e630";
+  }
+  
+  .tn-color-icon-usercard:before {
+    content: "\e631";
+  }
+  
+  .tn-color-icon-school:before {
+    content: "\e632";
+  }
+  
+  .tn-color-icon-user:before {
+    content: "\e633";
+  }
+  
+  .tn-color-icon-internet:before {
+    content: "\e634";
+  }
+  
+  .tn-color-icon-time:before {
+    content: "\e635";
+  }
+  
+  .tn-color-icon-topic:before {
+    content: "\e636";
+  }
+  
+  .tn-color-icon-phone:before {
+    content: "\e637";
+  }
+  
+  .tn-color-icon-usertable:before {
+    content: "\e638";
+  }
+  
+  .tn-color-icon-userset:before {
+    content: "\e639";
+  }
+  
+  .tn-color-icon-game:before {
+    content: "\e63a";
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-column-notice/tn-column-notice.vue b/tuniao-ui/components/tn-column-notice/tn-column-notice.vue
new file mode 100644
index 0000000..d5d795b
--- /dev/null
+++ b/tuniao-ui/components/tn-column-notice/tn-column-notice.vue
@@ -0,0 +1,251 @@
+<template>
+  <view
+    class="tn-column-notice-class tn-column-notice"
+    :class="[backgroundColorClass]"
+    :style="[noticeStyle]"
+  >
+    <!-- 左图标 -->
+    <view class="tn-column-notice__icon">
+      <view
+        v-if="leftIcon"
+        class="tn-column-notice__icon--left" 
+        :class="[`tn-icon-${leftIconName}`,fontColorClass]"
+        :style="[fontStyle('leftIcon')]"
+        @tap="clickLeftIcon"></view>
+    </view>
+    
+    <!-- 滚动显示内容 -->
+    <swiper class="tn-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular :autoplay="autoplay && playStatus === 'play'" :interval="duration" @change="change">
+      <swiper-item v-for="(item, index) in list" :key="index" class="tn-column-notice__swiper--item">
+        <view
+          class="tn-column-notice__swiper--content tn-text-ellipsis"
+          :class="[fontColorClass]"
+          :style="[fontStyle()]"
+          @tap="click(index)"
+        >{{ item }}</view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 右图标 -->
+    <view class="tn-column-notice__icon">
+      <view
+        v-if="rightIcon"
+        class="tn-column-notice__icon--right" 
+        :class="[`tn-icon-${rightIconName}`,fontColorClass]"
+        :style="[fontStyle('rightIcon')]"
+        @tap="clickRightIcon"></view>
+      <view
+        v-if="closeBtn"
+        class="tn-column-notice__icon--right" 
+        :class="[`tn-icon-close`,fontColorClass]"
+        :style="[fontStyle('close')]"
+        @tap="close"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-column-notice',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 滚动方向
+      // horizontal -> 水平滚动 vertical -> 垂直滚动
+      mode: {
+        type: String,
+        default: 'horizontal'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动周期
+      duration: {
+        type: Number,
+        default: 2000
+      }
+    },
+    computed: {
+      fontStyle() {
+        return (type) => {
+          let style = {}
+          style.color = this.fontColorStyle ? this.fontColorStyle : ''
+          style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
+          if (type === 'leftIcon' && this.leftIconSize) {
+            style.fontSize = this.leftIconSize + 'rpx'
+          }
+          if (type === 'rightIcon' && this.rightIconSize) {
+            style.fontSize = this.rightIconSize + 'rpx'
+          }
+          if (type === 'close') {
+            style.fontSize = '24rpx'
+          }
+          
+          return style
+        }
+      },
+      noticeStyle() {
+        let style = {}
+        style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
+        if (this.padding) style.padding = this.padding
+        return style
+      },
+      swiperStyle() {
+        let style = {}
+        style.height = this.fontSize ? this.fontSize + 6 + this.fontUnit : '32rpx'
+        style.lineHeight = style.height
+        
+        return style
+      },
+      // 标记是否为垂直
+      vertical() {
+        if (this.mode === 'horizontal') return false
+        else return true
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      
+    },
+    methods: {
+      // 点击了通知栏
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      },
+      // 切换消息时间
+      change(event) {
+        let index = event.detail.current
+        if (index === this.list.length - 1) {
+          this.$emit('end')
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-column-notice {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    
+    &__swiper {
+      height: auto;
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: 12rpx;
+      
+      &--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        overflow: hidden;
+      }
+      
+      &--content {
+        overflow: hidden;
+      }
+    }
+    
+    &__icon {
+      &--left {
+        display: inline-flex;
+        align-items: center;
+      }
+      
+      &--right {
+        margin-left: 12rpx;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-down/tn-count-down.vue b/tuniao-ui/components/tn-count-down/tn-count-down.vue
new file mode 100644
index 0000000..cd31e69
--- /dev/null
+++ b/tuniao-ui/components/tn-count-down/tn-count-down.vue
@@ -0,0 +1,314 @@
+<template>
+  <view class="tn-countdown-class tn-countdown">
+    <view
+      v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ d }}
+      </view>
+    </view>
+    <view 
+      v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '天'}}
+    </view>
+    
+    <view
+      v-if="showHours"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ h }}
+      </view>
+    </view>
+    <view 
+      v-if="showMinutes"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '时'}}
+    </view>
+    
+    <view
+      v-if="showMinutes"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ m }}
+      </view>
+    </view>
+    <view 
+      v-if="showSeconds"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '分'}}
+    </view>
+    
+    <view
+      v-if="showSeconds"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ s }}
+      </view>
+    </view>
+    <view 
+      v-if="showSeconds && separator === 'cn'"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      秒
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-down',
+    mixins: [componentsColorMixin],
+    props: {
+      // 倒计时时间，秒作为单位
+      timestamp: {
+        type: Number,
+        default: 0
+      },
+      // 是否自动开始
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 数字框高度
+      height: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 分隔符类型
+      // en -> 使用英文的冒号 cn -> 使用中文进行分割
+      separator: {
+        type: String,
+        default: 'en'
+      },
+      // 分割符大小
+      separatorSize: {
+        type: Number,
+        default: 30
+      },
+      // 分隔符颜色
+      separatorColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 是否显示边框
+      showBorder: {
+        type: Boolean,
+        default: false
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 是否显示秒
+      showSeconds: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示分
+      showMinutes: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示时
+      showHours: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示天
+      showDays: {
+        type: Boolean,
+        default: true
+      },
+      // 如果当天的部分为0时，是否隐藏不显示
+      hideZeroDay: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 倒计时item的样式
+      itemStyle() {
+        let style = {}
+        if (this.height) {
+          style.height = this.$tn.string.getLengthUnitValue(this.height)
+          style.width = style.height
+        }
+        if (this.showBorder) {
+          style.borderStyle = 'solid'
+          style.borderColor = this.borderColor
+          style.borderWidth = '1rpx'
+        }
+        style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
+        return style
+      },
+      // 倒计时数字样式
+      letterStyle() {
+        let style = {}
+        style.fontSize = this.fontSizeStyle || '30rpx'
+        style.color = this.fontColorStyle || '#080808'
+        return style
+      }
+    },
+    data() {
+      return {
+        d: '00',
+        h: '00',
+        m: '00',
+        s: '00',
+        // 定时器
+        timer: null,
+        // 记录倒计过程中变化的秒数
+        seconds: 0
+      }
+    },
+    watch: {
+      // 监听时间戳变化
+      timestamp(value) {
+        this.clearTimer()
+        this.start()
+      }
+    },
+    mounted() {
+      // 如果时自动倒计时，加载完成开始计时
+      this.autoplay && this.timestamp && this.start()
+    },
+    beforeDestroy() {
+      this.clearTimer()
+    },
+    methods: {
+      // 开始倒计时
+      start() {
+        // 避免可能出现的倒计时重叠情况
+        this.clearTimer()
+        if (this.timestamp <= 0) return
+        this.seconds = Number(this.timestamp)
+        this.formatTime(this.seconds)
+        this.timer = setInterval(() => {
+          this.seconds--
+          // 发出change事件
+          this.$emit('change', this.seconds)
+          if (this.seconds < 0) {
+            return this.end()
+          }
+          this.formatTime(this.seconds)
+        }, 1000)
+      },
+      // 格式化时间
+      formatTime(seconds) {
+        // 小于等于0的话，结束倒计时
+        seconds <= 0 && this.end()
+        let [day, hour, minute, second] = [0, 0, 0, 0]
+        day = Math.floor(seconds / (60 * 60 * 24))
+        // 如果不显示天，则将天对应的小时计入到小时中
+        // 先把当前的hour计算出来供分和秒使用
+        hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+        let showHour = null
+        if (this.showDays) {
+          showHour = hour
+        } else {
+          // 将天数对应的小时加入到时中进行显示
+          showHour = Math.floor(seconds / (60 * 60))
+        }
+        minute = Math.floor(seconds / 60) - (hour * 60) - (day * 24 * 60)
+        second = Math.floor(seconds) - (minute * 60) - (hour * 60 * 60) - (day * 24 * 60 * 60)
+        // 如果小于0在前面进行补0操作
+        showHour = this.$tn.number.formatNumberAddZero(showHour)
+        minute = this.$tn.number.formatNumberAddZero(minute)
+        second = this.$tn.number.formatNumberAddZero(second)
+        day = this.$tn.number.formatNumberAddZero(day)
+        
+        this.d = day
+        this.h = showHour
+        this.m = minute
+        this.s = second
+      },
+      // 倒计时结束
+      end() {
+        this.clearTimer()
+        this.$emit('end')
+      },
+      // 清除倒计时
+      clearTimer() {
+        if (this.timer !== null) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-countdown {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    
+    &__item {
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 2rpx;
+      border-radius: 6rpx;
+      white-space: nowrap;
+      transform: translateZ(0);
+      
+      &__time {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+      }
+    }
+    
+    &__separator {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 5rpx;
+      line-height: 1;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue b/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
new file mode 100644
index 0000000..b9c2eef
--- /dev/null
+++ b/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
@@ -0,0 +1,171 @@
+<template>
+  <view class="tn-count-scroll-class tn-count-scroll">
+    <view
+      v-for="(item, index) in columns"
+      :key="index"
+      class="tn-count-scroll__box"
+      :style="{
+        width: $tn.string.getLengthUnitValue(width),
+        height: heightPxValue + 'px'
+      }"
+    >
+      <view
+        class="tn-count-scroll__column"
+        :style="{
+          transform: `translate3d(0, -${keys[index] * heightPxValue}px, 0)`,
+          transitionDuration: `${duration}s`
+        }"
+      >
+        <view
+          v-for="(value, value_index) in item"
+          :key="value_index"
+          class="tn-count-scroll__column__item"
+          :class="[fontColorClass]"
+          :style="{
+            height: heightPxValue + 'px',
+            lineHeight: heightPxValue + 'px',
+            fontSize: fontSizeStyle || '32rpx',
+            fontWeight: bold ? 'bold': 'normal',
+            color: fontColorStyle || '#080808'
+          }"
+        >
+          {{ value }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-scroll',
+    mixins: [componentsColorMixin],
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+      // 行高
+      height: {
+        type: Number,
+        default: 32
+      },
+      // 单个字的宽度
+      width: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 是否加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 持续时间
+      duration: {
+        type: Number,
+        default: 1.2
+      },
+      // 十分位分割符
+      decimalSeparator: {
+        type: String,
+        default: '.'
+      },
+      // 千分位分割符
+      thousandthsSeparator: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      heightPxValue() {
+        return uni.upx2px(this.height || 0)
+      }
+    },
+    data() {
+      return {
+        // 每列的数据
+        columns: [],
+        // 每列对应值所在的滚动位置
+        keys: []
+      }
+    },
+    watch: {
+      value(val) {
+        this.initColumn(val)
+      }
+    },
+    created() {
+      // 为了达到一进入就有滚动效果，延迟执行初始化
+      this.initColumn()
+      setTimeout(() => {
+        this.initColumn(this.value)
+      }, 20)
+    },
+    methods: {
+      // 初始化每一列的数据
+      initColumn(val) {
+        val = val + ''
+        let digit = val.length,
+            columnArray = [],
+            rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        for (let i = 0; i < digit; i++) {
+          if (val[i] === this.decimalSeparator || val[i] === this.thousandthsSeparator) {
+            columnArray.push(val[i])
+          } else {
+            columnArray.push(rows)
+          }
+        }
+        this.columns = columnArray
+        this.roll(val)
+      },
+      // 滚动处理
+      roll(value) {
+        let valueArray = value.toString().split(''),
+            lengths = this.columns.length,
+            indexs = [];
+        
+        while (valueArray.length) {
+          let figure = valueArray.pop()
+          if (figure === this.decimalSeparator || figure === this.thousandthsSeparator) {
+            indexs.unshift(0)
+          } else {
+            indexs.unshift(Number(figure))
+          }
+        }
+        while(indexs.length < lengths) {
+          indexs.unshift(0)
+        }
+        this.keys = indexs
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-count-scroll {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__box {
+      overflow: hidden;
+    }
+    
+    &__column {
+      transform: translate3d(0, 0, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      transition-timing-function: cubic-bezier(0, 1, 0, 1);
+      
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-to/tn-count-to.vue b/tuniao-ui/components/tn-count-to/tn-count-to.vue
new file mode 100644
index 0000000..c3d8854
--- /dev/null
+++ b/tuniao-ui/components/tn-count-to/tn-count-to.vue
@@ -0,0 +1,231 @@
+<template>
+  <view
+    class="tn-count-num-class tn-count-num"
+    :class="[fontColorClass]"
+    :style="{
+      fontSize: fontSizeStyle || '50rpx',
+      fontWeight: bold ? 'bold' : 'normal',
+      color: fontColorStyle || '#080808'
+    }"
+  >
+    {{ displayValue }}
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-to',
+    mixins: [componentsColorMixin],
+    props: {
+      // 开始的数值，默认为0
+      startVal: {
+        type: Number,
+        default: 0
+      },
+      // 结束目标数值
+      endVal: {
+        type: Number,
+        default: 0,
+        required: true
+      },
+      // 是否自动开始
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动到目标值的持续时间，单位为毫秒
+      duration: {
+        type: Number,
+        default: 2000
+      },
+      // 是否在即将结束的时候使用缓慢滚动的效果
+      useEasing: {
+        type: Boolean,
+        default: true
+      },
+      // 显示的小数位数
+      decimals: {
+        type: Number,
+        default: 0
+      },
+      // 十进制的分割符
+      decimalSeparator: {
+        type: String,
+        default: '.'
+      },
+      // 千分位的分隔符
+      // 类似金额的分割(￥23,321.05中的",")
+      thousandthsSeparator: {
+        type: String,
+        default: ''
+      },
+      // 是否显示加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      countDown() {
+        return this.startVal > this.endVal
+      }
+    },
+    data() {
+      return {
+        localStartVal: this.startVal,
+        localDuration: this.duration,
+        // 显示的数值
+        displayValue: this.formatNumber(this.startVal),
+        // 打印的数值
+        printValue: null,
+        // 是否暂停
+        paused: false,
+        // 开始时间戳
+        startTime: null,
+        // 停留时间戳
+        remainingTime: null,
+        // 当前时间戳
+        timestamp: null,
+        // 上一次的时间戳
+        lastTime: 0,
+        rAF: null
+      }
+    },
+    watch: {
+      startVal() {
+        this.autoplay && this.start()
+      },
+      endVal() {
+        this.autoplay && this.start()
+      }
+    },
+    mounted() {
+      this.autoplay && this.start()
+    },
+    methods: {
+      // 开始滚动
+      start() {
+        this.localStartVal = this.startVal
+        this.startTime = null
+        this.localDuration = this.duration
+        this.paused = false
+        this.rAF = this.requestAnimationFrame(this.count)
+      },
+      // 重新开始
+      reStart() {
+        if (this.paused) {
+          this.resume()
+          this.paused = false
+        } else {
+          this.stop()
+          this.paused = true
+        }
+      },
+      // 停止
+      stop() {
+        this.cancelAnimationFrame(this.rAF)
+      },
+      // 恢复
+      resume() {
+        this.startTime = null
+        this.localDuration = this.remainingTime
+        this.localStartVal = this.printValue
+        this.requestAnimationFrame(this.count)
+      },
+      // 重置
+      reset() {
+        this.startTime = null
+        this.cnacelAnimationFrame(this.rAF)
+        this.displayValue = this.formatNumber(this.startVal)
+      },
+      // 销毁组件
+      destroyed() {
+        this.cancelAnimationFrame(this.rAF)
+      },
+      // 累加时间
+      count(timestamp) {
+        if (!this.startTime) this.startTime = timestamp
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remainingTime = this.localDuration - progress
+        if (this.useEasing) {
+          if (this.countDown) {
+            this.printValue = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
+          } {
+            this.printValue = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)
+          }
+        } else {
+          if (this.countDown) {
+            this.printValue = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration)
+          } else {
+            this.printValue = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)
+          }
+        }
+        if (this.countDown) {
+          this.printValue = this.printValue < this.endVal ? this.endVal : this.printValue
+        } else {
+          this.printValue = this.printValue > this.endVal ? this.endVal : this.printValue
+        }
+        
+        this.displayValue = this.formatNumber(this.printValue)
+        if (progress < this.localDuration) {
+          this.rAF = this.requestAnimationFrame(this.count)
+        } else {
+          this.$emit('end')
+        }
+      },
+      // 缓动时间计算
+      easingFn(t, b, c, d) {
+        return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+      },
+      // 请求帧动画
+      requestAnimationFrame(cb) {
+        const currentTime = new Date().getTime()
+        // 为了使setTimteout的尽可能的接近每秒60帧的效果
+        const timeToCall = Math.max(0, 16 - (currentTime - this.lastTime))
+        const timerId = setTimeout(() => {
+          cb && cb(currentTime + timeToCall)
+        }, timeToCall)
+        this.lastTime = currentTime + timeToCall
+        return timerId
+      },
+      // 清除帧动画
+      clearAnimationFrame(timerId) {
+        clearTimeout(timerId)
+      },
+      // 格式化数值
+      formatNumber(number) {
+        const reg = /(\d+)(\d{3})/
+        number = Number(number)
+        number = number.toFixed(Number(this.decimals))
+        number += ''
+        const numberArray = number.split('.')
+        let num1 = numberArray[0]
+        const num2 = numberArray.length > 1 ? this.decimalSeparator + numberArray[1] : ''
+        
+        if (this.thousandthsSeparator && !this.isNumber(this.thousandthsSeparator)) {
+          while(reg.test(num1)) {
+            num1 = num1.replace(reg, '$1' + this.thousandthsSeparator + '$2')
+          }
+        }
+        return num1 + num2
+      },
+      // 判断是否为数字
+      isNumber(val) {
+        return !isNaN(parseFloat(val))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-count-num {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    text-align: center;
+    line-height: 1;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-cropper/index.wxs b/tuniao-ui/components/tn-cropper/index.wxs
new file mode 100644
index 0000000..0181a93
--- /dev/null
+++ b/tuniao-ui/components/tn-cropper/index.wxs
@@ -0,0 +1,332 @@
+var cropper = {
+  // 画布x轴起点
+  cutX: 0,
+  // 画布y轴起点
+  cutY: 0,
+  // 触摸点信息(手指与图片中心点的相对位置)
+  touchRelactive: [{
+    x: 0,
+    y: 0
+  }],
+  // 双指触摸时斜边的长度
+  hypotenuseLength:0,
+  // 是否结束触摸
+  touchEndFlag: false,
+  // 画布宽高
+  canvasWidth: 0,
+  canvasHeight: 0,
+  // 图片宽高
+  imgWidth: 0,
+  imgHeight: 0,
+  // 图片缩放比例
+  scale: 1,
+  // 图片旋转角度
+  angle: 0,
+  // 图片上边距
+  imgTop: 0,
+  // 图片左边距
+  imgLeft: 0,
+  // 窗口宽高
+  windowWidth: 0,
+  windowHeight: 0,
+  init: true
+}
+
+function bool(str) {
+  return str === 'true' || str === true
+}
+
+function propChange(prop, oldProp, ownerInstance, instance) {
+  if (prop && prop !== 'null') {
+    var params = prop.split(',')
+    var type = +params[0]
+    var dataset = instance.getDataset()
+    if (cropper.init || type == 4) {
+      cropper.canvasWidth = +dataset.width
+      cropper.canvasHeight = +dataset.height
+      cropper.imgTop = +dataset.windowheight / 2
+      cropper.imgLeft = +dataset.windowwidth / 2
+      cropper.imgWidth = +dataset.imgwidth
+      cropper.imgHeight = +dataset.imgheight
+      cropper.windowHeight = +dataset.windowheight
+      cropper.windowWidth = +dataset.windowwidth
+      cropper.init = false
+    } else if (type == 2 || type == 3) {
+      cropper.imgWidth = +dataset.imgwidth
+      cropper.imgHeight = +dataset.imgheight
+    }
+    cropper.angle = +dataset.angle
+    if (type == 3) {
+      imgTransform(ownerInstance)
+    }
+    switch(type) {
+      case 1:
+        setCutCenter(ownerInstance)
+        // // 设置裁剪框大小
+        computeCutSize(ownerInstance)
+        // // 检查裁剪框是否在范围内
+        cutDetectionPosition(ownerInstance)
+        break
+      case 2:
+        setCutCenter(ownerInstance)
+        break
+      case 3:
+        imgMarginDetectionScale(ownerInstance)
+        break
+      case 4:
+        imageReset(ownerInstance)
+        break
+      case 5:
+        setCutCenter(ownerInstance)
+        break
+      default:
+        break
+    }
+  }
+}
+
+function touchStart(event, ownerInstance) {
+  var touch = event.touches || event.changedTouches
+  cropper.touchEndFlag = false
+  if (touch.length === 1) {
+    cropper.touchRelactive[0] = {
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    }
+  } else {
+    var width = Math.abs(touch[0].pageX - touch[1].pageX)
+    var height = Math.abs(touch[0].pageY - touch[1].pageY)
+    cropper.touchRelactive = [{
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    },{
+      x: touch[1].pageX - cropper.imgLeft,
+      y: touch[1].pageY - cropper.imgTop
+    }]
+    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+function touchMove(event, ownerInstance) {
+  var touch = event.touches || event.changedTouches
+  if (cropper.touchEndFlag) return
+  moveDuring(ownerInstance)
+  if (event.touches.length === 1) {
+    var left = touch[0].pageX - cropper.touchRelactive[0].x,
+      top = touch[0].pageY - cropper.touchRelactive[0].y;
+    cropper.imgLeft = left
+    cropper.imgTop = top
+    imgTransform(ownerInstance)
+    imgMarginDetectionPosition(ownerInstance)
+  } else {
+    var dataset = event.instance.getDataset()
+    var minScale = +dataset.minscale
+    var maxScale = +dataset.maxscale
+    var width = Math.abs(touch[0].pageX - touch[1].pageX),
+      height = Math.abs(touch[0].pageY - touch[1].pageY),
+      hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+      scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+      current_deg = 0;
+    scale = scale <= minScale ? minScale : scale
+    scale = scale >= maxScale ? maxScale : scale
+    cropper.scale = scale
+    imgMarginDetectionScale(ownerInstance, true)
+    var touchRelative = [{
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    }, {
+      x: touch[1].pageX - cropper.imgLeft,
+      y: touch[1].pageY - cropper.imgTop
+    }]
+    cropper.touchRelactive = touchRelative
+    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+    // 更新视图
+    cropper.angle = cropper.angle + current_deg
+    imgTransform(ownerInstance)
+  }
+}
+
+function touchEnd(event, ownerInstance) {
+  cropper.touchEndFlag = true
+  moveStop(ownerInstance)
+  updateData(ownerInstance)
+}
+
+function moveDuring(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('moveDuring')
+}
+
+function moveStop(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('moveStop')
+}
+
+function setCutCenter(ownerInstance) {
+  var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5
+  var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5
+  
+  cropper.imgTop = cropper.imgTop - cropper.cutY + cutY
+  cropper.cutY = cutY
+  cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX
+  cropper.cutX = cutX
+  cutDetectionPosition(ownerInstance)
+  imgTransform(ownerInstance)
+  updateData(ownerInstance)
+}
+
+// 检测剪裁框位置是否在允许的范围内（屏幕内）
+function cutDetectionPosition(ownerInstance) {
+  var windowHeight = cropper.windowHeight,
+    windowWidth = cropper.windowWidth;
+  
+  // 检测上边距是否在范围内
+  var cutDetectionPositionTop = function() {
+    if (cropper.cutY < 0) {
+      cropper.cutY = 0
+    }
+    if (cropper.cutY > windowHeight - cropper.canvasHeight) {
+      cropper.cutY = windowHeight - cropper.canvasHeight
+    }
+  }
+  
+  // 检测左边距是否在范围内
+  var cutDetectionPositionLeft = function() {
+    if (cropper.cutX < 0) {
+      cropper.cutX = 0
+    }
+    if (cropper.cutX > windowWidth - cropper.canvasWidth) {
+      cropper.cutX = windowWidth - cropper.canvasWidth
+    }
+  }
+  
+  // 裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认为居中）
+  if (cropper.cutX === null && cropper.cutY === null) {
+    var cutX = (windowWidth - cropper.canvasWidth) * 0.5,
+      cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+    cropper.cutX = cutX
+    cropper.cutY = cutY
+  } else if (cropper.cutX !== null && cropper.cutX !== null) {
+    cutDetectionPositionTop()
+    cutDetectionPositionLeft()
+  } else if (cropper.cutX !== null && cropper.cutY === null) {
+    cutDetectionPositionLeft()
+    cropper.cutY = (windowHeight - cropper.canvasHeight) / 2
+  } else if (cropper.cutX === null && cropper.cutY !== null) {
+    cutDetectionPositionTop()
+    cropper.cutX = (windowWidth - cropper.canvasWidth) / 2
+  }
+}
+
+// 图片边缘检测-缩放
+function imgMarginDetectionScale(ownerInstance, delay) {
+  var scale = cropper.scale,
+    imgWidth = cropper.imgWidth,
+    imgHeight = cropper.imgHeight;
+  if ((cropper.angle / 90) % 2) {
+    imgWidth = cropper.imgHeight
+    imgHeight = cropper.imgWidth
+  }
+  if (imgWidth * scale < cropper.canvasWidth) {
+    scale = cropper.canvasWidth / imgWidth
+  }
+  if (imgHeight * scale < cropper.canvasHeight) {
+    scale = Math.max(scale, cropper.canvasHeight / imgHeight)
+  }
+  imgMarginDetectionPosition(ownerInstance, scale, delay)
+}
+
+// 图片边缘检测-位置
+function imgMarginDetectionPosition(ownerInstance, scale, delay) {
+  var left = cropper.imgLeft,
+    top = cropper.imgTop,
+    imgWidth = cropper.imgWidth,
+    imgHeight = cropper.imgHeight;
+  scale = scale || cropper.scale
+  if ((cropper.angle / 90) % 2) {
+    imgWidth = cropper.imgHeight
+    imgHeight = cropper.imgWidth
+  }
+  
+  left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2
+  left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2
+  top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2
+  top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2
+  
+  cropper.imgLeft = left
+  cropper.imgTop = top
+  cropper.scale = scale
+  if (!delay || delay === 'null') {
+    imgTransform(ownerInstance)
+  }
+}
+
+// 改变截取值大小
+function computeCutSize(ownerInstance) {
+  if (cropper.canvasWidth > cropper.windowWidth) {
+    cropper.canvasWidth = cropper.windowWidth
+  } else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+    cropper.cutX = cropper.windowWidth - cropper.cutX
+  }
+  if (cropper.canvasHeight > cropper.windowHeight) {
+    cropper.canvasHeight = cropper.windowHeight
+  } else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+    cropper.cutY = cropper.windowHeight - cropper.cutY
+  }
+}
+
+// 图片动画
+function imgTransform(ownerInstance) {
+  try {
+    var image = ownerInstance.selectComponent('.tn-cropper__image')
+    if (!image) return
+    var x = cropper.imgLeft - cropper.imgWidth / 2,
+      y = cropper.imgTop - cropper.imgHeight / 2;
+    image.setStyle({
+      'transform': 'translate3d('+ x + 'px,' + y + 'px,0) scale(' + cropper.scale +') rotate(' + cropper.angle + 'deg)'
+    })
+  } catch(e) {
+    
+  }
+}
+
+// 图片重置
+function imageReset(ownerInstance) {
+  cropper.scale = 1
+  cropper.angle = 0
+  imgTransform(ownerInstance)
+}
+
+// 高度变化
+function canvasHeight(ownerInstance) {
+  if (!ownerInstance) return
+  computeCutSize(ownerInstance)
+}
+
+// 宽度变化
+function canvasWidth(ownerInstance) {
+  if (!ownerInstance) return
+  computeCutSize(ownerInstance)
+}
+
+// 更新数据
+function updateData(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('change', {
+    cutX: cropper.cutX,
+    cutY: cropper.cutY,
+    imgWidth: cropper.imgWidth,
+    imgHeight: cropper.imgHeight,
+    scale: cropper.scale,
+    angle: cropper.angle,
+    imgTop: cropper.imgTop,
+    imgLeft: cropper.imgLeft
+  })
+}
+
+module.exports = {
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  propChange: propChange
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-cropper/tn-cropper.vue b/tuniao-ui/components/tn-cropper/tn-cropper.vue
new file mode 100644
index 0000000..6d22d6f
--- /dev/null
+++ b/tuniao-ui/components/tn-cropper/tn-cropper.vue
@@ -0,0 +1,574 @@
+<template>
+  <view class="tn-cropper-class tn-cropper" @touchmove.stop.prevent="stop">
+    <image
+      v-if="imageUrl"
+      :src="imageUrl"
+      class="tn-cropper__image"
+      :style="{
+        width: (imgWidth ? imgWidth : width) + 'px',
+        height: (imgHeight ? imgHeight : height) + 'px',
+        transitionDuration: (animation ? 0.3 : 0) + 's'
+      }"
+      mode="widthFix"
+      :data-minScale="minScale"
+      :data-maxScale="maxScale"
+      @load="imageLoad"
+      @error="imageLoad"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    ></image>
+    
+    <view
+      class="tn-cropper__wrapper"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+        borderRadius: isRound ? '50%' : '0'
+      }"
+    >
+      <view
+        class="tn-cropper__border"
+        :style="{
+          border: borderStyle,
+          borderRadius: isRound ? '50%' : '0',
+        }"
+        :prop="prop"
+        :change:prop="wxs.propChange"
+        :data-width="width"
+        :data-height="height"
+        :data-windowHeight="systemInfo.windowHeight || 600"
+        :data-windowWidth="systemInfo.windowWidth || 400"
+        :data-imgTop="imgTop"
+        :data-imgWidth="imgWidth"
+        :data-imgHeight="imgHeight"
+        :data-angle="angle"
+      ></view>
+    </view>
+    
+    <canvas
+      class="tn-cropper__canvas"
+      :style="{
+        width: width * scaleRatio + 'px',
+        height: height * scaleRatio + 'px'
+      }"
+      :canvas-id="CANVAS_ID"
+      :id="CANVAS_ID"
+      :disable-scroll="true"
+    ></canvas>
+    
+    <view
+      v-if="!custom"
+      class="tn-cropper__tabbar"
+    >
+      <view class="tn-cropper__tabbar__btn tn-cropper__tabber__cancel" @tap.stop="back">取消</view>
+      <view class="tn-cropper__tabbar__rotate" :class="[`tn-icon-${rotateIcon}`]" @tap.stop="setAngle"></view>
+      <view class="tn-cropper__tabbar__btn tn-cropper__tabber__confirm" @tap.stop="getCutImage">完成</view>
+    </view>
+  </view>
+</template>
+
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  export default {
+    name: 'tn-cropper',
+    props: {
+      // 图片路径
+      imageUrl: {
+        type: String,
+        default: ''
+      },
+      // 裁剪框高度 px
+      height: {
+        type: Number,
+        default: 280
+      },
+      // 裁剪框的宽度 px
+      width: {
+        type: Number,
+        default: 280
+      },
+      // 是否为圆形裁剪框
+      isRound: {
+        type: Boolean,
+        default: false
+      },
+      // 裁剪框边框样式
+      borderStyle: {
+        type: String,
+        default: '1rpx solid #FFF'
+      },
+      // 生成的图片尺寸相对于裁剪框的比例
+      scaleRatio: {
+        type: Number,
+        default: 1
+      },
+      // 裁剪后的图片质量
+      // 取值范围为：(0, 1]
+      quality: {
+        type: Number,
+        default: 0.8
+      },
+      // 是否返回base64(H5默认为base64)
+      returnBase64: {
+        type: Boolean,
+        default: false
+      },
+      // 图片旋转角度
+      rotateAngle: {
+        type: Number,
+        default: 0
+      },
+      // 图片最小缩放比
+      minScale: {
+        type: Number,
+        default: 0.5
+      },
+      // 图片最大缩放比
+      maxScale: {
+        type: Number,
+        default: 2
+      },
+      // 自定义操作栏(设置后会隐藏默认的底部操作栏)
+      custom: {
+        type: Boolean,
+        default: false
+      },
+      // 是否在值发生改变的时候开始裁剪
+      // custom为true时生效
+      startCutting: {
+        type: Boolean,
+        default: false
+      },
+      // 裁剪时是否显示loading
+      loading: {
+        type: Boolean,
+        default: true
+      },
+      // 旋转图片图标
+      rotateIcon: {
+        type: String,
+        default: 'circle-arrow'
+      }
+    },
+    data() {
+      return {
+        // canvas容器id
+        CANVAS_ID: 'tn-cropper-canvas',
+        // 移动裁剪超时时间定时器
+        TIME_CUT_CENTER: null,
+        // canvas容器
+        ctx: null,
+        // 画布x轴起点
+        cutX: 0,
+        // 画布y轴起点
+        cutY: 0,
+        // 图片宽度
+        imgWidth: 0,
+        // 图片高度
+        imgHeight: 0,
+        // 图片底部位置
+        imgTop: 0,
+        // 图片左边位置
+        imgLeft: 0,
+        // 图片缩放比
+        scale: 1,
+        // 图片旋转角度
+        angle: 0,
+        // 开启动画过渡效果
+        animation: false,
+        // 动画定时器
+        animationTime: null,
+        // 系统信息
+        systemInfo: {},
+        // 传递的参数
+        prop: '',
+        // 标记是否发生改变
+        sizeChange: 0,
+        angleChange: 0,
+        resetChange: 0,
+        centerChange: 0
+      }
+    },
+    watch: {
+      imageUrl(val) {
+        this.imageReset()
+        this.showLoading()
+        uni.getImageInfo({
+          src: val,
+          success: (res) => {
+            // 计算图片尺寸
+            this.imgComputeSize(res.width, res.height)
+            this.angleChange++
+            this.prop = `3,${this.angleChange}`
+          },
+          fail: (err) => {
+            console.log(err);
+            this.imgComputeSize()
+            this.angleChange++
+            this.prop = `3,${this.angleChange}`
+          }
+        })
+      },
+      isRound(val) {
+        if (val) {
+          this.$nextTick(() => {
+            this.imageReset()
+          })
+        }
+      },
+      rotateAngle(val) {
+        this.animation = true
+        this.angle = val
+        this.angleChanged(val)
+      },
+      animation(val) {
+        clearTimeout(this.animationTime)
+        if (val) {
+          this.animationTime = setTimeout(() => {
+            this.animation = false
+          }, 200)
+        }
+      },
+      startCutting(val) {
+        if (this.custom && val) {
+          this.getCutImage()
+        }
+      }
+    },
+    mounted() {
+      this.systemInfo = uni.getSystemInfoSync()
+      this.imgTop = this.systemInfo.windowHeight / 2
+      this.imgLeft = this.systemInfo.windowWidth / 2
+      this.ctx = uni.createCanvasContext(this.CANVAS_ID, this)
+      // 初始化
+      this.$nextTick(() => {
+        this.prop = '1,1'
+      })
+      setTimeout(() => {
+        this.$emit('ready', {})
+      }, 200)
+    },
+    methods: {
+      // 将网络图片转换为本地图片【同步执行】
+      async getLocalImage(url) {
+        return await new Promise((resolve, reject) => {
+          uni.downloadFile({
+            url: url,
+            success: (res) => {
+              resolve(res.tempFilePath)
+            },
+            fail: (err) => {
+              reject(false)
+            }
+          })
+        })
+      },
+      // 返回裁剪后的图片信息
+      getCutImage() {
+        if (!this.imageUrl) {
+          uni.showToast({
+            title: '请选择图片',
+            icon: 'none'
+          })
+          return
+        }
+        this.loading && this.showLoading()
+        const draw = async () => {
+          // 图片实际大小
+          let imgWidth = this.imgWidth * this.scale * this.scaleRatio
+          let imgHeight = this.imgHeight * this.scale * this.scaleRatio
+          // canvas和图片的相对距离
+          let xpos = this.imgLeft - this.cutX
+          let ypos = this.imgTop - this.cutY
+          
+          
+          let imgUrl = this.imageUrl
+          // #ifdef APP-PLUS || MP-WEIXIN
+          if (~this.imageUrl.indexOf('https:')) {
+            imgUrl = await this.getLocalImage(this.imageUrl)
+          }
+          // #endif
+          // 旋转画布
+          this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio)
+          // 如果时圆形则截取圆形
+          if (this.isRound) {
+            const r = this.width > this.height ? Math.floor(this.height / 2) : Math.floor(this.width / 2)
+            let translateX = Math.floor(this.width / 2)
+            let translateY = Math.floor(this.height / 2)
+            this.ctx.beginPath()
+            this.ctx.arc(translateX - (xpos * this.scaleRatio), translateY - (ypos * this.scaleRatio), r, 0, (360 * Math.PI) / 180)
+            this.ctx.closePath()
+            this.ctx.stroke()
+            this.ctx.clip()
+          }
+          
+          this.ctx.rotate((this.angle * Math.PI) / 180)
+          this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight)
+          
+          // 清空后再继续绘制
+          this.ctx.draw(false, () => {
+            let params = {
+              width: this.width * this.scaleRatio,
+              height: Math.round(this.height * this.scaleRatio),
+              destWidth: this.width * this.scaleRatio,
+              destHeight: Math.round(this.height) * this.scaleRatio,
+              fileType: 'png',
+              quality: this.quality
+            }
+            let data = {
+              url: '',
+              base64: '',
+              width: this.width * this.scaleRatio,
+              height: this.height * this.scaleRatio
+            }
+            
+            // #ifdef MP-ALIPAY
+            if (this.returnBase64) {
+              this.ctx.toDataURL(params).then((urlData) => {
+                data.base64 = urlData
+                this.loading && uni.hideLoading()
+                this.$emit('cropper', data)
+              })
+            } else {
+              this.ctx.toTempFilePath({
+                ...params,
+                success: (res) => {
+                  data.url = res.apFilePath
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              })
+            }
+            // #endif
+            
+            let base64Flag = this.returnBase64
+            // #ifndef MP-ALIPAY
+            // #ifdef MP-BAIDU || MP-TOUTIAO || H5
+            base64Flag = false
+            // #endif
+            
+            if (base64Flag) {
+              uni.canvasGetImageData({
+                canvasId: this.CANVAS_ID,
+                x: 0,
+                y: 0,
+                width: this.width * this.scaleRatio,
+                height: Math.round(this.height * this.scaleRatio),
+                success: (res) => {
+                  const arrayBuffer = new Uint8Array(res.data)
+                  const base64 = uni.arrayBufferToBase64(arrayBuffer)
+                  data.base64 = base64
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              }, this)
+            } else {
+              uni.canvasToTempFilePath({
+                ...params,
+                canvasId: this.CANVAS_ID,
+                success: (res) => {
+                  data.url = res.tempFilePath
+                  // #ifdef H5
+                  data.base64 = res.tempFilePath
+                  // #endif
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              }, this)
+            }
+            // #endif
+          })
+        }
+        draw()
+      },
+      // 修改图片后触发的函数
+      change(e) {
+        this.cutX = e.cutX || 0
+        this.cutY = e.cutY || 0
+        this.imgWidth = e.imgWidth || this.imgWidth
+        this.imgHeight = e.imgHeight || this.imgHeight
+        this.scale = e.scale || 1
+        this.angle = e.angle || 0
+        this.imgTop = e.imgTop || 0
+        this.imgLeft = e.imgLeft || 0
+      },
+      // 重置图片
+      imageReset() {
+        this.scale = 1
+        this.angle = 0
+        let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()
+        this.imgTop = systemInfo.windowHeight / 2
+        this.imgLeft = systemInfo.windowWidth / 2
+        this.resetChange++
+        this.prop = `4,${this.resetChange}`
+        // 初始旋转角度
+        this.$emit('initAngle', {})
+      },
+      // 图片的生成的尺寸
+      imgComputeSize(width, height) {
+        // 默认按图片的最小边 = 对应的裁剪框尺寸
+        let imgWidth = width,
+          imgHeight = height;
+        if (imgWidth && imgHeight) {
+          if (imgWidth / imgHeight > this.width / this.height) {
+            imgHeight = this.height
+            imgWidth = (width / height) * imgHeight
+          } else {
+            imgWidth = this.width
+            imgHeight = (height / width) * imgWidth
+          }
+        } else {
+          let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()
+          imgWidth = systemInfo.windowWidth
+          imgHeight = 0
+        }
+        this.imgWidth = imgWidth
+        this.imgHeight = imgHeight
+        this.sizeChange++
+        this.prop = `2,${this.sizeChange}`
+      },
+      // 图片加载完毕
+      imageLoad(e) {
+        this.imageReset()
+        uni.hideLoading()
+        this.$emit('imageLoad', {})
+      },
+      // 移动结束
+      moveStop() {
+        clearTimeout(this.TIME_CUT_CENTER)
+        this.TIME_CUT_CENTER = setTimeout(() => {
+          this.centerChange++
+          this.prop = `5,${this.centerChange}`
+        }, 688)
+      },
+      // 移动中
+      moveDuring() {
+        clearTimeout(this.TIME_CUT_CENTER)
+      },
+      // 显示加载框
+      showLoading() {
+        uni.showLoading({
+          title: '请稍等......',
+          mask: true
+        })
+      },
+      // 停止
+      stop() {},
+      // 取消/返回
+      back() {
+        uni.navigateBack()
+      },
+      // 角度改变
+      angleChanged(val) {
+        this.moveStop()
+        if (val % 90) {
+          this.angle = Math.round(val / 90) * 90
+        }
+        this.angleChange++
+        this.prop = `3,${this.angleChange}`
+      },
+      // 设置角度
+      setAngle() {
+        this.animation = true
+        this.angle = this.angle + 90
+        this.angleChanged(this.angle)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-cropper {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.7);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    
+    &__image {
+      width: 100%;
+      border-style: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      transform-origin: center;
+    }
+    
+    &__canvas {
+      position: fixed;
+      z-index: 10;
+      left: -2000px;
+      top: -2000px;
+      pointer-events: none;
+    }
+    
+    &__wrapper {
+      position: fixed;
+      z-index: 4;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border: 3000px solid rgba(0, 0, 0, 0.55);
+      pointer-events: none;
+      box-sizing: content-box;
+    }
+    
+    &__border {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+    
+    &__tabbar {
+      width: 100%;
+      height: 120rpx;
+      padding: 0 40rpx;
+      box-sizing: border-box;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+        -webkit-transform: scaleY(0.5) translateZ(0);
+        transform: scaleY(0.5) translateZ(0);
+        transform-origin: 0 100%;
+      }
+      
+      &__btn {
+        height: 80rpx;
+        display: flex;
+        align-items: center;
+      }
+      
+      &__rotate {
+        width: 44rpx;
+        height: 44rpx;
+        font-size: 40rpx;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-custom-swiper-item/index.wxs b/tuniao-ui/components/tn-custom-swiper-item/index.wxs
new file mode 100644
index 0000000..a6c12b7
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper-item/index.wxs
@@ -0,0 +1,288 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, vertical) {
+  // 震动偏移容差
+  var toleranceShake = 150
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (!vertical) {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// swiperItem参数数据更新
+var itemDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if (!newVal || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// swiperIndex数据更新
+var currentIndexObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if ((!newVal && newVal != 0) || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.currentIndex = newVal
+}
+
+// containerData数据更新
+var containerDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if (!newVal || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.containerData = newVal
+}
+
+// 开始触摸
+var touchStart = function(event, ownerInstance) {
+  console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 由于当前SwiperIndex初始为0，可能会导致swiperIndex数据没有更新
+  if (!state.currentIndex || state.currentIndex === 'undefined') {
+    state.currentIndex = 0
+  }
+  
+  if (!containerData || containerData.circular === 'undefined') {
+    containerData.circular = false
+  }
+  state.containerData = containerData
+  
+  // 如果当前切换动画还没执行结束，再次触摸会重新加载对应的swiperContainer的信息
+  // console.log(containerData.animationFinish);
+  if (!containerData.animationFinish) {
+    ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+      status: 'reload'
+    })
+  }
+
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 标记滑动开始时间
+  state.touchStartTime = getDate().getTime()
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('updateTouchingStatus', {
+    status: true
+  })
+}
+
+// 正在移动
+var touchMove = function(event, ownerInstance) {
+  console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  // 判断是否开始触摸
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  
+  // 计算相对位移比例
+  if (containerData.vertical) {
+    var touchDistance = currentTouchRelactive.y - state.touchRelactive.y
+    var itemHeight = itemData.itemHeight
+    var distanceRate = touchDistance / itemHeight
+    // console.log(currentTouchRelactive.y, touchDistance, itemHeight, distanceRate);
+    
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
+    if (!containerData.circular &&
+      ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
+    ) {
+      return
+    }
+    
+    // 如果超出了距离则不进行操作
+    if((Math.abs(touchDistance) > (itemData.itemTop + itemData.itemHeight))) {
+      ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+        value: distanceRate < 0 ? -1 : 1
+      })
+      return
+    }
+  } else {
+    var touchDistance = currentTouchRelactive.x - state.touchRelactive.x
+    var itemWidth = itemData.itemWidth
+    var distanceRate = touchDistance / itemWidth
+    // console.log(currentTouchRelactive.x, touchDistance, itemWidth, distanceRate);
+    
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
+    if (!containerData.circular &&
+      ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
+    ) {
+      return
+    }
+    
+    // 如果超出了距离则不进行操作
+    if((Math.abs(touchDistance) > (itemData.itemLeft + itemData.itemWidth))) {
+      ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+        value: distanceRate < 0 ? -1 : 1
+      })
+      return
+    }
+  }
+  
+  ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+    value: distanceRate
+  })
+}
+
+// 移动结束
+var touchEnd = function(event, ownerInstance) {
+  console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  // 判断是否开始触摸
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  
+  var currentTime = getDate().getTime()
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  
+  if (containerData.vertical) {
+    // 判断触摸移动方向
+    var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, true)
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
+    if (containerData.circular ||
+      !((state.currentIndex === 0 && direction === 'down') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'up'))
+    ) {
+      // 判断触摸的时间和移动的距离是否超过了当前itemHeight的一半，如果是则执行切换操作
+      // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.y - state.touchRelactive.y));
+      if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.y - state.touchRelactive.y) < itemData.itemHeight / 2) {
+        ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+          status: 'reset'
+        })
+      } else {
+        // console.log(direction, state.touchRelactive.y, currentTouchRelactive.y);
+        
+        ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
+          direction: direction
+        })
+      }
+    }
+  } else {
+    // 判断触摸移动方向
+    var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, false)
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
+    if (containerData.circular ||
+      !((state.currentIndex === 0 && direction === 'right') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'left'))
+    ) {
+      // 判断触摸的时间和移动的距离是否超过了当前itemWidth的一半，如果是则执行切换操作
+      // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.x - state.touchRelactive.x));
+      if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.x - state.touchRelactive.x) < itemData.itemWidth / 2) {
+        ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+          status: 'reset'
+        })
+      } else {
+        // console.log(direction, state.touchRelactive.x, currentTouchRelactive.x);
+        
+        ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
+          direction: direction
+        })
+      }
+    }
+  }
+  
+  // 清除标记
+  state.touchId = null
+  state.touchRelactive = null
+  state.touchStartTime = 0
+  
+  
+  // 标记停止触摸
+  state.touching = true
+  ownerInstance.callMethod('updateTouchingStatus', {
+    status: false
+  })
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  currentIndexObserver: currentIndexObserver,
+  containerDataObserver: containerDataObserver,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue b/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue
new file mode 100644
index 0000000..5fd3c5b
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue
@@ -0,0 +1,277 @@
+<template>
+  <!-- #ifdef MP-WEIXIN -->
+  <view
+    class="tn-c-swiper-item"
+    :style="[swiperStyle]"
+    :itemData="itemData"
+    :currentIndex="currentIndex"
+    :containerData="containerData"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.currentIndexObserver"
+    :change:containerData="wxs.containerDataObserver"
+    @touchstart="wxs.touchStart"
+    :catch:touchmove="touching?wxs.touchMove:''"
+    :catch:touchend="touching?wxs.touchEnd:''"
+  >
+    <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
+      <slot></slot>
+    </view>
+  </view>
+  <!-- #endif -->
+  <!-- #ifndef MP-WEIXIN -->
+  <view
+    class="tn-c-swiper-item"
+    :style="[swiperStyle]"
+    :itemData="itemData"
+    :currentIndex="currentIndex"
+    :containerData="containerData"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.currentIndexObserver"
+    :change:containerData="wxs.containerDataObserver"
+    @touchstart="wxs.touchStart"
+    @touchmove="wxs.touchMove"
+    @touchend="wxs.touchEnd"
+  >
+    <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
+      <slot></slot>
+    </view>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  export default {
+    name: 'tn-custom-swiper-item',
+    props: {
+      
+    },
+    computed: {
+      // swiperItem公共数据
+      itemData() {
+        return {
+          index: this.index,
+          itemWidth: this.itemWidth,
+          itemHeight: this.itemHeight,
+          itemTop: this.itemTop,
+          itemLeft: this.itemLeft
+        }
+      },
+      currentIndex() {
+        return this.parentData.currentIndex
+      },
+      containerData() {
+        return {
+          duration: this.parentData.duration,
+          animationFinish: this.parentData.swiperContainerAnimationFinish,
+          circular: this.parentData.circular,
+          swiperItemLength: this.swiperItemLength,
+          vertical: this.parentData.vertical
+        }
+      },
+      swiperStyle() {
+        let style = {}
+        style.transform = `translate3d(${this.translateX}%, ${this.translateY}%, 0px)`
+        return style
+      },
+      containerStyle() {
+        let style = {}
+        if (this.parentData.customSwiperStyle && Object.keys(this.parentData.customSwiperStyle).length > 0) {
+          style = this.parentData.customSwiperStyle
+        }
+        if ((this.currentIndex === 0 && this.index === this.swiperItemLength - 1) || (this.index === this.currentIndex - 1) && 
+          (this.parentData.prevSwiperStyle && Object.keys(this.parentData.prevSwiperStyle).length > 0)
+        ) {
+          // 前一个swiperItem
+          const copyStyle = JSON.parse(JSON.stringify(style))
+          style = Object.assign(copyStyle, this.parentData.prevSwiperStyle)
+        } 
+        if ((this.currentIndex === this.swiperItemLength - 1 && this.index === 0) || (this.index === this.currentIndex + 1) &&
+          (this.parentData.nextSwiperStyle && Object.keys(this.parentData.nextSwiperStyle).length > 0)
+        ) {
+          // 后一个swiperItem
+          const copyStyle = JSON.parse(JSON.stringify(style))
+          style = Object.assign(copyStyle, this.parentData.nextSwiperStyle)
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        // 父组件参数
+        parentData: {
+          duration: 500,
+          currentIndex: 0,
+          swiperContainerAnimationFinish: false,
+          circular: false,
+          vertical: false,
+          prevSwiperStyle: {},
+          customSwiperStyle: {},
+          nextSwiperStyle: {}
+        },
+        // 标记当前是否正在触摸
+        touching: true,
+        // 当前swiperItem的偏移位置
+        translateX: 0,
+        translateY: 0,
+        // 当前swiperItem的宽高
+        itemWidth: 0,
+        itemHeight: 0,
+        // 当前swiperItem的位置信息
+        itemTop: 0,
+        itemLeft: 0,
+        // 当前swiperItem的状态 prev current next
+        status: 'current',
+        // 当前swiperItem的index序号
+        index: 0,
+        // swiperItem的的数量
+        swiperItemLength: 0
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      // 获取当前父组件children的数量作为当前swiperItem的序号
+      this.index = this.parent.children.length
+      this.parent && this.parent.children.push(this)
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initSwiperItem()
+      })
+    },
+    methods: {
+      // 初始化swiperItem
+      initSwiperItem() {
+        this.getSwiperItemRect(() => {
+          this.parent.updateAllSwiperItemStyle()
+          this.parentData.swiperContainerAnimationFinish = true
+        })
+      },
+      // 获取swiperItem的信息
+      async getSwiperItemRect(callback) {
+        const swiperItemRes = await this._tGetRect('.tn-c-swiper-item')
+        if (!swiperItemRes.height || !swiperItemRes.width) {
+          setTimeout(() => {
+            this.getSwiperItemRect()
+          }, 30)
+          return
+        }
+        
+        this.itemWidth = swiperItemRes.width
+        this.itemHeight = swiperItemRes.height
+        this.itemTop = swiperItemRes.top
+        this.itemLeft = swiperItemRes.left
+        callback && callback()
+      },
+      // 更新swiperItem样式
+      updateSwiperItemStyle(swiperItemLength, currentIndex = undefined) {
+        currentIndex = currentIndex != undefined ? currentIndex : this.parentData.currentIndex
+        this.swiperItemLength = swiperItemLength
+        // 根据当前swiperItem的序号设置偏移位置
+        // 判断当前swiperItem是否为第一个，如果是则将最后的swiperItem移动到当前的前一个位置（即最前面）
+        if (currentIndex === 0 && this.index === swiperItemLength - 1) {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = -100
+          } else {
+            this.translateX = -100
+            this.translateY = 0
+          }
+        } 
+        // 判断当前swiperItem是否为最后一个，如果是则将最前的swiperItem移动到当前的后一个位置（即最后面）
+        else if (currentIndex === swiperItemLength - 1 && this.index === 0) {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = swiperItemLength * 100
+          } else {
+            this.translateX = swiperItemLength * 100
+            this.translateY = 0
+          }
+        }
+        // 正常情况
+        else {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = this.index * 100
+          } else {
+            this.translateX = this.index * 100
+            this.translateY = 0
+          }
+        }
+      },
+      // 更新父组件的偏移位置信息
+      updateParentSwiperContainerStyle(e) {
+        this.parent.updateSwiperContainerStyleWithValue(e.value)
+      },
+      // 根据方向更新父组件的偏移位置信息
+      updateParentSwiperContainerStyleWithDirection(e) {
+        this.parent.updateSwiperContainerStyleWithDirection(e.direction)
+      },
+      // 修改父组件的偏移位置的状态
+      changeParentSwiperContainerStyleStatus(e) {
+        // reset -> 重置 reload -> 重载
+        this.parent.updateSwiperContainerStyleWithDirection(e.status)
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-custom-swiper')
+      },
+      // 更新触摸状态
+      updateTouchingStatus(e) {
+        this.touching = e.status
+        if (e.status) {
+          this.parent.stopAutoPlay()
+        } else {
+          this.parent.startAutoPlay()
+        }
+      },
+      // 提取对应用户自定义样式
+      extractCustomStyle(customStyle) {
+        let data = {
+          transform: {},
+          style: {}
+        }
+        if (!customStyle) return data
+        // 允许设置的transform参数
+        const allowTransformProps = ['scale','scaleX','scaleY','scaleZ','rotate','rotateX','rotateY','rotateZ']
+        for (let prop in customStyle) {
+          if (prop.startsWith('transformProp')) {
+            // transform里面的样式
+            let transformProp = prop.substring('transformProp'.length)
+            const index = allowTransformProps.findIndex((item) => {
+              return item.toLowerCase() === transformProp.toLowerCase()
+            })
+            if (index !== -1) {
+              transformProp = allowTransformProps[index]
+              data.transform[transformProp] = customStyle[prop]
+            }
+          } else {
+            // 普通样式
+            data.style[prop] = customStyle[prop]
+          }
+        }
+        return data
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-c-swiper-item {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: block;
+    will-change: transform;
+    cursor: none;
+    transform: translate3d(0px, 0px, 0px);
+    
+    .item__container {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue b/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
new file mode 100644
index 0000000..2094fe6
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
@@ -0,0 +1,535 @@
+<template>
+  <view
+    class="tn-c-swiper-class tn-c-swiper"
+  >
+    <!-- 轮播item容器-->
+    <view class="tn-swiper__container" :style="[swiperContainerStyle]" :animation="containerAnimation">
+      <slot></slot>
+    </view>
+    
+    <!-- 轮播指示器-->
+    <view v-if="indicator" class="tn-swiper__indicator" :class="[`tn-swiper__indicator--${vertical ? 'vertical' : 'horizontal'}`]" :style="[indicatorStyle]">
+      <!-- 方形 -->
+      <block v-if="indicatorType === 'rect'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__rect"
+          :class="[
+            `tn-swiper__indicator__rect--${vertical ? 'vertical' : 'horizontal'}`, 
+            currentIndex === index ? `tn-swiper__indicator__rect--active tn-swiper__indicator__rect--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 点 -->
+      <block v-if="indicatorType === 'dot'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__dot"
+          :class="[
+            `tn-swiper__indicator__dot--${vertical ? 'vertical' : 'horizontal'}`,
+            currentIndex === index ? `tn-swiper__indicator__dot--active tn-swiper__indicator__dot--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 圆角方形 -->
+      <block v-if="indicatorType === 'round'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__round"
+          :class="[
+            `tn-swiper__indicator__round--${vertical ? 'vertical' : 'horizontal'}`,
+            currentIndex === index ? `tn-swiper__indicator__round--active tn-swiper__indicator__round--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 序号 -->
+      <block v-if="indicatorType === 'number' && !vertical">
+        <view class="tn-swiper__indicator__number">{{ currentIndex + 1 }}/{{ children.length }}</view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-custom-swiper',
+    props: {
+      // 当前所在的轮播位置
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 自动切换
+      autoplay: {
+        type: Boolean,
+        default: false
+      },
+      // 自动切换时间间隔
+      interval: {
+        type: Number,
+        default: 5000
+      },
+      // 滑动动画时长
+      duration: {
+        type: Number,
+        default: 500
+      },
+      // 是否采用衔接滑动
+      circular: {
+        type: Boolean,
+        default: false
+      },
+      // 滑动方向为纵向
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      // 显示指示点
+      indicator: {
+        type: Boolean,
+        default: false
+      },
+      // 指示点类型
+      // rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
+      indicatorType: {
+        type: String,
+        default: 'dot'
+      },
+      // 指示点的位置
+      // topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
+      indicatorPosition: {
+        type: String,
+        default: 'bottomCenter'
+      },
+      // 指示点激活时颜色
+      indicatorActiveColor: {
+        type: String,
+        default: ''
+      },
+      // 指示点未激活时颜色
+      indicatorInactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 前一个轮播的自定义样式
+      prevSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 当前轮播的自定义样式
+      customSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 后一个轮播的自定义样式
+      nextSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      parentData() {
+        return [
+          this.duration,
+          this.currentIndex,
+          this.swiperContainerAnimationFinish,
+          this.circular,
+          this.vertical,
+          this.prevSwiperStyle,
+          this.customSwiperStyle,
+          this.nextSwiperStyle
+        ]
+      },
+      indicatorStyle() {
+        let style = {}
+        if (this.vertical) {
+          if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+          if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+          if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+          if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+            if (this.vertical) {
+              style.right = '12rpx'
+              style.left = 'auto'
+            } else {
+              style.top = '12rpx'
+              style.bottom = 'auto'
+            }
+          } else {
+            if (this.vertical) {
+              style.right = 'auto'
+              style.left = '12rpx'
+            } else {
+              style.top = 'auto'
+              style.bottom = '12rpx'
+            }
+          }
+        } else {
+          if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+          if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+          if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+          if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+            style.top = '12rpx'
+            style.bottom = 'auto'
+          } else {
+            style.top = 'auto'
+            style.bottom = '12rpx'
+          }
+        }
+        return style
+      },
+      indicatorPointStyle() {
+        return (index) => {
+          let style = {}
+          if (index === this.currentIndex && this.indicatorActiveColor !== '') {
+            style.backgroundColor = this.indicatorActiveColor
+          } else if (this.indicatorInactiveColor !== '') {
+            style.backgroundColor = this.indicatorInactiveColor
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      parentData() {
+        if (this.children.length) {
+          this.children.forEach((item) => {
+            // 判断子组件如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+            typeof(item.updateParentData) === 'function' && item.updateParentData()
+          })
+        }
+      },
+      current(nVal, oVal) {
+        if (this.currentIndex === nVal) return
+        this.currentIndex = nVal > this.children.length ? this.children.length - 1 : nVal
+        this.swiperContainerAnimationFinish = false
+        // 设置动画过渡时间
+        this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
+        this.updateSwiperContainerItem(oVal)
+      }
+    },
+    data() {
+      return {
+        // 清除动画定时器
+        clearAnimationTimer: null,
+        // 前后衔接执行定时器
+        convergeTimer: null,
+        // 自动轮播Timer
+        autoPlayTimer: null,
+        // 当前选中的轮播
+        currentIndex: this.current,
+        // swiperContainer样式
+        swiperContainerStyle: {
+          transform: 'translate3d(0px, 0px, 0px)',
+          transitionDuration: '0ms'
+        },
+        // swiperContainer动画
+        containerAnimation: {},
+        // 滑动动画结束标记
+        swiperContainerAnimationFinish: false
+      }
+    },
+    created() {
+      this.children = []
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const index = this.currentIndex > this.children.length ? this.children.length - 1 : this.currentIndex
+        this.updateSwiperContainerStyle(index)
+        this.startAutoPlay()
+      })
+    },
+    methods: {
+      // 更新全部swiperItem的样式
+      updateAllSwiperItemStyle() {
+        this.children.forEach((item, index) => {
+          typeof(item.updateSwiperItemStyle) === 'function' && item.updateSwiperItemStyle(this.children.length)
+        })
+        
+      },
+      // 根据swiperIndex更新swiperItemContainer的样式
+      updateSwiperContainerStyle(index) {
+        if (this.vertical) {
+          this.swiperContainerStyle.transform = `translate3d(0px, ${-index * 100}%, 0px)`
+        } else {
+          this.swiperContainerStyle.transform = `translate3d(${-index * 100}%, 0px, 0px)`
+        }
+      },
+      // 根据传递的值更新swiperItemContainer的位置
+      updateSwiperContainerStyleWithValue(value) {
+        if (this.vertical) {
+          this.swiperContainerStyle.transform = `translate3d(0px, ${(-this.currentIndex * 100) + value * 100}%, 0px)`
+        } else {
+          this.swiperContainerStyle.transform = `translate3d(${(-this.currentIndex * 100) + value * 100}%, 0px, 0px)`
+        }
+      },
+      // 根据传递的方向更新swiperItemContainer的位置
+      updateSwiperContainerStyleWithDirection(direction) {
+        const oldCurrent = this.currentIndex
+        const childrenLength = this.children.length
+        const lastSwiperItemIndex = childrenLength - 1
+        this.swiperContainerAnimationFinish = false
+        
+        
+        // 向后切换一个SwiperItem
+        if (direction === 'reset') {
+          // 设置动画过渡时间
+          this.swiperContainerStyle.transitionDuration = `${this.duration}ms`
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.clearAnimationTimer = setTimeout(() => {
+            this.clearSwiperContainerAnimation()
+          }, this.duration)
+        } else if (direction === 'reload') {
+          this.clearConvergeSwiperItemTimer()
+          this.clearSwiperContainerAnimation()
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+        } else {
+          if (direction === 'left' || direction === 'up') {
+            if (oldCurrent === childrenLength - 1 && !this.circular) {
+              this.clearSwiperContainerAnimation()
+              this.clearConvergeSwiperItemTimer()
+              return
+            } 
+            this.currentIndex = oldCurrent + 1 >= childrenLength ? 0 : oldCurrent + 1
+          } else if (direction === 'right' || direction === 'down') {
+            if (oldCurrent === 0 && !this.circular) {
+              this.clearSwiperContainerAnimation()
+              this.clearConvergeSwiperItemTimer()
+              return
+            } 
+            this.currentIndex = oldCurrent - 1 < 0 ? childrenLength - 1 : oldCurrent - 1
+          }
+          // 设置动画过渡时间
+          this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
+          // this.updateSwiperItemContainerRect(this.currentIndex)
+        }
+        
+        // console.log(direction, oldCurrent, this.currentIndex);
+        this.updateSwiperContainerItem(oldCurrent)
+        
+        // 切换轮播时触发事件
+        this.$emit('change', {
+          current: this.currentIndex
+        })
+      },
+      // 设置自动轮播
+      startAutoPlay() {
+        if (this.autoplay && !this.autoPlayTimer && this.circular) {
+          this.autoPlayTimer = setInterval(() => {
+            this.updateSwiperContainerStyleWithDirection('left')
+          }, this.interval)
+        }
+      },
+      // 停止自动轮播
+      stopAutoPlay() {
+        if (this.autoPlayTimer) {
+          clearInterval(this.autoPlayTimer)
+          this.autoPlayTimer = null
+        }
+      },
+      // 更新swiperContainer和swiperItem相关联信息
+      updateSwiperContainerItem(oldCurrent) {
+        const childrenLength = this.children.length
+        const lastSwiperItemIndex = childrenLength - 1
+        // 判断当前是否为头尾，如果是更新对应的头尾SwiperItem样式
+        // 更新swiperItemContainer的样式
+        if (oldCurrent === 0 && this.currentIndex === lastSwiperItemIndex) {
+          // 先移动到最左边然后再去除动画偏移到正常的位置
+          // this.swiperContainerStyle.transform = `translate3d(100%, 0px, 0px)`
+          this.updateSwiperContainerStyle(-1)
+          this.clearSwiperContainerAnimationTimer()
+          this.clearAnimationTimer = setTimeout(() => {
+            this.convergeSwiperItem()
+          }, this.duration)
+        } else if (oldCurrent === lastSwiperItemIndex && this.currentIndex === 0) {
+          // 先移动到最右边然后再去除动画偏移到正常的位置
+          // this.swiperContainerStyle.transform = `translate3d(${-childrenLength * 100}%, 0px, 0px)`
+          this.updateSwiperContainerStyle(childrenLength)
+          this.clearSwiperContainerAnimationTimer()
+          this.clearAnimationTimer = setTimeout(() => {
+            this.convergeSwiperItem()
+          }, this.duration)
+        } else {
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+          this.clearAnimationTimer = setTimeout(() => {
+            this.clearSwiperContainerAnimation()
+          }, this.duration)
+        }
+      },
+      // 更新对应swiperItem的信息
+      updateSwiperItemStyle(index) {
+        const childrenLength = this.children.length
+        if (index < 0) index = 0
+        if (index > childrenLength - 1) index = childrenLength - 1
+        
+        typeof(this.children[index].updateSwiperItemStyle) === 'function' && this.children[index].updateSwiperItemStyle(childrenLength, this.currentIndex)
+      },
+      // 更新对应swiperItem的容器信息
+      updateSwiperItemContainerRect(index) {
+        const childrenLength = this.children.length
+        if (index < 0) index = 0
+        if (index > childrenLength - 1) index = childrenLength - 1
+        
+        typeof(this.children[index].getSwiperItemRect) === 'function' && this.children[index].getSwiperItemRect()
+      },
+      // 执行前后衔接
+      convergeSwiperItem() {
+        const lastSwiperItemIndex = this.children.length - 1
+        this.clearSwiperContainerAnimation()
+        this.clearConvergeSwiperItemTimer()
+        this.convergeTimer = setTimeout(() => {
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.clearConvergeSwiperItemTimer()
+        }, 30)
+      },
+      // 停止/清除切换动画
+      clearSwiperContainerAnimation() {
+        this.swiperContainerStyle.transitionDuration = `0ms`
+        this.swiperContainerAnimationFinish = true
+        this.clearSwiperContainerAnimationTimer()
+      },
+      // 停止/清除执行前后衔接定时器
+      clearConvergeSwiperItemTimer() {
+        if (this.convergeTimer) {
+          clearTimeout(this.convergeTimer)
+          this.convergeTimer = null
+        }
+      },
+      // 停止/清除切换动画定时器
+      clearSwiperContainerAnimationTimer() {
+        if (this.clearAnimationTimer) {
+          clearTimeout(this.clearAnimationTimer)
+          this.clearAnimationTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-c-swiper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    
+    .tn-swiper {
+      &__container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        
+        will-change: transform;
+        transition-property: all;
+        transition-timing-function: ease-out;
+      }
+      
+      &__indicator {
+        position: absolute;
+        display: flex;
+        z-index: 1;
+        
+        &--horizontal {
+          padding: 0 24rpx;
+          flex-direction: row;
+          width: 100%;
+        }
+        &--vertical {
+          padding: 24rpx 0;
+          flex-direction: column;
+          height: 100%;
+        }
+        
+        &__rect {
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            width: 26rpx;
+            height: 8rpx;
+          }
+          &--vertical {
+            width: 8rpx;
+            height: 26rpx;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+          }
+        }
+        
+        &__dot {
+          width: 14rpx;
+          height: 14rpx;
+          border-radius: 20rpx;
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            margin: 0 6rpx;
+          }
+          &--vertical {
+            margin: 6rpx 0;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+          }
+        }
+        
+        &__round {
+          width: 14rpx;
+          height: 14rpx;
+          border-radius: 20rpx;
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            margin: 0 6rpx;
+          }
+          &--vertical {
+            margin: 6rpx 0;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+            
+            &--horizontal {
+              width: 34rpx;
+            }
+            &--vertical {
+              height: 34rpx;
+            }
+          }
+        }
+        
+        &__number {
+          padding: 6rpx 16rpx;
+          line-height: 1;
+          background-color: rgba(0, 0, 0, 0.3);
+          color: rgba(255, 255, 255, 0.8);
+          border-radius: 100rpx;
+          font-size: 26rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-drag/index.wxs b/tuniao-ui/components/tn-drag/index.wxs
new file mode 100644
index 0000000..6df1e84
--- /dev/null
+++ b/tuniao-ui/components/tn-drag/index.wxs
@@ -0,0 +1,265 @@
+// 判断是否出界
+var isOutRange = function(x1, y1, x2, y2, x3, y3) {
+  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3
+}
+var edit = false
+
+function bool(str) {
+  return str === 'true' || str === true
+}
+/**
+ * 排序核心
+ * @param {Object} startKey 开始时位置
+ * @param {Object} endKey 结束时位置
+ * @param {Object} instance wxs内的局部变量快照
+ */
+var sortCore = function(startKey, endKey, state) {
+  var basedata = state.basedata
+  var excludeFix = function(sortKey, type) {
+    // fixed 元素位置不会变化, 这里直接用 sortKey 获取，更加便捷
+    if (state.list[sortKey].fixed) {
+      var _sortKey = type ? --sortKey : ++sortKey
+      return excludeFix(sortKey, type)
+    }
+    return sortKey
+  }
+  
+  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
+  var endRealKey = -1
+  state.list.forEach(function(item) {
+    if (item.sortKey === endKey) endRealKey = item.realKey
+  })
+  
+  return state.list.map(function(item) {
+    if (item.fixed) return item
+    var sortKey = item.sortKey
+    var realKey = item.realKey
+    
+    if (startKey < endKey) {
+      // 正序拖动
+      if (sortKey > startKey && sortKey <= endKey) {
+        --realKey
+        sortKey =  excludeFix(--sortKey, true)
+      } else if (sortKey === startKey) {
+        realKey = endRealKey
+        sortKey = endKey
+      }
+    } else if (startKey > endKey) {
+      // 倒序拖动
+      if (sortKey >= endKey && sortKey < startKey) {
+        ++realKey
+        sortKey = excludeFix(++sortKey, false)
+      } else if (sortKey === startKey) {
+        realKey = endRealKey
+        sortKey = endKey
+      }
+    }
+    
+    if (item.sortKey != sortKey) {
+      item.translateX = (sortKey % basedata.columns) * 100 + '%'
+      item.translateY = Math.floor(sortKey / basedata.columns) * 100 + '%'
+      item.sortKey = sortKey
+      item.realKey = realKey
+    }
+    return item
+  })
+}
+
+var triggerCustomEvent = function(list, type, instance) {
+  if (!instance) return
+  var _list = [],
+    listData = [];
+    
+  list.forEach(function(item) {
+    _list[item.sortKey] = item
+  })
+  _list.forEach(function(item) {
+    listData.push(item.data)
+  })
+  
+  // 编译到小程序 funcName作为参数传递导致事件不执行
+  switch(type) {
+    case 'change':
+      instance.callMethod('change', {data: listData})
+      break
+    case 'sortEnd':
+      instance.callMethod('sortEnd', {data: listData})
+      break
+  }
+}
+
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-drag__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      itemInstance.setStyle({
+        'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
+      })
+      if (item.fixed) itemInstance.addClass('tn-drag__fixed')
+    }
+  })
+}
+
+var baseDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.basedata = newVal
+}
+
+var longPress = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  edit = bool(dataset.edit)
+  if (!edit) return
+  if (!state.basedata || state.basedata === 'undefined') {
+    state.basedata = JSON.parse(dataset.basedata)
+  }
+  var basedata = state.basedata
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  state.current = +dataset.index
+  
+  // 初始项是固定项则返回
+  var item = state.list[state.current]
+  if (item && item.fixed) return
+  
+  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
+  if (state.dragging) return
+  
+  ownerInstance.callMethod("drag", {
+    dragging: true
+  })
+  
+  // 计算X, Y轴初始位移，使item中心移动到点击处，单列的时候X轴初始不做位移
+  state.translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
+  state.translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
+  state.touchId = touches.identifier
+  
+  instance.setStyle({
+    'transform': 'translate3d(' + state.translateX + 'px,' + state.translateY +'px, 0)'
+  })
+  state.itemsInstance.forEach(function(item, index) {
+    item.removeClass("tn-drag__transition").removeClass("tn-drag__current")
+    item.addClass(index === state.current ? "tn-drag__current" : "tn-drag__transition")
+  })
+  
+  ownerInstance.callMethod("vibrate")
+  state.dragging = true
+}
+
+var touchStart = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  edit = bool(dataset.edit)
+}
+
+var touchMove = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var basedata = state.basedata
+  
+  if (!state.dragging || !edit) return
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 如果不是同一个触发点则返回
+  if (state.touchId !== touches.identifier) return
+  
+  // 计算X,Y轴位移, 单列时候X轴初始不做位移
+  var translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
+  var translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
+  
+  // 到顶到低自动滑动
+  if (touches.clientY > basedata.windowHeight - basedata.itemHeight - basedata.realBottomSize) {
+    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: touches.pageY + basedata.itemHeight - (basedata.windowHeight - basedata.realBottomSize)
+    })
+  } else if (touches.clientY < basedata.itemHeight + basedata.realTopSize) {
+    // 当前触摸点pageY - item高度 - 顶部固定区域高
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: touches.pageY - basedata.itemHeight - basedata.realTopSize
+    })
+  }
+  
+  // 设置当前激活元素的偏移量
+  instance.setStyle({
+    'transform': 'translate3d('+ translateX + 'px,' + translateY + 'px, 0)'
+  })
+  
+  var startKey = state.list[state.current].sortKey
+  var currentX = Math.round(translateX / basedata.itemWidth)
+  var currentY = Math.round(translateY / basedata.itemHeight)
+  var endKey = currentX + basedata.columns * currentY
+  
+  // 目标项时固定项则返回
+  var item = state.list[endKey]
+  if (item && item.fixed) return
+  
+  // X轴或者Y轴超出范围则返回
+  if (isOutRange(currentX, basedata.columns, currentY, basedata.rows, endKey, state.list.length)) return
+  
+  // 防止拖拽过程中发生乱序问题
+  if (startKey === endKey || startKey === state.preStartKey) return
+  state.preStartKey = startKey
+  
+  var list = sortCore(startKey, endKey, state)
+  state.itemsInstance.forEach(function(itemInstance, index) {
+    var item = list[index]
+    if (index !== state.current) {
+      itemInstance.setStyle({
+        'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
+      })
+    }
+  })
+  
+  // ownerInstance.callMethod('vibrate')
+  ownerInstance.callMethod('listDataChange', {
+    data: list
+  })
+  triggerCustomEvent(list, "change", ownerInstance)
+}
+
+var touchEnd = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var basedata = state.basedata
+  
+  if (!state.dragging || !edit) return
+  triggerCustomEvent(state.list, "sortEnd", ownerInstance)
+  
+  instance.addClass('tn-drag__transition')
+  instance.setStyle({
+    'transform': 'translate3d('+ state.list[state.current].translateX + ',' + state.list[state.current].translateY + ', 0)'
+  })
+  state.itemsInstance.forEach(function(item, index) {
+    item.removeClass('tn-drag__transition')
+  })
+  
+  state.preStartKey = -1
+  state.dragging = false
+  ownerInstance.callMethod('drag', {
+    dragging: false
+  })
+  state.current = -1
+  state.translateX = 0
+  state.translateY = 0
+}
+
+module.exports = {
+	longPress: longPress,
+	touchStart: touchStart,
+	touchMove: touchMove,
+	touchEnd: touchEnd,
+	baseDataObserver: baseDataObserver,
+	listObserver: listObserver
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-drag/tn-drag.vue b/tuniao-ui/components/tn-drag/tn-drag.vue
new file mode 100644
index 0000000..17d269d
--- /dev/null
+++ b/tuniao-ui/components/tn-drag/tn-drag.vue
@@ -0,0 +1,278 @@
+<template>
+  <view
+    class="tn-drag-class tn-drag"
+    :style="{
+      height: wrapHeight + 'rpx'
+    }"
+    :list="listData"
+    :basedata="baseData"
+    :change:list="wxs.listObserver"
+    :change:basedata="wxs.baseDataObserver"
+  >
+    <!-- #ifdef MP-WEIXIN -->
+    <view
+      v-for="(item, index) in listData"
+      :key="item.id"
+      class="tn-drag__item"
+      :style="{
+        width: 100 / columns + '%',
+        height: itemHeight + 'rpx'
+      }"
+      :data-index="index"
+      :data-basedata="baseData"
+      :data-edit="edit"
+      @longpress="wxs.longPress"
+      @touchstart="wxs.touchStart"
+      :catch:touchmove="dragging?wxs.touchMove:''"
+      :catch:touchend="dragging?wxs.touchEnd:''"
+    >
+      <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
+    </view>
+    <!-- #endif -->
+
+    <!-- #ifndef MP-WEIXIN -->
+    <view
+      v-for="(item, index) in listData"
+      :key="item.id"
+      class="tn-drag__item"
+      :style="{
+        width: 100 / columns + '%',
+        height: itemHeight + 'rpx' 
+      }"
+      @longpress="wxs.longPress"
+      :data-index="index"
+      :data-basedata="baseData"
+      :data-edit="edit"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    >
+      <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  export default {
+    name: 'tn-drag',
+    props: {
+      // 数据源
+      // 如果属性中包含fixed，则标识当前数据不允许拖动
+      list: {
+        type: Array,
+        default () {
+          return []
+        }
+      },
+      // 是否允许拖动编辑
+      edit: {
+        type: Boolean,
+        default: true
+      },
+      // 列数
+      columns: {
+        type: Number,
+        default: 3
+      },
+      // item元素高度, 单位rpx
+      itemHeight: {
+        type: Number,
+        default: 0
+      },
+      // 当前父元素滚动的高度
+      scrollTop: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      wrapHeight() {
+        return this.rows * this.itemHeight
+      }
+    },
+    data() {
+      return {
+        // 未渲染前节点数据
+        baseData: {},
+        // 拖动后的数据
+        dragData: [],
+        // 行数
+        rows: 0,
+        // 渲染数据
+        listData: [],
+        // 标记是否正在拖动
+        dragging: false
+      }
+    },
+    watch: {
+      list(val) {
+        this.listData = []
+        this.$nextTick(() => {
+          this.init()
+        })
+      },
+      columns(val) {
+        this.listData = []
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.dragging = true
+        const initDragItem = item => {
+          const obj = {
+            ...item
+          }
+          const fixed = obj?.fixed || false
+          delete obj["fixed"]
+          return {
+            id: this.unique(),
+            fixed,
+            data: {
+              ...obj
+            }
+          }
+        }
+        
+        let i = 0
+        const listData = (this.list || []).map((item, index) => {
+          let listItem = initDragItem(item)
+          // 真实排序
+          listItem.realKey = i++
+          // 整体排序
+          listItem.sortKey = index
+          listItem.translateX = `${(listItem.sortKey % this.columns) * 100}%`
+          listItem.translateY = `${Math.floor(listItem.sortKey / this.columns) * 100}%`
+          return listItem
+        })
+        this.rows = Math.ceil(listData.length / this.columns)
+        this.listData = listData
+        this.dragData = listData
+        
+        if (listData.length === 0) return
+        // console.log(listData);
+        
+        // 初始化dom元素
+        this.$nextTick(() => {
+          this.initRect()
+        })
+      },
+      // 初始化dom元素
+      initRect() {
+        const {
+          windowWidth,
+          windowHeight
+        } = uni.getSystemInfoSync()
+        
+        let baseData = {}
+        baseData.windowHeight = windowHeight
+        baseData.realTopSize = 0
+        baseData.realBottomSize = 0
+        baseData.columns = this.columns
+        baseData.rows = this.rows
+        
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.tn-drag').boundingClientRect()
+        query.select('.tn-drag__item').boundingClientRect()
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.initRect()
+            }, 10)
+            return
+          }
+          
+          baseData.itemWidth = res[1].width
+          baseData.itemHeight = res[1].height
+          baseData.left = res[0].left
+          baseData.top = res[0].top + this.scrollTop
+          this.dragging = false
+          this.baseData = baseData
+        })
+        
+      },
+      
+      // 触发震动
+      vibrate() {
+        uni.vibrateShort()
+      },
+      // 滚动到指定的位置
+      pageScroll(e) {
+        uni.pageScrollTo({
+          scrollTop: e.scrollTop,
+          duration: 0
+        })
+      },
+      // 修改拖动状态
+      drag(e) {
+        this.dragging = e.dragging
+      },
+      // 拖拽数据发生改变
+      listDataChange(e) {
+        this.dragData = e.data
+      },
+      // item被点击
+      itemClick(index) {
+        const item = this.dragData[index]
+        this.$emit('click', {
+          key: item.realKey,
+          data: item.data
+        })
+      },
+      
+      // 拖拽结束事件
+      sortEnd(e) {
+        this.$emit('end', {
+          data: e.data
+        })
+      },
+      // 排序发生改变事件
+      change(e) {
+        this.$emit('change', {
+          data: e.data
+        })
+      },
+      
+      // 生成元素唯一id
+      unique(n = 6) {
+        let id = ''
+        for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)
+        return 'tn_' + new Date().getTime() + id
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-drag {
+    position: relative;
+    
+    &__item {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+    }
+    
+    &__transition {
+      transition: transform 0.25s !important;
+    }
+    
+    &__current {
+      z-index: 10 !important;
+    }
+    
+    &__fixed {
+      z-index: 1 !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-empty/tn-empty.vue b/tuniao-ui/components/tn-empty/tn-empty.vue
new file mode 100644
index 0000000..3a85b15
--- /dev/null
+++ b/tuniao-ui/components/tn-empty/tn-empty.vue
@@ -0,0 +1,190 @@
+<template>
+  <view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
+    <view
+      v-if="!isImage"
+      class="tn-empty__icon"
+      :class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]"
+      :style="[iconStyle]"
+    ></view>
+    <image
+      v-else
+      class="tn-empty__image"
+      :style="[imageStyle]"
+      :src="icon"
+      mode="widthFix"
+    ></image>
+    
+    <view
+      class="tn-empty__text"
+      :style="[textStyle]"
+    >{{ text ? text : icons[mode]}}</view>
+    <view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
+      <slot/>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-empty',
+    props: {
+      // 显示空白页
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 内置icon的名称
+      // 图片路径，建议使用绝对路径
+      icon: {
+        type: String,
+        default: ''
+      },
+      // 预置图标类型
+      mode: {
+        type: String,
+        default: 'data'
+      },
+      // 提示文字
+      text: {
+        type: String,
+        default: ''
+      },
+      // 文字颜色
+      textColor: {
+        type: String,
+        default: ''
+      },
+      // 文字大小，单位rpx
+      textSize: {
+        type: Number,
+        default: 0
+      },
+      // 图标颜色
+      iconColor: {
+        type: String,
+        default: ''
+      },
+      // 图标大小，单位rpx
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // 图片宽度（当图标为图片时生效），单位rpx
+      imgWidth: {
+        type: Number,
+        default: 0
+      },
+      // 图片高度（当图标为图片时生效），单位rpx
+      imgHeight: {
+        type: Number,
+        default: 0
+      },
+      // 自定义组件样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      emptyStyle() {
+        let style = {}
+        Object.assign(style, this.customStyle)
+        return style
+      },
+      iconStyle() {
+        let style = {}
+        if (this.iconSize) {
+          style.fontSize = this.iconSize + 'rpx'
+        }
+        if (this.iconColor) {
+          style.color = this.iconColor
+        }
+        return style
+      },
+      imageStyle() {
+        let style = {}
+        if (this.imgWidth) {
+          style.width = this.imgWidth + 'rpx'
+        }
+        if (this.imgHeight) {
+          style.height = this.imgHeight + 'rpx'
+        }
+        return style
+      },
+      textStyle() {
+        let style = {}
+        if (this.textColor) {
+          style.color = this.textColor
+        }
+        if (this.textSize) {
+          style.fontSize = this.textSize + 'rpx'
+        }
+        return style
+      },
+      // 判断传递的icon是否为图片
+      isImage() {
+        return this.icon.indexOf('/') >= 0
+      }
+    },
+    data() {
+      return {
+        icons: {
+          cart: '购物车为空',
+          page: '页面不存在',
+          search: '搜索结果为空',
+          address: '地址为空',
+          network: '网络不通',
+          order: '订单为空',
+          coupon: '优惠券为空',
+          favor: '暂无收藏',
+          permission: '无权限',
+          history: '历史记录为空',
+          message: '暂无消息',
+          list: '列表为空',
+          data: '暂无数据',
+          comment: '暂无评论'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    
+    &__icon {
+      margin-top: 14rpx;
+      color: #AAAAAA;
+      font-size: 90rpx;
+    }
+    
+    &__image {
+      width: 160rpx;
+      height: 160rpx;
+    }
+    
+    &__text {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20rpx;
+      color: #AAAAAA;
+      font-size: 30rpx;
+    }
+    
+    &__slot {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20rpx;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-fab/tn-fab.vue b/tuniao-ui/components/tn-fab/tn-fab.vue
new file mode 100644
index 0000000..9ce0cde
--- /dev/null
+++ b/tuniao-ui/components/tn-fab/tn-fab.vue
@@ -0,0 +1,523 @@
+<template>
+  <view class="tn-fab-class tn-fab" @touchmove.stop.prevent>
+    <view
+      class="tn-fab__box"
+      :class="{'tn-fab--right': left === 'auto'}"
+      :style="{
+        left: $tn.string.getLengthUnitValue(fabLeft || left),
+        right: $tn.string.getLengthUnitValue(fabRight || right),
+        bottom: $tn.string.getLengthUnitValue(fabBottom || bottom),
+        zIndex: elZIndex
+      }"
+    >
+      <view
+        v-if="visibleSync"
+        class="tn-fab__btns"
+        :class="[`tn-fab__btns__animation--${animationType}`, 
+          showFab ? `tn-fab__btns--visible--${animationType}` : ''
+        ]"
+      >
+        <view
+          v-for="(item, index) in btnList"
+          :key="index"
+          class="tn-fab__item"
+          :class="[
+            `tn-fab__item__animation--${animationType}`, 
+            {'tn-fab__item--left': right === 'auto'}
+          ]"
+          :style="[fabItemStyle(index)]"
+          @tap.stop="handleClick(index)"
+        >
+          <!-- 带图标或者图片时显示的文字信息 -->
+          <view
+            v-if="animationType !== 'around' && (item.imgUrl || item.icon)"
+            :class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']"
+            :style="{
+              color: item.textColor || '#FFF',
+              fontSize: $tn.string.getLengthUnitValue(item.textSize || 28)
+            }"
+          >{{ item.text || '' }}</view>
+          
+          <!-- 带图片或者图标时的图片、图标信息 -->
+          <view
+            class="tn-fab__item__btn"
+            :class="[!item.bgColor ? backgroundColorClass : '']"
+            :style="{
+              width: $tn.string.getLengthUnitValue(width),
+              height: $tn.string.getLengthUnitValue(height),
+              lineHeight: $tn.string.getLengthUnitValue(height),
+              backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF',
+              borderRadius: $tn.string.getLengthUnitValue(radius)
+            }"
+          >
+            <!-- 无图片和无图标时只显示文字 -->
+            <view
+              v-if="!item.imgUrl && !item.icon"
+              class="tn-fab__item__btn__title"
+              :style="{
+                color: item.textColor || '#fff',
+                fontSize: $tn.string.getLengthUnitValue(item.textSize || 28)
+              }"
+            >{{ item.text || '' }}</view>
+            <!-- 图标 -->
+            <view
+              v-if="item.icon"
+              class="tn-fab__item__btn__icon"
+              :class="[`tn-icon-${item.icon}`]"
+              :style="{
+                color: item.iconColor || '#fff',
+                fontSize: $tn.string.getLengthUnitValue(item.iconSize || iconSize || 64)
+              }"
+            ></view>
+            <!-- 图片 -->
+            <image
+              v-else-if="!item.icon && item.imgUrl"
+              class="tn-fab__item__btn__image"
+              :style="{
+                width: $tn.string.getLengthUnitValue(item.imgWidth || 64),
+                height: $tn.string.getLengthUnitValue(item.imgHeight || 64),
+              }"
+              :src="item.imgUrl"
+            ></image>
+          </view>
+        </view>
+      </view>
+      
+      <view
+        class="tn-fab__item__btn tn-fab__item__btn--fab"
+        :class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]"
+        :style="{
+          width: $tn.string.getLengthUnitValue(width),
+          height: $tn.string.getLengthUnitValue(height),
+          backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '',
+          color: fontColorStyle || '#fff',
+          borderRadius: $tn.string.getLengthUnitValue(radius),
+          zIndex: elZIndex - 1
+        }"
+        @tap.stop="fabClick"
+      >
+        <slot>
+          <view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $tn.string.getLengthUnitValue(iconSize || 64)}"></view>
+        </slot>
+      </view>
+    </view>
+    <view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-fab',
+    mixins: [componentsColorMixin],
+    props: {
+      // 按钮列表
+      // {
+      //   // 背景颜色
+      //   bgColor: '#fff',
+      //   // 图片地址
+      //   imgUrl: '',
+      //   // 图片宽度
+      //   imgWidth: 60,
+      //   // 图片高度
+      //   imgHeight: 60,
+      //   // 图标名称
+      //   icon: '',
+      //   // 图标尺寸
+      //   iconSize: 60,
+      //   // 图标颜色
+      //   iconColor: '#fff',
+      //   // 提示文字
+      //   text: '',
+      //   // 文字大小
+      //   textSize: 30,
+      //   // 字体颜色
+      //   textColor: '#fff'
+      // }
+      btnList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 自定义悬浮按钮内容
+      customBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 悬浮按钮的宽度
+      width: {
+        type: [String, Number],
+        default: 88
+      },
+      // 悬浮按钮的高度
+      height: {
+        type: [String, Number],
+        default: 88
+      },
+      // 图标大小
+      iconSize: {
+        type: [String, Number],
+        default: 64
+      },
+      // 图标名称
+      icon: {
+        type: String,
+        default: 'open'
+      },
+      // 按钮圆角
+      radius: {
+        type: [String, Number],
+        default: '50%'
+      },
+      // 按钮距离左边的位置
+      left: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 按钮距离右边的位置
+      right: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 按钮距离底部的位置
+      bottom: {
+        type: [String, Number],
+        default: 100
+      },
+      // 展示动画类型 up 往上展示 around 环绕
+      animationType: {
+        type: String,
+        default: 'up'
+      },
+      // 当动画为圆环时，每个弹出按钮之间的距离, 单位px
+      aroundBtnDistance: {
+        type: Number,
+        default: 10
+      },
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 显示遮罩
+      showMask: {
+        type: Boolean,
+        default: true
+      },
+      // 点击遮罩是否可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        showFab: false,
+        visibleSync: false,
+        timer: null,
+        fabLeft: 0,
+        fabRight: 0,
+        fabBottom: 0,
+        fabBtnInfo: {
+          width: 0,
+          height: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        systemInfo: {
+          width: 0,
+          height: 0
+        },
+        updateProps: false
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex || this.$tn.zIndex.fab
+      },
+      propsData() {
+        return [this.width, this.height, this.left, this.right, this.bottom]
+      },
+      fabItemStyle() {
+        return (index) => {
+          let style = {
+            zIndex: this.elZIndex - 2
+          }
+          if (this.animationType === 'up' || !this.showFab) {
+            return style
+          }
+          let base = 1 
+          if (this.left === 'auto') {
+            base = 1
+          } else if (this.right === 'auto') {
+            base = -1
+          }
+          style.transform = `rotate(${base * index * 60}deg) translateX(${(this.aroundBtnDistance + this.fabBtnInfo.width) * (-(base))}px)`
+          return style
+        }
+      }
+    },
+    watch: {
+      propsData() {
+        // 更新按钮信息
+        this.updateProps = true
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getFabBtnRectInfo()
+      })
+    },
+    beforeDestroy() {
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+    },
+    methods: {
+      // 按钮点击事件
+      handleClick(index) {
+        this.close()
+        this.$emit('click', {index: index})
+      },
+      // 点击悬浮按钮
+      fabClick() {
+        if (this.showFab) {
+          this.close()
+        } else {
+          // console.log(this.visibleSync);
+          if (this.visibleSync) {
+            this.visibleSync = false
+            return
+          }
+          this.open()
+        }
+      },
+      // 点击遮罩
+      clickMask() {
+        if (!this.showMask || !this.maskCloseable) return
+        this.close()
+      },
+      
+      open() {
+        this.change('visibleSync', 'showFab', true)
+        this.translateFabPosition()
+      },
+      close() {
+        this.change('showFab', 'visibleSync', false)
+        this.fabLeft = 0
+        this.fabRight = 0
+        this.fabBottom = 0
+      },
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 10)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 250)
+        }
+      },
+      
+      /******************** 旋转动画相关函数 ********************/
+      // 获取按钮的信息
+      async getFabBtnRectInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        const btnRectInfo = await this._tGetRect('.tn-fab__item__btn--fab')
+        if (!btnRectInfo) {
+          setTimeout(() => {
+            this.getFabBtnRectInfo()
+          }, 10)
+          return
+        }
+        console.log(btnRectInfo);
+        this.systemInfo = {
+          width: systemInfo.windowWidth,
+          height: systemInfo.windowHeight
+        }
+        this.fabBtnInfo.width = btnRectInfo.width
+        this.fabBtnInfo.height = btnRectInfo.height
+        this.fabBtnInfo.left = btnRectInfo.left
+        this.fabBtnInfo.right = btnRectInfo.right
+        this.fabBtnInfo.bottom = btnRectInfo.bottom
+      },
+      // 更新悬浮按钮的位置
+      translateFabPosition() {
+        if (this.updateProps) {
+          this.getFabBtnRectInfo()
+          this.updateProps = false
+        }
+        if (this.animationType === 'up') return 
+        // 按钮组的宽度
+        const btnGroupWidth = this.fabBtnInfo.width + this.aroundBtnDistance + 10
+        // 判断当前按钮是在左边还是右边
+        if (this.left === 'auto' && btnGroupWidth > this.systemInfo.width - this.fabBtnInfo.right) {
+          // 距离不够需要移动
+          this.fabRight = btnGroupWidth + 'px'
+        } else if (this.right === 'auto' && btnGroupWidth > this.fabBtnInfo.left) {
+          this.fabLeft = btnGroupWidth + 'px'
+        }
+        
+        if (btnGroupWidth > this.systemInfo.height - this.fabBtnInfo.bottom) {
+          this.fabBottom = btnGroupWidth + 'px'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-fab {
+    &__box {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      position: fixed;
+      transition: all 0.25s ease-in-out;
+    }
+    
+    &--right {
+      align-items: flex-end;
+    }
+    
+    &__btns {
+      transition: all 0.25s cubic-bezier(0,.13,0,1.43);
+      transform-origin: 80% bottom;
+      
+      &__animation--up {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      &__animation--around {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      
+      &--visible--up {
+        // visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+      &--visible--around {
+        // visibility: visible;
+        // opacity: 1;
+      }
+    }
+    
+    &__item {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-bottom: 20rpx;
+      
+      &__animation--around {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: transform 0.25s ease-in-out;
+        transform-origin: 50% 50%;
+        padding-bottom: 0 !important;
+      }
+      
+      &--left {
+        flex-flow: row-reverse;
+      }
+      
+      &__text {
+        &--left {
+          padding-left: 14rpx;
+        }
+        &--right {
+          padding-right: 14rpx;
+        }
+      }
+      
+      &__btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07);
+        transition: all 0.2s linear;
+        
+        &--active {
+          animation-name: fab-button-animation;
+          animation-duration: 0.2s;
+          animation-timing-function: cubic-bezier(0,.13,0,1.43);
+        }
+        
+        &__title {
+          width: 90%;
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        &__icon {
+          text-align: center;
+          font-size: 64rpx;
+        }
+        
+        &__image {
+          display: block;
+        }
+      }
+    }
+    
+    &__mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $tn-mask-bg-color;
+      transition: all 0.2s ease-in-out;
+      opacity: 0;
+      
+      &--visible {
+        opacity: 1;
+      }
+    }
+  }
+  
+  @keyframes fab-button-animation {
+    0% {
+      transform: scale(0.6);
+    }
+    // 20% {
+    //   transform: scale(1.8);
+    // }
+    // 40% {
+    //   transform: scale(0.4);
+    // }
+    // 50% {
+    //   transform: scale(1.4);
+    // }
+    // 80% {
+    //   transform: scale(0.8);
+    // }
+    100% {
+      transform: scale(1);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-form-item/tn-form-item.vue b/tuniao-ui/components/tn-form-item/tn-form-item.vue
new file mode 100644
index 0000000..f60dbec
--- /dev/null
+++ b/tuniao-ui/components/tn-form-item/tn-form-item.vue
@@ -0,0 +1,457 @@
+<template>
+  <view
+    class="tn-form-item-class tn-form-item"
+    :class="{
+      'tn-border-solid-bottom': elBorderBottom,
+      'tn-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')
+    }"
+  >
+    <view
+      class="tn-form-item__body"
+      :style="{
+        flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
+      }"
+    >
+      <!-- 处理微信小程序中设置属性的问题，不设置值的时候会变成true -->
+      <view
+        class="tn-form-item--left"
+        :style="{
+          width: wLabelWidth,
+          flex: `0 0 ${wLabelWidth}`,
+          marginBottom: elLabelPosition == 'left' ? 0 : '10rpx'
+        }"
+      >
+        <!-- 块对齐 -->
+        <view v-if="required || leftIcon || label" class="tn-form-item--left__content"
+          :style="[leftContentStyle]"
+        >
+          <!-- nvue不支持伪元素before -->
+          <view v-if="leftIcon" class="tn-form-item--left__content__icon">
+            <view :class="[`tn-icon-${leftIcon}`]" :style="leftIconStyle"></view>
+          </view>
+          <!-- <view
+            class="tn-form-item--left__content__label"
+            :style="[elLabelStyle, {
+              'justify-content': elLabelAlign === 'left' ? 'flex-satrt' : elLabelAlign === 'center' ? 'center' : 'flex-end'
+            }]"
+          >
+            {{label}}
+          </view> -->
+          <view
+            class="tn-form-item--left__content__label"
+            :style="[elLabelStyle]"
+          >
+            {{label}}
+          </view>
+          <text v-if="required" class="tn-form-item--left__content--required">*</text>
+        </view>
+      </view>
+      
+      <view class="tn-form-item--right tn-flex">
+        <view class="tn-form-item--right__content">
+          <view class="tn-form-item--right__content__slot">
+            <slot></slot>
+          </view>
+          <view v-if="$slots.right || rightIcon" class="tn-form-item--right__content__icon tn-flex">
+            <view v-if="rightIcon" :class="[`tn-icon-${rightIcon}`]" :style="rightIconStyle"></view>
+            <slot name="right"></slot>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <view
+      v-if="validateState === 'error' && showError('message')"
+      class="tn-form-item__message"
+      :style="{
+        paddingLeft: elLabelPosition === 'left' ? elLabelWidth + 'rpx' : '0'
+      }"
+    >
+      {{validateMessage}}
+    </view>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  import schema from '../../libs/utils/async-validator.js'
+  // 去除警告信息
+  schema.warning = function() {}
+  
+  export default {
+    mixins: [Emitter],
+    name: 'tn-form-item',
+    inject: {
+      tnForm: {
+        default() {
+          return null
+        }
+      }
+    },
+    props: {
+      // label提示语
+      label: {
+        type: String,
+        default: ''
+      },
+      // 绑定的值
+      prop: {
+        type: String,
+        default: ''
+      },
+      // 是否显示表单域的下划线边框
+      borderBottom: {
+        type:Boolean,
+        default: true
+      },
+      // label(标签名称)的位置
+      // left - 左边
+      // top - 上边
+      labelPosition: {
+        type: String,
+        default: ''
+      },
+      // label的宽度
+      labelWidth: {
+        type: Number,
+        default: 0
+      },
+      // label的对齐方式
+      // left - 左对齐
+      // top - 上对齐
+      // right - 右对齐
+      // bottom - 下对齐
+      labelAlign: {
+        type: String,
+        default: ''
+      },
+      // label 的样式
+      labelStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 左侧图标
+      leftIcon: {
+        type: String,
+        default: ''
+      },
+      // 右侧图标
+      rightIcon: {
+        type: String,
+        default: ''
+      },
+      // 左侧图标样式
+      leftIconStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 右侧图标样式
+      rightIconStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示必填项的*，不做校验用途
+      required: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 处理微信小程序label的宽度
+      wLabelWidth() {
+        // 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
+        return this.elLabelPosition === 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.elLabelWidth + 'rpx') : '100%'
+      },
+      // 是否显示错误提示
+      showError() {
+        return type => {
+          if (this.errorType.indexOf('none') >= 0) return false
+          else if (this.errorType.indexOf(type) >= 0) return true
+          else return false
+        }
+      },
+      // label的宽度(默认值为90)
+      elLabelWidth() {
+        return this.labelWidth != 0 ? this.labelWidth : (this.parentData.labelWidth != 0 ? this.parentData.labelWidth : 90)
+      },
+      // label的样式
+      elLabelStyle() {
+        return Object.keys(this.labelStyle).length ? this.labelStyle : (Object.keys(this.parentData.labelStyle).length ? this.parentData.labelStyle : {})
+      },
+      // label显示位置
+      elLabelPosition() {
+        return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition : 'left')
+      },
+      // label对齐方式
+      elLabelAlign() {
+        return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left')
+      },
+      // label下划线
+      elBorderBottom() {
+        return this.borderBottom !== '' ? this.borderBottom : (this.parentData.borderBottom !== '' ? this.parentData.borderBottom : true)
+      },
+      leftContentStyle() {
+        let style = {}
+        if (this.elLabelPosition === 'left') {
+          switch(this.elLabelAlign) {
+            case 'left':
+              style.justifyContent = 'flex-start'
+              break
+            case 'center':
+              style.justifyContent = 'center'
+              break
+            default:
+              style.justifyContent = 'flex-end'
+              break
+          }
+        }
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        // 默认值
+        initialValue: '',
+        // 是否校验成功
+        validateState: '',
+        // 校验失败提示信息
+        validateMessage: '',
+        // 错误的提示方式（参考form组件）
+        errorType: ['message'],
+        // 当前子组件输入的值
+        fieldValue: '',
+        // 父组件的参数
+        // 由于再computed中无法得知this.parent的变化，所以放在data中
+        parentData: {
+          borderBottom: true,
+          labelWidth: 90,
+          labelPosition: 'left',
+          labelAlign: 'left',
+          labelStyle: {},
+        }
+      }
+    },
+    watch: {
+      validateState(val) {
+        this.broadcastInputError()
+      },
+      "tnForm.errorType"(val) {
+        this.errorType = val
+        this.broadcastInputError()
+      }
+    },
+    mounted() {
+      // 组件创建完成后，保存当前实例到form组件中
+      // 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用\
+      this.parent = this.$tn.$parent.call(this, 'tn-form')
+      if (this.parent) {
+        // 遍历parentData属性，将parent中同名的属性赋值给parentData
+        Object.keys(this.parentData).map(key => {
+          this.parentData[key] = this.parent[key]
+        })
+        // 如果没有传入prop或者tnForm为空（单独使用form-item组件的时候），就不进行校验
+        if (this.prop) {
+          // 将本实例添加到父组件中
+          this.parent.fields.push(this)
+          this.errorType = this.parent.errorType
+          // 设置初始值
+          this.initialValue = this.fieldValue
+          // 添加表单校验，这里必须要写在$nextTick中，因为tn-form的rules是通过ref手动传入的
+          // 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给tn-form，导致规则为空
+          this.$nextTick(() => {
+            this.setRules()
+          })
+        }
+      }
+    },
+    beforeDestroy() {
+      // 组件销毁前，将实例从tn-form的缓存中移除
+      // 如果当前没有prop的话表示当前不进行删除
+      if (this.parent && this.prop) {
+        this.parent.fields.map((item, index) => {
+          if (item === this) this.parent.fields.splice(index, 1)
+        })
+      }
+    },
+    methods: {
+      // 向input组件发出错误事件
+      broadcastInputError() {
+        this.broadcast('tn-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'))
+      },
+      // 设置校验规则
+      setRules() {
+        let that = this
+        // 从父组件tn-form拿到当前tn-form-item需要验证 的规则
+        // let rules = this.getRules()
+        // if (rules.length) {
+        // 	this.isRequired = rules.some(rule => {
+        // 		// 如果有必填项，就返回，没有的话，就是undefined
+        // 		return rule.required
+        // 	})
+        // }
+        
+        // blur事件
+        this.$on('on-form-blur', that.onFieldBlur)
+        // change事件
+        this.$on('on-form-change', that.onFieldChange)
+      },
+      // 从form的rules属性中取出当前form-item的校验规则
+      getRules() {
+        let rules = this.parent.rules
+        rules = rules ? rules[this.prop] : []
+        
+        // 返回数值形式的值
+        return [].concat(rules || [])
+      },
+      // blur事件时进行表单认证
+      onFieldBlur() {
+        this.validation('blur')
+      },
+      // change事件时进行表单认证
+      onFieldChange() {
+        this.validation('change')
+      },
+      // 过滤出符合要求的rule规则
+      getFilterRule(triggerType = '') {
+        let rules = this.getRules()
+        // 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
+        if (!triggerType) return rules
+        // 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
+        // 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
+        // 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
+        return rules.filter(rule => rule.trigger && rule.trigger.indexOf(triggerType) !== -1)
+      },
+      // 校验数据
+      validation(trigger, callback = ()=>{}) {
+        // 校验之前先获取需要校验的值
+        this.fieldValue = this.parent.model[this.prop]
+        // blur和change是否有当前方式的校验规则
+        let rules = this.getFilterRule(trigger)
+        // 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件tn-form会因为
+        // 对count变量的统计错误而无法进入上一层的回调 
+        if (!rules || rules.length === 0) {
+          return callback('')
+        }
+        // 设置当前为校验中
+        this.validateState = 'validating'
+        // 调用async-validator的方法
+        let validator = new schema({
+          [this.prop]: rules
+        })
+        validator.validate({
+          [this.prop]: this.fieldValue
+        }, {
+          firstFields: true
+        }, (errors, fields) => {
+          // 记录状态和报错信息
+          this.validateState = !errors ? 'success' : 'error'
+          this.validateMessage = errors ? errors[0].message : ''
+          
+          callback(this.validateMessage)
+        })
+      },
+      
+      // 清空当前item信息
+      resetField() {
+        this.parent.model[this.prop] = this.initialValue
+        // 清空错误标记
+        this.validateState = 'success'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-form-item {
+    display: flex;
+    flex-direction: column;
+    padding: 20rpx 0;
+    font-size: 28rpx;
+    color: $tn-font-color;
+    box-sizing: border-box;
+    line-height: $tn-form-item-height;
+    
+    &__border-bottom--error:after {
+      border-color: $tn-color-red;
+    }
+    
+    &__body {
+      display: flex;
+      flex-direction: row;
+    }
+    
+    &--left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        align-items: center;
+        padding-right: 18rpx;
+        flex: 1;
+        
+        &--required {
+          position: relative;
+          right: 0;
+          vertical-align: middle;
+          color: $tn-color-red;
+        }
+        
+        &__icon {
+          color: $tn-font-sub-color;
+          margin-right: 8rpx;
+        }
+        
+        &__label {
+          // display: flex;
+          // flex-direction: row;
+          // align-items: center;
+          // flex: 1;
+        }
+      }
+    }
+    
+    &--right {
+      flex: 1;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex: 1;
+        
+        &__slot {
+          flex: 1;
+          /* #ifndef MP */
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          /* #endif */
+        }
+        
+        &__icon {
+          margin-left: 10rpx;
+          color: $tn-font-sub-color;
+          font-size: 30rpx;
+        }
+      }
+    }
+    
+    &__message {
+      font-size: 24rpx;
+      line-height: 24rpx;
+      color: $tn-color-red;
+      margin-top: 12rpx;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-form/tn-form.vue b/tuniao-ui/components/tn-form/tn-form.vue
new file mode 100644
index 0000000..6a2524f
--- /dev/null
+++ b/tuniao-ui/components/tn-form/tn-form.vue
@@ -0,0 +1,139 @@
+<template>
+  <view class="tn-form-class tn-form">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-form',
+    props: {
+      // 表单数据对象（需要验证的表单数据）
+      model: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 发生错误时的提示方式
+      // toast - 弹出toast框
+      // message - 提示信息
+      // border - 如果设置了边框，边框会变成红色
+      // border-bottom - 下边框会呈现红色
+      // none - 无提示
+      errorType: {
+        type: Array,
+        default() {
+          return ['message', 'toast']
+        }
+      },
+      // 是否显示表单域的下划线边框
+      borderBottom: {
+        type:Boolean,
+        default: true
+      },
+      // label(标签名称)的位置
+      // left - 左边
+      // top - 上边
+      labelPosition: {
+        type: String,
+        default: 'left'
+      },
+      // label的宽度
+      labelWidth: {
+        type: Number,
+        default: 90
+      },
+      // label的对齐方式
+      // left - 左对齐
+      // center - 居中对齐
+      // right - 右对齐
+      labelAlign: {
+        type: String,
+        default: 'left'
+      },
+      // label 的样式
+      labelStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    // 向子孙传递数据
+    provide() {
+      return {
+        tnForm: this
+      }
+    },
+    data() {
+      return {
+        rules: {}
+      }
+    },
+    created() {
+      // 存储当前form下的所有form-item的实例
+      // 不能定义再data中，否则小程序会循环引用而报错
+      this.fields = []
+    },
+    methods: {
+      /**
+       * 设置规则
+       * 
+       * @param {Object} rules
+       */
+      setRules(rules) {
+        this.rules = rules
+      },
+      /**
+       * 清空form-item组件
+       */
+      resetFields() {
+        this.fields.map(field => {
+          field.resetField()
+        })
+      },
+      /**
+       * 校验数据
+       * @param {Object} callback 校验回调方法
+       */
+      validate(callback) {
+        return new Promise(resolve => {
+          // 标记校验是否通过
+          let valid = true
+          // 标记是否检查完毕
+          let count = 0
+          // 存放错误信息
+          let errors = []
+          
+          // 对所有form-item进行校验
+          this.fields.map(field => {
+            // 调用对应form-item实例的validation校验方法
+            field.validation('', error => {
+              // 如果有一个form-item校验不通过，则整个表单校验不通过
+              if (error) {
+                valid = false
+                errors.push(error)
+              }
+              // 当遍历完所有的form-item的校验规则，返回信息
+              if (++count === this.fields.length) {
+                resolve(valid)
+                // 判断是否设置了toast的提示方式，只提示表单域中最前面的一条错误信息
+                if (this.errorType.indexOf('none') === -1 && 
+                    this.errorType.indexOf('toast') >= 0 &&
+                    errors.length > 0) {
+                  this.$tn.message.toast(errors[0])
+                }
+                // 调用回调方法
+                if (typeof callback == 'function') callback(valid)
+              }
+            })
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue b/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
new file mode 100644
index 0000000..b3d3a60
--- /dev/null
+++ b/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
@@ -0,0 +1,382 @@
+<template>
+  <view
+    class="tn-goods-nav-class tn-goods-nav"
+    :class="[
+      backgroundColorClass,
+      {
+        'tn-goods-nav--fixed': fixed,
+        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
+        'tn-goods-nav--shadow': shadow
+      }
+    ]"
+    :style="[backgroundColorStyle, navStyle]"
+  >
+    <view class="options">
+      <view
+        v-for="(item, index) in optionsData"
+        :key="index"
+        class="options__item"
+        :class="[{'options__item--avatar': item.showAvatar}]"
+        @tap="handleOptionClick(index)"
+      >
+        <block v-if="item.showAvatar">
+          <tn-avatar
+            :src="item.avatar"
+            size="sm"
+            :badge="item.showBadge"
+            :badgeText="item.count"
+            :badgeBgColor="item.countBackgroundColor"
+            :badgeColor="item.countFontColor"
+            :badgeSize="26"
+          ></tn-avatar>
+        </block>
+        <block v-else>
+          <view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]">
+            <tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge>
+          </view>
+          <view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view>
+        </block>
+      </view>
+    </view>
+    <view class="buttons">
+      <view
+        v-for="(item, index) in buttonGroupsData"
+        :key="index"
+        class="buttons__item"
+        :class="[buttonClass(index)]"
+        :style="[buttonStyle(index)]"
+        @tap="handleButtonClick(index)"
+      >
+        <view class="buttons__item__text">{{ item.text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-goods-nav',
+    props: {
+      // 选项信息
+      // 建议不超过3个
+      // {
+      //   icon: '', // 图标名称
+      //   text: '', // 显示的文本
+      //   count: '', // 角标的值
+      //   countBackgroundColor: '', // 角标背景颜色
+      //   countFontColor: '', // 角标字体颜色
+      //   iconColor: '', // 图标颜色
+      //   textColor: '', // 文本颜色
+      //   avatar: '', // 显示头像（此时将不显示图标和文本）
+      // }
+      options: {
+        type: Array,
+        default() {
+          return [{
+            icon: 'shop',
+            text: '店铺'
+          },{
+            icon: 'service',
+            text: '客服'
+          },{
+            icon: 'star',
+            text: '收藏'
+          }]
+        }
+      },
+      // 按钮组
+      // 建议不超过2个
+      // {
+      //   text: '', // 显示的文本
+      //   backgroundColor: '', // 按钮背景颜色
+      //   color: '' // 文本颜色
+      // }
+      buttonGroups: {
+        type: Array,
+        default() {
+          return [{
+            text: '加入购物车',
+            backgroundColor: '#FFA726',
+            color: '#FFFFFF'
+          },{
+            text: '结算',
+            backgroundColor: '#FF7043',
+            color: '#FFFFFF'
+          }]
+        }
+      },
+      // 背景颜色
+      backgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 导航的高度，单位rpx
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 显示阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 导航的层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 按钮类型
+      // rect -> 方形 paddingRect -> 上下带边距方形 round -> 圆角
+      buttonType: {
+        type: String,
+        default: 'rect'
+      },
+      // 是否固定在底部
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      }
+    },
+    computed: {
+      backgroundColorStyle() {
+        return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      navStyle() {
+        let style = {}
+        if (this.height) {
+          style.height = this.height + 'rpx'
+        }
+        style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.goodsNav
+        return style
+      },
+      // 选项style
+      optionStyle() {
+        return (index, type) => {
+          let style = {}
+          const item = this.optionsData[index]
+          if (type === 'icon' && item.iconColor) {
+            style.color = item.iconColor
+          } else if (type === 'text' && item.fontColor) {
+            style.color = item.fontColor
+          }
+          return style
+        }
+      },
+      // 按钮class
+      buttonClass() {
+        return (index) => {
+          let clazz = ''
+          const item = this.buttonGroupsData[index]
+          if (item.backgroundColorClass) {
+            clazz += ` ${item.backgroundColorClass}`
+          }
+          if (item.colorClass) {
+            clazz += ` ${item.colorClass}`
+          }
+          
+          clazz += ` buttons__item--${this.$tn.string.humpConvertChar(this.buttonType, '-')}`
+          
+          return clazz
+        }
+      },
+      // 按钮style
+      buttonStyle() {
+        return (index) => {
+          let style = {}
+          const item = this.buttonGroupsData[index]
+          if (item.backgroundColorStyle) {
+            style.backgroundColor = item.backgroundColorStyle
+          }
+          if (item.colorStyle) {
+            style.color = item.colorStyle
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      options(val) {
+        this.initData()
+      },
+      buttonGroups(val) {
+        this.initData()
+      }
+    },
+    data() {
+      return {
+        // 保存选项数据
+        optionsData: [],
+        // 保存按钮组数据
+        buttonGroupsData: []
+      }
+    },
+    created() {
+      this.initData()
+    },
+    methods: {
+      // 初始化选项和按钮数据
+      initData() {
+        this.handleOptionsData()
+        this.handleButtonGroupsData()
+      },
+      // 选项点击事件
+      handleOptionClick(index) {
+        this.$emit('optionClick', {
+          index: index
+        })
+      },
+      // 按钮点击事件
+      handleButtonClick(index) {
+        this.$emit('buttonClick', {
+          index: index
+        })
+      },
+      // 处理选项组数据
+      handleOptionsData() {
+        this.optionsData = this.options.map((item) => {
+          let option = {...item}
+          option.showAvatar = item.hasOwnProperty('avatar')
+          if (item.hasOwnProperty('count')) {
+            const count = this.$tn.number.formatNumberString(item.count, 2)
+            option.showBadge = true
+            option.count = typeof count === 'number' ? String(count) : count
+            option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
+            option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF'
+          }
+          
+          return option
+        })
+      },
+      // 处理按钮组数据
+      handleButtonGroupsData() {
+        this.buttonGroupsData = this.buttonGroups.map((item) => {
+          let button = {...item}
+          if (item.hasOwnProperty('backgroundColor')) {
+            button.backgroundColorClass = this.$tn.color.getBackgroundColorInternalClass(item.backgroundColor)
+            button.backgroundColorStyle = this.$tn.color.getBackgroundColorStyle(item.backgroundColor)
+          }
+          if (item.hasOwnProperty('color')) {
+            button.colorClass = this.$tn.color.getBackgroundColorInternalClass(item.color)
+            button.colorStyle = this.$tn.color.getBackgroundColorStyle(item.color)
+          }
+          return button
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-goods-nav {
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 88rpx;
+    width: 100%;
+    box-sizing: content-box;
+    
+    &--shadow {
+      box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+      
+      &::before {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-color: transparent;
+        z-index: -1;
+      }
+    }
+    
+    &--fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    
+    .options {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 100%;
+      color: #AAAAAA;
+      
+      &__item {
+        padding: 0 26rpx;
+        
+        &--avatar {
+          padding: 0rpx 0rpx 0rpx 26rpx !important;
+        }
+        
+        &__icon {
+          position: relative;
+          font-size: 36rpx;
+          margin-bottom: 6rpx;
+        }
+        
+        &__text {
+          font-size: 22rpx;
+        }
+      }
+    }
+    
+    .buttons {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 100%;
+      
+      &__item {
+        flex: 1;
+        padding: 0 10rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &--rect {
+          height: 100%;
+        }
+        
+        &--padding-rect {
+          height: 80%;
+        }
+        
+        &--round {
+          height: 75%;
+          &:first-child {
+            border-top-left-radius: 100rpx;
+            border-bottom-left-radius: 100rpx;
+          }
+          &:last-child {
+            border-top-right-radius: 100rpx;
+            border-bottom-right-radius: 100rpx;
+          }
+        }
+        
+        &__text {
+          display: inline-block;
+          font-weight: bold;
+          font-size: 30rpx;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-grid-item/tn-grid-item.vue b/tuniao-ui/components/tn-grid-item/tn-grid-item.vue
new file mode 100644
index 0000000..2837bc2
--- /dev/null
+++ b/tuniao-ui/components/tn-grid-item/tn-grid-item.vue
@@ -0,0 +1,114 @@
+<template>
+  <view
+    class="tn-grid-item-class tn-grid-item"
+    :class="[
+      backgroundColorClass
+    ]"
+    :hover-class="hoverClass"
+    :hover-stay-time="150"
+    :style="{
+      backgroundColor: backgroundColorStyle,
+      width: gridWidth
+    }"
+    @tap="click"
+  >
+    <view
+      class="tn-grid-item__box"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-grid-item',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 父组件数据
+        parentData: {
+          // 按下去的样式
+          hoverClass: '',
+          col: 3
+        }
+      }
+    },
+    created() {
+      // 父组件实例
+      this.updateParentData()
+      this.parent.children.push(this)
+    },
+    computed: {
+      // 计算每个宫格的宽度
+      gridWidth() {
+        // #ifdef MP-WEIXIN
+        return '100%'
+        // #endif
+        // #ifndef MP-WEIXIN
+        return 100 / Number(this.parentData.col) + '%'
+        // #endif
+      },
+      // 点击效果
+      hoverClass() {
+        return this.parentData.hoverClass !== 'none' 
+                 ? this.parentData.hoverClass + ' tn-grid-item--hover' 
+                 : this.parentData.hoverClass
+      }
+    },
+    methods: {
+      // 获取父组件参数
+      updateParentData() {
+        this.getParentData('tn-grid')
+      },
+      click() {
+        this.$emit('click', this.index)
+        this.parent && this.parent.click(this.index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-grid-item {
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex-direction: row;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;
+    
+    /* #ifdef MP */
+    // float: left;
+    /* #endif */
+    
+    &__box {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      flex-direction: row;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+    
+    &--hover {
+      background: $tn-space-color !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-grid/tn-grid.vue b/tuniao-ui/components/tn-grid/tn-grid.vue
new file mode 100644
index 0000000..f5487c6
--- /dev/null
+++ b/tuniao-ui/components/tn-grid/tn-grid.vue
@@ -0,0 +1,111 @@
+<template>
+  <view
+    class="tn-grid-class tn-grid"
+    :style="{
+      justifyContent: gridAlignStyle
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-grid',
+    props: {
+      // 分成几列
+      col: {
+        type: [Number, String],
+        default: 3
+      },
+      // 宫格对齐方式 
+      // left 左对齐 center 居中对齐 right 右对齐
+      align: {
+        type: String,
+        default: 'left'
+      },
+      // 点击时的效果，none没有效果
+      hoverClass: {
+        type: String,
+        default: 'tn-hover'
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件和子组件需要共享参数变化，通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件是否有updateParentData方式，有才执行
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      // 如果将children定义在data中，在微信小程序会造成循环引用而报错
+      this.children = []
+    },
+    computed: {
+      // 计算父组件的值是否发生变化
+      parentData() {
+        return [this.hoverClass, this.col, this.border]
+      },
+      // 宫格对齐方式
+      gridAlignStyle() {
+        switch(this.align) {
+          case 'left':
+            return 'flex-start'
+          case 'center':
+            return 'center'
+          case 'right':
+            return 'flex-end'
+          default:
+            return 'flex-start'
+        }
+      }
+    },
+    methods: {
+      click(index) {
+        this.$emit('click', index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  // 组件中兼容小程序的方式，不过不能使用对齐方式
+  // .tn-grid {
+  //   width: 100%;
+  //   /* #ifdef MP */
+  //   position: relative;
+  //   box-sizing: border-box;
+  //   overflow: hidden;
+  //   /* #endif */
+    
+  //   /* #ifndef MP */
+  //   /* #ifndef APP-NVUE */
+  //   display: flex;
+  //   flex-direction: row;
+  //   /* #endif */
+  //   flex-wrap: wrap;
+  //   align-items: center;
+  //   /* #endif */
+  // }
+  
+  // 在使用组件时兼容小程序
+  .tn-grid {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue b/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue
new file mode 100644
index 0000000..3a96b98
--- /dev/null
+++ b/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue
@@ -0,0 +1,995 @@
+<template>
+  <view v-if="!disabled" class="tn-image-upload-class tn-image-upload">
+    <movable-area
+      class="tn-image-upload__movable-area"
+      :style="{
+        height: movableAreaHeight
+      }"
+      @mouseenter="mouseEnterArea"
+      @mouseleave="mouseLeaveArea"
+    >
+      <block
+        v-for="(item, index) in lists"
+        :key="item.id"
+      >
+        <movable-view
+          class="tn-image-upload__movable-view"
+          :style="{
+            width: $tn.string.getLengthUnitValue(width),
+            height: $tn.string.getLengthUnitValue(height),
+            zIndex: item.zIndex,
+            opacity: item.opacity,
+            
+          }"
+          :x="item.x"
+          :y="item.y"
+          direction="all"
+          :damping="40"
+          :disabled="item.disabled"
+          @change="movableChange($event, item)"
+          @touchstart="movableStart(item)"
+          @mousedown="movableStart(item)"
+          @touchend="movableEnd(item)"
+          @mouseup="movableEnd(item)"
+          @longpress="movableLongPress(item)"
+        >
+          <view
+            class="tn-image-upload__item tn-image-upload__item-preview"
+            :style="{
+              width: $tn.string.getLengthUnitValue(itemWidth, 'px'),
+              height: $tn.string.getLengthUnitValue(itemHeight, 'px'),
+              transform: `scale(${item.scale})`
+            }"
+          >
+            <!-- 删除按钮 -->
+            <view
+              v-if="deleteable"
+              class="tn-image-upload__item-preview__delete"
+              @tap.stop="deleteItem(index)"
+              :style="{
+                borderTopColor: deleteBackgroundColor
+              }"
+            >
+              <view
+                class="tn-image-upload__item-preview__delete--icon"
+                :class="[`tn-icon-${deleteIcon}`]"
+                :style="{
+                  color: deleteColor
+                }"
+              ></view>
+            </view>
+            <!-- 进度条 -->
+            <tn-line-progress
+              v-if="showProgress && item.data.progress > 0 && !item.data.error"
+              class="tn-image-upload__item-preview__progress"
+              :percent="item.data.progress"
+              :showPercent="false"
+              :round="false"
+              :height="8"
+            ></tn-line-progress>
+            <!-- 重试按钮 -->
+            <view v-if="item.data.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
+            <!-- 图片信息 -->
+            <image
+              class="tn-image-upload__item-preview__image"
+              :src="item.data.url || item.data.path"
+              :mode="imageMode"
+              @tap.stop="doPreviewImage(item.data.url || item.data.path, index)"
+            ></image>
+          </view>
+        </movable-view>
+      </block>
+      
+      <!-- 添加按钮 -->
+      <view
+        v-if="maxCount > lists.length"
+        class="tn-image-upload__add"
+        :style="{
+          top: addBtn.y + 'px',
+          left: addBtn.x + 'px',
+          width: $tn.string.getLengthUnitValue(itemWidth, 'px'),
+          height: $tn.string.getLengthUnitValue(itemHeight, 'px')
+        }"
+        @tap="selectFile"
+      >
+        <!-- 添加按钮 -->
+        <view
+          class="tn-image-upload__item tn-image-upload__item-add"
+          hover-class="tn-hover-class"
+          hover-stay-time="150"
+          :style="{
+            width: $tn.string.getLengthUnitValue(itemWidth, 'px'),
+            height: $tn.string.getLengthUnitValue(itemHeight, 'px')
+          }"
+        >
+          <view class="tn-image-upload__item-add--icon tn-icon-add"></view>
+          <view class="tn-image-upload__item-add__tips">{{ uploadText }}</view>
+        </view>
+      </view>
+    </movable-area>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-image-upload-drag',
+    props: {
+      // 已上传的文件列表
+      fileList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 上传图片地址
+      action: {
+        type: String,
+        default: ''
+      },
+      // 上传文件的字段名称
+      name: {
+        type: String,
+        default: 'file'
+      },
+      // 头部信息
+      header: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 携带的参数
+      formData: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动上传
+      autoUpload: {
+        type: Boolean,
+        default: true
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number,
+        default: 9
+      },
+      // 预览上传图片的裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 点击图片是否全屏预览
+      previewFullImage: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示进度条
+      showProgress: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示删除按钮
+      deleteable: {
+        type: Boolean,
+        default: true
+      },
+      // 删除按钮图标
+      deleteIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 删除按钮的背景颜色
+      deleteBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 删除按钮的颜色
+      deleteColor: {
+        type: String,
+        default: ''
+      },
+      // 上传区域提示文字
+      uploadText: {
+        type: String,
+        default: '选择图片'
+      },
+      // 显示toast提示
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 预览图片和选择图片区域的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 预览图片和选择图片区域的高度
+      height: {
+        type: Number,
+        default: 200
+      },
+      // 选择图片的尺寸
+      // 参考上传文档 https://uniapp.dcloud.io/api/media/image
+      sizeType: {
+        type: Array,
+        default() {
+          return ['original', 'compressed']
+        }
+      },
+      // 图片来源
+      sourceType: {
+        type: Array,
+        default() {
+          return ['album', 'camera']
+        }
+      },
+      // 是否可以多选
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+      // 文件大小(byte)
+      maxSize: {
+        type: Number,
+        default: 10 * 1024 * 1024
+      },
+      // 允许上传的类型
+      limitType: {
+        type: Array,
+        default() {
+          return ['png','jpg','jpeg','webp','gif','image']
+        }
+      },
+      // 是否自定转换为json
+      toJson: {
+        type: Boolean,
+        default: true
+      },
+      // 上传前钩子函数，每个文件上传前都会执行
+      beforeUpload: {
+        type: Function,
+        default: null
+      },
+      // 删除文件前钩子函数
+      beforeRemove: {
+        type: Function,
+        default: null
+      },
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      movableAreaHeight() {
+        if (this.lists.length < this.maxCount) {
+          return Math.ceil((this.lists.length + 1) / this.baseData.columns) * uni.upx2px(this.height) + 'px'
+        } else {
+          return Math.ceil(this.lists.length / this.baseData.columns) * uni.upx2px(this.height) + 'px'
+        }
+      },
+      itemWidth() {
+        return uni.upx2px(this.width) - (uni.upx2px(10) * 2)
+      },
+      itemHeight() {
+        return uni.upx2px(this.height) - (uni.upx2px(10) * 2)
+      }
+    },
+    data() {
+      return {
+        lists: [],
+        uploading: false,
+        baseData: {
+          windowWidth: 0,
+          columns: 0,
+          dragItem: null,
+          widthPx: 0,
+          heightPx: 0
+        },
+        addBtn: {
+          x: 0,
+          y: 0
+        },
+        timer: null,
+        dragging: false
+      }
+    },
+    watch: {
+      // fileList: {
+      //   handler(val) {
+      //     val.map(value => {
+      //       // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+      //       // 会触发watch，导致重新把原来的图片再次添加到this.lists
+      //       // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+      //       let tmp = this.lists.some(listVal => {
+      //         return listVal.url === value.url
+      //       })
+      //       // 如果内部没有这张图片，则添加到内部
+      //       !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })
+      //     })
+      //   },
+      //   immediate: true
+      // },
+      lists(val) {
+        this.$emit('on-list-change', this.sortList(), this.index)
+      }
+    },
+    created() {
+      this.baseData.windowWidth = uni.getSystemInfoSync().windowWidth
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.updateDragInfo()
+      })
+    },
+    methods: {
+      // 清除列表
+      clear() {
+        this.lists = []
+        this.updateAddBtnPositioin()
+      },
+      // 重新上传队列中上传失败所有文件
+      reUpload() {
+        this.uploadFile()
+      },
+      // 选择图片
+      selectFile() {
+        if (this.disabled) return
+        const {
+          name = '',
+          maxCount,
+          multiple,
+          maxSize,
+          sizeType,
+          lists,
+          camera,
+          compressed,
+          sourceType
+        } = this
+        let chooseFile = null
+        const newMaxCount = maxCount - lists.length
+        // 只选择图片的时候使用 chooseImage 来实现
+        chooseFile = new Promise((resolve, reject) => {
+          uni.chooseImage({
+            count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
+            sourceType,
+            sizeType,
+            success: resolve,
+            fail: reject
+          })
+        })
+        chooseFile.then(res => {
+          let file = null
+          let listOldLength = lists.length
+          res.tempFiles.map((val, index) => {
+            if (!this.checkFileExt(val)) return
+            
+            // 是否超出最大限制数量
+            if (!multiple && index >= 1) return
+            if (val.size > maxSize) {
+              this.$emit('on-oversize', val, this.sortList(), this.index)
+              this.showToast('超出可允许文件大小')
+            } else {
+              if (maxCount <= lists.length) {
+                this.$emit('on-exceed', val, this.sortList(), this.index)
+                this.showToast('超出最大允许的文件数')
+                return
+              }
+              lists.push(this.handleDragListItem({
+                url: val.path,
+                progress: 0,
+                error: false,
+                file: val
+              }))
+              this.updateAddBtnPositioin()
+            }
+          })
+          this.$emit('on-choose-complete', this.sortList(), this.index)
+          if (this.autoUpload) this.uploadFile(listOldLength)
+        }).catch(err => {
+          this.$emit('on-choose-fail', err)
+        })
+      },
+      // 提示用户信息
+      showToast(message, force = false) {
+        if (this.showTips || force) {
+          this.$tn.message.toast(message)
+        }
+      },
+      // 手动上传，通过ref进行调用
+      upload() {
+        this.uploadFile()
+      },
+      // 对失败图片进行再次上传
+      retry(index) {
+        this.lists[index].data.progress = 0
+        this.lists[index].data.error = false
+        this.lists[index].data.response = null
+        this.$tn.message.loading('重新上传')
+        this.uploadFile(index)
+      },
+      // 上传文件
+      async uploadFile(index = 0) {
+        if (this.disabled) return
+        if (this.uploading) return
+        // 全部上传完成
+        if (index >= this.lists.length) {
+          this.$emit('on-uploaded', this.sortList(), this.index)
+          return
+        }
+        // 检查是否已经全部上传或者上传中
+        if (this.lists[index].data.progress === 100) {
+          this.lists[index].data.uploadTask = null
+          if (this.autoUpload) this.uploadFile(index + 1)
+          return
+        }
+        // 执行before-upload钩子
+        if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，
+          // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)
+          let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)
+          // 判断是否返回了Promise
+          if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+            await beforeResponse.then(res => {
+              // promise返回成功，不进行操作继续
+            }).catch(err => {
+              // 进入catch回调的话，继续下一张
+              return this.uploadFile(index + 1)
+            })
+          } else if (beforeResponse === false) {
+            // 如果返回flase，继续下一张图片上传
+            return this.uploadFile(index + 1)
+          } else {
+            // 为true的情况，不进行操作
+          }
+        }
+        // 检查上传地址
+        if (!this.action) {
+          this.showToast('请配置上传地址', true)
+          return
+        }
+        this.lists[index].data.error = false
+        this.uploading = true
+        // 创建上传对象
+        const task = uni.uploadFile({
+          url: this.action,
+          filePath: this.lists[index].data.url,
+          name: this.name,
+          formData: this.formData,
+          header: this.header,
+          success: res => {
+            // 判断啊是否为json字符串，将其转换为json格式
+            let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
+            if (![200, 201, 204].includes(res.statusCode)) {
+              this.uploadError(index, data)
+            } else {
+              this.lists[index].data.response = data
+              this.lists[index].data.progress = 100
+              this.lists[index].data.error = false
+              this.$emit('on-success', data, index, this.sortList(), this.index)
+            }
+          },
+          fail: err => {
+            this.uploadError(index, err)
+          },
+          complete: res => {
+            this.$tn.message.closeLoading()
+            this.uploading = false
+            this.uploadFile(index + 1)
+            this.$emit('on-change', res, index, this.sortList(), this.index)
+          }
+        })
+        this.lists[index].uploadTask = task
+        task.onProgressUpdate(res => {
+          if (res.progress > 0) {
+            this.lists[index].data.progress = res.progress
+            this.$emit('on-progress', res, index, this.sortList(), this.index)
+          }
+        })
+      },
+      // 上传失败
+      uploadError(index, err) {
+        this.lists[index].data.progress = 0
+        this.lists[index].data.error = true
+        this.lists[index].data.response = null
+        this.showToast('上传失败，请重试')
+        this.$emit('on-error', err, index, this.sortList(), this.index)
+      },
+      // 删除一个图片
+      deleteItem(index) {
+        if (!this.deleteable) return
+        this.$tn.message.modal(
+          '提示',
+          '您确定要删除吗？',
+          async () => {
+            // 先检查是否有定义before-remove移除前钩子
+            // 执行before-remove钩子
+            if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
+              let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)
+              // 判断是否返回promise 
+              if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+                await beforeResponse.then(res => {
+                  // promise返回成功不进行操作
+                  this.handlerDeleteItem(index)
+                }).catch(err => {
+                  this.showToast('删除操作被中断')
+                })
+              } else if (beforeResponse === false) {
+                this.showToast('删除操作被中断')
+              } else {
+                this.handlerDeleteItem(index)
+              }
+            } else {
+              this.handlerDeleteItem(index)
+            }
+          }, true)
+      },
+      // 移除文件操作
+      handlerDeleteItem(index) {
+        // 如果文件正在上传中，终止上传任务
+        if (this.lists[index].data.progress < 100 && this.lists[index].data.progress > 0) {
+          typeof this.lists[index].data.uploadTask !== 'undefined' && this.lists[index].data.uploadTask.abort()
+        }
+        this.remove(index)
+        this.$forceUpdate()
+        this.$emit('on-remove', index, this.sortList(), this.index)
+        this.showToast('删除成功')
+      },
+      // 移除文件，通过ref手动形式进行调用
+      remove(index) {
+        if (!this.deleteable) return
+        // 判断索引合法
+        if (index >= 0 && index < this.lists.length) {
+          let currentItemIndex = this.lists[index].index
+          this.lists.splice(index, 1)
+          // 重新排列列表信息
+          for (let item of this.lists) {
+            if (item.index > currentItemIndex) {
+              item.index -= 1
+              item.x = item.positionX * this.baseData.widthPx
+              item.y = item.positionY * this.baseData.heightPx
+              item.positionX = item.index % this.baseData.columns
+              item.positionY = Math.floor(item.index / this.baseData.columns)
+              this.$nextTick(() => {
+                item.x = item.positionX * this.baseData.widthPx
+                item.y = item.positionY * this.baseData.heightPx
+              })
+            }
+          }
+          
+          this.updateAddBtnPositioin()
+        }
+      },
+      // 预览图片
+      doPreviewImage(url, index) {
+        if (!this.previewFullImage) return
+        const images = this.lists.sort((l1, l2) => { return l1.index - l2.index}).map(item => item.data.url || item.data.path)
+        uni.previewImage({
+          urls: images,
+          current: url,
+          success: () => {
+            this.$emit('on-preview', url, this.sortList(), this.index)
+          },
+          fail: () => {
+            this.showToast('预览图片失败')
+          }
+        })
+      },
+      // 检查文件后缀是否合法
+      checkFileExt(file) {
+        // 是否为合法后缀
+        let noArrowExt = false
+        // 后缀名
+        let fileExt = ''
+        const reg = /.+\./
+        
+        // #ifdef H5
+        fileExt = file.name.replace(reg, '').toLowerCase()
+        // #endif
+        // #ifndef H5
+        fileExt = file.path.replace(reg, '').toLowerCase()
+        // #endif
+        noArrowExt = this.limitType.some(ext => {
+          return ext.toLowerCase() === fileExt
+        })
+        if (!noArrowExt) this.showToast(`不支持${fileExt}格式的文件`)
+        return noArrowExt
+      },
+      
+      /********************* 拖拽处理 ********************/
+      
+      // 更新拖拽信息
+      updateDragInfo() {
+        this.baseData.widthPx = uni.upx2px(this.width)
+        this.baseData.heightPx = uni.upx2px(this.height)
+        
+        // 获取可移动区域的信息，用于判断当前有多少列
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.tn-image-upload__movable-area').boundingClientRect()
+        query.exec((res) => {
+          if (!res) {
+            setTimeout(() => {
+              this.updateDragInfo()
+            }, 10)
+            return
+          }
+          this.baseData.columns = Math.floor(res[0].width / this.baseData.widthPx)
+          
+          // 初始化可拖拽列表信息
+          this.lists = []
+          this.fileList.forEach((item) => {
+            // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+            // 会触发watch，导致重新把原来的图片再次添加到this.lists
+            // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+            let tmp = this.lists.map(value => {
+              return value.data
+            }).some(listVal => {
+              return listVal.url === item.url
+            })
+            // 如果内部没有这张图片，则添加到内部
+            !tmp && this.lists.push(this.handleDragListItem({
+              url: item.url,
+              error: false,
+              progress: 100
+            }))
+          })
+          
+          // 更新添加按钮位置
+          this.updateAddBtnPositioin()
+        })
+      },
+      // 处理拖拽列表信息
+      handleDragListItem(item) {
+        const positionX = this.lists.length % this.baseData.columns
+        const positionY = Math.floor(this.lists.length / this.baseData.columns)
+        const x = positionX * this.baseData.widthPx
+        const y = positionY * this.baseData.heightPx
+        return {
+          id: this.unique(),
+          x,
+          y,
+          preX: x,
+          preY: y,
+          positionX,
+          positionY,
+          zIndex:1,
+          disabled: true,
+          opacity: 1,
+          scale: 1,
+          index: this.lists.length,
+          offset: 0,
+          moveEnd: false,
+          moving: false,
+          data: {
+            ...item
+          }
+        }
+      },
+      // 生成元素唯一id
+      unique(n = 6) {
+        let id = ''
+        for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)
+        return 'tn_' + new Date().getTime() + id
+      },
+      // 更新添加按钮位置
+      updateAddBtnPositioin() {
+        if (this.lists.length >= this.maxCount) return
+        
+        this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
+        this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
+      },
+      // 获取排序后数据
+      sortList() {
+        const list = this.lists.slice()
+        list.sort((l1, l2) => {
+          return l1.index - l2.index
+        })
+        return list.map(item => {
+          return item.data
+        })
+      },
+      mouseEnterArea () {
+        // #ifdef H5
+        this.lists.forEach(item => {
+          item.disabled = false
+        })
+        // #endif
+      },
+      mouseLeaveArea () {
+        // #ifdef H5
+        if (this.baseData.dragItem) {
+          this.lists.forEach(item => {
+            item.disabled = true
+            item.zIndex = 1
+            item.offset = 0
+            item.moveEnd = true
+            if (item.id === this.baseData.dragItem.id) {
+              if (this.timer) {
+                clearTimeout(this.timer)
+                this.timer = null
+              }
+              item.x = item.preX
+              item.y = item.preY
+              this.$nextTick(() => {
+                item.x = item.positionX * this.baseData.widthPx
+                item.y = item.positionY * this.baseData.heightPx
+                this.baseData.dragItem = null
+              })
+            }
+          })
+          this.dragging = false
+        }
+        // #endif
+      },
+      movableLongPress(item) {
+        // #ifndef H5
+          uni.vibrateShort()
+          // console.log("LongPress--------------------------------------------------------------");
+          this.lists.forEach(value => {
+            value.moving = false
+          })
+          this.dragging = true
+          // 设置对应的元素允许拖动
+          const index = this.lists.findIndex(obj => {
+            return obj.id === item.id
+          })
+          item.disabled = false
+          item.opacity = 0.7
+          item.scale = 1.1
+          this.$set(this.lists, index, item)
+        // #endif
+      },
+      movableChange (e, item) {
+        if (!item || !this.dragging) return
+        // console.log("movableChange");
+        item.moving = true
+        item.preX = e.detail.x
+        item.preY = e.detail.y
+        // console.log(item.preX, item.preY);
+        
+        if (e.detail.source === 'touch') {
+          if (!item.moveEnd) {
+            item.offset = Math.sqrt(
+              Math.pow(item.preX - item.positionX * this.baseData.widthPx, 2) + 
+              Math.pow(item.preY - item.positionY * this.baseData.heightPx, 2))
+          }
+          let x = Math.floor((e.detail.x + this.baseData.widthPx / 2) / this.baseData.widthPx)
+          if (x > this.baseData.columns) return
+          let y = Math.floor((e.detail.y + this.baseData.heightPx / 2) / this.baseData.heightPx)
+          let index = this.baseData.columns * y + x
+          if (item.index !== index && index < this.lists.length) {
+            for (let obj of this.lists) {
+              if (item.index > index && obj.index >= index && obj.index < item.index) {
+                this.updateItemPosition(obj, 1)
+              } else if (item.index < index && obj.index <= index && obj.index > item.index) {
+                this.updateItemPosition(obj, -1)
+              } else if (item.id != obj.id) {
+                // obj.offset = 0
+                // console.log(obj.moving);
+                // if (!obj.moving) {
+                //   obj.preX = obj.positionX * this.baseData.widthPx
+                //   obj.preY = obj.positionY * this.baseData.heightPx
+                //   console.log("moving", obj.id, obj.preX, obj.preY);
+                // }
+                // obj.x = obj.preX
+                // obj.y = obj.preY
+                // // console.log(obj.id, obj.preX, obj.preY);
+                // this.$nextTick(() => {
+                //   obj.x = obj.positionX * this.baseData.widthPx
+                //   obj.y = obj.positionY * this.baseData.heightPx
+                // })
+              }
+            }
+            item.index = index
+            item.positionX = x
+            item.positionY = y
+            // TODO 发送事件
+          }
+        }
+      },
+      movableStart (item) {
+        // console.log("movableStart");
+        this.lists.forEach(item => {
+          item.zIndex = 1
+          // #ifdef H5
+          item.disabled = false
+          // #endif
+        })
+        item.zIndex = 10
+        item.moveEnd = false
+        this.baseData.dragItem = item
+        // #ifdef H5
+        this.dragging =true
+        this.timer = setTimeout(() => {
+          item.opacity = 0.7
+          item.scale = 1.1
+          clearTimeout(this.timer)
+          this.timer = null
+        }, 200)
+        // #endif
+      },
+      movableEnd (item) {
+        if (!this.dragging) return
+        // console.log("movableEnd");
+        const index = this.lists.findIndex(obj => {
+          return obj.id === item.id
+        })
+        if (!item.moving) {
+          item.preX = item.positionX * this.baseData.widthPx
+          item.preY = item.positionY * this.baseData.heightPx
+        }
+        item.x = item.preX
+        item.y = item.preY
+        item.offset = 0
+        item.moveEnd = true
+        item.moving = false
+        item.disabled = true
+        // console.log(item.x, item.y);
+        // console.log(item.id, item.moving);
+        // this.$set(this.lists, index, item)
+        // this.lists[index] = item
+        // console.log(this.lists[index]);
+        this.lists.forEach(listValue => {
+          listValue.moving = false
+          listValue.disabled = true
+        })
+        this.$nextTick(() => {
+          item.x = item.positionX * this.baseData.widthPx
+          item.y = item.positionY * this.baseData.heightPx
+          item.opacity = 1
+          item.scale = 1
+          this.baseData.dragItem = null
+          this.dragging = false
+          // console.log(item.x, item.y);
+          this.$set(this.lists, index, item)
+        })
+        this.$emit('sort-list', this.sortList())
+      },
+      // 更新图片位置信息
+      updateItemPosition(item, offset) {
+        const index = this.lists.findIndex(obj => {
+          return obj.id === item.id
+        })
+        item.index += offset
+        item.offset = 0
+        item.positionX = item.index % this.baseData.columns
+        item.positionY = Math.floor(item.index / this.baseData.columns)
+        if (!item.moving) {
+          item.preX = item.positionX * this.baseData.widthPx
+          item.preY = item.positionY * this.baseData.heightPx
+        }
+        item.x = item.preX
+        item.y = item.preY
+        // console.log("updateItemPosition", item.id, item.preX, item.preY);
+        // this.$set(this.lists, index, item)
+        this.$nextTick(() => {
+          item.x = item.positionX * this.baseData.widthPx
+          item.y = item.positionY * this.baseData.heightPx
+          this.$set(this.lists, index, item)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-image-upload {
+    position: relative;
+    
+    &__movable-area {
+      width: 100%;
+    }
+    
+    &__movable-view {
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+    
+    &__item {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      width: 200rpx;
+      height: 200rpx;
+      background-color: transparent;
+      position: relative;
+      border-radius: 10rpx;
+      overflow: hidden;
+      
+      &-preview {
+        border: 1rpx solid $tn-border-solid-color;
+        
+        &__delete {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 10;
+          border-top: 60rpx solid;
+          border-left: 60rpx solid transparent;
+          border-top-color: $tn-color-red;
+          width: 0rpx;
+          height: 0rpx;
+          
+          &--icon {
+            position: absolute;
+            top: -50rpx;
+            right: 6rpx;
+            color: #FFFFFF;
+            font-size: 24rpx;
+            line-height: 1;
+          }
+        }
+        
+        &__progress {
+          position: absolute;
+          width: auto;
+          bottom: 0rpx;
+          left: 0rpx;
+          right: 0rpx;
+          z-index: 9;
+          /* #ifdef MP-WEIXIN */
+          display: inline-flex;
+          /* #endif */
+        }
+        
+        &__error-btn {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: $tn-color-red;
+          color: #FFFFFF;
+          font-size: 20rpx;
+          padding: 8rpx 0;
+          text-align: center;
+          z-index: 9;
+          line-height: 1;
+        }
+        
+        &__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          border-radius: 10rpx;
+        }
+      }
+      
+      &-add {
+        flex-direction: column;
+        color: $tn-content-color;
+        font-size: 26rpx;
+        
+        &--icon {
+          font-size: 40rpx;
+        }
+        
+        &__tips {
+          margin-top: 20rpx;
+          line-height: 40rpx;
+        }
+      }
+    }
+    
+    &__add {
+      background-color: $tn-font-holder-color;
+      position: absolute;
+      // margin: 10rpx;
+      // margin-left: 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-image-upload/tn-image-upload.vue b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue
new file mode 100644
index 0000000..e7e9418
--- /dev/null
+++ b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue
@@ -0,0 +1,695 @@
+<template>
+  <view class="tn-image-upload-class tn-image-upload">
+    <block v-if="showUploadList">
+      <view
+        v-for="(item, index) in lists"
+        :key="index"
+        class="tn-image-upload__item tn-image-upload__item-preview"
+        :style="{
+          width: $tn.string.getLengthUnitValue(width),
+          height: $tn.string.getLengthUnitValue(height)
+        }"
+      >
+        <!-- 删除按钮 -->
+        <view
+          v-if="deleteable"
+          class="tn-image-upload__item-preview__delete"
+          @tap.stop="deleteItem(index)"
+          :style="{
+            borderTopColor: deleteBackgroundColor
+          }"
+        >
+          <view
+            class="tn-image-upload__item-preview__delete--icon"
+            :class="[`tn-icon-${deleteIcon}`]"
+            :style="{
+              color: deleteColor
+            }"
+          ></view>
+        </view>
+        <!-- 进度条 -->
+        <tn-line-progress
+          v-if="showProgress && item.progress > 0 && !item.error"
+          class="tn-image-upload__item-preview__progress"
+          :percent="item.progress"
+          :showPercent="false"
+          :round="false"
+          :height="8"
+        ></tn-line-progress>
+        <!-- 重试按钮 -->
+        <view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
+        <!-- 图片信息 -->
+        <image
+          class="tn-image-upload__item-preview__image"
+          :src="item.url || item.path"
+          :mode="imageMode"
+          @tap.stop="doPreviewImage(item.url || item.path, index)"
+        ></image>
+      </view>
+    </block>
+    <!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;">
+      
+    </view> -->
+    <!-- 自定义图片展示列表 -->
+    <slot name="file" :file="lists"></slot>
+    
+    <!-- 添加按钮 -->
+    <view v-if="maxCount > lists.length" class="tn-image-upload__add" :class="{'tn-image-upload__add--custom': customBtn}" @tap="selectFile">
+      <!-- 添加按钮 -->
+      <view
+        v-if="!customBtn"
+        class="tn-image-upload__item tn-image-upload__item-add"
+        hover-class="tn-hover-class"
+        hover-stay-time="150"
+        :style="{
+          width: $tn.string.getLengthUnitValue(width),
+          height: $tn.string.getLengthUnitValue(height)
+        }"
+      >
+        <view class="tn-image-upload__item-add--icon tn-icon-add"></view>
+        <view class="tn-image-upload__item-add__tips">{{ uploadText }}</view>
+      </view>
+      <!-- 自定义添加按钮 -->
+      <view>
+        <slot name="addBtn"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-image-upload',
+    props: {
+      // 已上传的文件列表
+      fileList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+	  isUniCloud:{
+		type: Boolean,
+		default: false
+	  },
+      // 上传图片地址
+      action: {
+        type: String,
+        default: ''
+      },
+      // 上传文件的字段名称
+      name: {
+        type: String,
+        default: 'file'
+      },
+      // 头部信息
+      header: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 携带的参数
+      formData: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动上传
+      autoUpload: {
+        type: Boolean,
+        default: true
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number,
+        default: 9
+      },
+      // 是否显示组件自带的图片预览
+      showUploadList: {
+        type: Boolean,
+        default: true
+      },
+      // 预览上传图片的裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 点击图片是否全屏预览
+      previewFullImage: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示进度条
+      showProgress: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示删除按钮
+      deleteable: {
+        type: Boolean,
+        default: true
+      },
+      // 删除按钮图标
+      deleteIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 删除按钮的背景颜色
+      deleteBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 删除按钮的颜色
+      deleteColor: {
+        type: String,
+        default: ''
+      },
+      // 上传区域提示文字
+      uploadText: {
+        type: String,
+        default: '选择图片'
+      },
+      // 显示toast提示
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义选择图标按钮
+      customBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 预览图片和选择图片区域的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 预览图片和选择图片区域的高度
+      height: {
+        type: Number,
+        default: 200
+      },
+      // 选择图片的尺寸
+      // 参考上传文档 https://uniapp.dcloud.io/api/media/image
+      sizeType: {
+        type: Array,
+        default() {
+          return ['original', 'compressed']
+        }
+      },
+      // 图片来源
+      sourceType: {
+        type: Array,
+        default() {
+          return ['album', 'camera']
+        }
+      },
+      // 是否可以多选
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+      // 文件大小(byte)
+      maxSize: {
+        type: Number,
+        default: 10 * 1024 * 1024
+      },
+      // 允许上传的类型
+      limitType: {
+        type: Array,
+        default() {
+          return ['png','jpg','jpeg','webp','gif','image']
+        }
+      },
+      // 是否自定转换为json
+      toJson: {
+        type: Boolean,
+        default: true
+      },
+      // 上传前钩子函数，每个文件上传前都会执行
+      beforeUpload: {
+        type: Function,
+        default: null
+      },
+      // 删除文件前钩子函数
+      beforeRemove: {
+        type: Function,
+        default: null
+      },
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      
+    },
+    data() {
+      return {
+        lists: [],
+        uploading: false
+      }
+    },
+    watch: {
+      fileList: {
+        handler(val) {
+          val.map(value => {
+            // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+            // 会触发watch，导致重新把原来的图片再次添加到this.lists
+            // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+            let tmp = this.lists.some(listVal => {
+              return listVal.url === value.url
+            })
+            // 如果内部没有这张图片，则添加到内部
+            !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })
+          })
+        },
+        immediate: true
+      },
+      lists(val) {
+        this.$emit('on-list-change', val, this.index)
+      }
+    },
+    methods: {
+      // 清除列表
+      clear() {
+        this.lists = []
+      },
+      // 重新上传队列中上传失败所有文件
+      reUpload() {
+        this.uploadFile()
+      },
+      // 选择图片
+      selectFile() {
+        if (this.disabled) return
+        const {
+          name = '',
+          maxCount,
+          multiple,
+          maxSize,
+          sizeType,
+          lists,
+          camera,
+          compressed,
+          sourceType
+        } = this
+        let chooseFile = null
+        const newMaxCount = maxCount - lists.length
+        // 只选择图片的时候使用 chooseImage 来实现
+        chooseFile = new Promise((resolve, reject) => {
+          uni.chooseImage({
+            count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
+            sourceType,
+            sizeType,
+            success: resolve,
+            fail: reject
+          })
+        })
+        chooseFile.then(res => {
+          let file = null
+          let listOldLength = lists.length
+          res.tempFiles.map((val, index) => {
+			 if (!this.checkFileExt(val)) return
+            
+            // 是否超出最大限制数量
+            if (!multiple && index >= 1) return
+            if (val.size > maxSize) {
+              this.$emit('on-oversize', val, lists, this.index)
+              this.showToast('超出可允许文件大小')
+            } else {
+              if (maxCount <= lists.length) {
+                this.$emit('on-exceed', val, lists, this.index)
+                this.showToast('超出最大允许的文件数')
+                return
+              }
+              lists.push({
+                url: val.path,
+                progress: 0,
+                error: false,
+                file: val,
+				//#ifdef H5
+				extension: val.name.substring(val.name.lastIndexOf("."))  //图片文件后缀名
+				//#endif
+				//#ifndef H5
+				extension: val.path.substring(val.path.lastIndexOf(".")) //图片文件后缀名
+				//#endif
+              })
+            }
+          })
+          this.$emit('on-choose-complete', this.lists, this.index)
+          if (this.autoUpload) this.uploadFile(listOldLength)
+        }).catch(err => {
+          this.$emit('on-choose-fail', err)
+        })
+      },
+      // 提示用户信息
+      showToast(message, force = false) {
+        if (this.showTips || force) {
+          this.$tn.message.toast(message)
+        }
+      },
+      // 手动上传，通过ref进行调用
+      upload() {
+        this.uploadFile()
+      },
+      // 对失败图片进行再次上传
+      retry(index) {
+        this.lists[index].progress = 0
+        this.lists[index].error = false
+        this.lists[index].response = null
+        this.$tn.message.loading('重新上传')
+        this.uploadFile(index)
+      },
+      // 上传文件
+      async uploadFile(index = 0) {
+		var that=this;
+        if (this.disabled) return
+        if (this.uploading) return
+        // 全部上传完成
+        if (index >= this.lists.length) {
+          this.$emit('on-uploaded', this.lists, this.index)
+          return
+        }
+        // 检查是否已经全部上传或者上传中
+        if (this.lists[index].progress === 100) {
+          this.lists[index].uploadTask = null
+          if (this.autoUpload) this.uploadFile(index + 1)
+          return
+        }
+        // 执行before-upload钩子
+        if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，
+          // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)
+          let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)
+          // 判断是否返回了Promise
+          if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+            await beforeResponse.then(res => {
+              // promise返回成功，不进行操作继续
+            }).catch(err => {
+              // 进入catch回调的话，继续下一张
+              return this.uploadFile(index + 1)
+            })
+          } else if (beforeResponse === false) {
+            // 如果返回flase，继续下一张图片上传
+            return this.uploadFile(index + 1)
+          } else {
+            // 为true的情况，不进行操作
+          }
+        }
+        // 检查上传地址
+		if(this.isUniCloud){
+			//如果是uinCloud
+			this.lists[index].error = false
+			this.uploading = true
+			// 创建上传对象
+			const task = uniCloud.uploadFile({
+				filePath: that.lists[index].url,
+				cloudPath: that.$tn.uuid() + that.lists[index].extension, //随机文件名+文件后缀
+				onUploadProgress(progressEvent) {
+					if (progressEvent.loaded > 0) {
+						that.lists[index].progress = Math.round(
+							(progressEvent.loaded * 100) / progressEvent.total
+						);
+						that.$emit('on-progress', progressEvent, index, that.lists, that.index)
+					}
+				},
+				success(res) {
+					if (res.success) {
+						that.lists[index].response = res
+						that.lists[index].progress = 100
+						that.lists[index].error = false
+						that.$emit('success', res, index, that.lists, that.index)
+					} else {
+						that.uploadError(index, res)
+					}
+				},
+				fail: (err) => {
+					that.uploadError(index, err)
+				},
+				complete: (res) => {
+					// this.$t.message.closeLoading()
+					that.uploading = false
+					that.uploadFile(index + 1)
+					that.$emit('on-change', res, index, that.lists, that.index)
+				}
+			});
+			that.lists[index].uploadTask = task
+		}else{
+			if (!this.action) {
+			  this.showToast('请配置上传地址', true)
+			  return
+			}
+			this.lists[index].error = false
+			this.uploading = true
+			// 创建上传对象
+			const task = uni.uploadFile({
+			  url: this.action,
+			  filePath: this.lists[index].url,
+			  name: this.name,
+			  formData: this.formData,
+			  header: this.header,
+			  success: res => {
+			    // 判断啊是否为json字符串，将其转换为json格式
+			    let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
+			    if (![200, 201, 204].includes(res.statusCode)) {
+			      this.uploadError(index, data)
+			    } else {
+			      this.lists[index].response = data
+			      this.lists[index].progress = 100
+			      this.lists[index].error = false
+			      this.$emit('on-success', data, index, this.lists, this.index)
+			    }
+			  },
+			  fail: err => {
+			    this.uploadError(index, err)
+			  },
+			  complete: res => {
+			    this.$tn.message.closeLoading()
+			    this.uploading = false
+			    this.uploadFile(index + 1)
+			    this.$emit('on-change', res, index, this.lists, this.index)
+			  }
+			})
+			this.lists[index].uploadTask = task
+			task.onProgressUpdate(res => {
+			  if (res.progress > 0) {
+			    this.lists[index].progress = res.progress
+			    this.$emit('on-progress', res, index, this.lists, this.index)
+			  }
+			})
+		}
+      },
+      // 上传失败
+      uploadError(index, err) {
+        this.lists[index].progress = 0
+        this.lists[index].error = true
+        this.lists[index].response = null
+        this.showToast('上传失败，请重试')
+        this.$emit('on-error', err, index, this.lists, this.index)
+      },
+      // 删除一个图片
+      deleteItem(index) {
+        if (!this.deleteable) return
+        this.$tn.message.modal(
+          '提示',
+          '您确定要删除吗？',
+          async () => {
+            // 先检查是否有定义before-remove移除前钩子
+            // 执行before-remove钩子
+            if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
+              let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)
+              // 判断是否返回promise 
+              if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+                await beforeResponse.then(res => {
+                  // promise返回成功不进行操作
+                  this.handlerDeleteItem(index)
+                }).catch(err => {
+                  this.showToast('删除操作被中断')
+                })
+              } else if (beforeResponse === false) {
+                this.showToast('删除操作被中断')
+              } else {
+                this.handlerDeleteItem(index)
+              }
+            } else {
+              this.handlerDeleteItem(index)
+            }
+          }, true)
+      },
+      // 移除文件操作
+      handlerDeleteItem(index) {
+        // 如果文件正在上传中，终止上传任务
+        if (this.lists[index].progress < 100 && this.lists[index].progress > 0) {
+          typeof this.lists[index].uploadTask !== 'undefined' && this.lists[index].uploadTask.abort()
+        }
+        this.lists.splice(index, 1)
+        this.$forceUpdate()
+        this.$emit('on-remove', index, this.lists, this.index)
+        this.showToast('删除成功')
+      },
+      // 移除文件，通过ref手动形式进行调用
+      remove(index) {
+        if (!this.deleteable) return
+        // 判断索引合法
+        if (index >= 0 && index < this.lists.length) {
+          this.lists.splice(index, 1)
+        }
+      },
+      // 预览图片
+      doPreviewImage(url, index) {
+        if (!this.previewFullImage) return
+        const images = this.lists.map(item => item.url || item.path)
+        uni.previewImage({
+          urls: images,
+          current: url,
+          success: () => {
+            this.$emit('on-preview', url, this.lists, this.index)
+          },
+          fail: () => {
+            this.showToast('预览图片失败')
+          }
+        })
+      },
+      // 检查文件后缀是否合法
+      checkFileExt(file) {
+        // 是否为合法后缀
+        let noArrowExt = false
+        // 后缀名
+        let fileExt = ''
+        const reg = /.+\./
+        
+        // #ifdef H5
+        fileExt = file.name.replace(reg, '').toLowerCase()
+        // #endif
+        // #ifndef H5
+        fileExt = file.path.replace(reg, '').toLowerCase()
+        // #endif
+        noArrowExt = this.limitType.some(ext => {
+          return ext.toLowerCase() === fileExt
+        })
+        if (!noArrowExt) this.showToast(`不支持${fileExt}格式的文件`)
+        return noArrowExt
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-image-upload {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    
+    &__item {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      width: 200rpx;
+      height: 200rpx;
+      overflow: hidden;
+      margin: 12rpx;
+      margin-left: 0;
+      background-color: $tn-font-holder-color;
+      position: relative;
+      border-radius: 10rpx;
+      
+      &-preview {
+        border: 1rpx solid $tn-border-solid-color;
+        
+        &__delete {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 10;
+          border-top: 60rpx solid;
+          border-left: 60rpx solid transparent;
+          border-top-color: $tn-color-red;
+          width: 0rpx;
+          height: 0rpx;
+          
+          &--icon {
+            position: absolute;
+            top: -50rpx;
+            right: 6rpx;
+            color: #FFFFFF;
+            font-size: 24rpx;
+            line-height: 1;
+          }
+        }
+        
+        &__progress {
+          position: absolute;
+          width: auto;
+          bottom: 0rpx;
+          left: 0rpx;
+          right: 0rpx;
+          z-index: 9;
+          /* #ifdef MP-WEIXIN */
+          display: inline-flex;
+          /* #endif */
+        }
+        
+        &__error-btn {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: $tn-color-red;
+          color: #FFFFFF;
+          font-size: 20rpx;
+          padding: 8rpx 0;
+          text-align: center;
+          z-index: 9;
+          line-height: 1;
+        }
+        
+        &__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          border-radius: 10rpx;
+        }
+      }
+      
+      &-add {
+        flex-direction: column;
+        color: $tn-content-color;
+        font-size: 26rpx;
+        
+        &--icon {
+          font-size: 40rpx;
+        }
+        
+        &__tips {
+          margin-top: 20rpx;
+          line-height: 40rpx;
+        }
+      }
+    }
+    
+    &__add {
+      width: auto;
+      display: inline-block;
+      
+      &--custom {
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue b/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
new file mode 100644
index 0000000..435597d
--- /dev/null
+++ b/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
@@ -0,0 +1,90 @@
+<template>
+  <!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+  <view>
+    <view :id="elId" class="tn-index-anchor__wrap" :style="[wrapperStyle]">
+      <view class="tn-index-anchor" :class="[active ? 'tn-index-anchor--active' : '']" :style="[customAnchorStyle]">
+        <view v-if="useSlot">
+          <slot></slot>
+        </view>
+        <block v-else>
+          <text>{{ index }}</text>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-index-anchor',
+    props: {
+      // 使用自定义内容
+      useSlot: {
+        type: Boolean,
+        default: false
+      },
+      // 索引字符
+      index: {
+        type: String,
+        default: ''
+      },
+      // 自定义样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      customAnchorStyle() {
+        return Object.assign(this.anchorStyle, this.customStyle)
+      }
+    },
+    data() {
+      return {
+        elId: this.$tn.uuid(),
+        // 内容的高度
+        height: 0,
+        // 内容的top
+        top: 0,
+        // 是否被激活
+        active: false,
+        // 样式（父组件外部提供）
+        wrapperStyle: {},
+        anchorStyle: {}
+      }
+    },
+    created() {
+      this.parent = false
+    },
+    mounted() {
+      this.parent = this.$tn.$parent.call(this, 'tn-index-list')
+      if (this.parent) {
+        this.parent.childrens.push(this)
+        this.parent.updateData()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-index-anchor {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8rpx 24rpx;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 1.2;
+    background-color: rgb(245, 245, 245);
+    
+    &--active {
+      right: 0;
+      left: 0;
+      color: $tn-main-color;
+      background-color: #FFFFFF;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-index-list/tn-index-list.vue b/tuniao-ui/components/tn-index-list/tn-index-list.vue
new file mode 100644
index 0000000..5187896
--- /dev/null
+++ b/tuniao-ui/components/tn-index-list/tn-index-list.vue
@@ -0,0 +1,361 @@
+<template>
+  <!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+  <view>
+    <view class="tn-index-list-class tn-index-list">
+      <slot></slot>
+      
+      <!-- 侧边栏 -->
+      <view
+        v-if="showSidebar"
+        class="tn-index-list__sidebar"
+        @touchstart.stop.prevent="onTouchMove"
+        @touchmove.stop.prevent="onTouchMove"
+        @touchend.stop.prevent="onTouchStop"
+        @touchcancel.stop.prevent="onTouchStop"
+      >
+        <view
+          v-for="(item, index) in indexList"
+          :key="index"
+          class="tn-index-list__sidebar__item"
+          :style="{
+            zIndex: zIndex + 1,
+            color: activeAnchorIndex === index ? activeColor : ''
+          }"
+        >
+          {{ item }}
+        </view>
+      </view>
+      
+      <!-- 选中弹出框 -->
+      <view
+        v-if="touchMove && indexList[touchMoveIndex]"
+        class="tn-index-list__alert"
+        :style="{
+          zIndex: selectAlertZIndex
+        }"
+      >
+        <text>{{ indexList[touchMoveIndex] }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  // 生成 A-Z的字母列表
+  let indexList = function() {
+    let indexList = []
+    let charCodeOfA = 'A'.charCodeAt(0)
+    for (var i = 0; i < 26; i++) {
+      indexList.push(String.fromCharCode(charCodeOfA + i))
+    }
+    return indexList
+  }
+  
+  export default {
+    name: 'tn-index-list',
+    props: {
+      // 索引列表
+      indexList: {
+        type: Array,
+        default() {
+          return indexList()
+        }
+      },
+      // 是否自动吸顶
+      sticky: {
+        type: Boolean,
+        default: true
+      },
+      // 自动吸顶时距离顶部的距离，单位px
+      stickyTop: {
+        type: Number,
+        default: 0
+      },
+      // 自定义顶栏的高度，单位px
+      customBarHeight: {
+        type: Number,
+        default: 0
+      },
+      // 当前滚动的高度
+      // 由于自定义组件无法获取滚动高度，所以依赖传入
+      scrollTop: {
+        type: Number,
+        default: 0
+      },
+      // 选中索引时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 吸顶时的z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 选中索引列表弹出提示框的z-index
+      selectAlertZIndex() {
+        return this.$tn.zIndex.toast
+      },
+      // 吸顶的偏移高度
+      stickyOffsetTop() {
+        // #ifdef H5
+        return this.stickyTop !== '' ? this.stickyTop : 44
+        // #endif
+        // #ifndef H5
+        return this.stickyTop !== '' ? this.stickyTop : 0
+        // #endif
+      }
+    },
+    data() {
+      return {
+        // 当前激活的列表锚点的序号
+        activeAnchorIndex: 0,
+        // 显示侧边索引栏
+        showSidebar: true,
+        // 标记是否开始触摸移动
+        touchMove: false,
+        // 当前触摸移动到对应索引的序号
+        touchMoveIndex: 0,
+        // 滚动到对应锚点的序号
+        scrollToAnchorIndex: 0,
+        // 侧边栏的信息
+        sidebar: {
+          height: 0,
+          top: 0
+        },
+        // 内容区域高度
+        height: 0,
+        // 内容区域top
+        top: 0
+      }
+    },
+    watch: {
+      scrollTop() {
+        this.updateData()
+      }
+    },
+    created() {
+      // 只能在created生命周期定义childrens，如果在data定义，会因为循环引用而报错
+      this.childrens = []
+    },
+    methods: {
+      // 更新数据
+      updateData() {
+        this.timer && clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.showSidebar = !!this.childrens.length
+          this.getRect().then(() => {
+            this.onScroll()
+          })
+        }, 0)
+      },
+      // 获取对应的信息
+      getRect() {
+        return Promise.all([
+          this.getAnchorRect(),
+          this.getListRect(),
+          this.getSidebarRect()
+        ])
+      },
+      // 获取列表内容子元素信息
+      getAnchorRect() {
+        return Promise.all(this.childrens.map((child, index) => {
+          child._tGetRect('.tn-index-anchor__wrap').then((rect) => {
+            Object.assign(child, {
+              height: rect.height,
+              top: rect.top - this.customBarHeight
+            })
+          })
+        }))
+      },
+      // 获取列表信息
+      getListRect() {
+        return this._tGetRect('.tn-index-list').then(rect => {
+          Object.assign(this, {
+            height: rect.height,
+            top: rect.top + this.scrollTop
+          })
+        })
+      },
+      // 获取侧边滚动栏信息
+      getSidebarRect() {
+        return this._tGetRect('.tn-index-list__sidebar').then(rect => {
+          this.sidebar = {
+            height: rect.height,
+            top: rect.top
+          }
+        })
+      },
+      // 滚动事件
+      onScroll() {
+        const {
+          childrens = []
+        } = this
+        if (!childrens.length) {
+          return
+        }
+        const {
+          sticky,
+          stickyOffsetTop,
+          zIndex,
+          scrollTop,
+          activeColor
+        } = this
+        const active = this.getActiveAnchorIndex()
+        this.activeAnchorIndex = active
+        if (sticky) {
+          let isActiveAnchorSticky = false
+          if (active !== -1) {
+            isActiveAnchorSticky = childrens[active].top <= 0
+          }
+          childrens.forEach((item, index) => {
+            if (index === active) {
+              let wrapperStyle = ''
+              let anchorStyle = {
+                color: `${activeColor}`
+              }
+              if (isActiveAnchorSticky) {
+                wrapperStyle = {
+                  height: `${childrens[index].height}px`
+                }
+                anchorStyle = {
+                  position: 'fixed',
+                  top: `${stickyOffsetTop}px`,
+                  zIndex: `${zIndex ? zIndex : this.$tn.zIndex.indexListSticky}`,
+                  color: `${activeColor}`
+                }
+              }
+              item.active = true
+              item.wrapperStyle = wrapperStyle
+              item.anchorStyle = anchorStyle
+            } else if (index === active - 1) {
+              const currentAnchor = childrens[index]
+              const currentOffsetTop = currentAnchor.top
+              const targetOffsetTop = index === childrens.length - 1 ? this.top : childrens[index + 1].top
+              const parentOffsetHeight = targetOffsetTop - currentOffsetTop
+              const translateY = parentOffsetHeight - currentAnchor.height
+              const anchorStyle = {
+                position: 'relative',
+                transform: `translate3d(0, ${translateY}px, 0)`,
+                zIndex: `${zIndex ? zIndex : this.$tn.zIndex.indexListSticky}`,
+                color: `${activeColor}`
+              }
+              item.active = false
+              item.anchorStyle = anchorStyle
+            } else {
+              item.active = false
+              item.wrapperStyle = ''
+              item.anchorStyle = ''
+            }
+          })
+        }
+      },
+      // 触摸移动
+      onTouchMove(event) {
+        this.touchMove = true
+        const sidebarLength = this.childrens.length
+        const touch = event.touches[0]
+        const itemHeight = this.sidebar.height / sidebarLength
+        let clientY = touch.clientY
+        let index = Math.floor((clientY - this.sidebar.top) / itemHeight)
+        if (index < 0) {
+          index = 0
+        } else if (index > sidebarLength - 1) {
+          index = sidebarLength - 1
+        }
+        this.touchMoveIndex = index
+        this.scrollToAnchor(index)
+      },
+      // 触摸停止
+      onTouchStop() {
+        this.touchMove = false
+        this.scrollToAnchorIndex = null
+      },
+      // 获取当前的锚点序号
+      getActiveAnchorIndex() {
+        const {
+          childrens,
+          sticky
+        } = this
+        for (let i = this.childrens.length - 1; i >= 0; i--) {
+          const preAnchorHeight = i > 0 ? childrens[i - 1].height : 0
+          const reachTop = sticky ? preAnchorHeight : 0
+          if (reachTop >= childrens[i].top) {
+            return i
+          }
+        }
+        return -1
+      },
+      // 滚动到对应的锚点
+      scrollToAnchor(index) {
+        if (this.scrollToAnchorIndex === index) {
+          return
+        }
+        this.scrollToAnchorIndex = index
+        const anchor = this.childrens.find(item => item.index === this.indexList[index])
+        if (anchor) {
+          const scrollTop = anchor.top + this.scrollTop
+          this.$emit('select', {
+            index: anchor.index,
+            scrollTop: scrollTop
+          })
+          uni.pageScrollTo({
+            duration:0,
+            scrollTop: scrollTop
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-index-list {
+    position: relative;
+    
+    &__sidebar {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 50%;
+      right: 0;
+      text-align: center;
+      transform: translateY(-50%);
+      user-select: none;
+      z-index: 99;
+      
+      &__item {
+        font-weight: 500;
+        padding: 8rpx 18rpx;
+        font-size: 22rpx;
+        line-height: 1;
+      }
+    }
+    
+    &__alert {
+      display: flex;
+      flex-direction: row;
+      position: fixed;
+      width: 120rpx;
+      height: 120rpx;
+      top: 50%;
+      right: 90rpx;
+      align-items: center;
+      justify-content: center;
+      margin-top: -60rpx;
+      border-radius: 24rpx;
+      font-size: 50rpx;
+      color: #FFFFFF;
+      background-color: $tn-font-sub-color;
+      padding: 0;
+      z-index: 9999999;
+      
+      text {
+        line-height: 50rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-input/tn-input.vue b/tuniao-ui/components/tn-input/tn-input.vue
new file mode 100644
index 0000000..2ec73b0
--- /dev/null
+++ b/tuniao-ui/components/tn-input/tn-input.vue
@@ -0,0 +1,427 @@
+<template>
+  <view
+    class="tn-input-class tn-input"
+    :class="{
+      'tn-input--border': border,
+      'tn-input--error': validateState
+    }"
+    :style="{
+      padding: `0 ${border ? 20 : 0}rpx`,
+      borderColor: borderColor,
+      textAlign: inputAlign
+    }"
+    @tap.stop="inputClick"
+  >
+    <textarea
+      v-if="type === 'textarea'"
+      class="tn-input__input tn-input__textarea"
+      :style="[inputStyle]"
+      :value="defaultValue"
+      :placeholder="placeholder"
+      :placeholderStyle="placeholderStyle"
+      :disabled="disabled || type === 'select'"
+      :maxlength="maxLength"
+      :fixed="fixed"
+      :focus="focus"
+      :autoHeight="autoHeight"
+      :selectionStart="elSelectionStart"
+      :selectionEnd="elSelectionEnd"
+      :cursorSpacing="cursorSpacing"
+      :showConfirmBar="showConfirmBar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="onFocus"
+      @confirm="onConfirm"
+    />
+    <input
+      v-else
+      class="tn-input__input"
+      :type="type === 'password' ? 'text' : type"
+      :style="[inputStyle]"
+      :value="defaultValue"
+      :password="type === 'password' && !showPassword"
+      :placeholder="placeholder"
+      :placeholderStyle="placeholderStyle"
+      :disabled="disabled || type === 'select'"
+      :maxlength="maxLength"
+      :focus="focus"
+      :confirmType="confirmType"
+      :selectionStart="elSelectionStart"
+      :selectionEnd="elSelectionEnd"
+      :cursorSpacing="cursorSpacing"
+      :showConfirmBar="showConfirmBar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="onFocus"
+      @confirm="onConfirm"
+    />
+    
+    <!-- 右边的icon -->
+    <view class="tn-input__right-icon tn-flex tn-flex-col-center">
+      <!-- 清除按钮 -->
+      <view
+        v-if="clearable && value !== '' && focused"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+        @tap="onClear"
+      >
+        <view class="icon tn-icon-close"></view>
+      </view>
+      <view
+        v-else-if="type === 'text' && !focused && showRightIcon && rightIcon !== ''"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+      >
+        <view class="icon" :class="[`tn-icon-${rightIcon}`]"></view>
+      </view>
+      <!-- 显示密码按钮 -->
+      <view
+        v-if="passwordIcon && type === 'password'"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+        @tap="showPassword = !showPassword"
+      >
+        <view v-if="!showPassword" class="tn-icon-eye-hide"></view>
+        <view v-else class="icon tn-icon-eye"></view>
+      </view>
+      <!-- 可选项箭头 -->
+      <view
+        v-if="type === 'select'"
+        class="tn-input__right-icon__item tn-input__right-icon__select"
+        :class="{
+          'tn-input__right-icon__select--reverse': selectOpen
+        }"
+      >
+        <view class="icon tn-icon-up-triangle"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [Emitter],
+    name: 'tn-input',
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      // 输入框的类型
+      type: {
+        type: String,
+        default: 'text'
+      },
+      // 输入框文字对齐方式
+      inputAlign: {
+        type: String,
+        default: 'left'
+      },
+      // 文本框为空时显示的信息
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      placeholderStyle: {
+        type: String,
+        default: 'color: #AAAAAA'
+      },
+      // 是否禁用输入框
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 可输入文字的最大长度
+      maxLength: {
+        type: Number,
+        default: 255
+      },
+      // 输入框高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 根据内容自动调整高度
+      autoHeight: {
+        type: Boolean,
+        default: true
+      },
+      // 键盘右下角显示的文字，仅在text时生效
+      confirmType: {
+        type: String,
+        default: 'done'
+      },
+      // 输入框自定义样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否固定输入框
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动获取焦点
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      // 当type为password时，是否显示右侧密码图标
+      passwordIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 当type为 input或者textarea时是否显示边框
+      border: {
+        type: Boolean,
+        default: false
+      },
+      // 边框的颜色
+      borderColor: {
+        type: String,
+        default: '#dcdfe6'
+      },
+      // 当type为select时，旋转右侧图标，标记当时select是打开还是关闭
+      selectOpen: {
+        type: Boolean,
+        default: false
+      },
+      // 是否可清空
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      // 光标与键盘的距离
+      cursorSpacing: {
+        type: Number,
+        default: 0
+      },
+      // selectionStart和selectionEnd需要搭配使用，自动聚焦时生效
+      // 光标起始位置
+      selectionStart: {
+        type: Number,
+        default: -1
+      },
+      // 光标结束位置
+      selectionEnd: {
+        type: Number,
+        default: -1
+      },
+      // 自动去除两端空格
+      trim: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示键盘上方的完成按钮
+      showConfirmBar: {
+        type: Boolean,
+        default: true
+      },
+      // 是否在输入框内最右边显示图标
+      showRightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 最右边图标的名称
+      rightIcon: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      // 输入框样式
+      inputStyle() {
+        let style = {}
+        // 如果没有设置高度，根据不同的类型设置一个默认值
+        style.minHeight = this.height ? this.height + 'rpx' : 
+          this.type === 'textarea' ? this.textareaHeight + 'rpx' : this.inputHeight + 'rpx'
+        
+        style = Object.assign(style, this.customStyle)
+        
+        return style
+      },
+      // 光标起始位置
+      elSelectionStart() {
+        return String(this.selectionStart)
+      },
+      // 光标结束位置
+      elSelectionEnd() {
+        return String(this.selectionEnd)
+      }
+    },
+    data() {
+      return {
+        // 默认值
+        defaultValue: this.value,
+        // 输入框高度
+        inputHeight: 70,
+        // textarea的高度
+        textareaHeight: 100,
+        // 标记验证的状态
+        validateState: false,
+        // 标记是否获取到焦点
+        focused: false,
+        // 是否预览密码
+        showPassword: false,
+        // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input事件
+        lastValue: '',
+      }
+    },
+    watch: {
+      value(newVal, oldVal) {
+        this.defaultValue = newVal
+        // 当值发生变化时，并且type为select时，不会触发input事件
+        // 模拟input事件
+        if (newVal !== oldVal && this.type === 'select') {
+          this.handleInput({
+            detail: {
+              value: newVal
+            }
+          })
+        }
+      }
+    },
+    created() {
+      // 监听form-item发出的错误事件，将输入框变成红色
+      this.$on("on-form-item-error", this.onFormItemError)
+    },
+    methods: {
+      /**
+       * input事件
+       */
+      handleInput(event) {
+        let value = event.detail.value
+        // 是否需要去掉空格
+        if (this.trim) value = this.$tn.string.trim(value)
+        // 原生事件
+        this.$emit('input', value)
+        // model赋值
+        this.defaultValue = value
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (this.$tn.string.trim(value) === this.lastValue) return
+          this.lastValue = value
+          // #endif
+          
+          // 发送当前的值到form-item进行校验
+          this.dispatch('tn-form-item','on-form-change', value)
+        }, 40)
+      },
+      /**
+       * blur事件
+       */
+      handleBlur(event) {
+        let value = event.detail.value
+        
+        // 由于点击清除图标也会触发blur事件，导致图标消失从而无法点击
+        setTimeout(() => {
+          this.focused = false
+        }, 100)
+        
+        // 原生事件
+        this.$emit('blur', value)
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('blur')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (this.$tn.string.trim(value) === this.lastValue) return
+          this.lastValue = value
+          // #endif
+          
+          // 发送当前的值到form-item进行校验
+          this.dispatch('tn-form-item','on-form-blur', value)
+        }, 40)
+      },
+      // 处理校验错误
+      onFormItemError(status) {
+        this.validateState = status
+      },
+      // 聚焦事件
+      onFocus(event) {
+        this.focused = true
+        this.$emit('focus')
+      },
+      // 点击确认按钮事件
+      onConfirm(event) {
+        this.$emit('confirm', event.detail.value)
+      },
+      // 清除事件
+      onClear(event) {
+        this.$emit('input', '')
+      },
+      // 点击事件
+      inputClick() {
+        this.$emit('click')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-input {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    flex: 1;
+    
+    &__input {
+      font-size: 28rpx;
+      color: $tn-font-color;
+      flex: 1;
+    }
+    
+    &__textarea {
+      width: auto;
+      font-size: 28rpx;
+      color: $tn-font-color;
+      padding: 10rpx 0;
+      line-height: normal;
+      flex: 1;
+    }
+    
+    &--border {
+      border-radius: 6rpx;
+      border: 2rpx solid $tn-border-solid-color;
+    }
+    
+    &--error {
+      border-color: $tn-color-red !important;
+    }
+    
+    &__right-icon {
+      line-height: 1;
+      .icon {
+        color: $tn-font-sub-color;
+      }
+      
+      &__item {
+        margin-left: 10rpx;
+      }
+      
+      &__clear {
+        .icon {
+          font-size: 32rpx;
+        }
+      }
+      
+      &__select {
+        transition: transform .4s;
+        
+        .icon {
+          font-size: 26rpx;
+        }
+        
+        &--reverse {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-keyboard/tn-keyboard.vue b/tuniao-ui/components/tn-keyboard/tn-keyboard.vue
new file mode 100644
index 0000000..8844421
--- /dev/null
+++ b/tuniao-ui/components/tn-keyboard/tn-keyboard.vue
@@ -0,0 +1,220 @@
+<template>
+  <view v-if="value" class="tn-keyboard-class tn-keyboard">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :mask="mask"
+      :maskCloseable="maskCloseable"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :zIndex="elZIndex"
+      @close="popupClose"
+    >
+      <view>
+        <slot></slot>
+      </view>
+      
+      <!-- 提示信息 -->
+      <view v-if="tooltip" class="tn-keyboard__tooltip">
+        <view
+          v-if="cancelBtn"
+          class="tn-keyboard__tooltip__item tn-keyboard__tooltip__cancel"
+          hover-class="tn-keyboard__tooltip__cancel--hover"
+          :hover-stay-time="150"
+          @tap="onCancel"
+        >
+          {{ cancelBtn ? cancelText : ''}}
+        </view>
+        <view v-if="showTips" class="tn-keyboard__tooltip__item tn-keyboard__tooltip__tips">
+          {{ tips ? tips : mode === 'number' ? '数字键盘' : mode === 'card' ? '身份证键盘' : '车牌号码键盘'}}
+        </view>
+        <view
+          v-if="confirmBtn"
+          class="tn-keyboard__tooltip__item tn-keyboard__tooltip__confirm"
+          hover-class="tn-keybord__tooltip__confirm--hover"
+          :hover-stay-time="150"
+          @tap="onConfirm"
+        >
+          {{ confirmBtn ? confirmText : ''}}
+        </view>
+      </view>
+      
+      <!-- 键盘内容 -->
+      <block v-if="mode === 'number' || mode === 'card'">
+        <tn-number-keyboard :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled" @change="change" @backspace="backspaceClick"></tn-number-keyboard>
+      </block>
+      <block v-if="mode === 'car'">
+        <tn-car-keyboard :randomEnabled="randomEnabled" :switchEnMode="switchEnMode" @change="change" @backspace="backspaceClick"></tn-car-keyboard>
+      </block>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-keyboard',
+    props: {
+      // 控制键盘弹出收回
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 键盘类型
+      // number - 数字键盘 card - 身份证键盘 car - 车牌号码
+      mode: {
+        type: String,
+        default: 'number'
+      },
+      // 当mode = number时，是否显示'.'符号
+      dotEnabled: {
+        type: Boolean,
+        default: true
+      },
+      // 是否打乱顺序
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      },
+      // 当mode = car，设置键盘中英文状态
+      switchEnMode: {
+        type: Boolean,
+        default: false
+      },
+      // 显示顶部工具条
+      tooltip: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示提示信息
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 提示文字
+      tips: {
+        type: String,
+        default: ''
+      },
+      // 是否显示取消按钮
+      cancelBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示确认按钮
+      confirmBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 取消按钮文字
+      cancelText: {
+        type: String,
+        default: '取消'
+      },
+      // 确认按钮文字
+      confirmText: {
+        type: String,
+        default: '确认'
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // 是否显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      change(e) {
+        this.$emit('change', e)
+      },
+      // 关闭键盘
+      popupClose() {
+        // 修改value的值
+        this.$emit('input', false)
+      },
+      // 输入完成
+      onConfirm() {
+        this.popupClose()
+        this.$emit('confirm')
+      },
+      // 输入取消
+      onCancel() {
+        this.popupClose()
+        this.$emit('cancel')
+      },
+      // 点击退格
+      backspaceClick() {
+        this.$emit('backspace')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-keyboard {
+    position: relative;
+    
+    &__tooltip {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      
+      &__item {
+        color: $tn-font-color;
+        flex: 0 0 33.3333333333%;
+        text-align: center;
+        font-size: 28rpx;
+        padding: 20rpx 10rpx;
+      }
+      
+      &__cancel {
+        text-align: left;
+        flex-grow: 1;
+        flex-wrap: 0;
+        padding-left: 40rpx;
+        color: $tn-content-color;
+        
+        &--hover {
+          color: $tn-font-color;
+        }
+      }
+      
+      &__confirm {
+        text-align: right;
+        flex-grow: 1;
+        flex-wrap: 0;
+        padding-right: 40rpx;
+        color: $tn-main-color;
+        
+        &--hover {
+          color: $tn-color-blue;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-landscape/tn-landscape.vue b/tuniao-ui/components/tn-landscape/tn-landscape.vue
new file mode 100644
index 0000000..114c1f7
--- /dev/null
+++ b/tuniao-ui/components/tn-landscape/tn-landscape.vue
@@ -0,0 +1,225 @@
+<template>
+  <view class="tn-landscape-class tn-landscape">
+    <view v-if="showValue" class="tn-landscape__container" :style="[containerStyle]">
+      <slot></slot>
+      <view
+        v-if="closeBtn"
+        class="tn-landscape__icon tn-icon-close-fill"
+        :class="[{
+          'tn-landscape__icon--left-top': closePosition === 'leftTop',
+          'tn-landscape__icon--right-top': closePosition === 'rightTop',
+          'tn-landscape__icon--bottom': closePosition === 'bottom'
+        }]"
+        :style="[closeBtnStyle]"
+        @tap="close"
+      ></view>
+    </view>
+    <view
+      v-if="mask"
+      class="tn-landscape__mask"
+      :class="[{'tn-landscape__mask--show': showValue}]"
+      :style="[maskStyle]"
+      @tap="closeMask"
+    ></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-landscape',
+    props: {
+      // 显示
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 显示关闭图标
+      closeBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 关闭图标颜色
+      closeColor: {
+        type: String,
+        default: ''
+      },
+      // 关闭图标大小，单位rpx
+      closeSize: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标位置
+      // leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
+      closePosition: {
+        type: String,
+        default: 'rightTop'
+      },
+      // 关闭图标top值，单位rpx
+      // 当关闭图标在leftTop或者rightTop时生效
+      closeTop: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标right值，单位rpx
+      // 当关闭图标在RightTop时生效
+      closeRight: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标bottom值，单位rpx
+      // 当关闭图标在bottom时生效
+      closeBottom: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标left值，单位rpx
+      // 当关闭图标在leftTop时生效
+      closeLeft: {
+        type: Number,
+        default: 0
+      },
+      // 显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // 点击遮罩可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      containerStyle() {
+        let style = {}
+        style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.landsacpe
+        return style
+      },
+      closeBtnStyle() {
+        let style = {}
+        if (this.closePosition === 'leftTop') {
+          if (this.closeTop) {
+            style.top = this.closeTop + 'rpx'
+          }
+          if (this.closeLeft) {
+            style.left = this.closeLeft + 'rpx'
+          }
+        } else if (this.closePosition === 'rightTop') {
+          if (this.closeTop) {
+            style.top = this.closeTop + 'rpx'
+          }
+          if (this.closeRight) {
+            style.right = this.closeRight + 'rpx'
+          }
+        } else if (this.closePosition === 'bottom') {
+          if (this.closeBottom) {
+            style.bottom = this.closeBottom + 'rpx'
+          }
+        }
+        if (this.closeSize) {
+          style.fontSize = this.closeSize + 'rpx'
+        }
+        if (this.closeColor) {
+          style.color = this.closeColor
+        }
+        return style
+      },
+      maskStyle() {
+        let style = {}
+        style.zIndex = this.zIndex ? this.zIndex - 1 : this.$tn.zIndex.landsacpe - 1
+        return style
+      }
+    },
+    watch: {
+      show: {
+        handler(val) {
+          this.showValue = val
+        },
+        immediate: true
+      }
+    },
+    data() {
+      return {
+        showValue: false
+      }
+    },
+    methods: {
+      // 关闭压屏窗
+      close() {
+        this.showValue = false
+        this.$emit('close')
+      },
+      // 点击遮罩关闭
+      closeMask() {
+        if (!this.maskCloseable) return
+        this.close()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-landscape {
+    width: 100%;
+    overflow: hidden;
+    
+    &__container {
+      max-width: 100%;
+      position: fixed;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    &__icon {
+      position: absolute;
+      text-align: center;
+      font-size: 50rpx;
+      color: #FFFFFF;
+      
+      &--left-top {
+        top: -40rpx;
+        left: 20rpx;
+      }
+      
+      &--right-top {
+        top: -40rpx;
+        right: 40rpx;
+      }
+      
+      &--bottom {
+        left: 50%;
+        bottom: -40rpx;
+        transform: translateX(-50%);
+      }
+    }
+    
+    &__mask {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      background-color: $tn-mask-bg-color;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      transform: scale3d(1, 1, 0);
+      transition: all 0.25s ease-in;
+      
+      &--show {
+        opacity: 1 !important;
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue b/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
new file mode 100644
index 0000000..90fb876
--- /dev/null
+++ b/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
@@ -0,0 +1,254 @@
+<template>
+  <view class="tn-lazy-load-class tn-lazy-load">
+    <view
+      class="tn-lazy-load__item"
+      :class="[`tn-lazy-load__item--${elIndex}`]"
+      :style="[lazyLoadItemStyle]"
+    >
+      <view class="tn-lazy-load__item__content">
+        <image
+          v-if="!error"
+          class="tn-lazy-load__item__image"
+          :style="[imageStyle]"
+          :src="show ? image : loadingImg"
+          :mode="imgMode"
+          @load="handleImgLoaded"
+          @error="handleImgError"
+          @tap="handleImgClick"
+        ></image>
+        <image
+          v-else
+          class="tn-lazy-load__item__image tn-lazy-load__item__image--error"
+          :style="[imageStyle]"
+          :src="errorImg"
+          :mode="imgMode"
+          @load="handleErrorImgLoaded"
+          @tap="handleImgClick"
+        ></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-lazy-load',
+    props: {
+      // 组件标识
+      index: {
+        type: [String, Number],
+        default: ''
+      },
+      // 待显示的图片地址
+      image: {
+        type: String,
+        default: ''
+      },
+      // 图片裁剪模式
+      imgMode: {
+        type: String,
+        default: 'scaleToFill'
+      },
+      // 占位图片路径
+      loadingImg: {
+      	type: String,
+      	default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
+      },
+      // 加载失败的错误占位图
+      errorImg: {
+      	type: String,
+      	default: 'data:image/jpeg;base64,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bWxEYm9vbAAAAAAASW50cmJvb2wAAAAAAEJja2dPYmpjAAAAAQAAAAAAAFJHQkMAAAADAAAAAFJkICBkb3ViQG/gAAAAAAAAAAAAR3JuIGRvdWJAb+AAAAAAAAAAAABCbCAgZG91YkBv4AAAAAAAAAAAAEJyZFRVbnRGI1JsdAAAAAAAAAAAAAAAAEJsZCBVbnRGI1JsdAAAAAAAAAAAAAAAAFJzbHRVbnRGI1B4bEBywAAAAAAAAAAACnZlY3RvckRhdGFib29sAQAAAABQZ1BzZW51bQAAAABQZ1BzAAAAAFBnUEMAAAAATGVmdFVudEYjUmx0AAAAAAAAAAAAAAAAVG9wIFVudEYjUmx0AAAAAAAAAAAAAAAAU2NsIFVudEYjUHJjQFkAAAAAAAAAAAAQY3JvcFdoZW5QcmludGluZ2Jvb2wAAAAADmNyb3BSZWN0Qm90dG9tbG9uZwAAAAAAAAAMY3JvcFJlY3RMZWZ0bG9uZwAAAAAAAAANY3JvcFJlY3RSaWdodGxvbmcAAAAAAAAAC2Nyb3BSZWN0VG9wbG9uZwAAAAAAOEJJTQPtAAAAAAAQASwAAAABAAEBLAAAAAEAAThCSU0EJgAAAAAADgAAAAAAAAAAAAA/gAAAOEJJTQQNAAAAAAAEAAAAWjhCSU0EGQAAAAAABAAAAB44QklNA/MAAAAAAAkAAAAAAAAAAAEAOEJJTScQAAAAAAAKAAEAAAAAAAAAAThCSU0D9QAAAAAASAAvZmYAAQBsZmYABgAAAAAAAQAvZmYAAQChmZoABgAAAAAAAQAyAAAAAQBaAAAABgAAAAAAAQA1AAAAAQAtAAAABgAAAAAAAThCSU0D+AAAAAAAcAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAA4QklNBAAAAAAAAAIACjhCSU0EAgAAAAAAFgAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4QklNBDAAAAAAAAsBAQEBAQEBAQEBAQA4QklNBC0AAAAAAAIAADhCSU0ECAAAAAAAEAAAAAEAAAJAAAACQAAAAAA4QklNBB4AAAAAAAQAAAAAOEJJTQQa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eG1wOkNyZWF0ZURhdGU9IjIwMjItMDItMjJUMjE6MTk6MzQrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDItMjJUMjE6MTk6MzQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTAyLTIyVDIxOjE5OjM0KzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk1NDQ1YTI0LWM2NzAtYTk0OS05MWFkLWM3OGJlZTM4N2VlYiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQwMWFkNGViLWZkYWYtYjQ0NS05MzViLTJjNzIwZjE2OGI3MiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmEwNzM2YmYwLTJkNWQtZWU0Yi1iYWM1LWJmNzVmODQ3OGQyMyIgZGM6Zm9ybWF0PSJpbWFnZS9qcGVnIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmEwNzM2YmYwLTJkNWQtZWU0Yi1iYWM1LWJmNzVmODQ3OGQyMyIgc3RFdnQ6d2hlbj0iMjAyMi0wMi0yMlQyMToxOTozNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5NTQ0NWEyNC1jNjcwLWE5NDktOTFhZC1jNzhiZWUzODdlZWIiIHN0RXZ0OndoZW49IjIwMjItMDItMjJUMjE6MTk6MzQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAAAAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAAAAEWzFhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAA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'
+      },
+      // 图片进入可见区域前多少像素前，单位rpx，开始加载图片
+      // 负数为图片超出屏幕底部多少像素后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发（图片还没出现在屏幕上）
+      threshold: {
+        type: [Number, String],
+        default: 100
+      },
+      // 是否开启过渡效果
+      isEffect: {
+        type: Boolean,
+        default: true
+      },
+      // 动画过渡时间
+      duration: {
+        type: [String, Number],
+        default: 500
+      },
+      // 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
+      // linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
+      effect: {
+      	type: String,
+      	default: 'ease-in-out'
+      },
+      // 图片高度，单位rpx
+      height: {
+        type: [String, Number],
+        default: 450
+      },
+      // 图片圆角
+      borderRadius: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      thresholdValue() {
+        // 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
+        let threshold = uni.upx2px(Math.abs(this.threshold))
+        return this.threshold < 0 ? -threshold : threshold
+      },
+      lazyLoadItemStyle() {
+        let style = {}
+        style.opacity = Number(this.opacity)
+        if (this.borderRadius) {
+          style.borderRadius = this.borderRadius
+        }
+        // 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+        style.transition = `opacity ${this.time / 1000}s ${this.effect}`
+        style.height = this.$tn.string.getLengthUnitValue(this.height)
+        return style
+      },
+      imageStyle() {
+        let style = {}
+        if (typeof this.height === 'string' && this.height.indexOf('%') === -1) {
+          style.height = this.$tn.string.getLengthUnitValue(this.height)
+        }
+        return style
+      }
+    },
+    watch: {
+      show(val) {
+        // 如果不开启过渡效果直接返回
+        if (!this.effect) return
+        this.time = 0
+        // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+        this.opacity = 0
+        setTimeout(() => {
+          this.time = this.duration
+          this.opacity = 1
+        }, 30)
+      },
+      image(val) {
+        // 修改图片后重置部分变量
+        if (!val) {
+          // 如果传入null或者''，或者undefined，标记为错误状态
+          this.error = true
+        } else {
+          this.init()
+          this.error = false
+        }
+      }
+    },
+    data() {
+      return {
+        elIndex: this.$tn.uuid(),
+        // 显示图片
+        show: false,
+        // 图片透明度
+        opacity: 1,
+        // 动画时间
+        time: this.duration,
+        // 懒加载状态
+        // loadlazy-懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+        loadStatus: '',
+        // 图片加载失败
+        error: false
+      }
+    },
+    created() {
+      // 由于一些特殊原因，不能将此变量放到data中定义
+      this.observer = {}
+      this.observerName = 'lazyLoadContentObserver'
+    },
+    mounted() {
+      // 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
+      this.$nextTick(() => {
+        uni.$once('tOnLazyLoadReachBottom', () => {
+          if (!this.show) this.show = true
+        })
+      })
+      // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+      setTimeout(() => {
+        this.disconnectObserver(this.observerName)
+        const contentObserver = uni.createIntersectionObserver(this)
+        contentObserver.relativeToViewport({
+          bottom: this.thresholdValue
+        }).observe(`.tn-lazy-load__item--${this.elIndex}`, (res) => {
+          if (res.intersectionRatio > 0) {
+            // 懒加载状态改变
+            this.show = true
+            // 如果图片已经加载，去掉监听，减少性能消耗
+            this.disconnectObserver(this.observerName)
+          }
+        })
+        this[this.observerName] = contentObserver
+      }, 50)
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.error = false
+        this.loadStatus = ''
+      },
+      // 处理图片点击事件
+      handleImgClick() {
+        let whichImg = ''
+        // 如果show为false，则表示图片还没有开始加载，点击的是最开始占位图
+        if (this.show === false) whichImg = 'lazyImg'
+        // 如果error为true，则表示图片加载失败，点击的是错误占位图
+        else if (this.error === true) whichImg = 'errorImg'
+        // 点击了正常的图片
+        else whichImg = 'realImg'
+        
+        this.$emit('click', {
+          index: this.index,
+          whichImg: whichImg
+        })
+      },
+      // 处理图片加载完成事件，通过show来区分是占位图触发还是加载真正的图片触发
+      handleImgLoaded() {
+        if (this.loadStatus = '') {
+          // 占位图加载完成
+          this.loadStatus = 'lazyed'
+        }
+        else if (this.loadStatus == 'lazyed') {
+          // 真正的图片加载完成
+          this.loadStatus = 'loaded'
+          this.$emit('loaded', this.index)
+        }
+      },
+      // 处理错误图片加载完成
+      handleErrorImgLoaded() {
+        this.$emit('error', this.index)
+      },
+      // 处理图片加载失败
+      handleImgError() {
+        this.error = true
+      },
+      disconnectObserver(observerName) {
+        const observer = this[observerName]
+        observer && observer.disconnect()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-lazy-load {
+    &__item {
+      background-color: $tn-bg-gray-color;
+      overflow: hidden;
+      
+      &__image {
+        // 解决父容器会多出3px的问题
+        display: block;
+        width: 100%;
+        // 骗系统开启硬件加速
+        transform: transition3d(0, 0, 0);
+        // 防止图片加载“闪一下”
+        will-change: transform;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-line-progress/tn-line-progress.vue b/tuniao-ui/components/tn-line-progress/tn-line-progress.vue
new file mode 100644
index 0000000..7e4af3e
--- /dev/null
+++ b/tuniao-ui/components/tn-line-progress/tn-line-progress.vue
@@ -0,0 +1,143 @@
+<template>
+  <view
+    class="tn-line-progress-class tn-line-progress"
+    :style="[progressStyle]"
+  >
+    <view
+      class="tn-line-progress--active"
+      :class="[
+        $tn.color.getBackgroundColorInternalClass(activeColor),
+        striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
+      ]"
+      :style="[progressActiveStyle]"
+    >
+      <slot v-if="$slots.default || $slots.$default"></slot>
+      <block v-else-if="showPercent">{{ percent + '%' }}</block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-line-progress',
+    props: {
+      // 进度（百分比）
+      percent: {
+        type: Number,
+        default: 0,
+        validator: val => {
+          return val >= 0 && val <= 100
+        }
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示为圆角
+      round: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示条纹
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      // 条纹是否运动
+      stripedAnimation: {
+        type: Boolean,
+        default: true
+      },
+      // 激活部分颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 非激活部分颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 是否显示进度条内部百分比值
+      showPercent: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      progressStyle() {
+        let style = {}
+        style.borderRadius = this.round ? '100rpx' : 0
+        if (this.height) {
+          style.height = this.$tn.string.getLengthUnitValue(this.height)
+        }
+        if (this.inactiveColor) {
+          style.backgroundColor = this.inactiveColor
+        }
+        return style
+      },
+      progressActiveStyle() {
+        let style = {}
+        style.width = this.percent + '%'
+        if (this.$tn.color.getBackgroundColorStyle(this.activeColor)) {
+          style.backgroundColor = this.$tn.color.getBackgroundColorStyle(this.activeColor)
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-line-progress {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    width: 100%;
+    height: 28rpx;
+    overflow: hidden;
+    border-radius: 100rpx;
+    background-color: $tn-progress-bg-color;
+    
+    &--active {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-items: flex-end;
+      justify-content: space-around;
+      width: 0;
+      height: 100%;
+      font-size: 20rpx;
+      color: #FFFFFF;
+      background-color: $tn-main-color;
+      transition: all 0.3s ease;
+    }
+    
+    &__striped {
+      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+      background-size: 80rpx 80rpx;
+      
+      &--active {
+        animation: progress-striped 2s linear infinite;
+      }
+    }
+  }
+  
+  @keyframes progress-striped {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 80rpx 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-list-cell/tn-list-cell.vue b/tuniao-ui/components/tn-list-cell/tn-list-cell.vue
new file mode 100644
index 0000000..514ebb5
--- /dev/null
+++ b/tuniao-ui/components/tn-list-cell/tn-list-cell.vue
@@ -0,0 +1,209 @@
+<template>
+  <view
+    class="tn-list-cell-class tn-list-cell"
+    :class="[
+      backgroundColorClass,
+      fontColorClass,
+      cellClass
+    ]"
+    :hover-class="hover ? 'tn-hover' : ''"
+    :hover-stay-time="150"
+    :style="[cellStyle]"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-list-cell',
+    props: {
+      // 列表序号
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 是否有箭头
+      arrow: {
+        type: Boolean,
+        default: false
+      },
+      //箭头是否有偏移距离
+      arrowRight: {
+      	type: Boolean,
+      	default: true
+      },
+      // 是否有点击效果
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏线条
+      unlined: {
+        type: Boolean,
+        default: false
+      },
+      //线条是否有左偏移距离
+      lineLeft: {
+      	type: Boolean,
+      	default: true
+      },
+      //线条是否有右偏移距离
+      lineRight: {
+      	type: Boolean,
+      	default: true
+      },
+      //是否加圆角
+      radius: {
+      	type: Boolean,
+      	default: false
+      }
+    },
+    computed: {
+      cellClass() {
+        let clazz = ''
+        
+        if (this.arrow) {
+          clazz += ' tn-list-cell--arrow'
+          if (!this.arrowRight) {
+            clazz += ' tn-list-cell--arrow--none-right'
+          }
+        }
+        
+        if (this.unlined) {
+          clazz += ' tn-list-cell--unlined'
+        } else {
+          if (this.lineLeft) {
+            clazz += ' tn-list-cell--line-left'
+          }
+          if (this.lineRight) {
+            clazz += ' tn-list-cell--line-right'
+          }
+        }
+        
+        if (this.radius) {
+          clazz += ' tn-list-cell--radius'
+        }
+        
+        return clazz
+      },
+      cellStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        
+        return style
+      },
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit("click", {
+          index: Number(this.index)
+        })
+        this.$emit("tap", {
+          index: Number(this.index)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-list-cell {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    padding: 26rpx 30rpx;
+    
+    &--radius {
+      border-radius: 12rpx;
+      overflow: hidden;
+    }
+    
+    &--arrow {
+      &::before {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        right: 30rpx;
+        width: 20rpx;
+        height: 20rpx;
+        margin-top: -12rpx;
+        border-width: 4rpx 4rpx 0 0;
+        border-color: $tn-font-holder-color;
+        border-style: solid;
+        transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+      }
+      
+      &--none-right {
+        &::before {
+          right: 0 !important;
+        }
+      }
+    }
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      pointer-events: none;
+      border-bottom: 1px solid $tn-border-solid-color;
+      transform: scaleY(0.5) translateZ(0);
+      transform-origin: 0 100%;
+    }
+    
+    &--line-left {
+      &::after {
+        left: 30rpx !important;
+      }
+    }
+    
+    &--line-right {
+      &::after {
+        right: 30rpx !important;
+      }
+    }
+    
+    &--unlined {
+      &::after {
+        border-bottom: 0 !important;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-list-view/tn-list-view.vue b/tuniao-ui/components/tn-list-view/tn-list-view.vue
new file mode 100644
index 0000000..810e335
--- /dev/null
+++ b/tuniao-ui/components/tn-list-view/tn-list-view.vue
@@ -0,0 +1,184 @@
+<template>
+  <view
+    class="tn-list-view-class tn-list-view"
+    :class="[
+      backgroundColorClass,
+      viewClass
+    ]"
+    :style="[viewStyle]"
+  >
+    <view
+      v-if="showTitle"
+      class="tn-list-view__title"
+      :class="[
+        fontColorClass
+      ]"
+      :style="[titleStyle]"
+      @tap="handleClickTitle"
+    >{{ title }}</view>
+    
+    <view
+      v-else
+      :class="[{'tn-list-view__title--card': card}]"
+      @tap="handleClickTitle"
+    >
+      <slot name="title"></slot>
+    </view>
+    
+    <view
+      class="tn-list-view__content tn-border-solid-top tn-border-solid-bottom"
+      :class="[contentClass]"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-list-view',
+    props: {
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 去掉边框 上边框 top, 下边框 bottom, 所有边框 all
+      unlined: {
+        type: String,
+        default: 'all'
+      },
+      // 上外边距
+      marginTop: {
+        type: String,
+        default: ''
+      },
+      // 内容是否显示为卡片模式
+      card: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自定义标题
+      customTitle: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      showTitle() {
+        return !this.customTitle && this.title
+      },
+      viewClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view--card'
+        }
+        
+        return clazz
+      },
+      viewStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.marginTop) {
+          style.marginTop = this.marginTop
+        }
+        
+        return style
+      },
+      titleStyle() {
+        let style = {}
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        return style
+      },
+      contentClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view__content--card'
+        }
+        
+        switch(this.unlined) {
+          case 'top':
+            clazz += ' tn-none-border-top'
+            break
+          case 'bottom':
+            clazz += ' tn-none-border-bottom'
+            break
+          case 'all':
+            clazz += ' tn-none-border'
+            break
+        }
+        
+        return clazz
+      }
+    },
+    data () {
+      return {
+        kindShowFlag: this.showKind
+      }
+    },
+    methods: {
+      // 处理标题点击事件
+      handleClickTitle() {
+        if (!this.kindList) return
+        this.kindShowFlag = !this.kindShowFlag
+        this.$emit("clickTitle", {})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-list-view {
+    background-color: #FFFFFF;
+    
+    &__title {
+      width: 100%;
+      padding: 30rpx;
+      font-size: 30rpx;
+      line-height: 30rpx;
+      box-sizing: border-box;
+      
+      &--card {
+        // margin: 0rpx 30rpx;
+      }
+    }
+    
+    &__content {
+      width: 100%;
+      position: relative;
+      border-radius: 0;
+      
+      &--card {
+        // width: auto;
+        // overflow: hidden;
+        // margin-right: 30rpx;
+        // margin-left: 30rpx;
+        // border-radius: 20rpx
+      }
+    }
+    
+    &--card {
+      // padding-bottom: 30rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
+    }
+    
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-load-more/tn-load-more.vue b/tuniao-ui/components/tn-load-more/tn-load-more.vue
new file mode 100644
index 0000000..22b6fd2
--- /dev/null
+++ b/tuniao-ui/components/tn-load-more/tn-load-more.vue
@@ -0,0 +1,188 @@
+<template>
+  <view class="tn-load-more-class tn-load-more">
+    <view
+      class="tn-load-more__wrap"
+      :class="[backgroundColorClass]"
+      :style="[loadStyle]"
+    >
+      <view class="tn-load-more__line"></view>
+      <view
+        class="tn-load-more__content"
+        :class="[{'tn-load-more__content--more': (status === 'loadmore' || status === 'nomore')}]"
+      >
+        <view class="tn-load-more__loading">
+          <tn-loading
+            class="tn-load-more__loading__icon"
+            :mode="loadingIconType"
+            :show="status === 'loading' && loadingIcon"
+            :color="loadingIconColor"
+          ></tn-loading>
+        </view>
+        <view
+          class="tn-load-more__text"
+          :class="[fontColorClass, {'tn-load-more__text--dot': (status === 'nomore' && dot)}]"
+          :style="[loadTextStyle]"
+        >{{ showText }}</view>
+      </view>
+      <view class="tn-load-more__line"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-load-more',
+    mixins: [componentsColorMixin],
+    props: {
+      // 加载状态
+      // loadmore -> 加载更多
+      // loading -> 加载中
+      // nomore -> 没有更多
+      status: {
+        type: String,
+        default: 'loadmore'
+      },
+      // 显示加载图标
+      loadingIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 加载图标样式，参考tn-loading组件的加载类型
+      loadingIconType: {
+        type: String,
+        default: 'circle'
+      },
+      // 在圆圈加载状态下，圆圈的颜色
+      loadingIconColor: {
+        type: String,
+        default: ''
+      },
+      // 显示的文字
+      loadText: {
+        type: Object,
+        default() {
+          return {
+            loadmore: '加载更多',
+            loading: '正在加载...',
+            nomore: '没有更多了'
+          }
+        }
+      },
+      // 是否显示粗点，在nomore状态下生效
+      dot: {
+        type: Boolean,
+        default: false
+      },
+      // 自定义组件样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      loadStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        // 合并用户自定义样式
+        if (Object.keys(this.customStyle).length > 0) {
+          Object.assign(style, this.customStyle)
+        }
+        return style
+      },
+      loadTextStyle() {
+        let style = {}
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+          style.lineHeight = this.$tn.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
+        }
+        return style
+      },
+      // 显示的提示文字
+      showText() {
+        let text = ''
+        if (this.status === 'loadmore') text = this.loadText.loadmore || '加载更多'
+        else if (this.status === 'loading') text = this.loadText.loading || '正在加载...'
+        else if (this.status === 'nomore' && this.dot) text = this.dotText
+        else text = this.loadText.nomore || '没有更多了'
+        
+        return text
+      }
+    },
+    data() {
+      return {
+        // 粗点
+        dotText: '●'
+      }
+    },
+    methods: {
+      // 处理加载更多事件
+      loadMore() {
+        // 只有在 loadmore 状态下点击才会发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+        if (this.status === 'loadmore') this.$emit('loadmore')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-load-more {
+    
+    &__wrap {
+      background-color: transparent;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      color: $tn-content-color;
+    }
+    
+    &__line {
+      vertical-align: middle;
+      border: 1px solid $tn-content-color;
+      width: 50rpx;
+      transform: scaleY(0.5);
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 0 12rpx;
+      
+      &--more {
+        position: relative;
+      }
+    }
+    
+    &__loading {
+      margin-right: 8rpx;
+      
+      &__icon {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    
+    &__text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      line-height: 30rpx;
+      
+      &--dot {
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-loading/tn-loading.vue b/tuniao-ui/components/tn-loading/tn-loading.vue
new file mode 100644
index 0000000..f623c93
--- /dev/null
+++ b/tuniao-ui/components/tn-loading/tn-loading.vue
@@ -0,0 +1,114 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-loading-class tn-loading"
+    :class="[
+      `tn-loading-${mode}`,
+      animation ? `tn-loading-${mode}--animation` : ''
+    ]"
+    :style="[loadStyle]"
+  ></view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-loading',
+    props: {
+      // 动画类型
+      // circle 圆圈 flower 花朵形状
+      mode: {
+        type: String,
+        default: 'circle'
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示加载动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 圆圈颜色
+      color: {
+        type: String,
+        default: ''
+      },
+      // 图标大小
+      size: {
+        type: Number,
+        default: 34
+      }
+    },
+    computed: {
+      // 加载动画圆圈的样式
+      loadStyle() {
+        let style = {}
+        style.width = this.size + 'rpx'
+        style.height = style.width
+        if (this.mode === 'circle') style.borderColor = `#E6E6E6 #E6E6E6 #E6E6E6 ${this.color ? this.color : '#AAAAAA'}`
+        
+        return style
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-loading-circle {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: 0 0;
+    border-radius: 50%;
+    border: 2px solid;
+    border-color: #E6E6E6 #E6E6E6 #E6E6E6 #AAAAAA;
+    
+    &--animation {
+      animation: tn-circle 1s linear infinite;
+      -webkit-animation: tn-circle 1s linear infinite;
+    }
+  }
+  
+  .tn-loading-flower {
+    display: inline-block;
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;;
+    background-size: 100%;
+    
+    &--animation {
+      animation: tn-flower 1s steps(12) infinite;
+      -webkit-animation: tn-flower 1s steps(12) infinite;
+    }
+  }
+  
+  @keyframes tn-flower {
+  	0% {
+  		transform: rotate(0deg);
+  		-webkit-transform: rotate(0deg);
+  	}
+  
+  	to {
+  		transform: rotate(360deg);
+  		-webkit-transform: rotate(360deg);
+  	}
+  }
+  
+  @keyframes tn-circle {
+  	0% {
+  		transform: rotate(0);
+  		-webkit-transform: rotate(0);
+  	}
+  
+  	100% {
+  		transform: rotate(360deg);
+  		-webkit-transform: rotate(360deg);
+  	}
+  }
+</style>
diff --git a/tuniao-ui/components/tn-modal/tn-modal.vue b/tuniao-ui/components/tn-modal/tn-modal.vue
new file mode 100644
index 0000000..ddcf234
--- /dev/null
+++ b/tuniao-ui/components/tn-modal/tn-modal.vue
@@ -0,0 +1,246 @@
+<template>
+  <view v-if="value" class="tn-modal-class tn-modal">
+    <tn-popup
+      v-model="value"
+      mode="center"
+      :popup="false"
+      :borderRadius="radius"
+      :width="width"
+      :zoom="zoom"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="zIndex"
+      :closeBtn="showCloseBtn"
+      @close="close"
+    >
+      <!-- 内容 -->
+      <view
+        class="tn-modal__box"
+        :class="[
+          backgroundColorClass
+        ]"
+        :style="[boxStyle]"
+      >
+        <!-- 不是自定义弹框内容 -->
+        <view v-if="!custom">
+          <view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
+          <view
+            class="tn-modal__box__content"
+            :class="[
+              fontColorClass,
+              contentClass
+            ]"
+            :style="contentStyle"
+          >{{ content }}</view>
+          <view v-if="button && button.length" class="tn-modal__box__btn-box" :class="[button.length != 2 ? 'tn-flex-direction-column' : '']">
+            <block v-for="(item, index) in button" :key="index">
+              <tn-button
+                width="100%"
+                height="68rpx"
+                :fontSize="26"
+                :backgroundColor="item.backgroundColor || ''"
+                :fontColor="item.fontColor || ''"
+                :plain="item.plain || false"
+                :shape="item.shape || 'round'"
+                :class="[
+                  button.length > 2 ? 'tn-margin-bottom' : ''
+                ]"
+                @click="handleClick(index)"
+                :style="{
+                  width: button.length != 2 ? '80%' : '46%'
+                }"
+              >
+                {{ item.text }}
+              </tn-button>
+            </block>
+          </view>
+        </view>
+        <view v-else>
+          <slot></slot>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-modal',
+    props: {
+      // 显示控制
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 弹框宽度
+      width: {
+        type: String,
+        default: '84%'
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 12
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 内容
+      content: {
+        type: String,
+        default: ''
+      },
+      // 按钮内容 设置参数与button组件的参数一致
+      // {
+      //   text: '确定',
+      //   backgroundColor: 'red',
+      //   fontColor: 'white',
+      //   plain: true,
+      //   shape: ''
+      // }
+      button: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 点击遮罩是否可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示右上角关闭按钮
+      showCloseBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 放大动画
+      zoom: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义弹框内容
+      custom: {
+        type: Boolean,
+        default: false
+      },
+      // 弹框的z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      boxStyle() {
+        let style = {}
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        return style
+      },
+      contentClass() {
+        let clazz = ''
+        if (this.title) {
+          clazz += ' tn-margin-top'
+        } else {
+          clazz += ' tn-modal__box__content--no-title'
+        }
+        
+        return clazz
+      },
+      contentStyle() {
+        let style = {}
+        
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        return style
+      },
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理按钮点击事件
+      handleClick(index) {
+        if (!this.value) return
+        this.$emit("click", {
+          index: Number(index)
+        })
+      },
+      // 处理关闭事件
+      close() {
+        this.$emit("cancel")
+        this.$emit('input', false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-modal {
+    
+    &__box {
+      position: relative;
+      box-sizing: border-box;
+      background-color: #FFFFFF;
+      padding: 40rpx 64rpx;
+      
+      &__title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        padding-top: 20rpx;
+        font-weight: bold;
+      }
+      
+      &__content {
+        text-align: center;
+        padding-bottom: 30rpx;
+        color: $tn-font-color;
+        font-size: 28rpx;
+        
+        &--no-title {
+          padding-bottom: 0rpx !important;
+        }
+      }
+      
+      &__btn-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      
+      &__content ~ &__btn-box {
+        margin-top: 30rpx;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue b/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
new file mode 100644
index 0000000..48f7173
--- /dev/null
+++ b/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
@@ -0,0 +1,355 @@
+<template>
+  <view
+    class="tn-custom-nav-bar-class tn-custom-nav-bar"
+    :style="[navBarStyle]"
+  >
+  	<view
+      class="tn-custom-nav-bar__bar"
+      :class="[barClass]"
+      :style="[barStyle]"
+    >
+      <view v-if="isBack">
+        <view v-if="customBack">
+          <view 
+            :style="{
+              width: customBackStyleInfo.width + 'px',
+              height: customBackStyleInfo.height + 'px',
+              marginLeft: customBackStyleInfo.left + 'px'
+            }"
+          >
+            <slot name="back"></slot>
+          </view>
+        </view>
+        <view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
+        	<text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
+        	<text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
+        </view>
+      </view>
+  		<view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
+  			<slot></slot>
+  		</view>
+  		<view>
+        <slot name="right"></slot>
+      </view>
+  	</view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-nav-bar',
+    mixins: [componentsColorMixin],
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 导航栏的高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 高度单位
+      unit: {
+        type: String,
+        default: 'px'
+      },
+      // 是否显示返回按钮
+      isBack: {
+        type: Boolean,
+        default: true
+      },
+      // 返回按钮的图标
+      backIcon: {
+        type: String,
+        default: 'left'
+      },
+      // 返回按钮旁显示的文字
+      backTitle: {
+        type: String,
+        default: '返回'
+      },
+      // 透明状态栏
+      alpha: {
+        type: Boolean,
+        default: false
+      },
+      // 是否固定在顶部
+      fixed: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示底部阴影
+      bottomShadow: {
+        type: Boolean,
+        default: true
+      },
+      // 是否自定义返回按钮
+      customBack: {
+        type: Boolean,
+        default: false
+      },
+      // 返回前回调
+      beforeBack: {
+        type: Function,
+        default: null
+      }
+    },
+    computed: {
+      navBarStyle() {
+        let style = {}
+        style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
+        if (this.fixed) {
+          style.position = 'fixed'
+        }
+        style.zIndex = this.elZIndex
+        
+        return style
+      },
+      barClass() {
+        let clazz = ''
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += `${this.fontColorClass}`
+        }
+        if (this.fixed) {
+          clazz += ' tn-custom-nav-bar__bar--fixed'
+        }
+        if (this.alpha) {
+          clazz += ' tn-custom-nav-bar__bar--alpha'
+        }
+        if (this.bottomShadow) {
+          clazz += ' tn-custom-nav-bar__bar--bottom-shadow'
+        }
+        
+        return clazz
+      },
+      barStyle() {
+        let style = {}
+        style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
+        
+        if (this.fixed) {
+          style.paddingTop = this.statusBarHeight + 'px'
+        }
+        
+        if(!this.backgroundColorClass) {
+          style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
+        }
+        if (!this.fontColorClass && this.fontColor) {
+          style.color= this.fontColor
+        }
+        
+        style.zIndex = this.elZIndex
+        
+        return style
+      },
+      contentStyle() {
+        let style = {}
+        style.top = this.fixed ? this.statusBarHeight + 'px' : '0px'
+        style.height = this.height === 0 ? (this.customBarHeight - this.statusBarHeight) + this.unit : this.height + this.unit
+        style.lineHeight = style.height
+        
+        if (this.isBack) {
+          if (this.customBack) {
+            const width = (this.customBackStyleInfo.width + this.customBackStyleInfo.left) * 2
+            style.width = `calc(100% - ${width}px)`
+          } else {
+            style.width = 'calc(100% - 340rpx)'
+          }
+        } else {
+          style.width = '100%'
+        }
+        
+        return style
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.navbar
+      }
+    },
+    data() {
+      return {
+        // 状态栏的高度
+        statusBarHeight: 0,
+        // 自定义导航栏的高度
+        customBarHeight: 0,
+        // 自定义返回按钮时，返回容器的宽高边距信息
+        customBackStyleInfo: {
+          width: 86,
+          height: 32,
+          left: 15
+        }
+      }
+    },
+    mounted() {
+      // 获取vuex中的自定义顶栏的高度
+      this.updateNavBarInfo()
+    },
+    created() {
+      // 获取胶囊信息
+      // #ifdef MP-WEIXIN
+      let custom = wx.getMenuButtonBoundingClientRect()
+      this.customBackStyleInfo.width = custom.width
+      this.customBackStyleInfo.height = custom.height
+      this.customBackStyleInfo.left = uni.upx2px(750) - custom.right
+      // #endif
+    },
+    methods: {
+      // 更新导航栏的高度
+      async updateNavBarInfo() {
+        // 获取vuex中的自定义顶栏的高度
+        let customBarHeight = this.vuex_custom_bar_height
+        let statusBarHeight = this.vuex_status_bar_height
+        // 如果获取失败则重新获取
+        if (!customBarHeight) {
+          try {
+            const navBarInfo = await this.$tn.updateCustomBar()
+            customBarHeight = navBarInfo.customBarHeight
+            statusBarHeight = navBarInfo.statusBarHeight
+          } catch(e) {
+            setTimeout(() => {
+              this.updateNavBarInfo()
+            }, 10)
+            return
+          }
+        }
+        
+        // 更新vuex中的导航栏信息
+        this && this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
+        this && this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
+        
+        this.customBarHeight = customBarHeight
+        this.statusBarHeight = statusBarHeight
+      },
+      // 处理返回事件
+      async handlerBack() {
+        if (this.beforeBack && typeof(this.beforeBack) === 'function') {
+          // 执行回调，同时传入索引当作参数
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          let beforeBack = this.beforeBack.bind(this.$tn.$parent.call(this))()
+          // 判断是否返回了Promise
+          if (!!beforeBack && typeof beforeBack.then === 'function') {
+            await beforeBack.then(res => {
+              // Promise返回成功
+              this.navBack()
+            }).catch(err => {})
+          } else if (beforeBack === true) {
+            this.navBack()
+          }
+        } else {
+          this.navBack()
+        }
+      },
+      // 返回上一页
+      navBack() {
+        
+        // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+        const pages = getCurrentPages()
+        if (pages && pages.length > 0) {
+          const firstPage = pages[0]
+          if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
+            uni.reLaunch({
+              url: '/pages/index/index'
+            })
+          } else {
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+        } else {
+          uni.reLaunch({
+            url: '/pages/index/index'
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-custom-nav-bar {
+    display: block;
+    position: relative;
+    
+    &__bar {
+      display: flex;
+      position: relative;
+      align-items: center;
+      min-height: 100rpx;
+      justify-content: space-between;
+      min-height: 0px;
+      /* #ifdef MP-WEIXIN */
+      padding-right: 220rpx;
+      /* #endif */
+      /* #ifdef MP-ALIPAY */
+      padding-right: 150rpx;
+      /* #endif */
+      box-shadow: 0rpx 0rpx 0rpx;
+      z-index: 9999;
+      
+      &--fixed {
+        position: fixed;
+        width: 100%;
+        top: 0;
+      }
+      
+      &--alpha {
+        background: transparent !important;
+        box-shadow: none !important;
+      }
+      
+      &--bottom-shadow {
+        box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
+      }
+      
+      &__action {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        max-width: 100%;
+        
+        &--nav-back {
+          /* position: absolute; */
+          /* top: 50%; */
+          /* left: 20rpx; */
+          /* margin-top: -15rpx; */
+          // width: 25rpx;
+          // height: 25rpx;
+          margin-left: 20rpx;
+          font-size: 38rpx;
+          line-height: 100%;
+          // border-width: 0 0 4rpx 4rpx;
+          // border-color: #000000;
+          // border-style: solid;
+          // transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+        }
+        
+        &--nav-back-text {
+          margin-left: 10rpx;
+        }
+      }
+      
+      &__content {
+        position: absolute;
+        text-align: center;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        font-size: 32rpx;
+        cursor: none;
+        // pointer-events: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue b/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
new file mode 100644
index 0000000..22b1974
--- /dev/null
+++ b/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
@@ -0,0 +1,209 @@
+<template>
+  <view
+    v-if="showNotice"
+    class="tn-notice-bar-class tn-notice-bar"
+    :style="{
+      borderRadius: radius + 'rpx'
+    }"
+  >
+    <block v-if="mode === 'horizontal' && circular">
+      <tn-row-notice
+        :backgroundColor="backgroundColor"
+        :fontColor="fontColor"
+        :fontSize="fontSize"
+        :fontUnit="fontUnit"
+        :list="list"
+        :show="show"
+        :playStatus="playStatus"
+        :leftIcon="leftIcon"
+        :leftIconName="leftIconName"
+        :leftIconSize="leftIconSize"
+        :rightIcon="rightIcon"
+        :rightIconName="rightIconName"
+        :rightIconSize="rightIconSize"
+        :closeBtn="closeBtn"
+        :autoplay="autoplay"
+        :radius="radius"
+        :padding="padding"
+        :speed="speed"
+        @click="click"
+        @close="close"
+        @clickLeft="clickLeftIcon"
+        @clickRight="clickRightIcon"
+      ></tn-row-notice>
+    </block>
+    <block v-if="mode === 'vertical' || (mode === 'horizontal' && !circular)">
+      <tn-column-notice
+        :backgroundColor="backgroundColor"
+        :fontColor="fontColor"
+        :fontSize="fontSize"
+        :fontUnit="fontUnit"
+        :list="list"
+        :show="show"
+        :mode="mode"
+        :playStatus="playStatus"
+        :leftIcon="leftIcon"
+        :leftIconName="leftIconName"
+        :leftIconSize="leftIconSize"
+        :rightIcon="rightIcon"
+        :rightIconName="rightIconName"
+        :rightIconSize="rightIconSize"
+        :closeBtn="closeBtn"
+        :autoplay="autoplay"
+        :radius="radius"
+        :padding="padding"
+        :duration="duration"
+        @click="click"
+        @close="close"
+        @clickLeft="clickLeftIcon"
+        @clickRight="clickRightIcon"
+        @end="end"
+      ></tn-column-notice>
+    </block>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-notice-bar',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 滚动方向
+      // horizontal -> 水平滚动 vertical -> 垂直滚动
+      mode: {
+        type: String,
+        default: 'horizontal'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动周期
+      duration: {
+        type: Number,
+        default: 2000
+      },
+      // 水平滚动时的速度，即每秒滚动多少rpx
+      speed: {
+        type: Number,
+        default: 160
+      },
+      // 水平滚动的时候是否采用衔接的模式
+      circular: {
+        type: Boolean,
+        default: true
+      },
+      // 没有数据时是否显示通知
+      autoHidden: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
+      showNotice() {
+        if (this.show === false || (this.autoHidden && this.list.length === 0)) return false
+        else return true
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 点击了通知栏
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      },
+      // 一个周期滚动结束
+      end() {
+        this.$emit('end')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-notice-bar {
+    overflow: hidden;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-number-box/tn-number-box.vue b/tuniao-ui/components/tn-number-box/tn-number-box.vue
new file mode 100644
index 0000000..63b2a52
--- /dev/null
+++ b/tuniao-ui/components/tn-number-box/tn-number-box.vue
@@ -0,0 +1,401 @@
+<template>
+  <view class="tn-number-box-class tn-number-box">
+    <!-- 减 -->
+    <view
+      class="tn-number-box__btn__minus"
+      :class="[
+        backgroundColorClass,
+        fontColorClass,
+        {'tn-number-box__btn--disabled': disabled || inputValue <= min}
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        height: $tn.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle
+      }"
+      @touchstart.stop.prevent="touchStart('minus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view class="tn-icon-reduce"></view>
+    </view>
+    
+    <!-- 输入框 -->
+    <input
+      v-model="inputValue"
+      :disabled="disabledInput || disabled"
+      :cursor-spacing="getCursorSpacing"
+      class="tn-number-box__input"
+      :class="[
+        fontColorClass,
+        {'tn-number-box__input--disabled': disabledInput || disabled}
+      ]"
+      :style="{
+        width: $tn.string.getLengthUnitValue(inputWidth),
+        height: $tn.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle,
+        backgroundColor: backgroundColorStyle
+      }"
+      @blur="blurInput"
+      @focus="focusInput"
+    />
+    
+    <!-- 加 -->
+    <view
+      class="tn-number-box__btn__plus"
+      :class="[
+        backgroundColorClass,
+        fontColorClass,
+        {'tn-number-box__btn--disabled': disabled || inputValue >= max}
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        height: $tn.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle
+      }"
+      @touchstart.stop.prevent="touchStart('plus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view class="tn-icon-add"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-number-box',
+    props: {
+      value: {
+        type: Number,
+        default: 1
+      },
+      // 索引
+      index: {
+        type: [Number, String],
+        default: ''
+      },
+      // 最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: Number,
+        default: 99999
+      },
+      // 步进值
+      step: {
+        type: Number,
+        default: 1
+      },
+      // 禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否禁用输入
+      disabledInput: {
+        type: Boolean,
+        default: false
+      },
+      // 输入框的宽度
+      inputWidth: {
+        type: Number,
+        default: 88
+      },
+      // 输入框的高度
+      inputHeight: {
+        type: Number,
+        default: 50
+      },
+      // 输入框和键盘之间的距离
+      cursorSpacing: {
+        type: Number,
+        default: 100
+      },
+      // 是否开启长按进行连续递增减
+      longPress: {
+        type: Boolean,
+        default: true
+      },
+      // 长按触发间隔
+      longPressTime: {
+        type: Number,
+        default: 250
+      },
+      // 是否只能输入正整数
+      positiveInteger: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      getCursorSpacing() {
+        return Number(uni.upx2px(this.cursorSpacing))
+      }
+    },
+    data() {
+      return {
+        // 输入框的值
+        inputValue: 1,
+        // 长按定时器
+        longPressTimer: null,
+        // 标记值的改变是来自外部还是内部
+        changeFromInner: false,
+        // 内部定时器
+        innerChangeTimer: null
+      }
+    },
+    watch: {
+      value(val) {
+        // 只有value的改变是来自外部的时候，才去同步inputValue的值，否则会造成循环错误
+        if (!this.changeFromInner) {
+          this.updateInputValue()
+          // 因为inputValue变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+          // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+          // 将changeFromInner设置为false
+          this.$nextTick(() => {
+          	this.changeFromInner = false
+          })
+        }
+      },
+      inputValue(newVal, oldVal) {
+        // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+        if (newVal === '') return
+        let value = 0
+        // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+        let isNumber = this.$tn.test.number(newVal)
+        if (isNumber && newVal >= this.min && newVal <= this.max) value = newVal
+        else value = oldVal
+        
+        // 判断是否只能输入大于等于0的整数
+        if (this.positiveInteger) {
+          // 小于0或者带有小数点
+          if (newVal < 0 || String(newVal).indexOf('.') !== -1) {
+            value = Math.floor(newVal)
+            // 双向绑定input的值，必须要使用$nextTick修改显示的值
+            this.$nextTick(() => {
+            	this.inputValue = value
+            })
+          }
+        }
+        this.handleChange(value, 'change')
+      },
+      min() {
+        this.updateInputValue()
+      },
+      max() {
+        this.updateInputValue()
+      }
+    },
+    created() {
+      this.updateInputValue()
+    },
+    methods: {
+      // 开始点击按钮
+      touchStart(func) {
+        // 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+        this[func]()
+        // 如果没有开启长按功能，直接返回
+        if (!this.longPress) return
+        // 清空长按定时器，防止重复注册
+        if (this.longPressTimer) {
+          clearInterval(this.longPressTimer)
+          this.longPressTimer = null
+        }
+        this.longPressTimer = setInterval(() => {
+          // 执行加减操作
+          this[func]()
+        }, this.longPressTime)
+      },
+      // 清除定时器
+      clearTimer() {
+        this.$nextTick(() => {
+          if (this.longPressTimer) {
+            clearInterval(this.longPressTimer)
+            this.longPressTimer = null
+          }
+        })
+      },
+      // 减
+      minus() {
+        this.computeValue('minus')
+      },
+      // 加
+      plus() {
+        this.computeValue('plus')
+      },
+      // 处理小数相加减出现溢出问题
+      calcPlus(num1, num2) {
+        let baseNum = 0, baseNum1 = 0, baseNum2 = 0
+        try {
+          baseNum1 = num1.toString().split('.')[1].length
+        } catch(e) {
+          baseNum1 = 0
+        }
+        try {
+          baseNum2 = num2.toString().split('.')[1].length
+        } catch(e) {
+          baseNum2 = 0
+        }
+        
+        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
+        // 精度
+        let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
+        return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision)
+      },
+      calcMinus(num1, num2) {
+        let baseNum = 0, baseNum1 = 0, baseNum2 = 0
+        try {
+          baseNum1 = num1.toString().split('.')[1].length
+        } catch(e) {
+          baseNum1 = 0
+        }
+        try {
+          baseNum2 = num2.toString().split('.')[1].length
+        } catch(e) {
+          baseNum2 = 0
+        }
+        
+        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
+        // 精度
+        let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
+        return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision)
+      },
+      // 处理操作后的值
+      computeValue(type) {
+        uni.hideKeyboard()
+        if (this.disabled) return
+        let value = 0
+        
+        if (type === 'minus') {
+          // 减
+          value = this.calcMinus(this.inputValue, this.step)
+        } else if (type === 'plus') {
+          // 加
+          value = this.calcPlus(this.inputValue, this.step)
+        }
+        // 判断是否比最小值小和操作最大值
+        if (value < this.min || value > this.max) return
+        
+        this.inputValue = value
+        this.handleChange(value, type)
+      },
+      // 处理用户手动输入
+      blurInput(event) {
+        let val = 0,
+            value = event.detail.value
+        // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+        // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+        if (!/(^\d+$)/.test(value) || value[0] == 0) {
+          val = this.min
+        } else {
+          val = +value
+        }
+        
+        if (val > this.max) {
+          val = this.max
+        } else if (val < this.min) {
+          val = this.min
+        }
+        this.$nextTick(() => {
+          this.inputValue = val
+        })
+        this.handleChange(val, 'blur')
+      },
+      // 获取焦点
+      focusInput() {
+        this.$emit('focus')
+      },
+      // 初始化inputValue
+      updateInputValue() {
+        let value = this.value
+        if (value <= this.min) {
+          value = this.min
+        } else if (value >= this.max) {
+          value = this.max
+        }
+        
+        this.inputValue = Number(value)
+      },
+      // 处理值改变状态
+      handleChange(value, type) {
+        if (this.disabled) return
+        // 清除定时器，防止混乱
+        if (this.innerChangeTimer) {
+          clearTimeout(this.innerChangeTimer)
+          this.innerChangeTimer = null
+        }
+        
+        // 内部修改值
+        this.changeFromInner = true
+        // 一定时间内，清除changeFromInner标记，否则内部值改变后
+        // 外部通过程序修改value值，将会无效
+        this.innerChangeTimer = setTimeout(() => {
+          this.changeFromInner = false
+        }, 150)
+        this.$emit('input', Number(value))
+        this.$emit(type, {
+          value: Number(value),
+          index: this.index
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-number-box {
+    display: inline-flex;
+    align-items: center;
+    
+    &__btn {
+      &__plus,&__minus {
+        width: 60rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        background-color: $tn-font-holder-color;
+      }
+      
+      &__plus {
+        border-radius: 0 8rpx 8rpx 0;
+      }
+      
+      &__minus {
+        border-radius: 8rpx 0 0 8rpx;
+      }
+      
+      &--disabled {
+        color: $tn-font-sub-color !important;
+        background: $tn-font-holder-color !important;
+      }
+    }
+    
+    &__input {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 4rpx;
+      margin: 0 6rpx;
+      background-color: $tn-font-holder-color;
+      
+      &--disabled {
+        color: $tn-font-sub-color !important;
+        background: $tn-font-holder-color !important;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue b/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
new file mode 100644
index 0000000..9d3201a
--- /dev/null
+++ b/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
@@ -0,0 +1,182 @@
+<template>
+  <view class="tn-number-keyboard-class tn-number-keyboard" @touchmove.stop.prevent="() => {}">
+    <view class="tn-number-keyboard__grids">
+      <view
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="tn-number-keyboard__grids__item"
+        :class="{
+          'tn-bg-gray--light': showGaryBg(index),
+          'tn-border-solid-top': index <= 2,
+          'tn-border-solid-bottom': index < 9,
+          'tn-border-solid-right': (index + 1) % 3 != 0
+        }"
+        :hover-class="hoverClass(index)"
+        :hover-stay-time="150"
+        @tap="keyboardClick(item)"
+      >
+        <view class="tn-number-keyboard__grids__btn">{{ item }}</view>
+      </view>
+      
+      <view
+        class="tn-number-keyboard__grids__item tn-bg-gray--light"
+        hover-class="tn-hover"
+        :hover-stay-time="150"
+        @touchstart.stop="backspaceClick"
+        @touchend="clearTimer"
+      >
+        <view class="tn-number-keyboard__grids__btn tn-number-keyboard__back">
+          <view class="tn-icon-left-arrow tn-number-keyboard__back__icon"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-number-keyboard',
+    props: {
+      // 键盘类型
+      // number -> 数字键盘 card -> 身份证键盘
+      mode: {
+        type: String,
+        default: 'number'
+      },
+      // 是否显示键盘的'.'符号
+      dotEnabled: {
+        type: Boolean,
+        default: true
+      },
+      // 是否为乱序键盘
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 键盘显示的内容
+      dataList() {
+        let tmp = []
+        if (!this.dotEnabled && this.mode === 'number') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
+          } else {
+            let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, '')
+            return data
+          }
+        } else if (this.dotEnabled && this.mode === 'number') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]
+          } else {
+            let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, this.dot)
+            return data
+          }
+        } else if (this.mode === 'card') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]
+          } else {
+            let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, this.cardX)
+            return data
+          }
+        }
+      },
+      // 按键的样式
+      keyStyle() {
+        return index => {
+          let style = {}
+          if (this.mode === 'number' && !this.dotEnabled && index === 9) style.flex = '0 0 66.6666666666%'
+          return style
+        }
+      },
+      // 是否让按键显示灰色，只在数字键盘和非乱序且在点击时
+      showGaryBg() {
+        return index => {
+          if (!this.randomEnabled && index === 9 && (this.mode !== 'number' || (this.mode === 'number' && this.dotEnabled))) return true
+          else return false
+        }
+      },
+      // 手指停留的class
+      hoverClass() {
+        return index => {
+          if (this.mode === 'number' && !this.dotEnabled && index === 9) return ''
+          if (!this.randomEnabled && index === 9 && (this.mode === 'number' && this.dotEnabled || this.mode === 'card')) return 'tn-hover'
+          else return 'tn-number-keyboard--hover'
+        }
+      }
+    },
+    data() {
+      return {
+        // 退格键内容
+        backspace: 'backspace',
+        // 点内容
+        dot: '.',
+        // 长按多次删除事件监听
+        longPressDeleteTimer: null,
+        // 身份证的X符号
+        cardX: 'X'
+      }
+    },
+    methods: {
+      // 点击退格键
+      backspaceClick() {
+        this.$emit('backspace')
+        this.clearTimer()
+        this.longPressDeleteTimer = setInterval(() => {
+          this.$emit('backspace')
+        }, 250)
+      },
+      // 获取键盘显示的内容
+      keyboardClick(value) {
+        if (this.mode === 'number' && !this.dotEnabled && value === '') return
+        // 允许键盘显示点模式和触发非点按键时，将内容转换为数字类型
+        if (this.dotEnabled && value != this.dot && value != this.cardX) value = Number(value)
+        this.$emit('change', value)
+      },
+      // 清除定时器
+      clearTimer() {
+        if (this.longPressDeleteTimer) {
+          clearInterval(this.longPressDeleteTimer)
+          this.longPressDeleteTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-number-keyboard {
+    position: relative;
+    
+    &__grids {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      
+      &__item {
+        display: flex;
+        flex-direction: row;
+        flex: 0 0 33.3333333333%;
+        align-items: center;
+        justify-content: center;
+        height: 110rpx;
+        text-align: center;
+        font-size: 50rpx;
+        color: $tn-font-color;
+        font-weight: 500;
+      }
+    }
+    
+    &__back {
+      font-size: 38rpx;
+    }
+    
+    &--hover {
+      background-color: $tn-font-holder-color;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-picker/tn-picker.vue b/tuniao-ui/components/tn-picker/tn-picker.vue
new file mode 100644
index 0000000..c2f5def
--- /dev/null
+++ b/tuniao-ui/components/tn-picker/tn-picker.vue
@@ -0,0 +1,723 @@
+<template>
+  <view v-if="value" class="tn-picker-class tn-picker">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <view class="tn-picker__content" :style="{ zIndex: elZIndex }">
+        <!-- 顶部 -->
+        <view class="tn-picker__content__header tn-border-solid-bottom" @touchmove.stop.prevent>
+          <!-- 取消按钮 -->
+          <view
+            class="tn-picker__content__header__btn tn-picker__content__header--cancel"
+            :style="{ color: cancelColor }"
+            hover-class="tn-hover-class"
+            :hover-stay-time="150"
+            @tap="getResult('cancel')"
+          >{{cancelText}}</view>
+          <!-- 标题 -->
+          <view class="tn-picker__content__header__title">{{ title }}</view>
+          <!-- 确认按钮 -->
+          <view
+            class="tn-picker__content__header__btn tn-picker__content__header--confirm"
+            :style="{ color: moving ? cancelColor : confirmColor}"
+            hover-class="tn-hover-class"
+            :hover-stay-time="150"
+            @touchmove.stop
+            @tap.stop="getResult('confirm')"
+          >{{confirmText}}</view>
+        </view>
+        <!-- 主体 -->
+        <view class="tn-picker__content__body">
+          <!-- 地区选择 -->
+          <picker-view
+            v-if="mode === 'region'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset && params.province">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in provinces" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.city">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in citys" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.area">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in areas" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 时间选择 -->
+          <picker-view
+            v-else-if="mode === 'time'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset && params.year">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in years" :key="index">
+                {{ item }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item__text">年</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.month">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in months" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">月</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.day">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in days" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">日</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.hour">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in hours" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">时</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.minute">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in minutes" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">分</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.second">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in seconds" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">秒</text>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 单列选择 -->
+          <picker-view
+            v-else-if="mode === 'selector'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in range" :key="index">
+                <view class="tn-text-ellipsis">{{ getItemValue(item, 'selector') }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 多列选择 -->
+          <picker-view
+            v-else-if="mode === 'multiSelector'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
+              <view class="tn-picker__content__body__item" v-for="(sub_item, sub_index) in item" :key="sub_index">
+                <view class="tn-text-ellipsis">{{ getItemValue(sub_item, 'multiSelector') }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import provinces from '../../libs/utils/province.js'
+  import citys from '../../libs/utils/city.js'
+  import areas from '../../libs/utils/area.js'
+  
+  export default {
+    name: 'tn-picker',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      // 顶部标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // picker中显示的参数
+      params: {
+        type: Object,
+        default() {
+          return {
+            year: true,
+            month: true,
+            day: true,
+            hour: false,
+            minute: false,
+            second: false,
+            province: true,
+            city: true,
+            area: true,
+            timestamp: true
+          }
+        }
+      },
+      // 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
+      mode: {
+        type: String,
+        default: 'time'
+      },
+      // 当mode=selector或者mode=multiSelector时，提供的数组
+      range: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当mode=selector或者mode=multiSelector时，提供的默认项下标
+      defaultSelector: {
+        type: Array,
+        default() {
+          return [0]
+        }
+      },
+      // 当range是一个Array<Object>时，通过rangeKey来指定Object中key的值作为显示的内容
+      rangeKey: {
+        type: String,
+        default: ''
+      },
+      // 时间模式 ，是否显示时间后的单位
+      showTimeTag: {
+        type: Boolean,
+        default: true
+      },
+      // 开始年份
+      startYear: {
+        type: [String, Number],
+        default: 1950
+      },
+      // 结束年份
+      endYear: {
+        type: [String, Number],
+        default: 2050
+      },
+      // 默认显示的时间
+      // 2021-09-01 || 2021-09-01 13:00:23 || 2021/09/01
+      defaultTime: {
+        type: String,
+         default: ''
+      },
+      // 默认显示的地区
+      // 可传类似["广东省", "广州市", "天河区"]
+      defaultRegin: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 默认显示的地区编码
+      // 可传类似["11", "1101", "110101"]
+      // 如果defaultRegin和areaCode同时存在，优先使用areaCode的值
+      areaCode: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 取消按钮的文字
+      cancelText: {
+        type: String,
+        default: '取消'
+      },
+      // 取消按钮的颜色
+      cancelColor: {
+        type: String,
+        default: ''
+      },
+      // 确认按钮的文字
+      confirmText: {
+        type: String,
+        default: '确认'
+      },
+      // 确认按钮的演示
+      confirmColor: {
+        type: String,
+        default: ''
+      },
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 是否允许通过点击遮罩关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 监听参数变化
+      propsChange() {
+        return [this.mode, this.defaultTime, this.startYear, this.endYear, this.defaultRegin, this.areaCode]
+      },
+      // 监听地区发生变化
+      regionChange() {
+        return [this.province, this.city]
+      },
+      // 监听年月发生变化
+      yearAndMonth() {
+        return [this.year, this.month]
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        years: [],
+        months: [],
+        days: [],
+        hours: [],
+        minutes: [],
+        seconds: [],
+        year: 0,
+        month: 0,
+        day: 0,
+        hour: 0,
+        minute: 0,
+        second: 0,
+        reset: false,
+        startDate: '',
+        endDate: '',
+        valueArr: [],
+        provinces: provinces,
+        citys: citys[0],
+        areas: areas[0][0],
+        province: 0,
+        city: 0,
+        area: 0,
+        // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+        moving: false
+      }
+    },
+    watch: {
+      propsChange() {
+        this.reset = true
+        setTimeout(() => this.init(), 10)
+      },
+      regionChange() {
+        // 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
+        this.citys = citys[this.province]
+        this.areas = areas[this.province][this.city]
+      },
+      yearAndMonth() {
+        // 月份的变化，实时变更日的天数，因为不同月份，天数不一样
+        // 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
+        if (this.params.year) this.setDays()
+      },
+      value(val) {
+        // 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
+        if (val) {
+          this.reset = true
+          setTimeout(() => this.init(), 10)
+        }
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 记录开始滑动
+      pickStart() {
+        // #ifdef MP-WEIXIN
+        this.moving = true
+        // #endif
+      },
+      // 记录滚动结束
+      pickEnd() {
+        // #ifdef MP-WEIXIN
+        this.moving = false
+        // #endif
+      },
+      // 根据传递的列表的数据获取显示的数据
+      getItemValue(item, mode) {
+        // 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
+        if (this.mode === mode) {
+          return typeof item === 'object' ? item[this.rangeKey] : item
+        }
+      },
+      // 往数字前面补0
+      formatNumber(num) {
+        return this.$tn.number.formatNumberAddZero(num)
+      },
+      // 生成递进的数组
+      generateArray(start, end) {
+        // 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加
+        start = Number(start)
+        end = Number(end)
+        end = end > start ? end : start
+        // 生成数组并获取其中索引然后提取出来(获取开始和结束之间的数据)
+        return [...Array(end+1).keys()].slice(start)
+      },
+      getIndex(arr, val) {
+        let index = arr.indexOf(val)
+        // 如果index为-1着找不到元素
+        // ~(-1)=(-1)-1=0
+        return ~index ? index : 0
+      },
+      // 日期时间处理
+      initTimeValue() {
+        // 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
+        let fdate = this.defaultTime.replace(/\-/g, '/')
+        fdate = fdate && fdate.indexOf('/') == -1 ? `2021/01/01 ${fdate}` : fdate
+        let time = null
+        if (fdate) time = new Date(fdate)
+        else time = new Date()
+        // 获取年月日时分秒
+        this.year = time.getFullYear()
+        this.month = time.getMonth() + 1
+        this.day = time.getDate()
+        this.hour = time.getHours()
+        this.minute = time.getMinutes()
+        this.second = time.getSeconds()
+      },
+      // 初始化数据
+      init() {
+        this.valueArr = []
+        this.reset = false
+        if (this.mode === 'time') {
+          this.initTimeValue()
+          if (this.params.year) {
+            this.valueArr.push(0)
+            this.setYears()
+          }
+          if (this.params.month) {
+            this.valueArr.push(0)
+            this.setMonths()
+          }
+          if (this.params.day) {
+            this.valueArr.push(0)
+            this.setDays()
+          }
+          if (this.params.hour) {
+            this.valueArr.push(0)
+            this.setHours()
+          }
+          if (this.params.minute) {
+            this.valueArr.push(0)
+            this.setMinutes()
+          }
+          if (this.params.second) {
+            this.valueArr.push(0)
+            this.setSeconds()
+          }
+        } else if (this.mode === 'region') {
+          if (this.params.province) {
+            this.valueArr.push(0)
+            this.setProvinces()
+          }
+          if (this.params.city) {
+            this.valueArr.push(0)
+            this.setCitys()
+          }
+          if (this.params.area) {
+            this.valueArr.push(0)
+            this.setAreas()
+          }
+        } else if (this.mode === 'selector') {
+          this.valueArr = this.defaultSelector
+        } else if (this.mode === 'multiSelector') {
+          this.valueArr = this.defaultSelector
+          this.multiSelectorValue = this.defaultSelector
+        }
+        this.$forceUpdate()
+      },
+      // 设置picker某一列的值
+      setYears() {
+        this.years = this.generateArray(this.startYear, this.endYear)
+        // 设置this.valueArr某一项的值，是为了让picker预选中某一个值
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year))
+      },
+      setMonths() {
+        this.months = this.generateArray(1, 12)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month))
+      },
+      setDays() {
+        let totalDays = new Date(this.year, this.month, 0).getDate()
+        this.days = this.generateArray(1, totalDays)
+        let index = 0
+        // 避免多次触发导致值数组计算错误
+        if (this.params.year && this.params.month) index = 2
+        else if (this.params.month) index = 1
+        else if (this.params.year) index = 1
+        else index = 0
+        
+        // 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值
+        // 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始)
+        if (this.day > this.days.length) this.day = this.days.length
+        this.valueArr.splice(index, 1, this.getIndex(this.days, this.day))
+      },
+      setHours() {
+        this.hours = this.generateArray(0, 23)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour))
+      },
+      setMinutes() {
+        this.minutes = this.generateArray(0, 59)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute))
+      },
+      setSeconds() {
+        this.seconds = this.generateArray(0, 59)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second))
+      },
+      setProvinces() {
+        if (!this.params.province) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[0]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[0]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        provinces.map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.province = k
+            return
+          }
+        })
+        this.provinces = provinces
+        this.valueArr.splice(0, 1, this.province)
+      },
+      setCitys() {
+        if (!this.params.city) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[1]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[1]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        citys[this.province].map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.city = k
+            return
+          }
+        })
+        this.citys = citys[this.province]
+        this.valueArr.splice(1, 1, this.city)
+      },
+      setAreas() {
+        if (!this.params.area) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[2]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[2]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        areas[this.province][this.city].map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.area = k
+            return
+          }
+        })
+        this.areas = areas[this.province][this.city]
+        this.valueArr.splice(2, 1, this.area)
+      },
+      close() {
+        this.$emit('input', false)
+      },
+      // 监听用户修改了picker列选项
+      change(event) {
+        this.valueArr = event.detail.value
+        let i = 0
+        if (this.mode === 'time') {
+          // 使用i++是因为不知道数组的长度
+          if (this.params.year) this.year = this.years[this.valueArr[i++]]
+          if (this.params.month) this.month = this.months[this.valueArr[i++]]
+          if (this.params.day) this.day = this.days[this.valueArr[i++]]
+          if (this.params.hour) this.hour = this.hours[this.valueArr[i++]]
+          if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]]
+          if (this.params.second) this.second = this.seconds[this.valueArr[i++]]
+        } else if (this.mode === 'region') {
+          // 标记省市是否发生了变化
+          let provinceChange = false,
+              cityChange = false
+          if (this.params.province) {
+            let value = this.valueArr[i++]
+            if (this.province != value) {
+              // 如果省份发生了变化，则重置市区的索引为0
+              this.city = 0
+              this.area = 0
+              provinceChange = true
+            }
+            this.province = value
+          }
+          if (this.params.city && !provinceChange) {
+            let value = this.valueArr[i++]
+            if (this.city != value) {
+              // 如果市发生了变化，则重置区的索引为0
+              this.area = 0
+              cityChange = true
+            }
+            this.city = value
+          }
+          if (this.params.area && !provinceChange && !cityChange) this.area = this.valueArr[i++]
+          
+          // 如果有省市进行了改变，重新设置列表的值
+          if (provinceChange || cityChange) {
+            this.valueArr = [this.province, this.city, this.area]
+          }
+        } else if (this.mode === 'multiSelector') {
+          let index = null
+          // 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
+          this.defaultSelector.map((v, idx) => {
+            if (v != event.detail.value[idx]) index = idx
+          })
+          // 为了让用户对多列变化时，动态设置其他列
+          if (index != null) {
+            this.$emit('columnchange', {
+              column: index,
+              index: event.detail.value[index]
+            })
+          }
+        }
+      },
+      // 用户点击确定按钮
+      getResult(event = null) {
+        // #ifdef MP-WEIXIN
+        if (this.moving) return
+        // #endif
+        let result = {}
+        // 只返回用户需要的数据
+        if (this.mode === 'time') {
+          if (this.params.year) result.year = this.formatNumber(this.year || 0)
+          if (this.params.month) result.month = this.formatNumber(this.month || 0)
+          if (this.params.day) result.day = this.formatNumber(this.day || 0)
+          if (this.params.hour) result.hour = this.formatNumber(this.hour || 0)
+          if (this.params.minute) result.minute = this.formatNumber(this.minute || 0)
+          if (this.params.second) result.second = this.formatNumber(this.second || 0)
+          if (this.params.timestamp) result.timestamp = this.getTimestamp()
+        } else if (this.mode === 'region') {
+          if (this.params.province) result.province = provinces[this.province]
+          if (this.params.city) result.city = citys[this.province][this.city]
+          if (this.params.area) result.area = areas[this.province][this.city][this.area]
+        } else if (this.mode === 'multiSelector') {
+          result = this.valueArr
+        } else if (this.mode === 'selector') {
+          result = this.valueArr
+        }
+        
+        if (event) this.$emit(event, result)
+        this.close()
+      },
+      // 获取时间戳
+      getTimestamp() {
+      	// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
+      	let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
+      	return new Date(time).getTime() / 1000;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-picker {
+    &__content {
+      position: relative;
+      
+      &__header {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 90rpx;
+        padding: 0 40rpx;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        font-size: 30rpx;
+        background-color: #FFFFFF;
+        
+        &__btn {
+          padding: 16rpx;
+          box-sizing: border-box;
+          text-align: center;
+          text-decoration: none;
+        }
+        
+        &__title {
+          color: $tn-font-color;
+        }
+        
+        &--cancel {
+          color: $tn-font-sub-color;
+        }
+        
+        &--confirm {
+          color: $tn-main-color;
+        }
+      }
+      
+      &__body {
+        width: 100%;
+        height: 500rpx;
+        overflow: hidden;
+        background-color: #FFFFFF;
+        
+        &__view {
+          height: 100%;
+          box-sizing: border-box;
+        }
+        
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          font-size: 32rpx;
+          color: $tn-font-color;
+          padding: 0 8rpx;
+          
+          &--text {
+            font-size: 24rpx;
+            padding-left: 8rpx;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-popup/tn-popup.vue b/tuniao-ui/components/tn-popup/tn-popup.vue
new file mode 100644
index 0000000..c9d3db3
--- /dev/null
+++ b/tuniao-ui/components/tn-popup/tn-popup.vue
@@ -0,0 +1,491 @@
+<template>
+  <view
+    v-if="visibleSync"
+    class="tn-popup-class tn-popup"
+    :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
+    hover-stop-propagation
+  >
+    <!-- mask -->
+    <view
+      class="tn-popup__mask"
+      :class="[{'tn-popup__mask--show': showPopup && mask}]"
+      :style="{zIndex: elZIndex - 2}"
+      @tap="maskClick"
+      @touchmove.stop.prevent = "() => {}"
+      hover-stop-propagation
+    ></view>
+    <!-- 弹框内容 -->
+    <view
+      class="tn-popup__content"
+      :class="[
+        mode !== 'center' ? backgroundColorClass : '',
+        safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '',
+        'tn-popup--' + mode,
+        showPopup ? 'tn-popup__content--visible' : '',
+        zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : ''
+      ]"
+      :style="[contentStyle]"
+      @tap="modeCenterClose"
+      @touchmove.stop.prevent
+      @tap.stop.prevent
+    >
+      <!-- 居中时候的内容 -->
+      <view
+        v-if="mode === 'center'"
+        class="tn-popup__content__center_box"
+        :class="[backgroundColorClass]"
+        :style="[centerStyle]"
+        @touchmove.stop.prevent
+        @tap.stop.prevent
+      >
+        <!-- 关闭按钮 -->
+        <view
+          v-if="closeBtn"
+          class="tn-popup__close"
+          :class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
+          :style="[closeBtnStyle, {zIndex: elZIndex}]"
+          @tap="close"
+        ></view>
+        <scroll-view scroll-y class="tn-popup__content__scroll-view">
+          <slot></slot>
+        </scroll-view>
+      </view>
+      
+      <!-- 除居中外的其他情况 -->
+      <scroll-view scroll-y v-else class="tn-popup__content__scroll-view">
+        <slot></slot>
+      </scroll-view>
+      <!-- 关闭按钮 -->
+      <view
+        v-if="mode !== 'center' && closeBtn"
+        class="tn-popup__close"
+        :class="[`tn-popup__close--${closeBtnPosition}`]"
+        :style="{zIndex: elZIndex}"
+        @tap="close"
+      >
+        <view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-popup',
+    props: {
+      value: {
+      	type: Boolean,
+      	default: false
+      },
+      // 弹出方向
+      // left/right/top/bottom/center
+      mode: {
+        type: String,
+        default: 'left'
+      },
+      // 是否显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
+      length: {
+        type: [Number, String],
+        default: 'auto'
+      },
+      // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
+      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+      width: {
+      	type: String,
+      	default: ''
+      },
+      // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
+      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+      height: {
+      	type: String,
+      	default: ''
+      },
+      // 是否开启动画，只在mode=center有效
+      zoom: {
+        type: Boolean,
+        default: true
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // 用户自定义样式
+      customStyle: {
+      	type: Object,
+      	default() {
+      		return {}
+      	}
+      },
+      // 显示圆角的大小
+      borderRadius: {
+        type: Number,
+        default: 0
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 关闭按钮的图标
+      closeBtnIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 关闭按钮显示的位置
+      // top-left/top-right/bottom-left/bottom-right
+      closeBtnPosition: {
+        type: String,
+        default: 'top-right'
+      },
+      // 关闭按钮图标颜色
+      closeIconColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 关闭按钮图标的大小
+      closeIconSize: {
+        type: Number,
+        default: 30
+      },
+      // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
+      negativeTop: {
+      	type: Number,
+      	default: 0
+      },
+      // marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
+      marginTop: {
+        type: Number,
+        default: 0
+      },
+      // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
+      // 对v-model双向绑定多层调用造成报错不能修改props值的问题
+      popup: {
+      	type: Boolean,
+      	default: true
+      },
+    },
+    computed: {
+      // 处理使用了自定义导航栏时被遮挡的问题
+      popupStyle() {
+        let style = {}
+        if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
+          style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
+        }
+        
+        return style
+      },
+      // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
+      contentStyle() {
+        let style = {}
+        // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
+        if (this.mode === 'left' || this.mode === 'right') {
+          style = {
+            width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length),
+            height: '100%',
+            transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
+          }
+        } else if (this.mode === 'top' || this.mode === 'bottom') {
+          style = {
+            width: '100%',
+            height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string.getLengthUnitValue(this.length),
+            transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
+          }
+        }
+        style.zIndex = this.elZIndex
+        // 如果设置了圆角的值，添加弹窗的圆角
+        if (this.borderRadius) {
+          switch(this.mode) {
+            case 'left':
+              style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
+              break
+            case 'top':
+              style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
+              break
+            case 'right':
+              style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
+              break
+            case 'bottom':
+              style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
+              break
+          }
+          style.overflow = 'hidden'
+        }
+        
+        if (this.backgroundColorStyle && this.mode !== 'center') {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        return style
+      },
+      // 中部弹窗的样式
+      centerStyle() {
+        let style = {}
+        style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length)
+        // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
+        style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
+        style.zIndex = this.elZIndex
+        if (this.negativeTop) {
+          style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
+        }
+        if (this.borderRadius) {
+          style.borderRadius = `${this.borderRadius}rpx`
+          style.overflow='hidden'
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      // 关闭按钮样式
+      closeBtnStyle() {
+        let style = {}
+        if (this.closeIconColor) {
+          style.color = this.closeIconColor
+        }
+        if (this.closeIconSize) {
+          style.fontSize = this.closeIconSize + 'rpx'
+        }
+        
+        return style
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        timer: null,
+        visibleSync: false,
+        showPopup: false,
+        closeFromInner: false
+      }
+    },
+    watch: {
+      value(val) {
+        if (val) {
+          // console.log(this.visibleSync);
+          if (this.visibleSync) {
+            this.visibleSync = false
+            return
+          }
+          this.open()
+        } else if (!this.closeFromInner) {
+          this.close()
+        }
+        this.closeFromInner = false
+      }
+    },
+    mounted() {
+      // 组件渲染完成时，检查value是否为true，如果是，弹出popup
+      this.value && this.open()
+    },
+    methods: {
+      // 点击遮罩
+      maskClick() {
+        if (!this.maskCloseable) return
+        this.close()
+      },
+      open() {
+        this.change('visibleSync', 'showPopup', true)
+      },
+      // 关闭弹框
+      close() {
+        // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
+        // 造成@close事件触发两次
+        this.closeFromInner = true
+        this.change('showPopup', 'visibleSync', false)
+      },
+      // 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
+      // 让其只在mode=center时起作用 
+      modeCenterClose() {
+        if (this.mode != 'center' || !this.maskCloseable) return
+        this.close()
+      },
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
+        if (this.popup === true) {
+          this.$emit('input', status)
+        }
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 10)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 250)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-popup {
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    
+    &__content {
+      /* #ifndef APP-NVUE */
+      display: block;
+      /* #endif */
+      position: absolute;
+      transition: all 0.25s linear;
+      
+      &--visible {
+        transform: translate3D(0px, 0px, 0px) !important;
+        &.tn-popup--center {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+      
+      &__center_box {
+        min-width: 100rpx;
+        min-height: 100rpx;
+        /* #ifndef APP-NVUE */
+        display: block;
+        /* #endif */
+        position: relative;
+        background-color: #FFFFFF;
+      }
+      
+      &__scroll-view {
+        width: 100%;
+        height: 100%;
+      }
+      
+      &__center--animation-zoom {
+        transform: scale(1.15);
+      }
+    }
+    
+    &__scroll_view {
+      width: 100%;
+      height: 100%;
+    }
+    
+    &--left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--right {
+      top: 0;
+      bottom: 0;
+      right: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--top {
+      left: 0;
+      right: 0;
+      top: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--bottom {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--center {
+      display: flex;
+      flex-direction: column;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+    }
+    
+    &__close {
+      position: absolute;
+      
+      &--top-left {
+        top: 30rpx;
+        left: 30rpx;
+      }
+      
+      &--top-right {
+        top: 30rpx;
+        right: 30rpx;
+      }
+      
+      &--bottom-left {
+        bottom: 30rpx;
+        left: 30rpx;
+      }
+      
+      &--bottom-right {
+        bottom: 30rpx;
+        right: 30rpx;
+      }
+    }
+    
+    &__mask {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      border: 0;
+      background-color: $tn-mask-bg-color;
+      transition: 0.25s linear;
+      transition-property: opacity;
+      opacity: 0;
+      
+      &--show {
+        opacity: 1;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-radio-group/tn-radio-group.vue b/tuniao-ui/components/tn-radio-group/tn-radio-group.vue
new file mode 100644
index 0000000..8d4f135
--- /dev/null
+++ b/tuniao-ui/components/tn-radio-group/tn-radio-group.vue
@@ -0,0 +1,124 @@
+<template>
+  <view class="tn-radio-group-class tn-radio-group">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [ Emitter ],
+    name: 'tn-radio-group',
+    props: {
+      // 单选组的值，会选中值相同的选项
+      value: {
+        type: String,
+        default: ''
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 34
+      },
+      // 每个radio占的宽度
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 是否换行
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 20
+      }
+    },
+    computed: {
+      // 这里computed的变量，都是子组件tn-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+      // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(tn-radio-group)
+      // 拉取父组件新的变化后的参数
+      parentData() {
+        return [this.value, this.disabled, this.activeColor, this.size, this.disabledLabel, this.shape, this.iconSize, this.width, this.wrap]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件中的子组件需要共享的参数发生了变化，手动通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-radio)如果有updateParentData方法的话，子组件重新从父组件拉取了最新的值
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      // 如果将children定义在data中，在微信小程序会造成循环引用而报错
+      this.children = []
+    },
+    methods: {
+      // 改方法由子组件tn-radio调用，当一个tn-radio被选中的时候，给父组件设置value值（通知其他tn-radio组件）
+      setValue(value) {
+        // 通过子组件传递过来的value值(此被选中的子组件内部已将parentValue设置等于value的值)，将其他tn-radio设置未选中的状态
+        this.children.map(child => {
+          if (child.parentData.value !== value) child.parentData.value = ''
+        })
+        // 通过emit事件，设置父组件通过v-model双向绑定的值
+        this.$emit('input', value)
+        this.$emit('change', value)
+        // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+        // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+        setTimeout(() => {
+        	// 将当前的值发送到 tn-form-item 进行校验
+        	this.dispatch('tn-form-item', 'on-form-change', value);
+        }, 60)
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-radio-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+    &::after {
+      content: " ";
+      display: table;
+      clear: both;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-radio/tn-radio.vue b/tuniao-ui/components/tn-radio/tn-radio.vue
new file mode 100644
index 0000000..dd2fc43
--- /dev/null
+++ b/tuniao-ui/components/tn-radio/tn-radio.vue
@@ -0,0 +1,276 @@
+<template>
+  <view class="tn-radio-class tn-radio" :style="[radioStyle]">
+    <view
+      class="tn-radio__icon-wrap"
+      :class="[iconClass]"
+      :style=[iconStyle]
+      @tap="toggle"
+    >
+      <view class="tn-icon-success tn-radio__icon-wrap__icon"></view>
+    </view>
+    
+    <view
+      class="tn-radio__label"
+      :style="{
+        fontSize: labelSize ? labelSize + 'rpx' : '',
+        color: labelColor ? labelColor : '#080808'
+      }"
+      @tap="onClickLabel"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-radio',
+    props: {
+      // radio名称
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 组件尺寸
+      size: {
+        type: Number,
+        default: 0
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // label字体大小
+      labelSize: {
+        type: Number,
+        default: 0
+      },
+      //labelColor 字体颜色
+      labelColor: {
+        type: String,
+        default: '#080808'
+      },
+      //边框颜色
+      borderColor: {
+        type: String,
+        default: '#080808'
+      }
+    },
+    computed: {
+      // 禁用，父组件会覆盖子组件的状态
+      isDisabled() {
+        return this.disabled ? this.disabled : (this.parentData.disabled ? this.parentData.disabled : false)
+      },
+      // 禁用label点击，父组件会覆盖子组件的状态
+      isDisabledLabel() {
+        return this.disabledLabel ? this.disabledLabel : (this.parentData.disabledLabel ? this.parentData.disabledLabel : false)
+      },
+      // 组件尺寸
+      elSize() {
+        return this.size ? this.size : (this.parentData.size ? this.parentData.size : 34)
+      },
+      // 组件选中时的颜色
+      elActiveColor() {
+        return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#01BEFF')
+      },
+      // 组件形状
+      elShape() {
+        return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle')
+      },
+      iconClass() {
+        let clazz = ''
+        clazz += (' tn-radio__icon-wrap--' + this.elShape)
+        
+        if (this.parentData.value === this.name) clazz += ' tn-radio__icon-wrap--checked'
+        if (this.isDisabled) clazz += ' tn-radio__icon-wrap--disabled'
+        if (this.parentData.value === this.name && this.isDisabled) clazz += ' tn-radio__icon-wrap--disabled--checked'
+      
+        return clazz
+      },
+      iconStyle() {
+        // 当前radio的name等于parent的value才认为时选中
+        let style = {}
+        if (this.elActiveColor && this.parentData.value === this.name && !this.isDisabled) {
+          style.borderColor = this.elActiveColor
+          style.backgroundColor = this.elActiveColor
+        }
+        
+        style.color = this.parentData.value === this.name ? '#FFFFFF' : 'transparent'
+        
+        style.width = this.elSize + 'rpx'
+        style.height = style.width
+        
+        style.fontSize = (this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 20)) + 'rpx'
+        style.borderColor = this.borderColor
+        return style
+      },
+      radioStyle() {
+        let style = {}
+        if (this.parent && this.parentData.width) {
+          // #ifdef MP
+          // 各家小程序因为它们特殊的编译结构，使用float布局
+          style.float = 'left';
+          // #endif
+          // #ifndef MP
+          // H5和APP使用flex布局
+          style.flex = `0 0 ${this.parentData.width}`;
+          // #endif
+        }
+        if(this.parent && this.parentData.wrap) {
+        	style.width = '100%';
+        	// #ifndef MP
+        	// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+        	style.flex = '0 0 100%';
+        	// #endif
+        }
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.xxx的形式
+        // 故只能使用如此方法
+        parentData: {
+          value: null,
+          disabled: null,
+          disabledLabel: null,
+          shape: null,
+          activeColor: null,
+          size: null,
+          width: null,
+          wrap: null,
+          iconSize: null,
+        }
+      }
+    },
+    created() {
+      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+      this.updateParentData()
+      this.parent.children.push(this)
+    },
+    methods: {
+      updateParentData() {
+        this.getParentData('tn-radio-group')
+      },
+      onClickLabel() {
+        if (!this.isDisabledLabel && !this.isDisabled) {
+          this.setRadioCheckedStatus()
+        }
+      },
+      toggle() {
+        if (!this.isDisabled) {
+          this.setRadioCheckedStatus()
+        }
+      },
+      emitEvent() {
+        // tn-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
+        if (this.parentData.value !== this.name) this.$emit('change', this.name)
+      },
+      // 改变选中的状态
+      // 更改本组件的parentData.value的值为本组件的name值，同时通过父组件遍历所有的radio实例
+      // 将本组件外的其他radio的parentData.value都设置为空
+      setRadioCheckedStatus() {
+        this.emitEvent()
+        if (this.parent) {
+          this.parent.setValue(this.name)
+          this.parentData.value = this.name
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-radio {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+    
+    &__icon-wrap {
+      color: $tn-font-color;
+      display: flex;
+      flex-direction: row;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 42rpx;
+      height: 42rpx;
+      color: transparent;
+      text-align: center;
+      transition-property: color, border-color, background-color;
+      font-size: 20rpx;
+      border: 1rpx solid $tn-font-sub-color;
+      transition-duration: 0.2s;
+      
+      /* #ifdef MP-TOUTIAO */
+      // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+      &__icon {
+      	line-height: 0;
+      }
+      /* #endif */
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 6rpx;
+      }
+      
+      &--checked {
+        color: #FFFFFF;
+        background-color: $tn-main-color;
+        border-color: $tn-main-color;
+      }
+      
+      &--disabled {
+        background-color: $tn-font-holder-color;
+        border-color: $tn-font-sub-color;
+      }
+      
+      &--disabled--checked {
+        color: $tn-font-sub-color !important;
+      }
+    }
+    
+    &__label {
+      word-wrap: break-word;
+      margin-left: 10rpx;
+      margin-right: 24rpx;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      
+      &--disabled {
+        color: $tn-font-sub-color;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-rate/tn-rate.vue b/tuniao-ui/components/tn-rate/tn-rate.vue
new file mode 100644
index 0000000..77b4724
--- /dev/null
+++ b/tuniao-ui/components/tn-rate/tn-rate.vue
@@ -0,0 +1,325 @@
+<template>
+	<view :id="elId" class="tn-rate-class tn-rate" @touchmove.stop.prevent="touchMove">
+		<view class="tn-rate__wrap" :class="[elClass]" v-for="(item, index) in count" :key="index">
+			<view class="tn-rate__wrap__icon"
+				:class="[`tn-icon-${(allowHalf && halfIcon ? activeIndex > index + 1 : activeIndex > index) ? elActionIcon : elInactionIcon}`]"
+				:style="[iconStyle(index)]" @tap="click(index + 1, $event)">
+				<!-- 半图标 -->
+				<view v-if="showHalfIcon(index)" class="tn-rate__wrap__icon--half" :class="[`tn-icon-${elActionIcon}`]"
+					:style="[halfIconStyle]"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'tn-rate',
+		props: {
+			// 选中星星的数量
+			value: {
+				type: Number,
+				default: 0
+			},
+			// 显示的星星数
+			count: {
+				type: Number,
+				default: 5
+			},
+			// 最小能选择的星星数
+			minCount: {
+				type: Number,
+				default: 0
+			},
+			// 禁用状态
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 是否可以选择半星
+			allowHalf: {
+				type: Boolean,
+				default: false
+			},
+			// 星星大小
+			size: {
+				type: Number,
+				default: 32
+			},
+			// 被选中的图标
+			activeIcon: {
+				type: String,
+				default: 'star-fill'
+			},
+			// 未被选中的图标
+			inactiveIcon: {
+				type: String,
+				default: 'star'
+			},
+			// 被选中的颜色
+			activeColor: {
+				type: String,
+				default: '#01BEFF'
+			},
+			// 默认颜色
+			inactiveColor: {
+				type: String,
+				default: '#AAAAAA'
+			},
+			// 星星之间的距离
+			gutter: {
+				type: Number,
+				default: 10
+			},
+			// 自定义颜色
+			colors: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 自定义图标
+			icons: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		computed: {
+			// 图标显示的比例
+			showHalfIcon(index) {
+				return index => {
+					return this.allowHalf && Math.ceil(this.activeIndex) === index + 1 && this.halfIcon
+				}
+			},
+			// 被激活的图标
+			elActionIcon() {
+				const len = this.icons.length
+				// icons参数传递了3个图标，当选中2个时，用第一个图标，4个时，用第二个图标
+				// 5个时，用第三个图标作为激活的图标
+				if (len && len <= this.count) {
+					const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+					if (step < 1) return this.icons[0]
+					if (step > len) return this.icons[len - 1]
+					return this.icons[step - 1]
+				}
+				return this.activeIcon
+			},
+			// 未被激活的图标
+			elInactionIcon() {
+				const len = this.icons.length
+				// icons参数传递了3个图标，当选中2个时，用第一个图标，4个时，用第二个图标
+				// 5个时，用第三个图标作为激活的图标
+				if (len && len <= this.count) {
+					const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+					if (step < 1) return this.icons[0]
+					if (step > len) return this.icons[len - 1]
+					return this.icons[step - 1]
+				}
+				return this.inactiveIcon
+			},
+			// 被激活的颜色
+			elActionColor() {
+				const len = this.colors.length
+				// 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色
+				// 4颗星为第二个颜色值，5颗星为第三个颜色值)
+				if (len && len <= this.count) {
+					const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+					if (step < 1) return this.colors[0]
+					if (step > len) return this.colors[len - 1]
+					return this.colors[step - 1]
+				}
+				return this.activeColor
+			},
+			// 图标的样式
+			iconStyle() {
+				return index => {
+					let style = {}
+
+					style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
+					style.padding = `0 ${this.$tn.string.getLengthUnitValue(this.gutter / 2)}`
+					// 当前图标的颜色
+					if (this.allowHalf && this.halfIcon) {
+						style.color = this.activeIndex > index + 1 ? this.elActionColor : this.inactiveColor
+					} else {
+						style.color = this.activeIndex > index ? this.elActionColor : this.inactiveColor
+					}
+					return style
+				}
+			},
+			// 半图标样式
+			halfIconStyle() {
+				let style = {}
+
+				style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
+				style.padding = `0 ${this.$tn.string.getLengthUnitValue(this.gutter / 2)}`
+				style.color = this.elActionColor
+				return style
+			}
+		},
+		data() {
+			return {
+				// 保证控件的唯一性
+				elId: this.$tn.uuid(),
+				elClass: this.$tn.uuid(),
+				// 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
+				starBoxLeft: 0,
+				// 当前激活的星星的序号
+				activeIndex: this.value,
+				// 每个星星的宽度
+				starWidth: 0,
+				// 每个星星最右边到盒子组件最左边的距离
+				starWidthArr: [],
+				// 标记是否为半图标
+				halfIcon: false,
+			}
+		},
+		watch: {
+			value: {
+				handler(newName, oldName) {
+					this.activeIndex = newName
+					if (this.allowHalf && (newName % 1 === 0.5)) {
+						this.halfIcon = true
+					} else {
+						this.halfIcon = false
+					}
+				},
+				immediate: true
+			},
+			size() {
+				// 当尺寸修改的时候重新获取布局尺寸信息
+				this.$nextTick(() => {
+					this.getElRectById()
+					this.getElRectByClass()
+				})
+			}
+		},
+		mounted() {
+			this.getElRectById()
+			this.getElRectByClass()
+		},
+		methods: {
+			// 获取评分组件盒子的布局信息
+			getElRectById() {
+				this._tGetRect('#' + this.elId).then(res => {
+					this.starBoxLeft = res.left
+				})
+			},
+			// 获取单个星星的尺寸
+			getElRectByClass() {
+				this._tGetRect('.' + this.elClass).then(res => {
+					this.starWidth = res.width
+					// 把每个星星最右边到盒子最左边的距离
+					for (let i = 0; i < this.count; i++) {
+						this.starWidthArr[i] = (i + 1) * this.starWidth
+					}
+				})
+			},
+			// 手指滑动
+			touchMove(e) {
+				if (this.disabled) return
+				if (!e.changedTouches[0]) return
+
+				const movePageX = e.changedTouches[0].pageX
+				// 滑动点相对于评分盒子左边的距离
+				const distance = movePageX - this.starBoxLeft
+
+				// 如果滑动到了评分盒子的左边界，设置为0星
+				if (distance <= 0) {
+					this.activeIndex = 0
+				}
+
+				// 计算滑动的距离相当于点击多少颗星星
+				let index = Math.ceil(distance / this.starWidth)
+				if (this.allowHalf) {
+					const iconHalfWidth = this.starWidthArr[index - 1] - (this.starWidth / 2)
+					if (distance < iconHalfWidth) {
+						this.halfIcon = true
+						index -= 0.5
+					} else {
+						this.halfIcon = false
+					}
+				}
+				this.activeIndex = index > this.count ? this.count : index
+
+				if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+
+				this.emitEvent()
+			},
+			// 通过点击直接选中
+			click(index, e) {
+				if (this.disabled) return
+				// 半星选择
+				if (this.allowHalf) {
+					if (!e.changedTouches[0]) return
+					const movePageX = e.changedTouches[0].pageX
+					// 点击点相对于当前图标左边的距离
+					const distance = movePageX - this.starBoxLeft
+					const iconHalfWidth = this.starWidthArr[index - 1] - (this.starWidth / 2)
+					if (distance < iconHalfWidth) {
+						this.halfIcon = true
+					} else {
+						this.halfIcon = false
+					}
+				}
+
+				// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
+				if (index == 1) {
+					if (this.allowHalf && this.allowHalf) {
+						if ((this.activeIndex === 0.5 && this.halfIcon) ||
+							(this.activeIndex === 1 && !this.halfIcon)) {
+							this.activeIndex = 0
+						} else {
+							this.activeIndex = this.halfIcon ? 0.5 : 1
+						}
+					} else {
+						if (this.activeIndex == 1) {
+							this.activeIndex = 0
+						} else {
+							this.activeIndex = 1
+						}
+					}
+				} else {
+					this.activeIndex = (this.allowHalf && this.halfIcon) ? index - 0.5 : index
+				}
+
+				if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+
+				this.emitEvent()
+			},
+			// 发送事件
+			emitEvent() {
+				this.$emit('change', this.activeIndex)
+				// 修改v-model的值
+				this.$emit('input', this.activeIndex)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tn-rate {
+		display: inline-flex;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+
+		&__wrap {
+
+			&__icon {
+				position: relative;
+				box-sizing: border-box;
+
+				&--half {
+					position: absolute;
+					top: 0;
+					left: 0;
+					display: inline-block;
+					overflow: hidden;
+					width: 50%;
+				}
+			}
+		}
+	}
+</style>
diff --git a/tuniao-ui/components/tn-read-more/tn-read-more.vue b/tuniao-ui/components/tn-read-more/tn-read-more.vue
new file mode 100644
index 0000000..da012f1
--- /dev/null
+++ b/tuniao-ui/components/tn-read-more/tn-read-more.vue
@@ -0,0 +1,222 @@
+<template>
+  <view>
+    <view class="tn-read-more-class tn-read-more">
+      <!-- 内容 -->
+      <view
+        :id="elId"
+        class="tn-read-more__content"
+        :style="[contentStyle]"
+      >
+        <slot></slot>
+      </view>
+      
+      <!-- 展开收起按钮 -->
+      <view
+        v-if="isLongContent"
+        class="tn-read-more__show-more__wrap"
+        :class="{'tn-read-more__show-more': showMore}"
+        :style="[innerShadowStyle]"
+        @tap="toggleReadMore">
+        <text class="tn-read-more__show-more--text" :style="[fontStyle]">{{ showMore ? closeText : openText }}</text>
+        <view class="tn-read-more__show-more--icon">
+          <view :class="[tipIconClass]" :style="[fontStyle]"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-read-more',
+    mixins: [componentsColorMixin],
+    props: {
+      // 默认占位高度
+      showHeight: {
+        type: Number,
+        default: 400
+      },
+      // 显示收起按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 展开提示文字
+      openText: {
+        type: String,
+        default: '展开阅读全文'
+      },
+      // 收起提示文字
+      closeText: {
+        type: String,
+        default: '收起'
+      },
+      // 展开提示图标
+      openIcon: {
+        type: String,
+        default: 'down'
+      },
+      // 收起提示图标
+      closeIcon: {
+        type: String,
+        default: 'up'
+      },
+      // 阴影样式
+      shadowStyle: {
+        type: Object,
+        default () {
+        	return {
+        		backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+        		paddingTop: "300rpx",
+        		marginTop: "-300rpx"
+        	}
+        }
+      },
+      // 组件标识
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      paramsChange() {
+        return `${this.open}-${this.showHeight}`
+      },
+      contentStyle() {
+        let style = {}
+        if (this.isLongContent && !this.showMore) {
+          style.height = `${this.showHeight}rpx`
+        } else {
+          if (!this.initHeight) {
+            style.height = 'auto'
+          } else {
+            style.height = `${this.contentHeight}px`
+          }
+        }
+        
+        return style
+      },
+      innerShadowStyle() {
+        let style = {}
+        // 折叠时才需要阴影样式
+        if (!this.showMore) {
+          style = Object.assign(style, this.shadowStyle)
+        }
+        
+        return style
+      },
+      fontStyle() {
+        let style = {}
+        style.color = this.fontColorStyle ? this.fontColorStyle : '#01BEFF'
+        style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '28rpx'
+        
+        return style
+      },
+      tipIconClass() {
+        if (this.showMore) {
+          if (this.closeIcon) {
+            return `tn-icon-${this.closeIcon}`
+          }
+        } else {
+          if (this.openIcon) {
+            return `tn-icon-${this.openIcon}`
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        elId: this.$tn.uuid(),
+        // 标记是否已经初始化高度完成
+        initHeight: false,
+        // 是否需要隐藏一部分内容
+        isLongContent: false,
+        // 当前展开的打开、关闭状态
+        showMore: false,
+        // 内容的高度
+        contentHeight: 0
+      }
+    },
+    watch: {
+      paramsChange(value) {
+        this.initHeight = false
+        this.isLongContent = false
+        this.showMore = true
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化组件
+      init() {
+        // 判断高度，如果真实内容的高度大于占位高度，则显示展开与收起的控制按钮
+        this._tGetRect('#' + this.elId).then(res => {
+          this.contentHeight = res.height
+          this.initHeight = true
+          if (res.height > uni.upx2px(this.showHeight)) {
+            this.isLongContent = true
+            this.showMore = false
+          }
+        })
+      },
+      // 展开或者收起内容
+      toggleReadMore() {
+        this.showMore = !this.showMore
+        // 是否显示收起按钮
+        if (!this.closeBtn) this.isLongContent = false
+        
+        this.$emit(this.showMore ? 'open' : 'closed', this.index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-read-more {
+    
+    &__content {
+      font-size: 28rpx;
+      color: $tn-font-color;
+      line-height: 1.8;
+      text-align: left;
+      overflow: hidden;
+      transition: all 0.3s linear;
+    }
+    
+    &__show-more {
+      padding-top: 0;
+      background: none;
+      margin-top: 20rpx;
+      
+      &__wrap {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 26rpx;
+      }
+      
+      &--text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+      
+      &--icon {
+        margin-left: 14rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-row-notice/tn-row-notice.vue b/tuniao-ui/components/tn-row-notice/tn-row-notice.vue
new file mode 100644
index 0000000..9cc965e
--- /dev/null
+++ b/tuniao-ui/components/tn-row-notice/tn-row-notice.vue
@@ -0,0 +1,301 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-row-notice-class tn-row-notice"
+    :class="[backgroundColorClass]"
+    :style="[noticeStyle]"
+  >
+    <view class="tn-row-notice__wrap">
+      <!-- 左图标 -->
+      <view class="tn-row-notice__icon">
+        <view
+          v-if="leftIcon"
+          class="tn-row-notice__icon--left" 
+          :class="[`tn-icon-${leftIconName}`,fontColorClass]"
+          :style="[fontStyle('leftIcon')]"
+          @tap="clickLeftIcon"></view>
+      </view>
+      
+      <!-- 消息体 -->
+      <view class="tn-row-notice__content-box" id="tn-row-notice__content-box">
+        <view
+          class="tn-row-notice__content"
+          id="tn-row-notice__content"
+          :style="{
+            animationDuration: animationDuration,
+            animationPlayState: animationPlayState
+          }"
+        >
+          <text
+            class="tn-row-notice__content--text"
+            :class="[fontColorClass]"
+            :style="[fontStyle()]"
+            @tap="click"
+          >{{ showText }}</text>
+        </view>
+      </view>
+      
+      <!-- 右图标 -->
+      <view class="tn-row-notice__icon">
+        <view
+          v-if="rightIcon"
+          class="tn-row-notice__icon--right" 
+          :class="[`tn-icon-${rightIconName}`,fontColorClass]"
+          :style="[fontStyle('rightIcon')]"
+          @tap="clickRightIcon"></view>
+        <view
+          v-if="closeBtn"
+          class="tn-row-notice__icon--right" 
+          :class="[`tn-icon-close`,fontColorClass]"
+          :style="[fontStyle('close')]"
+          @tap="close"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-row-notice',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 水平滚动时的速度，即每秒滚动多少rpx
+      speed: {
+        type: Number,
+        default: 160
+      }
+    },
+    computed: {
+      fontStyle() {
+        return (type) => {
+          let style = {}
+          style.color = this.fontColorStyle ? this.fontColorStyle : ''
+          style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
+          if (type === 'leftIcon' && this.leftIconSize) {
+            style.fontSize = this.leftIconSize + 'rpx'
+          }
+          if (type === 'rightIcon' && this.rightIconSize) {
+            style.fontSize = this.rightIconSize + 'rpx'
+          }
+          if (type === 'close') {
+            style.fontSize = '24rpx'
+          }
+          
+          return style
+        }
+      },
+      noticeStyle() {
+        let style = {}
+        style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
+        if (this.padding) style.padding = this.padding
+        return style
+      }
+    },
+    data() {
+      return {
+        // 滚动文字的宽度
+        textWidth: 0,
+        // 存放滚动文字的盒子的宽度
+        textBoxWidth: 0,
+        // 动画执行的时间
+        animationDuration: '10s',
+        // 动画执行状态
+        animationPlayState: 'paused',
+        // 当前显示的文本
+        showText: ''
+      }
+    },
+    watch: {
+      list: {
+        handler(value) {
+          this.showText = value.join('，')
+          this.$nextTick(() => {
+            this.initNotice()
+          })
+        },
+        immediate: true
+      },
+      playStatus(value) {
+        if (value === 'play') this.animationPlayState = 'running'
+        else this.animationPlayState = 'paused'
+      },
+      speed(value) {
+        this.initNotice()
+      }
+    },
+    methods: {
+      // 初始化通知栏
+      initNotice() {
+        let query = [],
+          textBoxWidth = 0,
+          textWidth = 0;
+        let textQuery = new Promise((resolve, reject) => {
+          uni.createSelectorQuery()
+            .in(this)
+            .select(`#tn-row-notice__content`)
+            .boundingClientRect()
+            .exec(ret => {
+              this.textWidth = ret[0].width
+              resolve()
+            })
+        })
+        query.push(textQuery)
+        
+        Promise.all(query).then(() => {
+          // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#tn-row-notice__content-box的宽度，因为设置了.tn-row-notice__content样式中设置了padding-left: 100%
+          this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`
+          // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+          this.animationPlayState = 'paused'
+          setTimeout(() => {
+            if (this.autoplay && this.playStatus === 'play') this.animationPlayState = 'running'
+          }, 10)
+        })
+      },
+      // 点击了通知栏
+      click() {
+        this.$emit('click')
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-row-notice {
+    width: 100%;
+    overflow: hidden;
+    
+    &__wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    &__content {
+      &-box {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        margin-left: 12rpx;
+      }
+      
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      text-align: right;
+      // 为了能滚动起来
+      padding-left: 100%;
+      animation: tn-notice-loop-animation 10s linear infinite both;
+      
+      &--text {
+        word-break: keep-all;
+        white-space: nowrap;
+      }
+    }
+    
+    &__icon {
+      &--left {
+        display: inline-flex;
+        align-items: center;
+      }
+      
+      &--right {
+        margin-left: 12rpx;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+  
+  @keyframes tn-notice-loop-animation {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue b/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
new file mode 100644
index 0000000..1dd86eb
--- /dev/null
+++ b/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
@@ -0,0 +1,177 @@
+<template>
+  <view class="tn-scroll-list-class tn-scroll-list">
+    <scroll-view
+      class="tn-scroll-list__scroll-view"
+      scroll-x
+      :upper-threshold="0"
+      :lower-threshold="0"
+      @scroll="scrollHandler"
+      @scrolltoupper="scrollToUpperHandler"
+      @scrolltolower="scrollToLowerHandler"
+    >
+      <view class="tn-scroll-list__scroll-view__content">
+        <slot></slot>
+      </view>
+    </scroll-view>
+    
+    <!-- 指示器-->
+    <view
+      v-if="indicator"
+      class="tn-scroll-list__indicator"
+      :style="[indicatorStyle]"
+    >
+      <view class="tn-scroll-list__indicator__line" :style="[lineStyle]">
+        <view class="tn-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-scroll-list',
+    props: {
+      // 是否显示指示器
+      indicator: {
+        type: Boolean,
+        default: true
+      },
+      // 指示器整体宽度
+      indicatorWidth: {
+        type: [String, Number],
+        default: 50
+      },
+      // 指示器滑块的宽度
+      indicatorBarWidth: {
+        type: [String, Number],
+        default: 20
+      },
+      // 指示器颜色
+      indicatorColor: {
+        type: String,
+        default: '#E6E6E6'
+      },
+      // 指示器激活时颜色
+      indicatorActiveColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 自定义指示器样式
+      indicatorStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      // 指示器滑块样式
+      barStyle() {
+        let style = {}
+        // 获取滑动距离的比值
+        // 滑块当前移动距离与总需滑动距离(指示器的总宽度减去滑块宽度)的比值 = scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比
+        const scrollLeft = this.scrollInfo.scrollLeft,
+          scrollWidth = this.scrollInfo.scrollWidth,
+          barAllMoveWidth = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth);
+        const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
+        style.transform = `translateX(${x}px)`
+        // 设置滑块的宽度和背景颜色
+        style.width = `${this.indicatorBarWidth}rpx`
+        style.backgroundColor = this.indicatorActiveColor
+        return style
+      },
+      // 指示器整体样式
+      lineStyle() {
+        let style = {}
+        style.width = `${this.indicatorWidth}rpx`
+        style.backgroundColor = this.indicatorColor
+        return style
+      }
+    },
+    data() {
+      return {
+        // 滑动时滑块信息
+        scrollInfo: {
+          scrollLeft: 0,
+          scrollWidth: 0
+        },
+        // 滑动区域的宽度
+        scrollWidth: 0
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.getComponentWidth()
+      },
+      // 处理滚动事件
+      scrollHandler(event) {
+        this.scrollInfo = event.detail
+      },
+      // 滚动到最左边触发事件
+      scrollToUpperHandler() {
+        this.$emit('left')
+        this.scrollInfo.scrollLeft = 0
+      },
+      // 滚动到最右边触发事件
+      scrollToLowerHandler() {
+        this.$emit('right')
+        // this.scrollInfo.scrollLeft = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth)
+      },
+      // 获取组件的宽度
+      getComponentWidth() {
+        this._tGetRect('.tn-scroll-list').then(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getComponentWidth()
+            }, 10)
+            return
+          }
+          this.scrollWidth = res.width
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-scroll-list {
+    padding-bottom: 20rpx;
+    
+    &__scroll-view {
+      display: flex;
+      flex-direction: row;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+    
+    &__indicator {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      margin-top: 30rpx;
+      
+      &__line {
+        width: 120rpx;
+        height: 8rpx;
+        border-radius: 200rpx;
+        overflow: hidden;
+        
+        &__bar {
+          width: 40rpx;
+          height: 8rpx;
+          border-radius: 200rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue b/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
new file mode 100644
index 0000000..5fef53e
--- /dev/null
+++ b/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
@@ -0,0 +1,401 @@
+<template>
+  <view class="tn-scroll-view-class tn-scroll-view">
+    <scroll-view
+      class="scroll-view"
+      :style="[scrollViewStyle]"
+      scroll-y
+      scroll-anchoring
+      enable-back-to-top
+      :throttle="false"
+      :scroll-top="scrollTop"
+      :lower-threshold="lowerThreshold"
+      @scroll="handleScroll"
+      @touchend="handleTouchEnd"
+      @touchmove.prevent.stop="handleTouchMove"
+      @touchstart="handleTouchStart"
+      @scrolltolower="handleScrollTolower"
+    >
+      <view class="scroll__content" :style="[scrollContentStyle]">
+        <view class="scroll__pull-down">
+          <slot name="pulldown">
+            <view class="scroll__refresh" :style="[refreshStyle]">
+              <view><tn-loading :animation="refreshing"></tn-loading></view>
+              <view class="scroll__refresh--text" :style="[refreshTextStyle]">{{ refreshStateText }}</view>
+            </view>
+          </slot>
+        </view>
+        <view :id="elScrollDataId" class="scroll__data">
+          <slot></slot>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-scroll-view',
+    mixins: [ componentsColor ],
+    props: {
+      // H5顶部导航栏的高度
+      h5NavHeight: {
+        type: Number,
+        default: 45
+      },
+      // 自定义顶部导航栏高度
+      customNavHeight: {
+        type: Number,
+        default: 0
+      },
+      // 可滚动区域顶部偏移高度
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      // 可滚动区域底部偏移高度
+      offsetBottom: {
+        type: Number,
+        default: 0
+      },
+      // 容器高度 (不设置则自动计算)
+      height: {
+        type: Number,
+        default: null
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用下拉刷新
+      pullDownDisabled: {
+        type: Boolean,
+        default: false
+      },
+      // 下拉速率
+      pullDownSpeed: {
+        type: Number,
+        default: 0.5
+      },
+      // 刷新延迟
+      refreshDelayed: {
+        type: Number,
+        default: 800
+      },
+      // 刷新完成后延迟
+      refreshFinishDelayed: {
+        type: Number,
+        default: 800
+      },
+      // 下拉刷新距离
+      refresherThreshold: {
+        type: Number,
+        default: 70
+      },
+      // 上拉加载距离
+      lowerThreshold: {
+        type: Number,
+        default: 40
+      },
+      // 刷新状态
+      refreshState: {
+        type: Boolean,
+        default: false
+      },
+      // 正在刷新文字
+      refreshingText: {
+        type: String,
+        default: '正在刷新'
+      },
+      // 刷新成功文字
+      refreshSuccessText: {
+        type: String,
+        default: '刷新成功'
+      },
+      // 下拉中的文字
+      pulldownText: {
+        type: String,
+        default: '下拉刷新'
+      },
+      // 下拉完成的文字
+      pulldownFinishText: {
+        type: String,
+        default: '松开刷新'
+      }
+    },
+    data() {
+      return {
+        // 滚动容器内容id
+        elScrollDataId: '',
+        // 系统信息
+        systemInfo: {
+          height: 0,
+          statusBarHeight: 0
+        },
+        // 距离顶部滚动高度
+        scrollTop: 0,
+        // 滚动内容视图顶部位置
+        scrollDataTop: -1,
+        // 滚动内容视图顶部位置偏移
+        scrollDataOffsetTop: -1,
+        // 滚动区域的高度
+        scrollViewHeight: 0,
+        // 当前滚动高度
+        currentScrollTop: 0,
+        // 当前触摸点Y轴开始坐标
+        currentTouchStartY: 0,
+        // 刷新状态文字
+        refreshStateText: '下拉刷新',
+        // 是否刷新中
+        refreshing: false,
+        // 是否刷新完成
+        refreshFinish: false,
+        // 是否正在下拉
+        pulldowning: false,
+        // 下拉高度
+        pullDownHeight: 0,
+        // 是否显示下拉加载
+        showPullDown: false
+      }
+    },
+    computed: {
+      scrollViewStyle() {
+        let style = {}
+        style.height = this.scrollViewHeight + 'px'
+        if (!this.backgroundColorClass) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      scrollContentStyle() {
+        let style = {}
+        style.transform = this.showPullDown ? `translateY(${this.pullDownHeight}px)` : `translateY(0px)`
+        style.transition = this.pulldowning ? `transform 100ms ease-out` : `transform 500ms cubic-bezier(0.19,1.64,0.42,0.72)`
+        return style
+      },
+      refreshStyle() {
+        let style = {}
+        style.opacity = this.showPullDown ? 1 : 0
+        return style
+      },
+      refreshTextStyle() {
+        let style = {}
+        if (!this.fontColorClass) {
+          style.color = this.fontColorStyle
+        }
+        return style
+      },
+      loadTextStyle() {
+        let style = {}
+        if (!this.fontColorClass) {
+          style.color = this.fontColorStyle
+        }
+        return style
+      }
+    },
+    watch: {
+      refreshState(nVal, oVal) {
+        if (!nVal) {
+          if (this.showPullDown) {
+            // 关闭正在下拉
+            this.pulldowning = false
+            // 隐藏下拉刷新
+            this.showPullDown = false
+            // 关闭正在刷新
+            this.refreshing = false
+          }
+        }
+      }
+    },
+    created() {
+      this.elScrollDataId = this.$tn.uuid()
+      this.getSystemInfo()
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 组件初始化
+      init() {
+        this.refreshStateText = this.pulldownText
+        // 初始化scrollView信息
+        this.updateScrollViewInfo()
+      },
+      // 获取系统信息
+      getSystemInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        this.systemInfo.height = systemInfo.safeArea.height
+        this.systemInfo.statusBarHeight = systemInfo.statusBarHeight
+      },
+      // 更新scrollView信息
+      updateScrollViewInfo() {
+        if (this.height) {
+          this.scrollViewHeight = this.height
+        } else {
+          // 设置scrollView的高度和组件顶部位置
+          // console.log(this.systemInfo, this.offsetTop, this.customNavHeight);
+          // #ifdef H5
+          this.scrollViewHeight = this.systemInfo.height - (
+            this.offsetTop + 
+            (this.customNavHeight ? this.customNavHeight : this.h5NavHeight) + 
+            this.offsetBottom)
+          this.scrollDataOffsetTop = this.offsetTop + (this.customNavHeight ? this.customNavHeight : this.h5NavHeight)
+          // #endif
+          // #ifndef H5
+          this.scrollViewHeight = this.systemInfo.height - (
+            this.offsetTop + 
+            this.systemInfo.statusBarHeight +
+            this.offsetBottom)
+          this.scrollDataOffsetTop = this.offsetTop + this.systemInfo.statusBarHeight
+          // #endif
+        }
+      },
+      // 获取scrollView内容信息
+      async getScrollDataInfo() {
+        const scrollInfo = await this._tGetRect(`#${this.elScrollDataId}`)
+        this.scrollDataTop = scrollInfo.top
+      },
+      // 上拉触底事件
+      handleScrollTolower(e) {
+        if (this.pullUpDisabled) return
+        this.$emit('scrolltolower', e)
+      },
+      // 滚动事件
+      handleScroll(e) {
+        this.currentScrollTop = e.detail.scrollTop
+        this.$emit('scroll', e.detail)
+      },
+      // 触摸按下事件
+      handleTouchStart(e) {
+        if (this.disabled) return
+        this.currentTouchStartY = e.touches[0].clientY
+        this.getScrollDataInfo()
+        this.$emit('touchStart', e)
+      },
+      // 触摸下滑事件
+      handleTouchMove(e) {
+        if (this.disabled) return
+        if (this.currentScrollTop == 0 && e.touches[0].clientY >= this.currentTouchStartY) {
+          // 容器滑动的偏移
+          const moveOffset = this.scrollDataTop > 0 ?
+            (this.scrollDataOffsetTop - this.scrollDataTop) :
+            (Math.abs(this.scrollDataTop) + this.scrollDataOffsetTop)
+          
+          this.pulldowning = true
+          this.showPullDown = true
+          let pullDownDistance = ((e.touches[0].clientY - this.currentTouchStartY)  - moveOffset) * this.pullDownSpeed
+          this.pullDownHeight = pullDownDistance
+          // this.pullDownHeight = pullDownDistance > this.refresherThreshold ? this.refresherThreshold : pullDownDistance
+          this.refreshStateText = this.pullDownHeight >= this.refresherThreshold ? this.pulldownFinishText : this.pulldownText
+          if (pullDownDistance > this.refresherThreshold) {
+            this.$emit('refreshReady')
+          }
+        }
+        this.$emit('touchMove', e)
+      },
+      // 触摸松开处理
+      handleTouchEnd(e) {
+        if (this.disabled) return
+        // 处理下拉刷新
+        if (this.showPullDown) {
+          // 当下拉高度小于下拉阈值
+          if (this.pullDownHeight < this.refresherThreshold) {
+            // 关闭正在下拉
+            this.pulldowning = false
+            // 重置下拉高度
+            this.pullDownHeight = 0
+            // 隐藏下拉刷新
+            this.showPullDown = false
+            // 触发下拉中断事件
+            this.$emit('refreshStop')
+          } else {
+            this.pullDownHeight = this.pullDownHeight > this.refresherThreshold ? this.refresherThreshold : this.pullDownHeight
+            this.refresh()
+          }
+        }
+        
+        // 触发下拉触摸松开事件
+        this.$emit('touchEnd', e)
+      },
+      
+      // 刷新数据
+      refresh() {
+        // 设置刷新未完成
+        this.refreshFinish = false
+        // 开启正在刷新
+        this.refreshing = true
+        // 设置正在刷新状态文字
+        this.refreshStateText = this.refreshingText
+        // 触发refresh事件
+        setTimeout(() => {
+          this.$emit('refresh')
+        }, this.refreshDelayed)
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-scroll-view {
+    
+    .scroll-view {
+      position: relative;
+      touch-action: none;
+      
+      .scroll__content {
+        display: flex;
+        will-change: transform;
+        flex-direction: column;
+        
+        .scroll {
+          &__pull-down {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            display: flex;
+            padding: 30rpx 0;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(-100%);
+          }
+          
+          &__refresh {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &--text {
+              margin-left: 10rpx;
+            }
+          }
+          
+          &__data {
+            
+          }
+          
+          &__pull-up {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(100%);
+          }
+          &__load {
+            padding: 20rpx 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &--text {
+              margin-left: 10rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-select/tn-select.vue b/tuniao-ui/components/tn-select/tn-select.vue
new file mode 100644
index 0000000..432e082
--- /dev/null
+++ b/tuniao-ui/components/tn-select/tn-select.vue
@@ -0,0 +1,442 @@
+<template>
+  <view v-if="value" class="tn-select-class tn-select">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <view class="tn-select__content">
+        <!-- 头部 -->
+        <view class="tn-select__content__header" @touchmove.stop.prevent>
+          <view
+            class="tn-select__content__header__btn tn-select__content__header--cancel"
+            :style="{ color: cancelColor }"
+            hover-class="tn-hover-class"
+            hover-stay-time="150"
+            @tap="getResult('cancel')"
+          >{{ cancelText }}</view>
+          <view class="tn-select__content__header__title">{{ title }}</view>
+          <view
+            class="tn-select__content__header__btn tn-select__content__header--confirm"
+            :style="{ color: confirmColor }"
+            hover-class="tn-hover-class"
+            hover-stay-time="150"
+            @tap="getResult('confirm')"
+          >{{ confirmText }}</view>
+        </view>
+        <!-- 列表内容 -->
+
+        <view class="tn-select__content__body">
+          <view v-if="searchShow && mode==='single'">
+               <view class="tn-flex tn-select__content__body__search">
+                 <view class="tn-icon-search tn-padding-sm" ></view>
+                 <input class="tn-select__content__body__search__input" :placeholder="searchPlaceholder" maxlength="255" confirm-type="search" @input="searchInput" @confirm="search"  >
+               </view>
+          </view>
+          <picker-view
+            class="tn-select__content__body__view"
+            :value="defaultSelector"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+            @change="columnChange"
+          >
+
+            <picker-view-column v-for="(item, index) in columnData" :key="index">
+              <view class="tn-select__content__body__item" v-for="(sub_item, sub_index) in item" :key="sub_index">
+                <view class="tn-text-ellipsis">
+                  {{ sub_item[labelName] }}
+                </view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-select',
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 列表模式
+      // single 单列 multi 多列 multi-auto 多列联动
+      mode: {
+        type: String,
+        default: 'single'
+      },
+      // 列数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // value属性名
+      valueName: {
+        type: String,
+        default: 'value'
+      },
+      // label属性名
+      labelName: {
+        type: String,
+        default: 'label'
+      },
+      // 当mode=multi-auto时，children的属性名
+      childName: {
+        type: String,
+        default: 'children'
+      },
+      // 默认值
+      defaultValue: {
+        type: Array,
+        default() {
+          return [0]
+        }
+      },
+      // 顶部标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 取消按钮文字
+      cancelText: {
+        type: String,
+        default: '取消'
+      },
+      // 取消按钮文字颜色
+      cancelColor: {
+        type: String,
+        default: ''
+      },
+      // 确认按钮文字
+      confirmText: {
+        type: String,
+        default: '确认'
+      },
+      // 确认按钮文字颜色
+      confirmColor: {
+        type: String,
+        default: ''
+      },
+      // 点击遮罩关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 预留安全区域
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 是否开启模糊搜索(只在单列模式生效)
+      searchShow:{
+        type:Boolean,
+        default:true
+      },
+      //搜索框placeholder
+      searchPlaceholder:{
+        type:String,
+        default:'搜索'
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+        moving: false,
+        // 用户保存当前列的索引，用于判断下一次变化时改变的列
+        defaultSelector: [0],
+        // picker-view数据
+        columnData: [],
+        // 保存用户选择的结果
+        selectValue: [],
+        // 上一次改变时的index
+        lastSelectIndex: [],
+        // 列数
+        columnNum: 0,
+
+      }
+    },
+    watch: {
+      // 在select弹起的时候，重新初始化所有数据
+      value: {
+        handler(val) {
+          if (val) setTimeout(() => this.init(), 10)
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      //搜索输入监听
+      searchInput(e){
+        console.log(e.detail.value);
+        this.searchResult(e.detail.value)
+      },
+      //搜索完成监听
+      search(e){
+        console.log(e.detail.value)
+        this.searchResult(e.detail.value)
+      },
+      //执行搜索方法
+      searchResult(value) {
+        let result = [];
+          // console.log(this.list)
+          let data = this.list.filter(item => item.label.indexOf(value) > -1);
+          if (data.length > 0) {
+            result.push(data
+            );
+          }
+        // console.log(result)
+        this.columnData = result;
+        this.selectValue=[]
+        if (this.columnData.length>0){
+          this.setSelectValue()
+        }
+      },
+
+      // 标识滑动开始，只有微信小程序才有这样的事件
+      pickStart() {
+      	// #ifdef MP-WEIXIN
+      	this.moving = true;
+      	// #endif
+      },
+      // 标识滑动结束
+      pickEnd() {
+      	// #ifdef MP-WEIXIN
+      	this.moving = false;
+      	// #endif
+      },
+      init() {
+        this.setColumnNum()
+        this.setDefaultSelector()
+        this.setColumnData()
+        this.setSelectValue()
+      },
+      // 获取默认选中列下标
+      setDefaultSelector() {
+        // 如果没有传入默认值，生成用0填充长度为columnNum的数组
+        this.defaultSelector = this.defaultValue.length === this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0)
+        this.lastSelectIndex = this.$tn.deepClone(this.defaultSelector)
+      },
+      // 计算列数
+      setColumnNum() {
+        // 单列的数量为1
+        if (this.mode === 'single') this.columnNum = 1
+        // 多列时取list的长度
+        else if (this.mode === 'multi') this.columnNum = this.list.length
+        // 多列联动时，通过遍历list的第一个元素，得出有多少列
+        else if (this.mode === 'multi-auto') {
+          let num = 1
+          let column = this.list
+          // 如果存在children属性，再次遍历
+          while (column[0][this.childName]) {
+            column = column[0] ? column[0][this.childName] : {},
+            num++
+          }
+          this.columnNum = num
+        }
+      },
+      // 获取需要展示在picker中的列数据
+      setColumnData() {
+        let data = []
+        this.selectValue = []
+        if (this.mode === 'multi-auto') {
+          // 获取所有数据中的第一个元素
+          let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0]
+          // 通过循环所有列数，再根据设定列的数组，得出当前需要渲染的整个列数组
+          for (let i = 0; i < this.columnNum; i++) {
+            // 第一列默认为整个list数组
+            if (i === 0) {
+              data[i] = this.list
+              column = column[this.childName]
+            } else {
+              // 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
+              data[i] = column
+              column = column[this.defaultSelector[i]][this.childName]
+            }
+          }
+        } else if (this.mode === 'single') {
+          data[0] = this.list
+        } else {
+          data = this.list
+        }
+        this.columnData = data
+      },
+      // 获取默认选中的值，如果没有设置，则默认选中第一项
+      setSelectValue() {
+        let tmp = null
+        for (let i = 0; i < this.columnNum; i++) {
+          tmp = this.columnData[i][this.defaultSelector[i]]
+          let data = {
+            value: tmp ? tmp[this.valueName] : null,
+            label: tmp ? tmp[this.labelName] : null
+          }
+          // 判断是否存在额外的参数
+          if (tmp && tmp.extra) data.extra = tmp.extra
+          this.selectValue.push(data)
+        }
+        // console.log("默认",this.selectValue)
+      },
+      // 列选项
+      columnChange(event) {
+        let index = null
+        let columnIndex = event.detail.value
+
+        this.selectValue = []
+        if (this.mode === 'multi-auto') {
+          // 对比前后两个数组，判断变更的是那一列
+          this.lastSelectIndex.map((v, idx) => {
+            if (v != columnIndex[idx]) index = idx
+          })
+          this.defaultSelector = columnIndex
+          // 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的
+          // 默认是队列的第一个为默认选项
+          for (let i = index + 1; i < this.columnNum; i++) {
+            this.columnData[i] = this.columnData[i - 1][i - 1 == index ? columnIndex[index] : 0][this.childName]
+            this.defaultSelector[i] = 0
+          }
+          // 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
+          // 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
+          columnIndex.map((item, index) => {
+            let data = this.columnData[index][columnIndex[index]]
+            let tmp = {
+              value: data ? data[this.valueName] : null,
+              label: data ? data[this.labelName] : null
+            }
+            if (data && data.extra !== undefined) tmp.extra = data.extra
+            this.selectValue.push(tmp)
+          })
+          this.lastSelectIndex = columnIndex
+        } else if (this.mode === 'single') {
+          let data = this.columnData[0][columnIndex[0]]
+          let tmp = {
+            value: data ? data[this.valueName] : null,
+            label: data ? data[this.labelName] : null
+          }
+          if (data && data.extra !== undefined) tmp.extra = data.extra
+          this.selectValue.push(tmp)
+        } else if (this.mode === 'multi') {
+          columnIndex.map((item, index) => {
+            let data = this.columnData[index][columnIndex[index]]
+            let tmp = {
+              value: data ? data[this.valueName] : null,
+              label: data ? data[this.labelName] : null
+            }
+            if (data && data.extra !== undefined) tmp.extra = data.extra
+            this.selectValue.push(tmp)
+          })
+        }
+      },
+      close() {
+        this.$emit('input', false)
+      },
+      getResult(event = null) {
+        // #ifdef MP-WEIXIN
+        if (this.moving) return;
+        // #endif
+        if (event) this.$emit(event, this.selectValue)
+        this.close()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .tn-select {
+
+    &__content {
+      position: relative;
+
+      &__header {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 90rpx;
+        padding: 0 40rpx;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        font-size: 30rpx;
+        background-color: #FFFFFF;
+
+        &__btn {
+          padding: 16rpx;
+          box-sizing: border-box;
+          text-align: center;
+          text-decoration: none;
+        }
+
+        &__title {
+          color: $tn-font-color;
+        }
+
+        &--cancel {
+          color: $tn-font-sub-color;
+        }
+
+        &--confirm {
+          color: $tn-main-color;
+        }
+      }
+
+      &__body {
+        width: 100%;
+        height: 500rpx;
+        overflow: hidden;
+        background-color: #FFFFFF;
+
+        &__search{
+          z-index: 5;
+          align-items: center;
+          border-radius: 19px;
+          background: #f8f8f8;
+          width: calc(100% - 60rpx);
+          margin: 0 auto;
+          position: relative;
+          top: 15px;
+
+          &__input{
+            width: 600rpx;
+          }
+        }
+
+        &__view {
+          height: 100%;
+          box-sizing: border-box;
+        }
+
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          font-size: 32rpx;
+          color: $tn-font-color;
+          padding: 0 8rpx;
+        }
+      }
+    }
+
+  }
+</style>
diff --git a/tuniao-ui/components/tn-sign-board/tn-sign-board.vue b/tuniao-ui/components/tn-sign-board/tn-sign-board.vue
new file mode 100644
index 0000000..1b3929c
--- /dev/null
+++ b/tuniao-ui/components/tn-sign-board/tn-sign-board.vue
@@ -0,0 +1,690 @@
+<template>
+  <view v-if="show" class="tn-sign-board-class tn-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}">
+    <!-- 签名canvas -->
+    <view class="tn-sign-board__content">
+      <view class="tn-sign-board__content__wrapper">
+        <canvas class="tn-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
+      </view>
+    </view>
+    
+    <!-- 底部工具栏 -->
+    <view class="tn-sign-board__tools">
+      <!-- 可选颜色 -->
+      <view class="tn-sign-board__tools__color">
+        <view
+          v-for="(item, index) in signSelectColor"
+          :key="index"
+          class="tn-sign-board__tools__color__item"
+          :class="[{'tn-sign-board__tools__color__item--active': currentSelectColor === item}]"
+          :style="{backgroundColor: item}"
+          @tap="colorSwitch(item)"
+        ></view>
+      </view>
+      
+      <!-- 按钮 -->
+      <view class="tn-sign-board__tools__button">
+        <view class="tn-sign-board__tools__button__item tn-bg-red" @tap="reDraw">清除</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-blue" @tap="save">保存</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-indigo" @tap="previewImage">预览</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-orange" @tap="closeBoard">关闭</view>
+      </view>
+    </view>
+    
+    <!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
+    <view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
+      <canvas canvas-id="temp-tn-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-sign-board',
+    props: {
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 可选签名颜色
+      signSelectColor: {
+        type: Array,
+        default() {
+          return ['#080808', '#E83A30']
+        }
+      },
+      // 是否旋转输出图片
+      rotate: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义顶栏的高度
+      customBarHeight: {
+        type: [String, Number],
+        default: 0
+      }
+    },
+    data() {
+      return {
+        canvasName: 'tn-sign-canvas',
+        ctx: null,
+        canvasWidth: 0,
+        canvasHeight: 0,
+        currentSelectColor: this.signSelectColor[0],
+        // 第一次触摸
+        firstTouch: false,
+        // 透明度
+        transparent: 1,
+        // 笔迹倍数
+        lineSize: 1.5,
+        // 最小画笔半径
+        minLine: 0.5,
+        // 最大画笔半径
+        maxLine: 4,
+        // 画笔压力
+        pressure: 1,
+        // 顺滑度，用60的距离来计算速度
+        smoothness: 60,
+        // 当前触摸的点
+        currentPoint: {},
+        // 当前线条
+        currentLine: [],
+        // 画笔圆半径
+        radius: 1,
+        // 裁剪区域
+        cutArea: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        // 所有线条， 生成贝塞尔点
+        // bethelPoint: [],
+        // 上一个点
+        lastPoint: 0,
+        // 笔迹
+        chirography: [],
+        // 当前笔迹
+        // currentChirography: {},
+        // 画线轨迹，生成线条的实际点
+        linePrack: []
+      }
+    },
+    watch: {
+      show(value) {
+        if (value && this.canvasWidth === 0 && this.canvasHeight === 0) {
+          this.$nextTick(() => {
+            this.getCanvasInfo()
+          })
+        }
+      },
+      signSelectColor(value) {
+        if (value.length > 0) {
+          this.currentSelectColor = value[0]
+        }
+      }
+    },
+    created() {
+      // 创建canvas
+      this.ctx = uni.createCanvasContext(this.canvasName, this)
+    },
+    mounted() {
+      // 获取画板的相关信息
+      // this.$nextTick(() => {
+      //   this.getCanvasInfo()
+      // })
+    },
+    methods: {
+      // 获取画板的相关信息
+      getCanvasInfo() {
+        this._tGetRect('.tn-sign-board__content__canvas').then(res => {
+         this.canvasWidth = res.width
+         this.canvasHeight = res.height
+         
+         // 初始化Canvas
+         this.$nextTick(() => {
+           this.initCanvas('#FFFFFF')
+         })
+        })
+      },
+      // 初始化Canvas
+      initCanvas(color) {
+        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+        // rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
+        // 矩形的宽高需要减去边框的宽度
+        this.ctx.rect(0, 0, this.canvasWidth - uni.upx2px(4), this.canvasHeight - uni.upx2px(4))
+        this.ctx.setFillStyle(color)
+        this.ctx.fill()
+        this.ctx.draw()
+      },
+      // 开始画
+      onTouchStart(e) {
+        if (e.type != 'touchstart') return false
+        
+        // 设置线条颜色
+        this.ctx.setFillStyle(this.currentSelectColor)
+        // 设置透明度
+        this.ctx.setGlobalAlpha(this.transparent)
+        let currentPoint = {
+          x: e.touches[0].x,
+          y: e.touches[0].y
+        }
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: 0,
+          x: currentPoint.x,
+          y: currentPoint.y
+        })
+        this.currentPoint = currentPoint
+        
+        if (this.firstTouch) {
+          this.cutArea = {
+            top: currentPoint.y,
+            right: currentPoint.x,
+            bottom: currentPoint.y,
+            left: currentPoint.x
+          }
+          this.firstTouch = false
+        }
+        
+        this.pointToLine(currentLine)
+      },
+      // 正在画
+      onTouchMove(e) {
+        if (e.type != 'touchmove') return false
+        if (e.cancelable) {
+          // 判断默认行为是否已经被禁用
+          if (!e.defaultPrevented) {
+            e.preventDefault()
+          }
+        }
+        let point = {
+          x: e.touches[0].x,
+          y: e.touches[0].y
+        }
+        
+        if (point.y < this.cutArea.top) {
+          this.cutArea.top = point.y
+        }
+        if (point.y < 0) this.cutArea.top = 0
+        
+        if (point.x < this.cutArea.right) {
+          this.cutArea.right = point.x
+        }
+        if (this.canvasWidth - point.x <= 0) {
+          this.cutArea.right = this.canvasWidth
+        }
+        if (point.y > this.cutArea.bottom) {
+          this.cutArea.bottom = this.canvasHeight
+        }
+        if (this.canvasHeight - point.y <= 0) {
+          this.cutArea.bottom = this.canvasHeight
+        }
+        if (point.x < this.cutArea.left) {
+          this.cutArea.left = point.x
+        }
+        if (point.x < 0) this.cutArea.left = 0
+        
+        this.lastPoint = this.currentPoint
+        this.currentPoint = point
+        
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: this.distance(this.currentPoint, this.lastPoint),
+          x: point.x,
+          y: point.y
+        })
+        
+        this.pointToLine(currentLine)
+      },
+      // 移动结束
+      onTouchEnd(e) {
+        if (e.type != 'touchend') return false
+        let point = {
+          x: e.changedTouches[0].x,
+          y: e.changedTouches[0].y
+        }
+        this.lastPoint = this.currentPoint
+        this.currentPoint = point
+        
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: this.distance(this.currentPoint, this.lastPoint),
+          x: point.x,
+          y: point.y
+        })
+        
+        //一笔结束，保存笔迹的坐标点，清空，当前笔迹
+        //增加判断是否在手写区域
+        this.pointToLine(currentLine)
+        let currentChirography = {
+          lineSize: this.lineSize,
+          lineColor: this.currentSelectColor
+        }
+        
+        let chirography = this.chirography
+        chirography.unshift(currentChirography)
+        this.chirography = chirography
+        
+        let linePrack = this.linePrack
+        linePrack.unshift(this.currentLine)
+        this.linePrack = linePrack
+        this.currentLine = []
+      },
+      // 重置绘画板
+      reDraw() {
+        this.initCanvas('#FFFFFF')
+      },
+      // 保存
+      save() {
+        // 在组件内使用需要第二个参数this
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasName,
+          fileType: 'png',
+          quality: 1,
+          success: (res) => {
+            if (this.rotate) {
+              this.getRotateImage(res.tempFilePath).then((res) => {
+                this.$emit('save', res)
+              }).catch(err => {
+                this.$tn.message.toast('旋转图片失败')
+              })
+            } else {
+              this.$emit('save', res.tempFilePath)
+            }
+          },
+          fail: () => {
+            this.$tn.message.toast('保存失败')
+          }
+        }, this)
+      },
+      // 预览图片
+      previewImage() {
+        // 在组件内使用需要第二个参数this
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasName,
+          fileType: 'png',
+          quality: 1,
+          success: (res) => {
+            if (this.rotate) {
+              this.getRotateImage(res.tempFilePath).then((res) => {
+                uni.previewImage({
+                  urls: [res]
+                })
+              }).catch(err => {
+                this.$tn.message.toast('旋转图片失败')
+              })
+            } else {
+              uni.previewImage({
+                urls: [res.tempFilePath]
+              })
+            }
+          },
+          fail: (e) => {
+            this.$tn.message.toast('预览失败')
+          }
+        }, this)
+      },
+      // 关闭签名板
+      closeBoard() {
+        this.$tn.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
+          this.$emit('closed')
+        }, true)
+      },
+      // 切换画笔颜色
+      colorSwitch(color) {
+        this.currentSelectColor = color
+      },
+      // 绘制两点之间的线条
+      pointToLine(line) {
+        this.calcBethelLine(line)
+      },
+      // 计算插值，让线条更加圆滑
+      calcBethelLine(line) {
+        if (line.length <= 1) {
+          line[0].r = this.radius
+          return
+        }
+        let x0,
+          x1,
+          x2,
+          y0,
+          y1,
+          y2,
+          r0,
+          r1,
+          r2,
+          len,
+          lastRadius,
+          dis = 0,
+          time = 0,
+          curveValue = 0.5;
+        if (line.length <= 2) {
+          x0 = line[1].x
+          y0 = line[1].y
+          x2 = line[1].x + (line[0].x - line[1].x) * curveValue
+          y2 = line[1].y + (line[0].y - line[1].y) * curveValue
+          x1 = x0 + (x2 - x0) * curveValue
+          y1 = y0 + (y2 - y0) * curveValue
+        } else {
+          x0 = line[2].x + (line[1].x - line[2].x) * curveValue
+          y0 = line[2].y + (line[1].y - line[2].y) * curveValue
+          x1 = line[1].x
+          y1 = line[1].y
+          x2 = x1 + (line[0].x - x1) * curveValue
+          y2 = y1 + (line[0].y - y1) * curveValue
+        }
+        // 三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
+        len = this.distance({
+          x: x2,
+          y: y2
+        }, {
+          x: x0,
+          y: y0
+        })
+        lastRadius = this.radius
+        for (let i = 0; i < line.length - 1; i++) {
+          dis += line[i].dis
+          time += line[i].time - line[i + 1].time
+          if (dis > this.smoothness) break
+        }
+        
+        this.radius = Math.min((time / len) * this.pressure + this.minLine, this.maxLine) * this.lineSize
+        line[0].r = this.radius
+        // 计算笔迹半径
+        if (line.length <= 2) {
+          r0 = (lastRadius + this.radius) / 2
+          r1 = r0
+          r2 = r1
+        } else {
+          r0 = (line[2].r + line[1].r) / 2
+          r1 = line[1].r
+          r2 = (line[1].r + line[0].r) / 2
+        }
+        let n = 5
+        let point = []
+        for (let i = 0; i < n; i++) {
+          let t = i / (n - 1)
+          let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2
+          let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2
+          let r = lastRadius + ((this.radius - lastRadius) / n) * i
+          point.push({
+            x,
+            y,
+            r
+          })
+          if (point.length === 3) {
+            let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r)
+            a[0].color = this.currentSelectColor
+            
+            this.drawBethel(a, true)
+            point = [{
+              x,
+              y,
+              r
+            }]
+          }
+        }
+        this.currentLine = line
+      },
+      // 求两点之间的距离
+      distance(a, b) {
+        let x = b.x - a.x
+        let y = b.y - a.y
+        return Math.sqrt(x * x + y * y)
+      },
+      // 计算点信息
+      ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
+        let a = [],
+          vx01,
+          vy01,
+          norm,
+          n_x0,
+          n_y0,
+          vx21,
+          vy21,
+          n_x2,
+          n_y2;
+        vx01 = x1 - x0
+        vy01 = y1 - y0
+        norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2
+        vx01 = (vx01 / norm) * r0
+        vy01 = (vy01 / norm) * r0
+        n_x0 = vy01
+        n_y0 = -vx01
+        vx21 = x1 - x2
+        vy21 = y1 - y2
+        norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2
+        vx21 = (vx21 / norm) * r2
+        vy21 = (vy21 / norm) * r2
+        n_x2 = -vy21
+        n_y2 = vx21
+        a.push({
+          mx: x0 + n_x0,
+          my: y0 + n_y0,
+          color: '#080808'
+        })
+        a.push({
+          c1x: x1 + n_x0,
+          c1y: y1 + n_y0,
+          c2x: x1 + n_x2,
+          c2y: y1 + n_y2,
+          ex: x2 + n_x2,
+          ey: y2 + n_y2
+        })
+        a.push({
+          c1x: x2 + n_x2 - vx21,
+          c1y: y2 + n_y2 - vy21,
+          c2x: x2 - n_x2 - vx21,
+          c2y: y2 - n_y2 - vy21,
+          ex: x2 - n_x2,
+          ey: y2 - n_y2
+        })
+        a.push({
+          c1x: x1 - n_x2,
+          c1y: y1 - n_y2,
+          c2x: x1 - n_x0,
+          c2y: y1 - n_y0,
+          ex: x0 - n_x0,
+          ey: y0 - n_y0
+        })
+        a.push({
+          c1x: x0 - n_x0 - vx01,
+          c1y: y0 - n_y0 - vy01,
+          c2x: x0 + n_x0 - vx01,
+          c2y: y0 + n_y0 - vy01,
+          ex: x0 + n_x0,
+          ey: y0 + n_y0
+        })
+        a[0].mx = a[0].mx.toFixed(1)
+        a[0].mx = parseFloat(a[0].mx)
+        a[0].my = a[0].my.toFixed(1)
+        a[0].my = parseFloat(a[0].my)
+        for (let i = 1; i < a.length; i++) {
+          a[i].c1x = a[i].c1x.toFixed(1)
+          a[i].c1x = parseFloat(a[i].c1x)
+          a[i].c1y = a[i].c1y.toFixed(1)
+          a[i].c1y = parseFloat(a[i].c1y)
+          a[i].c2x = a[i].c2x.toFixed(1)
+          a[i].c2x = parseFloat(a[i].c2x)
+          a[i].c2y = a[i].c2y.toFixed(1)
+          a[i].c2y = parseFloat(a[i].c2y)
+          a[i].ex = a[i].ex.toFixed(1)
+          a[i].ex = parseFloat(a[i].ex)
+          a[i].ey = a[i].ey.toFixed(1)
+          a[i].ey = parseFloat(a[i].ey)
+        }
+        return a
+      },
+      // 绘制贝塞尔曲线
+      drawBethel(point, is_fill, color) {
+        this.ctx.beginPath()
+        this.ctx.moveTo(point[0].mx, point[0].my)
+        if (color != undefined) {
+          this.ctx.setFillStyle(color)
+          this.ctx.setStrokeStyle(color)
+        } else {
+          this.ctx.setFillStyle(point[0].color)
+          this.ctx.setStrokeStyle(point[0].color)
+        }
+        for (let i = 1; i < point.length; i++) {
+          this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
+        }
+        this.ctx.stroke()
+        if (is_fill != undefined) {
+          //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
+          this.ctx.fill()
+        }
+        this.ctx.draw(true)
+      },
+      // 旋转图片
+      async getRotateImage(dataUrl) {
+        // const url = await this.base64ToPath(dataUrl)
+        const url = dataUrl
+        
+        // 创建新画布
+        const tempCtx = uni.createCanvasContext('temp-tn-sign-canvas', this)
+        const width = this.canvasWidth
+        const height = this.canvasHeight
+        tempCtx.restore()
+        tempCtx.save()
+        tempCtx.translate(0, height)
+        tempCtx.rotate(270 * Math.PI / 180)
+        tempCtx.drawImage(url, 0, 0, width, height)
+        tempCtx.draw()
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            uni.canvasToTempFilePath({
+              canvasId: 'temp-tn-sign-canvas',
+              fileType: 'png',
+              x: 0,
+              y: height - width,
+              width: height,
+              height: width,
+              success: res => resolve(res.tempFilePath),
+              fail: reject
+            }, this)
+          }, 50)
+        })
+      },
+      // 将base64转换为本地
+      base64ToPath(dataUrl) {
+        return new Promise((resolve, reject) => {
+          // 判断地址是否包含bas64字样，不包含直接返回
+          if (dataUrl.indexOf('base64') !== -1) {
+            const data = uni.base64ToArrayBuffer(dataUrl.replace(/^data:image\/\w+;base64,/, ''))
+            // #ifdef MP-WEIXIN
+            const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
+            // #endif
+            // #ifndef MP-WEIXIN
+            const filePath = `${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
+            // #endif
+            uni.getFileSystemManager().writeFile({
+              filePath,
+              data,
+              encoding: 'base64',
+              success: () => resolve(filePath),
+              fail: reject
+            })
+          } else {
+            resolve(dataUrl)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-sign-board {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #E6E6E6;
+    z-index: 997;
+    display: flex;
+    flex-direction: row-reverse;
+    
+    &__content {
+      width: 84%;
+      height: 100%;
+      
+      &__wrapper {
+        width: calc(100% - 60rpx);
+        height: calc(100% - 60rpx);
+        margin: 30rpx;
+        border-radius: 20rpx;
+        border: 2rpx dotted #AAAAAA;
+        overflow: hidden;
+      }
+      
+      &__canvas {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+      }
+    }
+    
+    &__tools {
+      width: 16%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      
+      &__color {
+        margin-top: 30rpx;
+        
+        &__item {
+          width: 70rpx;
+          height: 70rpx;
+          border-radius: 100rpx;
+          margin: 20rpx auto;
+          
+          &--active {
+            position: relative;
+            
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 40%;
+              height: 40%;
+              border-radius: 100rpx;
+              background-color: #FFFFFF;
+              transform: translate(-50%, -50%);
+            }
+          }
+        }
+      }
+      
+      &__button {
+        margin-bottom: 30rpx;
+        display: flex;
+        flex-direction: column;
+        
+        &__item {
+          width: 130rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          text-align: center;
+          margin: 60rpx auto;
+          border-radius: 10rpx;
+          color: #FFFFFF;
+          transform-origin: center center;
+          transform: rotateZ(90deg);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-skeleton/tn-skeleton.vue b/tuniao-ui/components/tn-skeleton/tn-skeleton.vue
new file mode 100644
index 0000000..cb3fc7b
--- /dev/null
+++ b/tuniao-ui/components/tn-skeleton/tn-skeleton.vue
@@ -0,0 +1,254 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-skeleton-class tn-skeleton"
+    :class="[backgroundColorClass]"
+    :style="[skeletonStyle]"
+    @touchmove.stop.prevent
+  >
+    <view
+      v-for="(item, index) in rectNodes"
+      :key="$tn.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--rect"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('rect', item)]"
+    ></view>
+    <view
+      v-for="(item, index) in circleNodes"
+      :key="$tn.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--circle"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('circle', item)]"
+    ></view>
+    <view
+      v-for="(item, index) in filletNodes"
+      :key="$tn.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--fillet"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('fillet', item)]"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-skeleton',
+    mixins: [ componentsColorMixin ],
+    props: {
+      // 显示骨架屏
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 需要渲染的元素背景颜色
+      elBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 开启加载动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 矩形元素自定义样式
+      rectCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆形元素自定义样式
+      circleCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆角元素自定义样式
+      filletCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      elBackgroundColorStyle() {
+        return this.$tn.color.getBackgroundColorStyle(this.elBackgroundColor)
+      },
+      elBackgroundColorClass() {
+        return this.$tn.color.getBackgroundColorInternalClass(this.elBackgroundColor)
+      },
+      // 骨架屏样式
+      skeletonStyle() {
+        let style = {}
+        style.width = this.skeletonWidth + 'px'
+        style.height = this.skeletonHeight + 'px'
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        style.left = this.left + 'px'
+        style.top = this.top + 'px'
+        return style
+      },
+      // 元素样式
+      itemStyle() {
+        return (type, item) => {
+          let style = {}
+          style.width = item.width + 'px'
+          style.height = item.height + 'px'
+          if (this.elBackgroundColorStyle) {
+            style.backgroundColor = this.elBackgroundColorStyle
+          }
+          style.left = (item.left - this.left) + 'px'
+          style.top = (item.top - this.top) + 'px'
+          if (type === 'rect') {
+            Object.assign(style, this.rectCustomStyle)
+          } else if (type === 'circle') {
+            style.borderRadius = (item.width / 2) + 'px'
+            Object.assign(style, this.circleCustomStyle)
+          } else if (type === 'fillet') {
+            Object.assign(style, this.filletCustomStyle)
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        // 骨架屏宽度
+        skeletonWidth: 750,
+        // 骨架屏高度
+        skeletonHeight: 1500,
+        // 圆角元素
+        filletNodes: [],
+        // 圆形元素
+        circleNodes: [],
+        // 矩形元素
+        rectNodes: [],
+        // 元素偏移位置
+        top: 0,
+        left: 0
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        // 获取系统信息
+        const systemInfo = uni.getSystemInfoSync()
+        this.skeletonWidth = systemInfo.safeArea.width
+        this.skeletonHeight = systemInfo.safeArea.height
+        this.selectQueryInfo()
+      })
+    },
+    methods: {
+      // 查询节点信息
+      selectQueryInfo() {
+        // 获取整个父容器的宽高作为骨架屏的宽高
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
+          console.log(res);
+          this.skeletonWidth = res[0][0].width
+          this.skeletonHeight = res[0][0].height
+          this.top = res[0][0].bottom - res[0][0].height
+          this.left = res[0][0].left
+        })
+        
+        // 获取元素列表
+        this.getRectElements()
+        this.getCircleElements()
+        this.getFillteElements()
+      },
+      // 矩形元素列表
+      getRectElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
+          this.rectNodes = res[0]
+        })
+      },
+      // 圆形元素列表
+      getCircleElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
+          this.circleNodes = res[0]
+        })
+      },
+      // 圆角元素列表
+      getFillteElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
+          this.filletNodes = res[0]
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-skeleton {
+    position: absolute;
+    z-index: 9998;
+    overflow: hidden;
+    background-color: #FFFFFF;
+    
+    &__item {
+      position: absolute;
+      background-color: #F0F0F0;
+      
+      &--fillet {
+        border-radius: 10rpx;
+      }
+      
+      &--fade {
+        width: 100%;
+        height: 100%;
+        background-color: #E6E6E6;
+        animation-duration: 1.5s;
+        animation-name: blink;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+  
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-slider/tn-slider.vue b/tuniao-ui/components/tn-slider/tn-slider.vue
new file mode 100644
index 0000000..d29d848
--- /dev/null
+++ b/tuniao-ui/components/tn-slider/tn-slider.vue
@@ -0,0 +1,255 @@
+<template>
+  <view
+    class="tn-slider-class tn-slider"
+    :class="{'tn-slider--disabled': disabled}"
+    :style="{
+      backgroundColor: inactiveColor
+    }"
+    @tap="click"
+  >
+    <!-- slider滑动线 -->
+    <view
+      class="tn-slider__gap"
+      :style="[
+        barStyle,
+        {
+          height: this.$tn.string.getLengthUnitValue(lineHeight),
+          backgroundColor: activeColor
+        }
+      ]"
+    >
+      <!-- slider滑块 -->
+      <view
+        class="tn-slider__button-wrap"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        @touchcancel="touchEnd"
+      >
+        <view v-if="$slots.default || $slots.$default">
+          <slot></slot>
+        </view>
+        <view
+          v-else
+          class="tn-slider__button"
+          :style="[blockStyle, {
+            height: this.$tn.string.getLengthUnitValue(blockWidth),
+            width: this.$tn.string.getLengthUnitValue(blockWidth),
+            backgroundColor: blockColor
+          }]"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-slider',
+    props: {
+      // 进度值
+      value: {
+        type: [Number, String],
+        default: 0
+      },
+      // 最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: Number,
+        default: 100
+      },
+      // 步进值
+      step: {
+        type: Number,
+        default: 1
+      },
+      // 禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 滑块宽度
+      blockWidth: {
+        type: Number,
+        default: 30
+      },
+      // 滑动条高度
+      lineHeight: {
+        type: Number,
+        default: 8
+      },
+      // 滑动条激活的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 滑动条未被激活的颜色
+      inactiveColor: {
+        type: String,
+        default: '#E6E6E6'
+      },
+      // 滑块的颜色
+      blockColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 自定义滑块的样式
+      blockStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        startX: 0,
+        status: 'end',
+        newValue: 0,
+        distanceX: 0,
+        startValue: 0,
+        barStyle: {},
+        sliderRect: {
+          left: 0,
+          width: 0
+        }
+      }
+    },
+    watch: {
+      value(val) {
+        // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+        if (this.status === 'end') this.updateValue(val, false)
+      }
+    },
+    created() {
+      this.updateValue(this.value, false)
+    },
+    mounted() {
+      this._tGetRect('.tn-slider').then(res => {
+        this.sliderRect = res
+      })
+    },
+    methods: {
+      // 开始滑动
+      touchStart(event) {
+        if (this.disabled) return
+        if (!event.changedTouches[0]) return
+        
+        this.startX = 0
+        // 触摸点
+        this.startX = event.changedTouches[0].pageX
+        this.startValue = this.format(this.value)
+        
+        // 标识当前开始触摸
+        this.status = 'start'
+      },
+      // 滑动移动中
+      touchMove(event) {
+        if (this.disabled) return
+        if (!event.changedTouches[0]) return
+        
+        // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+        // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+        if (this.status === 'start') this.$emit('start')
+        let movePageX = event.changedTouches[0].pageX
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = movePageX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + this.min
+        this.status = 'moving'
+        this.$emit('moving')
+        
+        this.updateValue(this.newValue, true)
+      },
+      // 滑动结束
+      touchEnd() {
+        if(this.disabled) return
+        if (this.status === 'moving') {
+          this.updateValue(this.newValue, false)
+          this.$emit('end')
+        }
+        this.status = 'end'
+      },
+      // 更新数值
+      updateValue(value, drag) {
+        // 去掉小数部分，对step进行步进处理
+        value = this.format(value)
+        const width = Math.round((value - this.min) / (this.max - this.min) * 100)
+        // 不允许滑动的距离小于0和超过100
+        if (width < 0 || width > 100) return
+        // 设置移动的百分比
+        let barStyle = {
+          width: width + '%'
+        }
+        // 移动期间取消动画
+        if (drag === true) {
+          barStyle.transition = 'none'
+        } else {
+          // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+          delete barStyle.transition
+        }
+        
+        // 修改value值
+        this.$emit('input', value)
+        this.barStyle = barStyle
+      },
+      // 点击事件
+      click(event) {
+        if (this.disabled) return
+        // 直接点击的情况，计算方式和touchMove方法一致
+        const value = (((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this.min)) + this.min
+        this.updateValue(value, false)
+      },
+      // 格式化滑动的值
+      format(value) {
+        return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-slider {
+    width: 100%;
+    position: relative;
+    border-radius: 1000rpx;
+    // 增加点击的范围
+    border-width: 20rpx;
+    border-style: solid;
+    border-color: transparent;
+    background-color: $tn-font-holder-color;
+    background-clip: content-box;
+    
+    &__gap {
+      position: relative;
+      border-radius: inherit;
+      transition: width 0.2s;
+      background-color: #01BEFF;
+    }
+    
+    &__button {
+      width: 30rpx;
+      height: 30rpx;
+      border-radius: 50%;
+      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
+      background-color: #FFFFFF;
+      cursor: pointer;
+      
+      &-wrap {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate3d(50%, -50%, 0);
+      }
+    }
+    
+    &--disabled {
+      opacity: 0.6;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-stack-swiper/index-h5.wxs b/tuniao-ui/components/tn-stack-swiper/index-h5.wxs
new file mode 100644
index 0000000..92b8627
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/index-h5.wxs
@@ -0,0 +1,657 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, direction) {
+  // 震动偏移容差
+  var toleranceShake = 30
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// 更新轮播样式信息
+function updateSwiperStyle(currentTouches, instance, state) {
+  var itemData = state.itemData
+  var itemsInstance = state.itemsInstance
+  var list = state.list
+  var currentIndex = state.currentIndex
+  var touchRelactive = state.touchRelactive
+  // console.log(itemAnimationWidth);
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 偏移的x轴距离
+    var translateX = currentTouches.x - touchRelactive.x
+    if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'left') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateX) > itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
+            var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log(itemOpacity);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'right') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 右滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateX) < itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateX) / itemAnimationWidth
+            var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 偏移的y轴距离
+    var translateY = currentTouches.y - touchRelactive.y
+    if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'up') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateY) > itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
+            var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+              
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'down') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 下滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateY) < itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateY) / itemAnimationHeight
+            var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  }
+}
+
+// 更新当前轮播序号
+function updateCurrentSwiperIndex(index, ownerInstance, state) {
+  state.currentIndex = index
+  ownerInstance.callMethod('changeSwiperIndex', {
+    index: index
+  })
+}
+
+// 切换到下一个轮播
+function switchNextSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  // 已经完成轮播切换
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前轮播移动到最左边
+    instance.setStyle({
+      'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前轮播移动到最上边
+    instance.setStyle({
+      'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 切换到上一个轮播
+function switchPrevSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 反转动画
+function toggleSwiperAnimation(state, add) {
+  if (!state.itemsInstance) return
+  if (add === true) {
+    state.itemsInstance.forEach(function(item, index) {
+      if (!item.hasClass('tn-stack-swiper__item__transition')) {
+        item.addClass('tn-stack-swiper__item__transition')
+      }
+    })
+  } else {
+    state.itemsInstance.forEach(function(item, index) {
+      if (item.hasClass('tn-stack-swiper__item__transition')) {
+        item.removeClass('tn-stack-swiper__item__transition')
+      }
+    })
+  }
+}
+
+// 更新数据
+var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// 列表初始化
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      if (itemData.direction === 'horizontal') {
+        itemInstance.setStyle({
+          'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      } else if (itemData.direction === 'vertical') {
+        itemInstance.setStyle({
+          'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      }
+    }
+  })
+}
+
+// 切换轮播位置
+var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()  
+  // console.log(newVal);
+  // ownerInstance.callMethod('printLog', newVal)
+  // console.log(oldVal);
+  // ownerInstance.callMethod('printLog', oldVal)
+  // 排除第一次初始化和手动切换的情况
+  if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
+    if (oldVal < 0 || typeof oldVal == 'undefined') {
+      state.currentIndex = 0
+    }
+    return
+  }
+  state.currentIndex = newVal
+  // console.log(state.currentIndex);
+  if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
+    // console.log("next");
+    // state.itemsInstance.forEach(function(item, index) {
+    //   item.addClass("tn-stack-swiper__item__transition")
+    // })
+    switchNextSwiper(newVal, {
+      pageX: 0
+    }, state.itemsInstance[oldVal], state)
+  } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
+    // console.log("prev");
+  }
+}
+
+// 自动轮播切换状态
+var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  
+  if (newVal === true) {
+    toggleSwiperAnimation(state, true)
+  } else {
+    toggleSwiperAnimation(state, false)
+  }
+}
+
+// 开始触摸
+var touchStart = function (event, ownerInstance) {
+  // console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    // 设置左右滑动时相对偏移距离
+    state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    // 设置上下滑动时相对偏移距离
+    state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
+  }
+  
+  // 移除运动动画时间
+  toggleSwiperAnimation(state, false)
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('changeTouchState', {
+    touching: true
+  })
+  // 停止执行自动轮播
+  ownerInstance.callMethod('clearAutoPlayTimer')
+}
+
+// 开始移动
+var touchMove = function (event, ownerInstance) {
+  // console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 是否已经确定了移动方向
+  if (!state.direction) {
+    state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
+  }
+  // console.log(decideSwiperDirection(state.touchRelactive, currentTouchRelactive));
+  updateSwiperStyle(currentTouchRelactive, instance, state)
+}
+
+// 移动结束
+var touchEnd = function (event, ownerInstance) {
+  // console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var list = state.list
+  var touchRelactive = state.touchRelactive
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  // 添加运动动画时间
+  toggleSwiperAnimation(state, true)
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 判断时左滑还是右滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'left') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'right') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 判断时上滑还是下滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'up') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'down') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  }
+  
+  // 清除对应的标志位
+  state.touchRelactive = null
+  state.touching = false
+  state.direction = null
+  state.touchId = null
+  
+  ownerInstance.callMethod('changeTouchState', {
+    touching: false
+  })
+  // 重新开始执行自动轮播
+  ownerInstance.callMethod('setAutoPlay')
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  listObserver: listObserver,
+  swiperIndexChange: swiperIndexChange,
+  autoplayFlagChange: autoplayFlagChange,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-stack-swiper/index.wxs b/tuniao-ui/components/tn-stack-swiper/index.wxs
new file mode 100644
index 0000000..92b8627
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/index.wxs
@@ -0,0 +1,657 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, direction) {
+  // 震动偏移容差
+  var toleranceShake = 30
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// 更新轮播样式信息
+function updateSwiperStyle(currentTouches, instance, state) {
+  var itemData = state.itemData
+  var itemsInstance = state.itemsInstance
+  var list = state.list
+  var currentIndex = state.currentIndex
+  var touchRelactive = state.touchRelactive
+  // console.log(itemAnimationWidth);
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 偏移的x轴距离
+    var translateX = currentTouches.x - touchRelactive.x
+    if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'left') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateX) > itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
+            var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log(itemOpacity);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'right') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 右滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateX) < itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateX) / itemAnimationWidth
+            var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 偏移的y轴距离
+    var translateY = currentTouches.y - touchRelactive.y
+    if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'up') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateY) > itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
+            var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+              
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'down') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 下滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateY) < itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateY) / itemAnimationHeight
+            var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  }
+}
+
+// 更新当前轮播序号
+function updateCurrentSwiperIndex(index, ownerInstance, state) {
+  state.currentIndex = index
+  ownerInstance.callMethod('changeSwiperIndex', {
+    index: index
+  })
+}
+
+// 切换到下一个轮播
+function switchNextSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  // 已经完成轮播切换
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前轮播移动到最左边
+    instance.setStyle({
+      'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前轮播移动到最上边
+    instance.setStyle({
+      'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 切换到上一个轮播
+function switchPrevSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 反转动画
+function toggleSwiperAnimation(state, add) {
+  if (!state.itemsInstance) return
+  if (add === true) {
+    state.itemsInstance.forEach(function(item, index) {
+      if (!item.hasClass('tn-stack-swiper__item__transition')) {
+        item.addClass('tn-stack-swiper__item__transition')
+      }
+    })
+  } else {
+    state.itemsInstance.forEach(function(item, index) {
+      if (item.hasClass('tn-stack-swiper__item__transition')) {
+        item.removeClass('tn-stack-swiper__item__transition')
+      }
+    })
+  }
+}
+
+// 更新数据
+var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// 列表初始化
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      if (itemData.direction === 'horizontal') {
+        itemInstance.setStyle({
+          'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      } else if (itemData.direction === 'vertical') {
+        itemInstance.setStyle({
+          'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      }
+    }
+  })
+}
+
+// 切换轮播位置
+var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()  
+  // console.log(newVal);
+  // ownerInstance.callMethod('printLog', newVal)
+  // console.log(oldVal);
+  // ownerInstance.callMethod('printLog', oldVal)
+  // 排除第一次初始化和手动切换的情况
+  if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
+    if (oldVal < 0 || typeof oldVal == 'undefined') {
+      state.currentIndex = 0
+    }
+    return
+  }
+  state.currentIndex = newVal
+  // console.log(state.currentIndex);
+  if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
+    // console.log("next");
+    // state.itemsInstance.forEach(function(item, index) {
+    //   item.addClass("tn-stack-swiper__item__transition")
+    // })
+    switchNextSwiper(newVal, {
+      pageX: 0
+    }, state.itemsInstance[oldVal], state)
+  } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
+    // console.log("prev");
+  }
+}
+
+// 自动轮播切换状态
+var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  
+  if (newVal === true) {
+    toggleSwiperAnimation(state, true)
+  } else {
+    toggleSwiperAnimation(state, false)
+  }
+}
+
+// 开始触摸
+var touchStart = function (event, ownerInstance) {
+  // console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    // 设置左右滑动时相对偏移距离
+    state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    // 设置上下滑动时相对偏移距离
+    state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
+  }
+  
+  // 移除运动动画时间
+  toggleSwiperAnimation(state, false)
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('changeTouchState', {
+    touching: true
+  })
+  // 停止执行自动轮播
+  ownerInstance.callMethod('clearAutoPlayTimer')
+}
+
+// 开始移动
+var touchMove = function (event, ownerInstance) {
+  // console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 是否已经确定了移动方向
+  if (!state.direction) {
+    state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
+  }
+  // console.log(decideSwiperDirection(state.touchRelactive, currentTouchRelactive));
+  updateSwiperStyle(currentTouchRelactive, instance, state)
+}
+
+// 移动结束
+var touchEnd = function (event, ownerInstance) {
+  // console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var list = state.list
+  var touchRelactive = state.touchRelactive
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  // 添加运动动画时间
+  toggleSwiperAnimation(state, true)
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 判断时左滑还是右滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'left') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'right') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 判断时上滑还是下滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'up') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'down') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  }
+  
+  // 清除对应的标志位
+  state.touchRelactive = null
+  state.touching = false
+  state.direction = null
+  state.touchId = null
+  
+  ownerInstance.callMethod('changeTouchState', {
+    touching: false
+  })
+  // 重新开始执行自动轮播
+  ownerInstance.callMethod('setAutoPlay')
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  listObserver: listObserver,
+  swiperIndexChange: swiperIndexChange,
+  autoplayFlagChange: autoplayFlagChange,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue b/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
new file mode 100644
index 0000000..3982da5
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
@@ -0,0 +1,284 @@
+<template>
+  <view
+    class="tn-stack-swiper-class tn-stack-swiper"
+    :style="{
+      width: $tn.string.getLengthUnitValue(width),
+      height: $tn.string.getLengthUnitValue(height)
+    }"
+    :list="swiperList"
+    :itemData="itemData"
+    :currentIndex="swiperIndex"
+    :autoplayFlag="autoplayFlag"
+    :change:list="wxs.listObserver"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.swiperIndexChange"
+    :change:autoplayFlag="wxs.autoplayFlagChange"
+  >
+    <block v-for="(item, index) in list" :key="index">
+      <!-- #ifdef MP-WEIXIN -->
+      <view
+        class="tn-stack-swiper__item tn-stack-swiper__item__transition"
+        :class="[`tn-stack-swiper__item--${direction}`]"
+        :data-index="index"
+        :data-switchRate="switchRate"
+        @touchstart="wxs.touchStart"
+        :catch:touchmove="touching?wxs.touchMove:''"
+        :catch:touchend="touching?wxs.touchEnd:''"
+      >
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
+      </view>
+      <!-- #endif -->
+      
+      <!-- #ifndef MP-WEIXIN -->
+      <view
+        class="tn-stack-swiper__item"
+        :class="[`tn-stack-swiper__item--${direction}`]"
+        :data-index="index"
+        :data-switchRate="switchRate"
+        @touchstart="wxs.touchStart"
+        @touchmove="wxs.touchMove"
+        @touchend="wxs.touchEnd"
+      >
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
+      </view>
+      <!-- #endif -->
+    </block>
+  </view>
+</template>
+
+<!-- #ifdef MP-WEIXIN -->
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<!-- #endif -->
+<!-- #ifndef MP-WEIXIN -->
+<script src="./index-h5.wxs" lang="wxs" module="wxs"></script>
+<!-- #endif -->
+<script>
+  export default {
+    name: 'tn-stack-swiper',
+    props: {
+      // 显示图片的列表数据
+      // {
+      //   // 图片地址
+      //   image: 'xxx'
+      // }
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 轮播容器的宽度 rpx
+      width: {
+        type: [String, Number],
+        default: '100%'
+      },
+      // 轮播容器的高度 rpx
+      height: {
+        type: [String, Number],
+        default: 500
+      },
+      // 自动切换
+      autoplay: {
+        type: Boolean,
+        default: false
+      },
+      // 自动切换时长 ms
+      interval: {
+        type: Number,
+        default: 5000
+      },
+      // 滑动切换移动比例, [0 - 100]
+      // 比例相对于item的宽度
+      switchRate: {
+        type: Number,
+        default: 30
+      },
+      // 缩放比例 [0-1]
+      scaleRate: {
+        type: Number,
+        default: 0.1
+      },
+      // 下一轮播偏移比例
+      translateRate: {
+        type: Number,
+        default: 16
+      },
+      // 下一轮播透明比例
+      opacityRate: {
+        type: Number,
+        default:10
+      },
+      // 滑动方向
+      // horizontal -> 水平 vertical -> 垂直
+      direction: {
+        type: String,
+        default: 'horizontal'
+      }
+    },
+    data() {
+      return {
+        autoplayTimer: null,
+        // window窗口的宽度
+        windowWidth: 0,
+        // 轮播item的宽度
+        swiperItemWidth: 0,
+        // 轮播item的高度
+        swiperItemHeight: 0,
+        // 当前选中的轮播item
+        swiperIndex: -1,
+        // 标记是否开始触摸
+        touching: true,
+        // 轮播列表信息
+        swiperList: [],
+        // 标记当前是否为自动播放
+        autoplayFlag: false
+      }
+    },
+    computed: {
+      itemData() {
+        return {
+          windowWidth: this.windowWidth,
+          itemWidth: this.swiperItemWidth,
+          itemHeight: this.swiperItemHeight,
+          direction: this.direction,
+          autoplaying: this.autoplayFlag
+        }
+      }
+    },
+    watch: {
+      list(val) {
+        this.swiperList = []
+        this.$nextTick(() => {
+          this.initSwiperRectInfo()
+        })
+      },
+      autoplay(val) {
+        if (!val) {
+          this.clearAutoPlayTimer()
+        } else {
+          this.setAutoPlay()
+        }
+      }
+    },
+    created() {
+      this.autoplayFlag = this.autoplay
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initSwiperRectInfo()
+      })
+    },
+    destroyed() {
+      this.clearAutoPlayTimer()
+    },
+    methods: {
+      // 初始化轮播容器信息
+      async initSwiperRectInfo() {
+        // 用于一开始绑定事件
+        // this.touching = true
+        // 获取轮播item的宽度
+        const swiperItemRect = await this._tGetRect('.tn-stack-swiper__item')
+        if (!swiperItemRect || !swiperItemRect.width || !swiperItemRect.height) {
+          setTimeout(() => {
+            this.initSwiperRectInfo()
+          }, 50)
+          return
+        }
+        this.swiperItemWidth = swiperItemRect.width
+        this.swiperItemHeight = swiperItemRect.height
+        // this.touching = false
+        
+        // 获取系统的窗口宽度信息
+        const systemInfo = uni.getSystemInfoSync()
+        this.windowWidth = systemInfo.windowWidth
+        this.swiperIndex = 0
+        
+        // 设置对应swiper元素的位置和层级信息
+        this.swiperList = this.list.map((item, index) => {
+          
+          const scale = 1 - (this.scaleRate * index)
+          
+          if (this.direction === 'horizontal') {
+            item.translateX = ((index * this.translateRate) * 0.01 * this.swiperItemWidth)
+          } else if (this.direction === 'vertical') {
+            item.translateY = ((index * this.translateRate) * 0.01 * this.swiperItemHeight)
+          }
+          item.opacity = (1 - ((index * this.opacityRate) * 0.01))
+          item.zIndex = this.list.length - index
+          item.scale = scale <= 0 ? 0 : scale
+          
+          return item
+        })
+        
+        this.setAutoPlay()
+      },
+      // 设置自动切换轮播
+      setAutoPlay() {
+        if (this.autoplay) {
+          this.clearAutoPlayTimer()
+          this.autoplayFlag = true
+          this.autoplayTimer = setInterval(() => {
+            this.swiperIndex = this.swiperIndex + 1 > this.swiperList.length - 1 ? 0 : this.swiperIndex + 1
+          }, this.interval)
+        }
+      },
+      // 清除自动切换定时器
+      clearAutoPlayTimer() {
+        if (this.autoplayTimer != null) {
+          this.autoplayFlag = false
+          clearInterval(this.autoplayTimer)
+        }
+      },
+      // 修改轮播选中index
+      changeSwiperIndex(e) {
+        // console.log(e.index);
+        this.swiperIndex = e.index
+        this.$emit('change', { index: e.index })
+      },
+      // 修改触摸状态
+      changeTouchState(e) {
+        this.touching = e.touching
+      },
+      // 打印日志
+      printLog(data) {
+        console.log("log", data);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-stack-swiper {
+    position: relative;
+    
+    &__item {
+      position: absolute;
+      border-radius: 20rpx;
+      overflow: hidden;
+      
+      &--horizontal {
+        width: 88%;
+        height: 100%;
+        transform-origin: left center;
+      }
+      
+      &--vertical {
+        width: 100%;
+        height: 88%;
+        transform-origin: top center;
+      }
+      
+      &__transition {
+        transition-property: transform,opacity;
+        transition-duration: 0.25s;
+        transition-timing-function: ease-out;
+        // transition: transform, opacity 0.25s ease-in-out !important;
+      }
+    }
+    
+    &__image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-steps/tn-steps.vue b/tuniao-ui/components/tn-steps/tn-steps.vue
new file mode 100644
index 0000000..e43ba61
--- /dev/null
+++ b/tuniao-ui/components/tn-steps/tn-steps.vue
@@ -0,0 +1,346 @@
+<template>
+  <view
+    class="tn-steps-class tn-steps"
+    :style="{
+      flexDirection: direction
+    }"
+  >
+    <view
+      v-for="(item, index) in list"
+      :key="index"
+      class="tn-steps__item"
+      :class="[`tn-steps__item--${direction}`]"
+      @tap="clickStepItem(index)"
+    >
+      <!-- 数值模式 -->
+      <view
+        v-if="mode === 'number'"
+        class="tn-steps__item__number"
+        :style="{
+          backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
+          borderColor: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      >
+        <text
+          class="tn-steps__item__number__text"
+          :class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
+          :style="{
+            color: currentIndex <= index ? inActiveColor : activeColor
+          }"
+        >
+          {{ index + 1}}
+        </text>
+        <view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
+      </view>
+      
+      <!-- 点模式 -->
+      <view
+        v-if="mode === 'dot'"
+        class="tn-steps__item__dot"
+        :style="{
+          backgroundColor: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      ></view>
+      
+      <!-- 图标模式 -->
+      <view
+        v-if="mode === 'icon'"
+        class="tn-steps__item__icon"
+        :class="[iconModeClass(index)]"
+        :style="{
+          color: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      ></view>
+      
+      <!-- 点图标模式 -->
+      <view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
+        <view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
+        <view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
+      </view>
+      
+      <!-- 步骤下的文字 -->
+      <text
+        v-if="showTitle"
+        class="tn-steps__item__text tn-text-ellipsis"
+        :class="[`tn-steps__item__text--${direction}`]"
+        :style="{
+          color: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      >
+        {{ item.name }}
+      </text>
+      
+      <!-- 连接的横线 -->
+      <view
+        v-if="index < list.length - 1"
+        class="tn-steps__item__line"
+        :class="[`tn-steps__item__line--${mode}`]"
+        :style="{
+          borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
+        }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-steps',
+    props: {
+      // 模式类型
+      // dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
+      mode: {
+        type: String,
+        default: 'dot'
+      },
+      // 步骤条的方向
+      // row -> 横向 column -> 竖向
+      direction: {
+        type: String,
+        default: 'row'
+      },
+      // 步骤条数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当前激活的步数
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 激活步骤的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未激活步骤的颜色
+      inActiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活后显示的图标，在数字模式下有效
+      icon: {
+        type: String,
+        default: 'success'
+      },
+      // 是否显示标题
+      showTitle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      // icon模式下图标的值
+      iconModeClass() {
+        return (index) => {
+          const item = this.list[index]
+          // 状态被选中并且对应数据下存在selectIcon属性
+          if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
+            return `tn-icon-${item.selectIcon}`
+          } else {
+            // 未选中
+            return `tn-icon-${item.icon || this.icon}`
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        currentIndex: 0
+      }
+    },
+    watch: {
+      current: {
+        handler(val) {
+          this.currentIndex = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 点击了某一个选项
+      clickStepItem(index) {
+        const chooseIndex = index + 1
+        this.currentIndex = chooseIndex
+        this.$emit('click', { index: chooseIndex })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  $tn-steps-item-number-width: 44rpx;
+  $tn-steps-item-dot-width: 20rpx;
+  
+  .tn-steps {
+    display: flex;
+    flex-direction: row;
+    
+    &__item {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      min-width: 100rpx;
+      font-size: 28rpx;
+      text-align: center;
+      
+      &__number {
+        // display: flex;
+        // flex-wrap: wrap;
+        // align-items: center;
+        // justify-content: center;
+        position: relative;
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        line-height: calc(#{$tn-steps-item-number-width} - 2rpx);
+        border: 1px solid #AAAAAA;
+        border-radius: 50%;
+        overflow: hidden;
+        transition: all 0.3s linear;
+        
+        &__text {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+          transition: inherit;
+          transform: translateY(-#{$tn-steps-item-number-width});
+          
+          &--visible {
+            transform: translateY(0);
+          }
+        }
+        
+        &__icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+          color: #FFFFFF;
+          transition: all 0.3s linear;
+          transform: translateY(#{$tn-steps-item-number-width});
+          
+          &--visible {
+            transform: translateY(0);
+          }
+        }
+      }
+      
+      &__dot {
+        width: $tn-steps-item-dot-width;
+        height: $tn-steps-item-dot-width;
+        display: flex;
+        flex-direction: row;
+        border-radius: 50%;
+        transition: all 0.3s linear;
+        
+        &--icon {
+          width: $tn-steps-item-number-width;
+          height: $tn-steps-item-number-width;
+        }
+      }
+      
+      &__icon {
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        font-size: $tn-steps-item-number-width;
+        transition: all 0.3s linear;
+      }
+      
+      &__dot-icon {
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s linear;
+        
+        &--dot {
+          width: $tn-steps-item-dot-width;
+          height: $tn-steps-item-dot-width;
+          border-radius: 50%;
+          transition: inherit;
+        }
+        
+        &--icon {
+          width: $tn-steps-item-number-width;
+          height: $tn-steps-item-number-width;
+          font-size: $tn-steps-item-number-width;
+          transition: inherit;
+        }
+      }
+      
+      &__text {
+        transition: all 0.3s linear;
+        &--row {
+          margin-top: 14rpx;
+        }
+        
+        &--column {
+          margin-left: 14rpx;
+        }
+      }
+      
+      &__line {
+        position: absolute;
+        z-index: 0;
+        vertical-align: middle;
+        transition: all 0.3s linear;
+      }
+      
+      &--row {
+        display: flex;
+        flex-direction: column;
+        
+        .tn-steps__item__line {
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          width: 50%;
+          left: 75%;
+          
+          &--dot {
+            top: calc(#{$tn-steps-item-dot-width} / 2);
+          }
+          
+          &--number, &--icon, &--dotIcon {
+            top: calc(#{$tn-steps-item-number-width} / 2);
+          }
+        }
+      }
+      
+      &--column {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        min-height: 120rpx;
+        
+        .tn-steps__item__line {
+          border-left-width: 1px;
+          border-left-style: solid;
+          height: 50%;
+          top: 75%;
+          
+          &--dot {
+            left: calc(#{$tn-steps-item-dot-width} / 2);
+          }
+          
+          &--number, &--icon, &--dotIcon {
+            left: calc(#{$tn-steps-item-number-width} / 2);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-sticky/tn-sticky.vue b/tuniao-ui/components/tn-sticky/tn-sticky.vue
new file mode 100644
index 0000000..a3d04e8
--- /dev/null
+++ b/tuniao-ui/components/tn-sticky/tn-sticky.vue
@@ -0,0 +1,186 @@
+<template>
+  <view class="tn-sticky-class">
+    <view
+      class="tn-sticky__wrap"
+      :class="[stickyClass]"
+      :style="[stickyStyle]"
+    >
+      <view
+        class="tn-sticky__item"
+        :style="{
+          position: fixed ? 'fixed' : 'static',
+          top: stickyTop + 'px',
+          left: left + 'px',
+          width: width === 'auto' ? 'auto' : width + 'px',
+          zIndex: elZIndex
+        }"
+      >
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-sticky',
+    props: {
+      // 吸顶容器到顶部某个距离的时候进行吸顶
+      // 在H5中，customNavBar的高度为45px
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      // H5顶部导航栏的高度
+      h5NavHeight: {
+        type: Number,
+        default: 45
+      },
+      // 自定义顶部导航栏高度
+      customNavHeight: {
+        type: Number,
+        default: 0
+      },
+      // 是否开启吸顶
+      enabled: {
+        type: Boolean,
+        default: true
+      },
+      // 吸顶容器的背景颜色
+      backgroundColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 索引值，区分不同的吸顶组件
+      index: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$tn.zIndex.sticky
+      },
+      backgroundColorStyle() {
+        return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      stickyClass() {
+        let clazz = ''
+        clazz += this.elClass
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        return clazz
+      },
+      stickyStyle() {
+        let style = {}
+        style.height = this.fixed ? this.height + 'px' : 'auto'
+        if (this.backgroundColorStyle) {
+          style.color = this.backgroundColorStyle
+        }
+        if (this.elZIndex) {
+          style.zIndex = this.elZIndex
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        // 监听组件别名
+        stickyObserverName: 'tnStickyObserver',
+        // 组件的唯一编号
+        elClass: this.$tn.uuid(),
+        // 是否固定
+        fixed: false,
+        // 高度
+        height: 'auto',
+        // 宽度
+        width: 'auto',
+        // 距离顶部的距离
+        stickyTop: 0,
+        // 左边距离
+        left: 0
+      }
+    },
+    watch: {
+      offsetTop(val) {
+        this.initObserver()
+      },
+      enabled(val) {
+        if (val === false) {
+          this.fixed = false
+          this.disconnectObserver(this.stickyObserverName)
+        } else {
+          this.initObserver()
+        }
+      },
+      customNavHeight(val) {
+        this.initObserver()
+      }
+    },
+    mounted() {
+      this.initObserver()
+    },
+    methods: {
+      // 初始化监听组件的布局状态
+      initObserver() {
+        if (!this.enabled) return
+        // #ifdef H5
+        this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight
+        // #endif
+         // #ifndef H5
+         this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.customNavHeight : this.customNavHeight
+         // #endif
+         
+         this.disconnectObserver(this.stickyObserverName)
+         this._tGetRect('.' + this.elClass).then((res) => {
+           this.height = res.height
+           this.left = res.left
+           this.width = res.width
+           this.$nextTick(() => {
+             this.connectObserver()
+           })
+         })
+      },
+      // 监听组件的布局状态
+      connectObserver() {
+        this.disconnectObserver(this.stickyObserverName)
+        // 组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+        const contentObserver = this.createIntersectionObserver({
+          thresholds: [0.95, 0.98, 1]
+        })
+        contentObserver.relativeToViewport({
+          top: -this.stickyTop
+        })
+        contentObserver.observe('.' + this.elClass, res => {
+          if (!this.enabled) return
+          this.setFixed(res.boundingClientRect.top)
+        })
+        this[this.stickyObserverName] = contentObserver
+      },
+      // 设置是否固定
+      setFixed(top) {
+        const fixed = top < this.stickyTop
+        if (fixed) this.$emit('fixed', this.index)
+        else if (this.fixed) this.$emit('unfixed', this.index)
+        this.fixed = fixed
+      },
+      // 停止监听组件的布局状态
+      disconnectObserver(observerName) {
+        const observer = this[observerName]
+        observer && observer.disconnect()
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-subsection/tn-subsection.vue b/tuniao-ui/components/tn-subsection/tn-subsection.vue
new file mode 100644
index 0000000..c47f41f
--- /dev/null
+++ b/tuniao-ui/components/tn-subsection/tn-subsection.vue
@@ -0,0 +1,410 @@
+<template>
+  <view
+    class="tn-subsection-class tn-subsection"
+    :class="[subsectionBackgroundColorClass]"
+    :style="[subsectionStyle]"
+  >
+    <!-- 滑块 -->
+    <block v-for="(item, index) in listInfo" :key="index">
+      <view
+        class="tn-subsection__item tn-text-ellipsis"
+        :class="[
+          'section-item-' + index,
+          noBorderRight(index)
+        ]"
+        :style="[itemStyle(index)]"
+        @tap="click(index)"
+      >
+        <view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
+          {{ item.name }}
+        </view>
+      </view>
+    </block>
+    <!-- 背景 -->
+    <view
+      class="tn-subsection__bg"
+      :class="[itemBarClass]"
+      :style="[itemBarStyle]"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-subsection',
+    props: {
+      // 模式选择
+      // button 按钮模式 subsection 分段模式
+      mode: {
+        type: String,
+        default: 'subsection'
+      },
+      // 组件高度
+      height: {
+        type: Number,
+        default: 60
+      },
+      // tab的数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当前活动tab的index
+      current: {
+        type: [Number, String],
+        default: 0
+      },
+      // 激活时的字体颜色
+      activeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 未激活时的字体颜色
+      inactiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活tab的字体是否加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      backgroundColor: {
+        type: String,
+        default: '#F4F4F4'
+      },
+      // 滑块的颜色
+      buttonColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 当mode为button时生效，圆角的值，单位rpx
+      borderRadius: {
+        type: Number,
+        default: 10
+      },
+      // 是否开启动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 动画类型
+      // cubic-bezier -> 贝塞尔曲线
+      animationType: {
+        type: String,
+        default: ''
+      },
+      // 滑动滑块的是否，是否触发震动
+      vibrateShort: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        // 列表数据
+        listInfo: [],
+        // 子元素的背景样式
+        itemBgStyle: {
+          width: 0,
+          left: 0,
+          backgroundColor: '#ffffff',
+          height: '100%'
+        },
+        // 当前选中的滑块
+        currentIndex: this.current,
+        buttonPadding: 3,
+        // 组件初始化的是否current变换不应该震动
+        firstVibrateShort: true
+      }
+    },
+    watch: {
+      current: {
+        handler(val) {
+          this.currentIndex = val
+          this.changeSectionStatus(val)
+        },
+        immediate: true
+      }
+    },
+    created() {
+      // 将list的数据，传入listInfo数组
+      // 接受直接数组形式，或者数组元素为对象的形式，如：['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
+      this.listInfo = this.list.map((item, index) => {
+        if (typeof item !== 'object') {
+          let obj = {
+            width: 0,
+            name: item
+          }
+          return obj
+        } else {
+          item.width = 0
+          return obj
+        }
+      })
+    },
+    computed: {
+      // 设置mode=subsection时，滑块没有样式
+      noBorderRight() {
+        return index => {
+          if (this.mode !== 'subsection') return
+          let clazz = ''
+          // 不显示右边的边距
+          if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
+          // 显示整个组件的左右边圆角
+          if (index === 0) clazz += ' tn-subsection__item--first'
+          if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
+          return clazz
+        }
+      },
+      // 文字的样式
+      textStyle() {
+        return index => {
+          let style = {}
+          // 设置字体颜色
+          if (index === this.currentIndex) {
+            style.color = this.activeColor
+          } else {
+            style.color = this.inactiveColor
+          }
+          // 字体加粗
+          if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
+          // 文字大小
+          style.fontSize = (this.fontSize || 26) + this.fontUnit
+          return style
+        }
+      },
+      // 每个分段器item的样式
+      itemStyle() {
+        return index => {
+          let style = {}
+          if (this.fontSizeStyle) {
+            style.fontSize = this.fontSizeStyle
+          }
+          if (this.mode === 'subsection') {
+            // 设置border的样式
+            style.borderColor = this.buttonColor
+            style.borderWidth = '1rpx'
+            style.borderStyle = 'solid'
+          }
+          return style
+        }
+      },
+      // mode = button时，设置外层view的样式
+      subsectionStyle() {
+        let style = {}
+        style.height = this.height + 'rpx'
+        if (this.mode === 'button') {
+          style.backgroundColor = this.backgroundColorStyle
+          style.padding = `${this.buttonPadding}px`
+          style.borderRadius = `${this.borderRadius}rpx`
+        }
+        return style
+      },
+      // mode = button时，设置外层view的背景class
+      subsectionBackgroundColorClass() {
+        let clazz = ''
+        if (this.mode === 'button' && this.backgroundColorClass) {
+          clazz = this.backgroundColorClass
+        }
+        return clazz
+      },
+      itemBarClass() {
+        let clazz = ''
+        const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
+        if (this.animation) {
+          clazz += ' tn-subsection__bg__animation'
+          if (this.animationType) {
+            clazz += ` tn-subsection__bg__animation--${this.animationType}`
+          }
+        }
+        if (buttonBgClass) {
+          clazz += ` ${buttonBgClass}`
+        }
+        return clazz
+      },
+      // 滑块样式
+      itemBarStyle() {
+        let style = {}
+        const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
+        if (buttonBgStyle) {
+          style.backgroundColor = this.buttonColor
+        }
+        style.zIndex = 1
+        if (this.mode === 'button') {
+          style.borderRadius = `${this.borderRadius}rpx`
+          style.bottom = `${this.buttonPadding}px`
+          style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
+          style.zIndex = 0
+        }
+        return Object.assign(this.itemBgStyle, style)
+      }
+    },
+    mounted() {
+      // 等待加载组件完成
+      setTimeout(() => {
+        this.getTabsInfo()
+      }, 10)
+    },
+    methods: {
+      // 改变滑块样式
+      changeSectionStatus(val) {
+        if (this.mode === 'subsection') {
+          // 根据滑块在最左和最右时，显示对应的圆角
+          if (val === this.list.length - 1) {
+            this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
+          }
+          if (val === 0) {
+            this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
+          }
+          if (val > 0 && val < this.list.length - 1) {
+            this.itemBgStyle.borderRadius = '0'
+          }
+        }
+        // 更新滑块的位置
+        setTimeout(() => {
+          this.itemBgLeft()
+        }, 10)
+        if (this.vibrateShort && !this.firstVibrateShort) {
+          // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+          // #ifndef H5
+          uni.vibrateShort();
+          // #endif
+        }
+        this.firstVibrateShort = false
+      },
+      // 获取各个tab的节点信息
+      getTabsInfo() {
+        let view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.list.length; i++) {
+          view.select('.section-item-' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          // 如果没有获取到，则重新获取
+          if (!res.length) {
+            setTimeout(() => {
+              this.getTabsInfo()
+              return
+            }, 10)
+          }
+          // 将每个分段器的宽度放入listInfo中
+          res.map((item, index) => {
+            this.listInfo[index].width = item.width
+          })
+          // 初始化滑块的宽度
+          if (this.mode === 'subsection') {
+            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+          } else if (this.mode === 'button') {
+            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+          }
+          
+          // 初始化滑块的位置
+          this.itemBgLeft()
+        })
+      },
+      // 设置滑块的位置
+      itemBgLeft() {
+        let left = 0
+        // 计算当前活跃item到组件左边的距离
+        this.listInfo.map((item, index) => {
+          if (index < this.currentIndex) left += item.width
+        })
+        // 根据不同的模式，计算滑块的位置
+        if (this.mode === 'subsection') {
+          this.itemBgStyle.left = left + 'px'
+        } else if (this.mode === 'button') {
+          this.itemBgStyle.left = left + this.buttonPadding + 'px'
+        }
+      },
+      
+      // 点击事件
+      click(index) {
+        // 不允许点击当前激活的选项
+        if (index === this.currentIndex) return
+        this.currentIndex = index
+        this.changeSectionStatus(index)
+        this.$emit('change', {
+          index: Number(index),
+          name: this.listInfo[index]['name']
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-subsection {
+    /* #ifndef APP-PLUS */
+    display: flex;
+    flex-direction: row;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    
+    &__item {
+      /* #ifndef APP-PLUS */
+      display: flex;
+      flex-direction: row;
+      /* #endif */
+      flex: 1;
+      text-align: center;
+      font-size: 26rpx;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      color: #FFFFFF;
+      padding: 0 6rpx;
+      
+      
+      &--text {
+        transition: all 0.3s;
+        color: #FFFFFF;
+        /* #ifndef APP-PLUS */
+        display: flex;
+        flex-direction: row;
+        /* #endif */
+        align-items: center;
+        position: relative;
+        z-index: 3;
+      }
+      
+      &--first {
+        border-top-left-radius: 8rpx;
+        border-bottom-left-radius: 8rpx;
+      }
+      
+      &--last {
+        border-top-right-radius: 8rpx;
+        border-bottom-right-radius: 8rpx;
+      }
+      
+      &--none-border-right {
+        border-right: none !important;
+      }
+    }
+    
+    &__bg {
+      background-color: $tn-main-color;
+      position: absolute;
+      z-index: -1;
+      transition-property: all;
+      transition-duration: 0s;
+      transition-timing-function: linear;
+      
+      &__animation {
+        transition-duration: 0.25s !important;
+        
+        &--cubic-bezier {
+          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+        }
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-swipe-action-item/index.wxs b/tuniao-ui/components/tn-swipe-action-item/index.wxs
new file mode 100644
index 0000000..977b970
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action-item/index.wxs
@@ -0,0 +1,230 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+// 开始触摸
+function touchStart(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (state.disabled) return
+  var touches = event.touches
+  // 如果进行的是多指触控，不允许操作
+  if (touches && touches.length > 1) return
+  // 标识当前为滑动中状态
+  state.moving = true
+  // 记录触摸开始点的坐标点
+  state.startX = touches[0].pageX
+  state.startY = touches[0].pageY
+  // 记录开始触摸的时间
+  state.touchStartTime = getDate().getTime()
+  
+  ownerInstance.callMethod('closeOther')
+}
+
+// 触摸滑动
+function touchMove(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (state.disabled || !state.moving) return
+  var touches = event.touches
+  var pageX = touches[0].pageX
+  var pageY = touches[0].pageY
+  var moveX = pageX - state.startX
+  var moveY = pageY - state.startY
+  var buttonsWidth = state.buttonsWidth
+  
+  // 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+  if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+    // event.preventDefault && event.preventDefault()
+    // event.stopPropagation && event.stopPropagation()
+  }
+  // 移动的Y轴距离大于X轴距离，也即终点与起点位置连线，与Y轴夹角小于45度时，认为页面时上下滑动而不是左右滑动单元格
+  if (Math.abs(moveX) < Math.abs(moveY)) return
+  
+  // 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+  // 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，所以处理的方法是在超出后设置为0
+  if (state.status === 'open') {
+    // 在开启状态下，忽略左滑动
+    if (moveX < 0) moveX = 0
+    // 要收起菜单，最大能移动的距离为按钮的总宽度
+    if (moveX > buttonsWidth) moveX = buttonsWidth
+    // 如果是已经打开的状态，向左滑动时，移动收起菜单
+    moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
+  } else {
+    // 关闭状态下，忽略右滑
+    if (moveX > 0) return
+    // 滑动的距离不允许超过所有按钮的总宽度，此时只能左滑
+    // 滑动距离设置为按钮的宽度（负数）
+    if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+    // 在滑动过程中不断移动单元格内容，使其不断显示出来
+    moveSwipeAction(moveX, instance, ownerInstance)
+  }
+}
+
+// 触摸结束
+function touchEnd(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (!state.moving || state.disabled) return
+  var touches = event.changedTouches ? event.changedTouches[0] : {}
+  var pageX = touches.pageX
+  var pageY = touches.pageY
+  var moveX = pageX - state.startX
+  if (state.status === 'open') {
+    // 在开启状态下，忽略左滑动
+    if (moveX < 0) moveX = 0
+    // 在开启状态下，点击一下内容区域，moveX为0，也即没有移动，这是执行收起操作
+    if (moveX === 0) {
+      return closeSwipeAction(instance, ownerInstance)
+    }
+    
+    // 在开启状态下，滑动距离小于阈值，则默认不关闭同时恢复原来的打开状态
+    if (Math.abs(moveX) < state.threshold) {
+      openSwipeAction(instance, ownerInstance)
+    } else {
+      // 如果滑动距离大于阈值则执行收起逻辑
+      closeSwipeAction(instance, ownerInstance)
+    }
+  } else {
+    
+    // 获取手指离开的时间
+    var touchEndTime = getDate().getTime()
+    // 判断是否点击了
+    if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
+      ownerInstance.callMethod('handlerItemClick')
+    }
+    
+    // 在关闭状态下，忽略右滑动
+    if (moveX > 0) return
+    if (Math.abs(moveX) < state.threshold) {
+      closeSwipeAction(instance, ownerInstance)
+    } else {
+      openSwipeAction(instance, ownerInstance)
+    }
+  }
+}
+
+// 获取过渡时间
+function getDuration(value) {
+  if (value.toString().indexOf('s') >= 0) return value
+  return value > 30 ? value + 'ms' : value + 's'
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  
+  // 设置菜单内容部分的偏移
+  instance.requestAnimationFrame(function () {
+    instance.setStyle({
+      // 设置translateX的值
+      'transition': 'none',
+      transform: 'translateX('+ moveX +'px)',
+      '-webkit-transform': 'translateX('+ moveX +'px)'
+    })
+  })
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  // 处理duration单位问题
+  var duration = getDuration(state.duration)
+  // 展开过程中，是向左移动，所以x的偏移应该是负值
+  var buttonsWidth = -state.buttonsWidth
+  instance.requestAnimationFrame(function () {
+    // 设置菜单主体内容
+    instance.setStyle({
+      'transition': 'transform ' + duration,
+      'transform': 'translateX('+ buttonsWidth +'px)',
+      '-webkit-transform': 'translateX('+ buttonsWidth +'px)'
+    })
+  })
+  setStatus('open', instance, ownerInstance)
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  var len = buttons.length
+  // 处理duration单位问题
+  var duration = getDuration(state.duration)
+  instance.requestAnimationFrame(function () {
+    // 设置菜单主体内容
+    instance.setStyle({
+      'transition': 'transform ' + duration,
+      'transform': 'translateX(0px)',
+      '-webkit-transform': 'translateX(0px)'
+    })
+    // 设置各个隐藏按钮的收起状态
+    for (var i = len - 1; i >= 0; i--) {
+      buttons[i].setStyle({
+        'transition': 'transform ' + duration,
+        'transform': 'translateX(0px)',
+        '-webkit-transform': 'translateX(0px)'
+      })
+    }
+  })
+  setStatus('close', instance, ownerInstance)
+}
+
+// 标记菜单的当前状态，open - 打开 close - 关闭
+function setStatus(status, instance, ownerInstance) {
+  var state = instance.getState()
+  state.status = status
+  ownerInstance.callMethod('setStatus', status)
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+  var state = instance.getState()
+  if (state.disabled) return
+  // 打开或关闭单元格
+  if (newValue === 'close' && state.status === 'open') {
+    closeSwipeAction(instance, ownerInstance)
+  } else if (newValue === 'open' && state.status === 'close') {
+    openSwipeAction(instance, ownerInstance)
+  }
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+  // wxs内的局部变量快照
+  var state = instance.getState()
+  state.disabled = newValue.disabled
+  state.duration = newValue.duration
+  state.show = newValue.show
+  state.threshold = newValue.threshold
+  state.buttons = newValue.buttons
+  
+  if (state.buttons) {
+    var len = state.buttons.length
+    var buttonsWidth = 0
+    var buttons = newValue.buttons
+    for (var i = 0; i < len; i++) {
+      buttonsWidth += buttons[i].width
+    }
+  }
+  state.buttonsWidth = buttonsWidth
+}
+
+module.exports = {
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  sizeChange: sizeChange,
+  statusChange: statusChange
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue b/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
new file mode 100644
index 0000000..7fd29a0
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
@@ -0,0 +1,237 @@
+<template>
+  <view class="tn-swipe-action-item-class tn-swipe-action-item">
+    <view class="tn-swipe-action-item__right">
+      <slot name="button">
+        <view
+          v-for="(item, index) in options"
+          :key="index" 
+          class="tn-swipe-action-item__right__button"
+          :style="[{
+            alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
+          }]"
+          @tap="buttonClickHandler(item, index)"
+        >
+          <view
+            class="tn-swipe-action-item__right__button__wrapper"
+            :style="[{
+              backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#AAAAAA',
+              borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
+              padding: item.style && item.style.borderRadius ? '0' : '0 30rpx'
+            }, item.style]"
+          >
+            <view
+              v-if="item.icon"
+              :class="[`tn-icon-${item.icon}`]"
+              :style="[{
+                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
+                fontSize: item.iconSize ? item.iconSize + 'rpx' : item.style && item.style.fontSize ? (item.style.fontsize * 1.2) + 'rpx' : '34rpx',
+                marginRight: item.text ? '4rpx' : 0
+              }]"
+            ></view>
+            <text
+              v-if="item.text"
+              class="tn-swipe-action-item__right__button__text tn-text-ellipsis"
+              :style="[{
+                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
+                fontSize: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx',
+                lineHeight: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx'
+              }]"
+            >{{ item.text }}</text>
+          </view>
+        </view>
+      </slot>
+    </view>
+    
+    <view
+      class="tn-swipe-action-item__content"
+      :status="status"
+      :size="size"
+      :change:status="wxs.statusChange"
+      :change:size="wxs.sizeChange"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+<script>
+  
+  export default {
+    name: 'tn-swipe-action-item',
+    props: {
+      // 是否显示滑动菜单
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 标识符，如果是v-for可用index的索引值
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 右侧按钮内容
+      options: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动关闭其他swipe按钮组
+      autoClose: {
+        type: Boolean,
+        default: true
+      },
+      // 滑动距离阈值，大于此值才会打开菜单
+      threshold: {
+        type: Number,
+        default: 20
+      },
+      // 动画过渡时间，单位ms
+      duration: {
+        type: Number,
+        default: 300
+      }
+    },
+    computed: {
+      // 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+      itemData() {
+        return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+      }
+    },
+    data() {
+      return {
+        // 按钮尺寸信息
+        size: {},
+        // 父组件参数
+        parentData: {
+          autoClose: true
+        },
+        // 当前状态
+        status: 'close'
+      }
+    },
+    watch: {
+      itemData() {
+        this.queryRect()
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      init() {
+        this.queryRect()
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-swipe-action')
+      },
+      // 查询节点
+      queryRect() {
+        this._tGetRect('.tn-swipe-action-item__right__button', true).then(res => {
+          this.size = {
+            buttons: res,
+            show: this.show,
+            disabled: this.disabled,
+            threshold: this.threshold,
+            duration: this.duration
+          }
+        })
+      },
+      // 按钮点击
+      buttonClickHandler(item, index) {
+        this.$emit('click', {
+          type: 'button',
+          index,
+          name: this.name
+        })
+      },
+      // item点击
+      handlerItemClick() {
+        this.$emit('click', {
+          type: 'item',
+          name: this.name
+        })
+      },
+      // 关闭时执行
+      closeHandler() {
+        this.status = 'close'
+      },
+      // 设置状态
+      setStatus(status) {
+        this.status = status
+      },
+      // 关闭其他单元格
+      closeOther() {
+        this.parent && this.parent.closeOther(this)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-swipe-action-item {
+    position: relative;
+    overflow: hidden;
+    // touch-action: none;
+    
+    &__right {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      
+      &__button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        
+        &__wrapper {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          padding: 0 30rpx;
+        }
+        
+        &__text {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+          justify-content: center;
+          text-align: center;
+          color: #FFFFFF;
+          font-size: 30rpx;
+        }
+      }
+    }
+    
+    &__content {
+      background-color: #FFFFFF;
+      transform: translateX(0px);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue b/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
new file mode 100644
index 0000000..1b238b4
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
@@ -0,0 +1,61 @@
+<template>
+  <view class="tn-swipe-action-class tn-swipe-action">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-swipe-action',
+    props: {
+      // 是否自动关闭其他swipe按钮组
+      autoClose: {
+        type: Boolean,
+        default: true
+      }
+    },
+    provide() {
+      return {
+        swipeAction: this
+      }
+    },
+    computed: {
+      // 用于监听父组件参数变化
+      parentData() {
+        return [this.autoClose]
+      }
+    },
+    data() {
+      return {}
+    },
+    watch: {
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-swipe-action-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      this.children = []
+    },
+    methods: {
+      // 关闭其他单元格
+      closeOther(child) {
+        if (this.autoClose) {
+          // 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
+          this.children.map((item, index) => {
+            if (child !== item) {
+              item.closeHandler()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-swiper/tn-swiper.vue b/tuniao-ui/components/tn-swiper/tn-swiper.vue
new file mode 100644
index 0000000..9b854fe
--- /dev/null
+++ b/tuniao-ui/components/tn-swiper/tn-swiper.vue
@@ -0,0 +1,364 @@
+<template>
+  <view class="tn-swiper__wrap-class tn-swiper__wrap" :style="{borderRadius: `${radius}rpx`}">
+    <!-- 轮播图 -->
+    <swiper
+      class="tn-swiper"
+      :class="[backgroundColorClass]"
+      :style="[swiperStyle]"
+      :current="current"
+      :interval="interval"
+      :circular="circular"
+      :autoplay="autoplay"
+      :duration="duration"
+      :previous-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
+      :next-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
+      @change="change"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        class="tn-swiper__item"
+      >
+        <view
+          class="tn-swiper__item__image__wrap"
+          :class="[swiperIndex !== index ? 'tn-swiper__item__image--scale' : '']"
+          :style="{
+            borderRadius: `${radius}rpx`,
+            transform: effect3d && swiperIndex !== index ? 'scaleY(0.9)' : 'scaleY(1)',
+            margin: effect3d && swiperIndex !== index ? '0 20rpx' : 0
+          }"
+          @click="click(index)"
+        >
+          <image class="tn-swiper__item__image" :src="item[name] || item" :mode="imageMode"></image>
+          <view
+            v-if="title && item[titleName]"
+            class="tn-swiper__item__title tn-text-ellipsis"
+            :style="[titleStyle]">
+            {{ item[titleName] }}
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 指示点 -->
+    <view class="tn-swiper__indicator" :style="[indicatorStyle]">
+      <block v-if="mode === 'rect'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__rect"
+          :class="{'tn-swiper__indicator__rect--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'dot'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__dot"
+          :class="{'tn-swiper__indicator__dot--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'round'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__round"
+          :class="{'tn-swiper__indicator__round--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'number'">
+        <view class="tn-swiper__indicator__number">{{ swiperIndex + 1 }}/{{ list.length }}</view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-swiper',
+    props: {
+      // 轮播图列表数据
+      // [{image: xxx.jpg, title: 'xxxx'}]
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 初始化时，默认显示第几项
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 250
+      },
+      // 背景颜色
+      backgroundColor: {
+        type: String,
+        default: 'transparent'
+      },
+      // 图片的属性名
+      name: {
+        type: String,
+        default: 'image'
+      },
+      // 是否显示标题
+      title: {
+        type: Boolean,
+        default: false
+      },
+      // 标题的属性名
+      titleName: {
+        type: String,
+        default: 'title'
+      },
+      // 用户自定义标题样式
+      titleStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆角的值
+      radius: {
+        type: Number,
+        default: 8
+      },
+      // 指示器模式
+      // rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
+      mode: {
+        type: String,
+        default: 'round'
+      },
+      // 指示器位置
+      // topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
+      indicatorPosition: {
+        type: String,
+        default: 'bottomCenter'
+      },
+      // 开启3D缩放效果
+      effect3d: {
+        type: Boolean,
+        default: false
+      },
+      // 在3D缩放模式下，item之间的间隔
+      effect3dPreviousSpacing: {
+        type: Number,
+        default: 50
+      },
+      // 自定播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 图片之间播放间隔多久
+      interval: {
+        type: Number,
+        default: 3000
+      },
+      // 轮播间隔时间
+      duration: {
+        type: Number,
+        default: 500
+      },
+      // 是否衔接滑动
+      circular: {
+        type: Boolean,
+        default: true
+      },
+      // 图片裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      }
+    },
+    computed: {
+      backgroundColorStyle() {
+        return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      swiperStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.height) {
+          style.height = this.height + 'rpx'
+        }
+        return style
+      },
+      indicatorStyle() {
+        let style = {}
+        if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+        if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+        if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+        if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+          style.top = '12rpx'
+          style.bottom = 'auto'
+        } else {
+          style.top = 'auto'
+          style.bottom = '12rpx'
+        }
+        style.padding = `0 ${this.effect3d ? '74rpx' : '24rpx'}`
+        
+        return style
+      },
+      swiperTitleStyle() {
+        let style = {}
+        if (this.mode === 'none' || this.mode === '') style.paddingBottom = '12rpx'
+        if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode === 'number') {
+          style.paddingBottom = '60rpx'
+        } else if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode !== 'number') {
+          style.paddingBottom = '40rpx'
+        } else {
+          style.paddingBottom = '12rpx'
+        }
+        
+        style = Object.assign(style, this.titleStyle)
+        return style
+      }
+    },
+    data() {
+      return {
+        // 当前显示的item的index
+        swiperIndex: this.current
+      }
+    },
+    watch: {
+      list(newVal, oldVal) {
+        // 如果修改了list的数据，重置current的值
+        if (newVal.length !== oldVal.length) this.swiperIndex = 0
+      },
+      current(value) {
+        // 监听外部current的变化，实时修改内部依赖于此测swiperIndex值，如果更新了current，而不是更新swiperIndex，就会错乱，因为指示器是依赖于swiperIndex的
+        this.swiperIndex = value
+      }
+    },
+    methods: {
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 图片自动切换时触发
+      change(event) {
+        const current = event.detail.current
+        this.swiperIndex = current
+        this.$emit('change', current)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-swiper {
+    
+    &__wrap {
+      position: relative;
+      overflow: hidden;
+      transform: translateY(0);
+    }
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      overflow: hidden;
+      
+      &__image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+        display: block;
+        /* #ifdef H5 */
+        pointer-events: none;
+        /* #endif */
+        
+        &__wrap {
+          width: 100%;
+          height: 100%;
+          flex: 1;
+          transition: all 0.5s;
+          overflow: hidden;
+          box-sizing: content-box;
+          position: relative;
+        }
+        
+        &--scale {
+          transform-origin: center center;
+        }
+      }
+      
+      &__title {
+        width: 100%;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.3);
+        bottom: 0;
+        left: 0;
+        font-size: 28rpx;
+        padding: 12rpx 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+    
+    &__indicator {
+      padding: 0 24rpx;
+      position: absolute;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      z-index: 1;
+      
+      &__rect {
+        width: 26rpx;
+        height: 8rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__dot {
+        width: 14rpx;
+        height: 14rpx;
+        margin: 0 6rpx;
+        border-radius: 20rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__round {
+        width: 14rpx;
+        height: 14rpx;
+        margin: 0 6rpx;
+        border-radius: 20rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          width: 34rpx;
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__number {
+        padding: 6rpx 16rpx;
+        line-height: 1;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: rgba(255, 255, 255, 0.8);
+        border-radius: 100rpx;
+        font-size: 26rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-switch/tn-switch.vue b/tuniao-ui/components/tn-switch/tn-switch.vue
new file mode 100644
index 0000000..ba9c419
--- /dev/null
+++ b/tuniao-ui/components/tn-switch/tn-switch.vue
@@ -0,0 +1,241 @@
+<template>
+  <view
+    class="tn-switch-class tn-switch"
+    :class="[
+      value ? 'tn-switch--on' : '',
+      disabled ? 'tn-switch--disabled' : '',
+      `tn-switch--${shape}`
+    ]"
+    :style="[switchStyle]"
+    @tap="click"
+  >
+    <view
+      class="tn-switch__node"
+      :class="[`tn-switch__node--${shape}`]"
+      :style="[switchNodeStyle]"
+    >
+      <tn-loading class="tn-switch__node__loading" :show="loading" mode="flower" :size="size * 0.6" :color="loadingColor"></tn-loading>
+    </view>
+    <!-- 左图标 -->
+    <view
+      v-if="leftIcon !== ''"
+      class="tn-switch__icon tn-switch__icon--left"
+      :class="[
+        `tn-icon-${leftIcon}`,
+        value ? 'tn-switch__icon--show' : ''
+      ]"
+      :style="[iconStyle]"></view>
+    <!-- 右图标 -->
+    <view 
+      v-if="rightIcon !== ''"
+      class="tn-switch__icon tn-switch__icon--right"
+      :class="[
+        `tn-icon-${rightIcon}`,
+        !value ? 'tn-switch__icon--show' : ''
+      ]"
+      :style="[iconStyle]"></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-switch',
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 按钮的样式
+      // circle 圆角 square 方形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 尺寸
+      size: {
+        type: Number,
+        default: 50
+      },
+      // 打开时的背景颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 关闭时的背景颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 激活时的值
+      activeValue: {
+        type: [Number, String, Boolean],
+        default: true
+      },
+      // 关闭时的值
+      inactiveValue: {
+        type: [Number, String, Boolean],
+        default: false
+      },
+      // 左图标
+      leftIcon: {
+        type: String,
+        default: ''
+      },
+      // 右图标
+      rightIcon: {
+        type: String,
+        default: ''
+      },
+      // 是否为加载状态
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      // 点击手机是否震动
+      vibrateShort: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      switchStyle() {
+        let style = {}
+        style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
+        style.backgroundColor = this.value ? 
+          this.activeColor ? this.activeColor : '#01BEFF' : 
+          this.inactiveColor ? this.inactiveColor : '#AAAAAA'
+        return style
+      },
+      switchNodeStyle() {
+        let style = {}
+        style.width = this.$tn.string.getLengthUnitValue(this.size)
+        style.height = style.width
+        return style
+      },
+      iconStyle() {
+        let style = {}
+        style.fontSize = this.$tn.string.getLengthUnitValue(this.size - 20)
+        style.lineHeight = this.$tn.string.getLengthUnitValue(this.size)
+        return style
+      },
+      loadingColor() {
+        return this.value ? this.activeColor : ''
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      click() {
+        if (!this.disabled && !this.loading) {
+          if (this.vibrateShort) uni.vibrateShort()
+          this.$emit('input', !this.value)
+          // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+          this.$nextTick(() => {
+          	this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-switch {
+    /* #ifndef APP-NVUE */
+    display: inline-block;
+    /* #endif */
+    position: relative;
+    box-sizing: initial;
+    width: 2em;
+    height: 1em;
+    font-size: 50rpx;
+    background-color: #AAAAAA;
+    transition: background-color 0.3s;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background-color: #FFFFFF;
+      transform: scale(0.9);
+      box-shadow: 0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05), 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.1), 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.05);
+      transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+      -webkit-transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+      
+      &__loading {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 15%;
+      }
+    }
+    
+    &__icon {
+      color: #FFFFFF;
+      font-size: 30rpx;
+      line-height: 50rpx;
+      height: 100%;
+      vertical-align: middle;
+      position: absolute;
+      transform: scale(0);
+      transform-origin: 50% 50%;
+      transition: transform 0.3s ease-in-out;
+      
+      &--left {
+        top: 0;
+        left: 10rpx;
+      }
+      
+      &--right {
+        top: 0;
+        right: 10rpx;
+      }
+      
+      &--show {
+        transform: scale(1);
+      }
+    }
+    
+    &--circle {
+      border-radius: 1em;
+    }
+    
+    &--square {
+      border-radius: 0.1em;
+    }
+    
+    &--on {
+      background-color: $tn-main-color;
+      
+      .tn-switch__node {
+        transform: translateX(100%) scale(0.9);
+      }
+    }
+    
+    &--disabled {
+      opacity: 0.4;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tabbar/tn-tabbar.vue b/tuniao-ui/components/tn-tabbar/tn-tabbar.vue
new file mode 100644
index 0000000..66125ce
--- /dev/null
+++ b/tuniao-ui/components/tn-tabbar/tn-tabbar.vue
@@ -0,0 +1,576 @@
+<template>
+  <view v-if="show" class="tn-tabbar-class tn-tabbar" @touchmove.stop.prevent="() => {}">
+    <!-- tabbar 内容-->
+    <view
+      class="tn-tabbar__content"
+      :class="{
+        'tn-tabbar--fixed': fixed,
+        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
+        'tn-tabbar--shadow': shadow
+      }"
+      :style="{
+        height: height + 'rpx',
+        backgroundColor: bgColor
+      }"
+    >
+      <!-- tabbar item -->
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="tn-tabbar__content__item"
+        :id="`tabbar_item_${index}`"
+        :class="{'tn-tabbar__content__item--out': item.out}"
+        :style="{
+          backgroundColor: bgColor
+        }"
+        @tap.stop="clickItemHandler(index)"
+      >
+        <!-- tabbar item的图片或者icon-->
+        <view :class="[itemButtonClass(index)]"
+          :style="[itemButtonStyle(index)]"
+        >
+          <image
+            v-if="isImage(index)"
+            :src="elIcon(index)"
+            mode="scaleToFill"
+            class="tn-tabbar__content__item__image"
+            :style="{
+              width: `${item.iconSize || iconSize}rpx`,
+              height: `${item.iconSize || iconSize}rpx`
+            }"
+          ></image>
+          <view
+            v-else
+            class="tn-tabbar__content__item__icon"
+            :class="[`tn-icon-${elIcon(index)}`,elIconColor(index, false)]"
+            :style="{
+              fontSize: `${item.iconSize || iconSize}rpx`,
+              color: elIconColor(index)
+            }"
+          ></view>
+          
+          <!-- 角标-->
+          <tn-badge
+            v-if="!item.out && (item.count || item.dot)"
+            :dot="item.dot || false"
+            backgroundColor="tn-bg-red"
+            fontColor="#FFFFFF"
+            :radius="item.dot ? 14 : 0"
+            :fontSize="14"
+            padding="2rpx 4rpx"
+            :absolute="true"
+            :top="2"
+          >
+            {{ $tn.number.formatNumberString(item.count) }}
+          </tn-badge>
+        </view>
+        
+        <!-- tabbar item的文字-->
+        <view
+          class="tn-tabbar__content__item__text"
+          :class="[elColor(index, false)]"
+          :style="{
+            color: elColor(index),
+            fontSize: `${fontSize}rpx`
+          }"
+        >
+          <text class="tn-text-ellipsis">{{ item.title }}</text>
+        </view>
+      </view>
+      
+      <!-- item 突起部分 -->
+      <view
+        v-if="outItemIndex !== -1"
+        class="tn-tabbar__content__out"
+        :class="[{
+          'tn-tabbar__content__out--shadow': shadow
+        }, animation && value === outItemIndex ? `tn-tabbar__content__out--animation--${animationMode}` : '']"
+        :style="{
+          backgroundColor: bgColor,
+          left: outItemLeft,
+          width: `${outHeight}rpx`,
+          height: `${outHeight}rpx`,
+          top: `-${outHeight * 0.3}rpx`
+        }"
+        @tap.stop="clickItemHandler(outItemIndex)"
+      ></view>
+    </view>
+    
+    <!-- 防止tabbar塌陷 -->
+    <view class="tn-tabbar__placeholder" :class="{'tn-safe-area-inset-bottom': safeAreaInsetBottom}" :style="{
+      height: `calc(${height}rpx)`
+    }"></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-tabbar',
+    props: {
+      // 绑定当前被选中的current值
+      value: {
+        type: [String, Number],
+        default: 0
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 图标列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 高度，单位rpx
+      height: {
+        type: Number,
+        default: 100
+      },
+      // 突起的高度
+      outHeight: {
+        type: Number,
+        default: 100
+      },
+      // 背景颜色
+      bgColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 40
+      },
+      // 字体大小
+      fontSize: {
+        type: Number,
+        default: 24
+      },
+      // 激活时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活时图标的颜色
+      activeIconColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活时图标的颜色
+      inactiveIconColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活时的自定义样式
+      activeStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示阴影
+      shadow: {
+        type: Boolean,
+        default: true
+      },
+      // 点击时是否有动画
+      animation: {
+        type: Boolean,
+        default: false
+      },
+      // 点击时的动画模式
+      animationMode: {
+        type: String,
+        default: 'scale'
+      },
+      // 是否固定在底部
+      fixed: {
+        type: Boolean,
+        default: true
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 切换前回调
+      beforeSwitch: {
+        type: Function,
+        default: null
+      }
+    },
+    computed: {
+      // 当前字体的颜色
+      elColor() {
+        return (index, style = true) => {
+          let currentItem = this.list[index]
+          let color = ''
+          if (index === this.value) {
+            color = currentItem['activeColor'] || this.activeColor
+          } else {
+            color = currentItem['inactiveColor'] || this.inactiveColor
+          }
+          // 判断是否获取内部样式
+          if (style) {
+            if (this.$tn.color.getFontColorStyle(color) !== '') {
+              return color
+            } else {
+              return ''
+            }
+          } else {
+            if (this.$tn.color.getFontColorStyle(color) === '') {
+              return color
+            } else {
+              return ''
+            }
+          }
+        }
+      },
+      // 当前图标的颜色
+      elIconColor() {
+        return (index, style = true) => {
+          let currentItem = this.list[index]
+          let color = ''
+          if (index === this.value) {
+            color = currentItem['activeIconColor'] || this.activeIconColor
+          } else {
+            color = currentItem['inactiveIconColor'] || this.inactiveIconColor
+          }
+          // 判断是否获取内部样式
+          if (style) {
+            if (this.$tn.color.getFontColorStyle(color) !== '') {
+              return color
+            } else {
+              return ''
+            }
+          } else {
+            if (this.$tn.color.getFontColorStyle(color) === '') {
+              return color + ' tn-tabbar__content__item__icon--clip'
+            } else {
+              return ''
+            }
+          }
+        }
+      },
+      // 当前的图标
+      elIcon() {
+        return (index) => {
+          let currentItem = this.list[index]
+          if (index === this.value) {
+            return currentItem['activeIcon']
+          } else {
+            return currentItem['inactiveIcon']
+          }
+        }
+      },
+      // 突起部分item button对应的类
+      itemButtonClass() {
+        return (index) => {
+          let clazz = ''
+          if (this.list[index]['out']) {
+            clazz += 'tn-tabbar__content__item__button--out'
+            if (this.$tn.color.getFontColorStyle(this.activeIconColor) === '') {
+              clazz += ` ${this.activeIconColor}`
+            }
+            if (this.value === index) {
+              clazz += ` tn-tabbar__content__item__button--out--animation--${this.animationMode}`
+            }
+          } else {
+            clazz += 'tn-tabbar__content__item__button'
+            if (this.value === index) {
+              clazz += ` tn-tabbar__content__item__button--animation--${this.animationMode}`
+            }
+          }
+          return clazz
+        }
+      },
+      // 突起部分item button样式
+      itemButtonStyle() {
+        return (index) => {
+          let style = {}
+          if (this.list[index]['out']) {
+            if (this.$tn.color.getFontColorStyle(this.activeIconColor) !== '') {
+              style.backgroundColor = this.activeIconColor
+            }
+            style.width = `${this.outHeight - 35}rpx`
+            style.height = `${this.outHeight - 35}rpx`
+            style.top = `-${this.outHeight * 0.15}rpx`
+            
+            return style
+          }
+          return style
+        }
+      },
+      // 判断图标是否为图片
+      isImage() {
+        return (index) => {
+          const icon = this.list[index]['activeIcon']
+          // 只有包含了'/'就认为是图片
+          return icon.indexOf('/') !== -1
+        }
+      }
+    },
+    data() {
+      return {
+        // 当前突起的位置
+        outItemLeft: '50%',
+        // 当前设置了突起按钮的index
+        outItemIndex: -1,
+        // 每一个item的信息
+        tabbatItemInfo: []
+      }
+    },
+    watch: {
+      
+    },
+    created() {
+      this.getOutItemIndex()
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getTabbarItem()
+      })
+    },
+    methods: {
+      // 获取每一个item的信息
+      getTabbarItem() {
+        let query = uni.createSelectorQuery().in(this)
+        // 遍历获取信息
+        for (let i = 0; i < this.list.length; i++) {
+          query.select(`#tabbar_item_${i}`).fields({
+            size: true,
+            rect: true
+          })
+        }
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getTabbarItem()
+            }, 10)
+            return
+          }
+          this.tabbatItemInfo = res.map((item) => {
+            return {
+              left: item.left,
+              width: item.width
+            }
+          })
+          this.updateOutItemLeft()
+        })
+      },
+      // 获取突起Item所在的index(如果存在)
+      getOutItemIndex() {
+        this.outItemIndex = this.list.findIndex((item) => {
+          return item.hasOwnProperty('out') && item.out
+        })
+      },
+      // 点击底部菜单时触发
+      async clickItemHandler(index) {
+        if (this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
+          // 执行回调，同时传入索引当作参数
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          let beforeSwitch = this.beforeSwitch.bind(this.$tn.$parent.call(this))(index)
+          // 判断是否返回了Promise
+          if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
+            await beforeSwitch.then(res => {
+              // Promise返回成功
+              this.switchTab(index)
+            }).catch(err => {
+              
+            })
+          } else if (beforeSwitch === true) {
+            this.switchTab(index)
+          }
+        } else {
+          this.switchTab(index)
+        }
+      },
+      // 切换tab
+      switchTab(index) {
+        // 发出事件和修改v-model绑定的值
+        this.$emit('change', index)
+        this.$emit('input', index)
+      },
+      // 设置突起的位置
+      updateOutItemLeft() {
+        // 查找出需要突起的元素
+        const index = this.list.findIndex((item) => {
+          return item.out
+        })
+        if (index !== -1) {
+          this.outItemLeft = this.tabbatItemInfo[index].left + (this.tabbatItemInfo[index].width / 2) + 'px'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-tabbar {
+    
+    &__content {
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      z-index: 1024;
+      
+      &__out {
+        position: absolute;
+        z-index: 4;
+        border-radius: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        
+        &--shadow {
+          box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+          
+          &::before {
+            content: " ";
+            position: absolute;
+            width: 100%;
+            height: 50rpx;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            background-color: inherit;
+          }
+        }
+        
+        &--animation {
+          &--scale {
+            transform-origin: 50% 100%;
+            animation:tabbar-content-out-click 0.2s forwards 1 ease-in-out;
+          }
+        }
+      }
+      
+      &__item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
+        height: 100%;
+        position: relative;
+        
+        &__button {
+          margin-bottom: 10rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          
+          &--out {
+            margin-bottom: 10rpx;
+            border-radius: 50%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 6;
+            
+            &--animation {
+              &--scale {
+                transform-origin: 50% 100%;
+                animation:tabbar-item-button-out-click 0.2s forwards 1;
+              }
+            }
+          }
+          
+          &--animation {
+            &--scale {
+              .tn-tabbar__content__item__icon, .tn-tabbar__content__item__image {
+                transform-origin: 50% 100%;
+                animation:tabbar-item-button-click 0.2s forwards 1;
+              }
+            }
+          }
+        }
+        
+        &__icon {
+          
+          &--clip {
+            -webkit-background-clip: text;
+            color: transparent !important;
+          }
+        }
+        
+        &__text {
+          width: 100%;
+          font-size: 26rpx;
+          line-height: 28rpx;
+          text-align: center;
+          margin-bottom: 10rpx;
+          z-index: 10;
+          transition: all 0.2s ease-in-out;
+        }
+        
+        &--out {
+          height: calc(100% - 1px);
+        }
+      }
+    }
+    
+    &--fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    
+    &--shadow {
+      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    }
+  }
+  
+  /* 点击动画 start */
+  
+  @keyframes tabbar-item-button-click{
+    from{
+      transform: scale(0.8);
+    }
+    to{
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes tabbar-item-button-out-click {
+    0%{
+      transform: translateY(0) scale(1);
+    }
+    50%{
+      transform: translateY(-10rpx) scale(1.2);
+    }
+    100%{
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes tabbar-content-out-click {
+    0%{
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+    50% {
+      transform: translateX(-50%) translateY(-10rpx) scale(1.1);
+    }
+    100% {
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+  }
+  
+  /* 点击动画 end */
+</style>
diff --git a/tuniao-ui/components/tn-table/tn-table.vue b/tuniao-ui/components/tn-table/tn-table.vue
new file mode 100644
index 0000000..519b178
--- /dev/null
+++ b/tuniao-ui/components/tn-table/tn-table.vue
@@ -0,0 +1,100 @@
+<template>
+  <view class="tn-table-class tn-table" :class="[tableClass]" :style="[tableStyle]">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-table',
+    props: {
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 显示上边框
+      borderTop: {
+        type: Boolean,
+        default: true
+      },
+      // 显示右边框
+      borderRight: {
+        type: Boolean,
+        default: false
+      },
+      // 显示下边框
+      borderBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 显示左边框
+      borderLeft: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      parentData() {
+        return [this.borderWidth, this.borderColor]
+      },
+      tableClass() {
+        let clazz = ''
+        return clazz
+      },
+      tableStyle() {
+        let style = {}
+        if (this.borderWidth !== '') {
+          style.borderWidth = this.$tn.string.getLengthUnitValue(this.borderWidth)
+        }
+        if (this.borderColor) {
+          style.borderColor = this.borderColor
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderRight) {
+          style.borderRightStyle = 'solid'
+        }
+        if (this.borderTop) {
+          style.borderTopStyle = 'solid'
+        }
+        if (this.borderBottom) {
+          style.borderBottomStyle = 'solid'
+        }
+        return style
+      }
+    },
+    data() {
+      return {}
+    },
+    created() {
+      this.children = []
+    },
+    watch: {
+      parentData() {
+        // 更新子组件的数据
+        if (this.children.length) {
+          this.children.map((child) => {
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-table {
+    box-sizing: border-box;
+    
+    border-width: 1rpx;
+    border-style: none;
+    border-color: #AAAAAA;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue b/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
new file mode 100644
index 0000000..c5de9be
--- /dev/null
+++ b/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
@@ -0,0 +1,444 @@
+<template>
+  <view class="tn-tabs-swiper-class tn-tabs-swiper" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $tn.string.getLengthUnitValue(top, 'px'), zIndex: zIndex}">
+    
+    <scroll-view scroll-x class="tn-tabs-swiper__scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{zIndex: zIndex + 1}">
+      <view class="tn-tabs-swiper__scroll-view__box" :class="{'tn-tabs-swiper__scroll-view--flex': !isScroll}">
+        
+        <!-- item -->
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          :id="'tn-tabs-swiper__scroll-view__item-' + index"
+          class="tn-tabs-swiper__scroll-view__item tn-text-ellipsis"
+          :style="[tabItemStyle(index)]"
+          @tap="emit(index)"
+        >
+          <tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
+          {{ item[name] || item['name'] }}
+        </view>
+        
+        <!-- 底部滑块 -->
+        <view v-if="showBar" class="tn-tabs-swiper__bar" :style="[tabBarStyle]"></view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  const { windowWidth } = uni.getSystemInfoSync()
+  
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-tabs-swiper',
+    props: {
+      // 标签列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 列表数据tab名称的属性
+      name: {
+        type: String,
+        default: 'name'
+      },
+      // 列表数据微标数量的属性
+      count: {
+        type: String,
+        default: 'count'
+      },
+      // 当前活动的tab索引
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 菜单是否可以滑动
+      isScroll: {
+        type: Boolean,
+        default: true
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 80
+      },
+      // 距离顶部的距离(px)
+      top: {
+        type: Number,
+        default: 0
+      },
+      // item的高度
+      itemWidth: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // swiper的宽度
+      swiperWidth: {
+        type: Number,
+        default: 750
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未被选中时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中的item样式
+      activeItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示底部滑块
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+      // 底部滑块的宽度
+      barWidth: {
+        type: Number,
+        default: 40
+      },
+      // 底部滑块的高度
+      barHeight: {
+        type: Number,
+        default: 6
+      },
+      // 自定义底部滑块的样式
+      barStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 单个tab的左右内边距
+      gutter: {
+        type: Number,
+        default: 30
+      },
+      // 微标的偏移数[top, right]
+      badgeOffset: {
+        type: Array,
+        default() {
+          return [20, 22]
+        }
+      },
+      // 是否加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 滚动至中心目标类型
+      autoCenterMode: {
+        type: String,
+        default: 'window'
+      },
+      zIndex: {
+        type: Number,
+        default: 1
+      }
+    },
+    computed: {
+      currentIndex() {
+        const current = Number(this.current)
+        // 判断是否超出
+        if (current > this.list.length - 1) {
+          return this.list.length - 1
+        }
+        if (current < 0) return 0
+        return current
+      },
+      // 滑块需要移动的距离
+      scrollBarLeft() {
+        return Number(this.tabLineDx) + Number(this.tabLineAddDx)
+      },
+      // 滑块宽度转换为px
+      barWidthPx() {
+        return uni.upx2px(this.barWidth)
+      },
+      // 将swiper宽度转换为px
+      swiperWidthPx() {
+        return uni.upx2px(this.swiperWidth)
+      },
+      // tab样式
+      tabItemStyle() {
+        return index => {
+          let style = {
+            height: this.$tn.string.getLengthUnitValue(this.height),
+            lineHeight: this.$tn.string.getLengthUnitValue(this.height),
+            fontSize: this.fontSizeStyle || '28rpx',
+            color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,
+            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+            flex: this.isScroll ? 'auto' : '1',
+            zIndex: this.zIndex + 2
+          }
+          if (index === this.currentIndex) {
+            if (this.bold) {
+              style.fontWeight = 'bold'
+            }
+            Object.assign(style, this.activeItemStyle)
+          }
+          return style
+        }
+      },
+      // 底部滑块样式
+      tabBarStyle() {
+        let style = {
+          width: this.$tn.string.getLengthUnitValue(this.barWidth),
+          height: this.$tn.string.getLengthUnitValue(this.barHeight),
+          borderRadius: `${this.barHeight / 2}rpx`,
+          backgroundColor: this.activeColor,
+          left: this.scrollBarLeft + 'px'
+        }
+        Object.assign(style, this.barStyle)
+        return style
+      },
+    },
+    data() {
+      return {
+        // 滚动scroll-view的左边滚动距离
+        scrollLeft: 0,
+        // 存放tab菜单节点信息
+        tabsInfo: [],
+        // 屏幕宽度
+        windowWidth: 0,
+        // 滑动动画结束后对应的标签Index
+        animationFinishCurrent: this.current,
+        // 组件的宽度
+        componentsWidth: 0,
+        // 移动距离
+        tabLineAddDx: 0,
+        tabLineDx: 0,
+        // 颜色渐变数组
+        colorGradientArr: [],
+        // 两个颜色之间的渐变等分
+        colorStep: 100,
+      }
+    },
+    watch: {
+      current(value) {
+        this.change(value)
+        this.setFinishCurrent(value)
+      },
+      list() {
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 初始化
+      async init() {
+        await this.getTabsInfo()
+        this.countLine3Dx()
+        this.getQuery(() => {
+          this.setScrollViewToCenter()
+        })
+        // 获取渐变颜色数组
+        this.colorGradientArr = this.$tn.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
+      },
+      // 发送事件
+      emit(index) {
+        this.$emit('change', index)
+      },
+      // tabs发生变化
+      change() {
+        this.setScrollViewToCenter()
+      },
+      // 获取各个tab的节点信息
+      getTabsInfo() {
+        return new Promise((resolve, reject) => {
+          let view = uni.createSelectorQuery().in(this)
+          for (let i = 0; i < this.list.length; i++) {
+            view.select('#tn-tabs-swiper__scroll-view__item-'+i).boundingClientRect()
+          }
+          view.exec(res => {
+            const arr = []
+            for (let i = 0; i < res.length; i++) {
+              // 添加颜色属性
+              res[i].color = this.inactiveColor
+              if (i === this.currentIndex) res[i].color = this.activeColor
+              arr.push(res[i])
+            }
+            this.tabsInfo = arr
+            resolve()
+          })
+        })
+      },
+      // 查询components信息
+      getQuery(cb) {
+        try {
+          let view = uni.createSelectorQuery().in(this).select('.tn-tabs-swiper')
+          view.fields({
+              size: true
+            },
+            data => {
+              if (data) {
+                this.componentsWidth = data.width
+                if (cb && typeof cb === 'function') cb(data)
+              } else {
+                this.getQuery(cb)
+              }
+            }
+          ).exec()
+        } catch (e) {
+          this.componentsWidth = windowWidth
+        }
+      },
+      // 当swiper滑动结束的时候，计算滑块最终停留的位置
+      countLine3Dx() {
+        const tab = this.tabsInfo[this.animationFinishCurrent]
+        // 让滑块中心点和当前tab中心重合
+        if (tab) this.tabLineDx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left
+      },
+      // 把活动的tab移动到屏幕中心
+      setScrollViewToCenter() {
+        let tab = this.tabsInfo[this.animationFinishCurrent]
+        if (tab) {
+          let tabCenter = tab.left + tab.width / 2
+          let parentWidth
+          // 活动tab移动到中心时，以屏幕还是tab组件宽度为基准
+          if (this.autoCenterMode === 'window') {
+            parentWidth = windowWidth
+          } else {
+            parentWidth = this.componentsWidth
+          }
+          this.scrollLeft = tabCenter - parentWidth / 2
+        }
+      },
+      // 设置偏移位置
+      setDx(dx) {
+        
+        // 计算下一个标签的步进值
+        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))
+        let nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1
+        // 处理索引超出边界问题
+        nextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex
+        nextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex
+        
+        // 当前tab中心点x轴坐标
+        let currentTab = this.tabsInfo[this.animationFinishCurrent]
+        let currentTabX = currentTab.left + currentTab.width / 2
+        
+        // 下一个tab中心点x轴坐标
+        let nextTab = this.tabsInfo[nextTabIndex]
+        let nextTabX = nextTab.left + nextTab.width / 2
+        
+        // 两个tab之间的距离
+        let distanceX = Math.abs(nextTabX - currentTabX)
+        this.tabLineAddDx = (dx / this.swiperWidthPx) * distanceX
+        this.setTabColor(this.animationFinishCurrent, nextTabIndex, dx)
+      },
+      // 设置tab的颜色
+      setTabColor(currentTabIndex, nextTabIndex, dx) {
+        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))
+        if (Math.abs(dx) > this.swiperWidthPx) {
+          dx = dx > 0 ? dx - (this.swiperWidthPx * (nextIndexStep - 1)) : dx + (this.swiperWidthPx * (nextIndexStep - 1))
+        }
+        let colorIndex = Math.abs(Math.ceil((dx / this.swiperWidthPx) * 100))
+        let colorLength = this.colorGradientArr.length
+        // 处理超出索引边界
+        colorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex
+        if (nextIndexStep > 1) {
+          // 设置下一个tab的颜色
+          // 设置之前tab的颜色为默认颜色
+          if (dx > 0) {
+            this.tabsInfo[nextTabIndex + (nextIndexStep - 1) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]
+            this.tabsInfo[nextTabIndex + (nextIndexStep - 2) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+          } else {
+            this.tabsInfo[nextTabIndex - (nextIndexStep - 1) < 0 ? 0 : nextTabIndex - (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]
+            this.tabsInfo[nextTabIndex - (nextIndexStep - 2) < 0 ? 0 : nextTabIndex - (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+          }
+        } else {
+          // 设置下一个tab的颜色
+          this.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex]
+          // 设置当前tab的颜色
+          this.tabsInfo[currentTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+        }
+        
+      },
+      // swiper滑动结束
+      setFinishCurrent(current) {
+        // 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况
+        this.tabsInfo.map((item, index) => {
+          if (current == index) item.color = this.activeColor
+          else item.color = this.inactiveColor
+          return item
+        })
+        this.tabLineAddDx = 0
+        this.animationFinishCurrent = current
+        this.countLine3Dx()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* #ifndef APP-NVUE */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  /* #endif */
+  
+  /* #ifdef H5 */
+  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+  scroll-view ::v-deep ::-webkit-scrollbar {
+  	display: none;
+  	width: 0 !important;
+  	height: 0 !important;
+  	-webkit-appearance: none;
+  	background: transparent;
+  }
+  /* #endif */
+  
+  .tn-tabs-swiper {
+    &__scroll-view {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      
+      &__box {
+        position: relative;
+        /* #ifdef MP-TOUTIAO */
+        white-space: nowrap;
+        /* #endif */
+      }
+      
+      &__item {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: inline-block;
+        /* #endif */
+        text-align: center;
+        transition-property: background-color, color;
+      }
+      
+      &--flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    &__bar {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-tabs/tn-tabs.vue b/tuniao-ui/components/tn-tabs/tn-tabs.vue
new file mode 100644
index 0000000..04243ad
--- /dev/null
+++ b/tuniao-ui/components/tn-tabs/tn-tabs.vue
@@ -0,0 +1,340 @@
+<template>
+  <view class="tn-tabs-class tn-tabs" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $tn.string.getLengthUnitValue(top, 'px')}">
+    
+    <!-- _tgetRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
+    <view :id="id">
+      <scroll-view scroll-x class="tn-tabs__scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
+        <view class="tn-tabs__scroll-view__box" :class="{'tn-tabs__scroll-view--flex': !isScroll}">
+          <!-- item -->
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            :id="'tn-tabs__scroll-view__item-' + index"
+            class="tn-tabs__scroll-view__item tn-text-ellipsis"
+            :style="[tabItemStyle(index)]"
+            @tap="clickTab(index)"
+          >
+            <tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
+            {{ item[name] || item['name'] }}
+          </view>
+          
+          <!-- 底部滑块 -->
+          <view v-if="showBar" class="tn-tabs__bar" :style="[tabBarStyle]"></view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-tabs',
+    props: {
+      // 标签列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 列表数据tab名称的属性
+      name: {
+        type: String,
+        default: 'name'
+      },
+      // 列表数据微标数量的属性
+      count: {
+        type: String,
+        default: 'count'
+      },
+      // 当前活动的tab索引
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 菜单是否可以滑动
+      isScroll: {
+        type: Boolean,
+        default: true
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 80
+      },
+      // 距离顶部的距离(px)
+      top: {
+        type: Number,
+        default: 0
+      },
+      // item的宽度
+      itemWidth: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 过渡动画时长
+      duration: {
+        type: Number,
+        default: 0.3
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未被选中时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中的item样式
+      activeItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示底部滑块
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+      // 底部滑块的宽度
+      barWidth: {
+        type: Number,
+        default: 40
+      },
+      // 底部滑块的高度
+      barHeight: {
+        type: Number,
+        default: 6
+      },
+      // 自定义底部滑块的样式
+      barStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 单个tab的左右内边距
+      gutter: {
+        type: Number,
+        default: 30
+      },
+      // 微标的偏移数[top, right]
+      badgeOffset: {
+        type: Array,
+        default() {
+          return [20, 22]
+        }
+      },
+      // 是否加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 底部滑块样式
+      tabBarStyle() {
+        let style = {
+          width: this.$tn.string.getLengthUnitValue(this.barWidth),
+          height: this.$tn.string.getLengthUnitValue(this.barHeight),
+          borderRadius: `${this.barHeight / 2}rpx`,
+          backgroundColor: this.activeColor,
+          opacity: this.barMoveFirst ? 0 : 1,
+          transform: `translate(${this.scrollBarLeft}px, -100%)`,
+          transitionDuration: this.barMoveFirst ? '0s' : `${this.duration}s`
+        }
+        Object.assign(style, this.barStyle)
+        return style
+      },
+      // tabItem样式
+      tabItemStyle() {
+        return index => {
+          let style = {
+            width: this.$tn.string.getLengthUnitValue(this.itemWidth),
+            height: this.$tn.string.getLengthUnitValue(this.height),
+            lineHeight: this.$tn.string.getLengthUnitValue(this.height),
+            fontSize: this.fontSizeStyle || '28rpx',
+            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+            flex: this.isScroll ? 'auto' : '1',
+            transitionDuration: `${this.duration}s`
+          }
+          if (index === this.currentIndex) {
+            if (this.bold) {
+              style.fontWeight = 'bold'
+            }
+            style.color = this.activeColor
+            Object.assign(style, this.activeItemStyle)
+          } else {
+            style.color = this.inactiveColor
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        // id值
+        id: this.$tn.uuid(),
+        // 滚动scroll-view的左边距离
+        scrollLeft: 0,
+        // 存放查询后tab菜单的节点信息
+        tabQueryInfo: [],
+        // 组件宽度
+        componentWidth: 0,
+        // 底部滑块的移动距离
+        scrollBarLeft: 0,
+        // 组件到屏幕左边的巨鹿
+        componentLeft: 0,
+        // 当前选中的itemIndex
+        currentIndex: this.current,
+        // 标记底部滑块是否第一次移动，第一次移动的时候不触发动画
+        barMoveFirst: true
+      }
+    },
+    watch: {
+      // 监听tab的变化，重新计算tab菜单信息
+      list(newValue, oldValue) {
+        // list变化时，重置内部索引，防止出现超过数据边界的问题
+        if (newValue.length !== oldValue.length) this.currentIndex = 0
+        this.$nextTick(() => {
+          this.init()
+        })
+      },
+      current: {
+        handler(val) {
+          this.$nextTick(() => {
+            this.currentIndex = val
+            this.scrollByIndex()
+          })
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 初始化变量
+      async init() {
+        // 获取tabs组件的信息
+        let tabRect = await this._tGetRect('#' + this.id)
+        // 计算组件的宽度
+        this.componentLeft = tabRect.left
+        this.componentWidth = tabRect.width
+        this.getTabRect()
+      },
+      // 点击tab菜单
+      clickTab(index) {
+        if (index === this.currentIndex) return
+        this.$emit('change', index)
+      },
+      // 查询tab的布局信息
+      getTabRect() {
+        let query = uni.createSelectorQuery().in(this)
+        // 遍历所有的tab
+        for (let i = 0; i < this.list.length; i++) {
+          query.select(`#tn-tabs__scroll-view__item-${i}`).fields({
+            size: true,
+            rect: true
+          })
+        }
+        query.exec((res) => {
+          this.tabQueryInfo = res
+          // 初始滚动条和底部滑块的位置
+          this.scrollByIndex()
+        })
+      },
+      // 滚动scrollView，让活动的tab处于屏幕中间
+      scrollByIndex() {
+        // 当前获取tab的布局信息
+        let tabInfo = this.tabQueryInfo[this.currentIndex]
+        if (!tabInfo) return
+        
+        // 活动tab的宽度
+        let tabWidth = tabInfo.width
+        // 活动item的左边到组件左边的距离
+        let offsetLeft = tabInfo.left - this.componentLeft
+        // 计算scroll-view移动的距离
+        let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2
+        this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft
+        
+        // 计算当前滑块需要移动的距离，当前活动item的中点到左边的距离减去滑块宽度的一半
+        let left = tabInfo.left + tabInfo.width / 2 - this.componentLeft
+        
+        // 计算当前活跃item到组件左边的距离
+        this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2
+        
+        // 防止在计算时出错，所以延迟执行标记不是第一次移动
+        if (this.barMoveFirst) {
+          setTimeout(() => {
+            this.barMoveFirst = false
+          }, 100)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* #ifndef APP-NVUE */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  /* #endif */
+  
+  /* #ifdef H5 */
+  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+  scroll-view ::v-deep ::-webkit-scrollbar {
+  	display: none;
+  	width: 0 !important;
+  	height: 0 !important;
+  	-webkit-appearance: none;
+  	background: transparent;
+  }
+  /* #endif */
+  
+  .tn-tabs {
+    &__scroll-view {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      
+      &__box {
+        position: relative;
+        /* #ifdef MP-TOUTIAO */
+        white-space: nowrap;
+        /* #endif */
+      }
+      
+      &__item {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: inline-block;
+        /* #endif */
+        text-align: center;
+        transition-property: background-color, color;
+      }
+      
+      &--flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    &__bar {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tag/tn-tag.vue b/tuniao-ui/components/tn-tag/tn-tag.vue
new file mode 100644
index 0000000..180ca59
--- /dev/null
+++ b/tuniao-ui/components/tn-tag/tn-tag.vue
@@ -0,0 +1,223 @@
+<template>
+  <view
+    class="tn-tag-class tn-tag"
+    :class="[
+      tagClass,
+      backgroundColorClass,
+      fontColorClass
+    ]"
+    :style="[tagStyle]"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    name: 'tn-tag',
+    props: {
+      // 序号，用于区分多个标签
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 形状 圆角 radius 椭圆  circle 左半圆 circleLeft 右半圆 circleRight
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 标签大小 sm lg
+      size: {
+        type: String,
+        default: ''
+      },
+      // 宽度
+      width: {
+        type: String,
+        default: ''
+      },
+      // 高度
+      height: {
+        type: String,
+        default: ''
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: '0'
+      },
+      // 是否镂空
+      plain: {
+        type: Boolean,
+        default: false
+      },
+      // 是否将元素基点设置在左边
+      originLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 是否将元素基点设置在右边
+      originRight: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      tagClass() {
+        let clazz = ''
+        // 设置标签的形状
+        switch(this.shape) {
+          case 'radius':
+            clazz += ' tn-radius'
+            break
+          case 'circle':
+            clazz += ' tn-round'
+            break
+          case 'circleLeft':
+            clazz += ' tn-tag--fillet-left'
+            break
+          case 'circleRight':
+            clazz += ' tn-tag--fillet-right'
+            break
+        }
+        
+        // 设置为镂空并且设置镂空便可才进行设置
+        if (this.plain) {
+          clazz += ' tn-tag--plain tn-border-solid'
+          if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
+            const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+            clazz += ` tn-border-${color}`
+          }
+        }
+        
+        // 设置基准点
+        if (this.originLeft) {
+          clazz += ' tn-tag--origin-left'
+        }
+        if (this.originRight) {
+          clazz += ' tn-tag--origin-right'
+        }
+        
+        return clazz
+      },
+      tagStyle() {
+        let style = {}
+        switch(this.size) {
+          case 'sm':
+            style.padding = '0 12rpx'
+            style.fontSize = '20rpx'
+            style.height = '32rpx'
+            break
+          case 'lg':
+            style.padding = '0 20rpx'
+            style.fontSize = '28rpx'
+            style.height = '62rpx'
+            break
+          default:
+            style.padding = '0 16rpx'
+            style.fontSize = '24rpx'
+            style.height = '48rpx'
+            break
+        }
+        
+        style.width = this.width || '120rpx'
+        style.height = this.height || style.height
+        
+        style.padding = this.padding || style.padding
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize !== 0) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+
+        if (!this.backgroundColorClass) {
+          style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#FFFFFF') : ''
+          if (this.plain) {
+            style.borderColor = (this.backgroundColorStyle || '#080808')
+          }
+        }
+        
+        
+        
+        return style
+      },
+    },
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tag {
+    vertical-align: middle;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    white-space: nowrap;
+    // color: #FFFFFF;
+    
+    &--fillet-left {
+      border-radius: 50rpx 0 0 50rpx;
+    }
+    
+    &--fillet-right {
+      border-radius: 0 50rpx 50rpx 0;
+    }
+    
+    &--plain {
+      background-color: transparent !important;
+      background-image: none;
+      
+      &.tn-round {
+        border-radius: 1000rpx !important;
+      }
+      
+      &.tn-radius {
+        border-radius: 12rpx !important;
+      }
+    }
+    
+    &--origin-left {
+      transform-origin: 0 center;
+    }
+    
+    &--origin-right {
+      transform-origin: 100% center;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-td/tn-td.vue b/tuniao-ui/components/tn-td/tn-td.vue
new file mode 100644
index 0000000..00b230f
--- /dev/null
+++ b/tuniao-ui/components/tn-td/tn-td.vue
@@ -0,0 +1,307 @@
+<template>
+  <view class="tn-td-class tn-td" :class="[tdClass]" :style="[tdStyle]" @tap.stop="handleClick">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-td',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    mixins: [componentsColorMixin],
+    props: {
+      // 占整个表格的宽度跨度
+      // [1-24]
+      span: {
+        type: Number,
+        default: 24
+      },
+      // 宽度
+      // 优先级比span高
+      width: {
+        type: [String, Number],
+        default: ''
+      },
+      // 高度
+      height: {
+        type: [String, Number],
+        default: ''
+      },
+      // 字体加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 格内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 左边框
+      borderLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 下边框
+      borderBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 右边框
+      borderRight: {
+        type: Boolean,
+        default: true
+      },
+      // 文字超出隐藏
+      ellipsis: {
+        type: Boolean,
+        default: false
+      },
+      // 文本对齐方式
+      // left center right
+      textAlign: {
+        type: String,
+        default: 'left'
+      },
+      // 排列方式
+      // left center right
+      alignItems: {
+        type: String,
+        default: 'left'
+      },
+      // 收缩表格
+      shrink: {
+        type: Boolean,
+        default: true
+      },
+      // 铺满剩余空间
+      grow: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏
+      hidden: {
+        type: Boolean,
+        default: false
+      },
+      // 固定列数据
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 列数
+      index: {
+        type: [String, Number],
+        default: 0
+      },
+      // keys
+      keys: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      tdClass() {
+        let clazz = ''
+        clazz += `${this.ellipsis ? 'tn-td--ellipsis' : 'tn-td--normal'}`
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += ` ${this.fontColorClass}`
+        }
+        if (this.alignItems) {
+          clazz += ` tn-td--${this.alignItems}`
+        }
+        if (this.textAlign) {
+          clazz += ` tn-td__text--${this.textAlign}`
+        }
+        if (!this.shrink) {
+          clazz += ' tn-td--shrink'
+        }
+        if (this.grow) {
+          clazz += ' tn-td--grow'
+        }
+        if (this.hidden) {
+          clazz += ' tn-td--hidden'
+        }
+        return clazz
+      },
+      tdStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+        }
+        style.width = this.getWidth()
+        if (this.height) {
+          style.height = this.$tn.string.getLengthUnitValue(this.height)
+        }
+        style.fontWeight = this.bold ? 'bold' : 'normal'
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.borderWidth !== '' || this.parentData.borderWidthValue !== '') {
+          style.borderWidth = this.borderWidth !== '' ? this.$tn.string.getLengthUnitValue(this.borderWidth) : this.$tn.string.getLengthUnitValue(this.parentData.borderWidthValue)
+        }
+        if (this.borderColor || this.parentData.borderColorValue) {
+          style.borderColor = this.borderColor || this.parentData.borderColorValue
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderRight) {
+          style.borderRightStyle = 'solid'
+        }
+        if (this.borderBottom) {
+          style.borderBottomStyle = 'solid'
+        }
+        if (this.fixed) {
+          style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.tableTd
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        parentData: {
+          borderColorValue: null,
+          borderWidthValue: null
+        }
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      // 获取表格宽度
+      getWidth() {
+        if (this.width) {
+          return this.$tn.string.getLengthUnitValue(this.width)
+        }
+        return [
+          '4.16666667%',
+          '8.33333333%',
+          '12.5%',
+          '16.66666667%',
+          '20.83333333%',
+          '25%',
+          '29.16666667%',
+          '33.33333333%',
+          '37.5%',
+          '41.66666667%',
+          '45.83333333%',
+          '50%',
+          '54.16666667%',
+          '58.33333333%',
+          '62.5%',
+          '66.66666667%',
+          '70.83333333%',
+          '75%',
+          '79.16666667%',
+          '83.33333333%',
+          '87.5%',
+          '91.66666667%',
+          '95.83333333%',
+          '100%'
+        ][this.span - 1]
+      },
+      // 点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: this.index,
+          key: this.keys
+        })
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-tr')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-td {
+    box-sizing: border-box;
+    position: relative;
+    word-break: break-all;
+    background-color: transparent;
+    height: auto;
+    padding: 12rpx;
+    
+    border-width: 1rpx;
+    border-style: none;
+    border-color: #AAAAAA;
+    
+    &--normal {
+      display: inline-flex;
+      align-items: center;
+    }
+    &--ellipsis {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap !important;
+      text-overflow: ellipsis;
+    }
+    
+    &--shrink {
+      flex-shrink: 0;
+    }
+    &--grow {
+      flex-grow: 1;
+    }
+    
+    &--left {
+      justify-content: flex-start;
+    }
+    &--center {
+      justify-content: center;
+    }
+    &--right {
+      justify-content: flex-end;
+    }
+    
+    &__text {
+      &--left {
+        text-align: left;
+      }
+      &--center {
+        text-align: center;
+      }
+      &--right {
+        text-align: right;
+      }
+    }
+    
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
new file mode 100644
index 0000000..5372a10
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
@@ -0,0 +1,71 @@
+<template>
+  <view class="tn-time-line-item-class tn-time-line-item">
+    <view>
+      <slot name="content"></slot>
+    </view>
+    <view class="tn-time-line-item__node" :style="[nodeStyle]">
+      <slot name="node">
+        <view class="tn-time-line-item__node--dot"></view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line-item',
+    props: {
+      // 节点左边图标的绝对定位top值
+      top: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      nodeStyle() {
+        let style = {}
+        if (this.top !== '') style.top = this.top + 'rpx'
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 12rpx;
+      left: -40rpx;
+      align-items: center;
+      justify-content: center;
+      font-size: 24rpx;
+      transform-origin: 0;
+      transform: translateX(-50%);
+      z-index: 1;
+      background-color: transparent;
+      
+      &--dot {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 100rpx;
+        background-color: #AAAAAA;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
new file mode 100644
index 0000000..5372a10
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
@@ -0,0 +1,71 @@
+<template>
+  <view class="tn-time-line-item-class tn-time-line-item">
+    <view>
+      <slot name="content"></slot>
+    </view>
+    <view class="tn-time-line-item__node" :style="[nodeStyle]">
+      <slot name="node">
+        <view class="tn-time-line-item__node--dot"></view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line-item',
+    props: {
+      // 节点左边图标的绝对定位top值
+      top: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      nodeStyle() {
+        let style = {}
+        if (this.top !== '') style.top = this.top + 'rpx'
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 12rpx;
+      left: -40rpx;
+      align-items: center;
+      justify-content: center;
+      font-size: 24rpx;
+      transform-origin: 0;
+      transform: translateX(-50%);
+      z-index: 1;
+      background-color: transparent;
+      
+      &--dot {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 100rpx;
+        background-color: #AAAAAA;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line/tn-time-line.vue b/tuniao-ui/components/tn-time-line/tn-time-line.vue
new file mode 100644
index 0000000..951dd3f
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line/tn-time-line.vue
@@ -0,0 +1,39 @@
+<template>
+  <view class="tn-time-line-class tn-time-line">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line',
+    props: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line {
+    padding-left: 40rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      left: 0;
+      top: 12rpx;
+      bottom: 0;
+      border-left: 1px solid #AAAAAA;
+      transform-origin: 0 0;
+      transform: scaleX(0.5);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk b/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
new file mode 100644
index 0000000..951dd3f
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
@@ -0,0 +1,39 @@
+<template>
+  <view class="tn-time-line-class tn-time-line">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line',
+    props: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line {
+    padding-left: 40rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      left: 0;
+      top: 12rpx;
+      bottom: 0;
+      border-left: 1px solid #AAAAAA;
+      transform-origin: 0 0;
+      transform: scaleX(0.5);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tips/tn-tips.vue b/tuniao-ui/components/tn-tips/tn-tips.vue
new file mode 100644
index 0000000..3c49cd6
--- /dev/null
+++ b/tuniao-ui/components/tn-tips/tn-tips.vue
@@ -0,0 +1,240 @@
+<template>
+  <view
+    v-if="visibleSync"
+    class="tn-tips-class tn-tips"
+    :class="[tipsClass]"
+    :style="[tipsStyle]"
+  >
+    <view
+      class="tn-tips__content"
+      :class="[
+        backgroundColorClass,
+        fontColorClass
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        color: fontColorStyle
+      }"
+    >{{ msg }}</view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    name: 'tn-tips',
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 提示框显示位置 top center bottom
+      position: {
+        type: String,
+        default: 'top'
+      },
+      // 当位置设置为top的时候，设置距离顶部的距离
+      top: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      tipsClass() {
+        let clazz = ''
+        switch (this.position) {
+          case 'top':
+            clazz += ' tn-tips--top'
+            break
+          case 'center':
+            clazz += ' tn-tips--center'
+            break
+          case 'bottom':
+            clazz += ' tn-tips--bottom'
+            break
+          default:
+            clazz += ' tn-tips--top'
+        }
+        if (this.showTips) {
+          clazz += ' tn-tips--show'
+        }
+        
+        return clazz
+      },
+      tipsStyle() {
+        let style = {}
+        if ((this.position === 'top' || this.position === '') && this.top) {
+          style.top = this.top + 'px'
+        }
+        style.zIndex = (this.zIndex ? this.zIndex : this.$tn.zIndex.tips) + 1
+        
+        return style
+      },
+      backgroundColorStyle() {
+        return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      fontColorStyle() {
+        return this.$tn.color.getFontColorStyle(this.fontColor)
+      },
+      fontColorClass() {
+        return this.$tn.color.getFontColorInternalClass(this.fontColor)
+      },
+    },
+    data() {
+      return {
+        //关闭提示框定时器
+        timer: null,
+        // 是否渲染组件
+        visibleSync: false,
+        // 是否显示内容
+        showTips: false,
+        // 提示信息
+        msg: '',
+        // 背景颜色
+        backgroundColor: '',
+        // 字体颜色
+        fontColor: ''
+      }
+    },
+    methods: {
+      show(options = {}) {
+        const {
+          duration = 2000,
+          msg = '',
+          backgroundColor = '',
+          fontColor = ''
+        } = options
+        
+        if (this.timer !== null) clearTimeout(this.timer)
+        
+        // 如果没有设置内容则不弹出
+        if (!msg) {
+          this._clearOptions()
+          this.$emit('close')
+          return
+        }
+        
+        this.msg = msg
+        this.backgroundColor = backgroundColor || '#01BEFF'
+        this.fontColor = fontColor || '#FFFFFF'
+        
+        this.change('visibleSync', 'showTips', true)
+        
+        this.timer = setTimeout(() => {
+          clearTimeout(this.timer)
+          this.timer = null
+          this.change('showTips', 'visibleSync', false)
+        }, duration)
+      },
+      
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          }, 50)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            this._clearOptions()
+          }, 300)
+        }
+      },
+      
+      // 清除传递的参数
+      _clearOptions() {
+        this.msg = ''
+        this.backgroundColor = ''
+        this.fontColor = ''
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /*注意问题：
+   1、fixed 元素宽度无法自适应，所以增加了子元素
+   2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
+  */
+  .tn-tips {
+    height: auto;
+    position: fixed;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+    
+    &__content {
+      word-wrap: break-word;
+      word-break: break-all;
+      width: 100%;
+      height: auto;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #FFFFFF;
+    }
+    
+    &--top {
+      width: 100% !important;
+      /* padding: 18rpx 30rpx; */
+      top: 0;
+      left: 0;
+      transform: translateY(-100%) translateZ(0);
+      word-break: break-all;
+    }
+    
+    &--center {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    &--bottom {
+      bottom: 120rpx;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    &--center, &--bottom {
+      .content {
+        border-radius: 8rpx;
+        padding: 0;
+      }
+    }
+    
+    &--center, &--bottom {
+      .tn-tips__content {
+        padding: 18rpx 30rpx !important;
+      }
+    }
+    
+    &--show {
+      opacity: 1;
+      
+      &.tn-tips--top {
+        transform: translateY(0) translateZ(0) !important;
+      }
+    }
+    
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-toast/tn-toast.vue b/tuniao-ui/components/tn-toast/tn-toast.vue
new file mode 100644
index 0000000..6e77b93
--- /dev/null
+++ b/tuniao-ui/components/tn-toast/tn-toast.vue
@@ -0,0 +1,227 @@
+<template>
+  <view v-if="visible">
+    <view
+      class="tn-toast-class tn-toast"
+      :class="[toastClass]"
+      :style="[toastStyle]"
+    >
+      <image v-if="image" :src="image" class="tn-toast__img" :class="{'tn-margin-bottom-sm': title || content}"></image>
+      <view v-if="icon" class="tn-toast__icon">
+        <view :class="['tn-icon-' + icon]"></view>
+      </view>
+      <view
+        v-if="title"
+        class="tn-toast__text"
+        :class="[haveIcon || haveContent ? '' : 'tn-toast--unicon']"
+      >{{ title }}</view>
+      <view
+        v-if="haveContent"
+        class="tn-toast__text tn-toast__content"
+      >{{ content }}</view>
+    </view>
+    
+    <view class="tn-toast__mask" :class="[visible ? 'tn-toast__mask--show' : '']" :style="[maskStyle]"></view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    name: 'tn-toast',
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      toastClass() {
+        let clazz = ''
+        if (this.visible) {
+          clazz += ' tn-toast--show'
+        }
+        
+        if (this.content) {
+          clazz += ' tn-toast--padding'
+        }
+        if (this.icon || this.image) {
+          clazz += ' tn-toast--unicon'
+        }
+        
+        return clazz
+      },
+      toastStyle() {
+        let style = {}
+        style.width = 'auto'
+        if (this.icon || this.image) {
+          // style.width = this.content ? '420rpx' : '360rpx'
+        }
+
+        style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.toast
+        
+        return style
+      },
+      maskStyle() {
+        let style = {}
+        const zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.toast
+        style.zIndex = zIndex - 1
+        return style
+      },
+      haveIcon() {
+        return this.icon || this.image
+      },
+      haveContent() {
+        return this.content
+      }
+    },
+    data() {
+      return {
+        // 自动关闭定时器
+        timer: null,
+        // 是否显示
+        visible: false,
+        // 显示的标题
+        title: '操作成功',
+        // 显示的内容
+        content: "",
+        // 是否显示icon (icon库的图标)
+        icon: '',
+        // 是否显示图片 (图片地址)
+        image: ''
+      }
+    },
+    methods: {
+      // 显示弹框
+      show(options = {}) {
+        const {
+          duration = 2000,
+          title = '',
+          content = '',
+          icon = '',
+          image = ''
+        } = options
+        if (this.timer !== null ){
+          clearTimeout(this.timer)
+        }
+        // 如果没有设置任何内容就不弹出
+        if (!icon && !image && !title && !content) {
+          this._clearOptions()
+          this.$emit('closed')
+          return
+        }
+        
+        this.visible = true
+        this.title = title
+        this.content = content
+        this.icon = icon
+        if (!icon) {
+          this.image = image
+        }
+        
+        this.timer = setTimeout(() => {
+          this.visible = false
+          clearTimeout(this.timer)
+          this.timer = null
+          this._clearOptions()
+          this.$emit('closed')
+        }, duration)
+      },
+      
+      
+      // 清除传递的参数
+      _clearOptions() {
+        this.title = ''
+        this.content = ''
+        this.icon = ''
+        this.image = ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-toast {
+    height: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 10rpx;
+    opacity: 0;
+    position: fixed;
+    left: 50%;
+    top: 48%;
+    transform: translate(-50%, -50%);
+    transition: 0.3 ease-in-out;
+    transition-property: opacity, visibility;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 20rpx 20rpx 20rpx 20rpx;
+    box-sizing: border-box;
+    
+    &--show {
+      opacity: 1;
+      
+      &.tn-toast--padding {
+        padding-top: 50rpx !important;
+        padding-bottom: 50rpx !important;
+      }
+      
+      &.tn-toast--unicon {
+        padding: 20rpx 20rpx 20rpx 20rpx !important;
+      }
+    }
+    
+    &__img {
+      width: 120rpx;
+      height: 120rpx;
+      display: block;
+    }
+    
+    &__text {
+      font-size: 28rpx;
+      line-height: 28rpx;
+      color: #ffffff;
+      text-align: center;
+    }
+    
+    &__icon {
+      color: #FFFFFF;
+      font-size: 64rpx;
+    }
+    
+    &__content {
+      padding-top: 10rpx;
+      font-size: 24rpx !important;
+    }
+    
+    &--unicon {
+      padding: 0;
+      word-break: break-all;
+    }
+    
+    &--padding {
+      padding: 10rpx;
+    }
+    
+    &__mask {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      border: 0;
+      background-color: rgba(0, 0, 0, 0);
+      transition: 0.3s ease-in-out;
+      transition-property: opacity;
+      opacity: 0;
+      
+      &--show {
+        height: 100%;
+        opacity: 1;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-tr/tn-tr.vue b/tuniao-ui/components/tn-tr/tn-tr.vue
new file mode 100644
index 0000000..0380511
--- /dev/null
+++ b/tuniao-ui/components/tn-tr/tn-tr.vue
@@ -0,0 +1,210 @@
+<template>
+  <view class="tn-tr-class tn-tr" :class="[trClass]" :style="[trStyle]">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-tr',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    mixins: [componentsColorMixin],
+    props: {
+      // 宽度
+      width: {
+        type: [String, Number],
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 左边框
+      borderLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 上边框
+      borderTop: {
+        type: Boolean,
+        default: false
+      },
+      // 换行显示
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 固定表格
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // left偏移值
+      left: {
+        type: [String, Number],
+        default: 0
+      },
+      // right偏移值
+      right: {
+        type: [String, Number],
+        default: 0
+      },
+      // top偏移值(自定义顶部导航栏时用到)
+      top: {
+        type: [String, Number],
+        default: 0
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: ''
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 行数索引
+      index: {
+        type: [String, Number],
+        default: 0
+      },
+      // 参数
+      params: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      borderWidthValue() {
+        return this.borderWidth || this.parentData.borderWidth || ''
+      },
+      borderColorValue() {
+        return this.borderColor || this.parentData.borderColor || ''
+      },
+      trClass() {
+        let clazz = ''
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += ` ${this.fontColorClass}`
+        }
+        if (this.wrap) {
+          clazz += ' tn-tr--wrap'
+        }
+        if (this.fixed) {
+          clazz += ' tn-tr--fixed'
+        }
+        return clazz
+      },
+      trStyle() {
+        let style = {}
+        if (this.width) {
+          style.width = this.$tn.string.getLengthUnitValue(this.width)
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+        }
+        if (this.borderWidth !== '' || this.parentData.borderWidth !== '') {
+          style.borderWidth = this.borderWidth !== '' ? this.$tn.string.getLengthUnitValue(this.borderWidth) : this.$tn.string.getLengthUnitValue(this.parentData.borderWidth)
+        }
+        if (this.borderColor || this.parentData.borderColor) {
+          style.borderColor = this.borderColor || this.parentData.borderColor
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderTop) {
+          style.borderTopStyle = 'solid'
+        }
+        if (this.fixed) {
+          style.left = this.left ? this.$tn.string.getLengthUnitValue(this.left) : 'auto'
+          style.right = this.right ? this.$tn.string.getLengthUnitValue(this.right) : 'auto'
+          style.top = this.top ? this.$tn.string.getLengthUnitValue(this.top) : 'auto'
+        }
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.tableTr
+        return style
+      }
+    },
+    data() {
+      return {
+        parentData: {
+          borderColor: null,
+          borderWidth: null
+        }
+      }
+    },
+    watch: {
+      parentData: {
+        handler() {
+          // 更新子组件的数据
+          if (this.children.length) {
+            this.children.map((child) => {
+              typeof(child.updateParentData) === 'function' && child.updateParentData()
+            })
+          }
+        },
+        deep: true
+      }
+    },
+    created() {
+      this.children = []
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      handleClick() {
+        this.$emit('click', {
+          index: this.index,
+          params: this.params
+        })
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-table')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tr {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    
+    border-width: 1rpx;
+    border-style: none none solid none;
+    border-color: #AAAAAA;
+    
+    &--wrap {
+      flex-wrap: wrap;
+    }
+    
+    &--fixed {
+      position: fixed;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tree-node/tn-tree-node.vue b/tuniao-ui/components/tn-tree-node/tn-tree-node.vue
new file mode 100644
index 0000000..10f3f4d
--- /dev/null
+++ b/tuniao-ui/components/tn-tree-node/tn-tree-node.vue
@@ -0,0 +1,143 @@
+<template>
+  <view class="tn-tree-node-class tn-tree-node">
+    <view class="tn-tree__label" @tap="handleClick">
+      <view
+        v-if="node.children && node.children.length > 0 && triangle"
+        class="tn-tree__triangle"
+        :class="[{'tn-tree__triangle--90deg': !collapsed}]"
+      ></view>
+      <view class="tn-tree__label__item">
+        <view v-if="collapsed && node.image" class="tn-tree__label__item__image">
+          <image :src="node.image" mode="widthFix"></image>
+        </view>
+        <view v-if="!collapsed && node.activeImage" class="tn-tree__label__item__image">
+          <image :src="node.activeImage" mode="widthFix"></image>
+        </view>
+        <view class="tn-tree__label__item__text">{{ node.text }}</view>
+      </view>
+    </view>
+    <view v-if="!collapsed && node.children && node.children.length > 0" class="tn-tree__children">
+      <tn-tree-node
+        v-for="(item, index) in node.children"
+        :key="index"
+        :node="item"
+        :collapsible="collapsible"
+        :triangle="triangle"
+        @click="nodeClick"
+      ></tn-tree-node>
+    </view>
+  </view>
+</template>
+
+<script>
+  //如果未开启easycom模式，请自行引入tn-tree-node组件
+  export default {
+    name: 'tn-tree-node',
+    props: {
+      // 节点信息
+      node: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 可以折叠
+      collapsible: {
+        type: Boolean,
+        default: true
+      },
+      // 显示三角形
+      triangle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    watch: {
+      node(val) {
+        if (val.collapsed !== this.collapsed && this.node.children && this.node.children.length > 0) {
+          this.collapsed = val.collapsed
+        }
+      }
+    },
+    data() {
+      return {
+        // 标记是否折叠
+        collapsed: true
+      }
+    },
+    created() {
+      if (this.node.collapsed === false) {
+        this.collapsed = false
+      }
+    },
+    methods: {
+      // 处理点击
+      handleClick(e) {
+        if (this.collapsible && this.node.children && this.node.children.length > 0) {
+          this.collapsed = !this.collapsed
+        }
+        this.$emit('click', this.node)
+      },
+      nodeClick(e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tree-node {
+    
+    .tn-tree {
+      &__label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding: 20rpx 30rpx;
+        background-color: transparent;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+        // 字体抗锯齿
+        -webkit-font-smoothing: antialiased;
+        
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          
+          &__image {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 16rpx;
+            
+            image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      
+      &__children {
+        padding-left: 60rpx;
+        position: relative;
+      }
+      
+      &__triangle {
+        width: 0;
+        height: 0;
+        border-top: 12rpx solid transparent;
+        border-bottom: 12rpx solid transparent;
+        border-left: 16rpx solid #080808;
+        margin-right: 20rpx;
+        transition:  transform 0.25s ease-out;
+        flex-shrink: 0;
+        
+        &--90deg {
+          transform:rotate(90deg) translate3d(0, 0, 0);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tree-view/tn-tree-view.vue b/tuniao-ui/components/tn-tree-view/tn-tree-view.vue
new file mode 100644
index 0000000..99e8c7f
--- /dev/null
+++ b/tuniao-ui/components/tn-tree-view/tn-tree-view.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="tn-tree-view-class tn-tree-view">
+    <tn-tree-node
+      v-for="(item, index) in treeData"
+      :key="index"
+      :node="item"
+      :collapsible="collapsible"
+      :triangle="triangle"
+      @click="handleClick"
+    ></tn-tree-node>
+  </view>
+</template>
+
+<script>
+  //如果未开启easycom模式，请自行引入tn-tree-node组件
+  export default {
+    name: 'tn-tree-view',
+    props: {
+      // 节点信息
+      treeData: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 可以折叠
+      collapsible: {
+        type: Boolean,
+        default: true
+      },
+      // 显示三角形
+      triangle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    methods: {
+      handleClick(e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tree-view {
+    width: 100%;
+    position: relative;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue b/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
new file mode 100644
index 0000000..1b7a587
--- /dev/null
+++ b/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
@@ -0,0 +1,324 @@
+<template>
+  <view class="tn-verification-code-class tn-verification-code">
+    <view class="tn-code__container">
+      <input class="tn-code__input" :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxLength" @input="getValue" />
+      <view v-for="(item, index) in loopCharArr" :key="index">
+        <view
+          class="tn-code__item"
+          :class="[{
+            'tn-code__item--breathe': breathe && charArrLength === index,
+            'tn-code__item__box': mode === 'box',
+            'tn-code__item__box--active': mode === 'box' && charArrLength === index
+          }]"
+          :style="[itemStyle(index)]"
+        >
+          <view
+            v-if="mode !== 'middleLine'"
+            class="tn-code__item__line tn-code__item__line--placeholder"
+            :style="[placeholderLineStyle(index)]"
+          ></view>
+          <view
+            v-if="mode === 'middleLine' && charArrLength <= index"
+            class="tn-code__item__line tn-code__item__line--middle"
+            :class="[{
+              'tn-code__item__line--bold': bold,
+              'tn-code__item--breathe': breathe && charArrLength === index,
+              'tn-code__item__line--active': charArrLength === index
+            }]"
+            :style="[lineStyle(index)]"
+          ></view>
+          <view
+            v-if="mode === 'bottomLine'"
+            class="tn-code__item__line tn-code__item__line--bottom"
+            :class="[{
+              'tn-code__item__line--bold': bold,
+              'tn-code__item--breathe': breathe && charArrLength === index,
+              'tn-code__item__line--active': charArrLength === index
+            }]"
+            :style="[lineStyle(index)]"
+          ></view>
+          <block v-if="!dotFill">
+            <text>{{ charArr[index] ? charArr[index] : '' }}</text>
+          </block>
+          <block v-else>
+            <text class="tn-code__item__dot">{{ charArr[index] ? '●' : '' }}</text>
+          </block>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-verification-code',
+    props: {
+      // 验证码的值
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      // 最大输入长度
+      maxLength: {
+        type: Number,
+        default: 4
+      },
+      // 显示模式
+      // box -> 盒子 bottomLine -> 底部横线 middleLine -> 中间横线
+      mode: {
+        type: String,
+        default: 'box'
+      },
+      // 用圆点填充空白位置
+      dotFill: {
+        type: Boolean,
+        default: false
+      },
+      // 字体加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 字体大小
+      fontSize: {
+        type: [String, Number],
+        default: ''
+      },
+      // 激活时颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 未激活时颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 输入框宽度，单位rpx
+      inputWidth: {
+        type: Number,
+        default: 80
+      },
+      // 当前激活的item带呼吸效果
+      breathe: {
+        type: Boolean,
+        default: true
+      },
+      // 自动获取焦点
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可
+      disabledKeyboard: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 拆分要显示的字符
+      charArr() {
+        return this.valueModel.split('')
+      },
+      // 当前输入字符的长度
+      charArrLength() {
+        return this.charArr.length
+      },
+      // 输入框的个数
+      loopCharArr() {
+        return new Array(this.maxLength)
+      },
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          style.fontWeight = this.bold ? 'bold' : 'normal'
+          if (this.fontSize) {
+            style.fontSize = this.fontSize + 'rpx'
+          }
+          if (this.inputWidth) {
+            style.width = this.inputWidth + 'rpx'
+            style.height = this.inputWidth + 'rpx'
+            style.lineHeight = this.inputWidth + 'rpx'
+          }
+          if (this.inactiveColor) {
+            style.color = this.inactiveColor
+            style.borderColor = this.inactiveColor
+          }
+          if (this.mode === 'box' && this.charArrLength === index) {
+            style.borderColor = this.activeColor
+          }
+          return style
+        }
+      },
+      placeholderLineStyle() {
+        return (index) => {
+          let style = {}
+          style.display = this.charArrLength === index ? 'block' : 'none'
+          if (this.inputWidth) {
+            style.height = (this.inputWidth * 0.5) + 'rpx'
+          }
+          return style
+        }
+      },
+      lineStyle() {
+        return (index) => {
+          let style = {}
+          if (this.inactiveColor) {
+            style.backgroundColor = this.inactiveColor
+          }
+          if (this.charArrLength === index && this.activeColor) {
+            style.backgroundColor = this.activeColor
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          // 转换为字符串
+          val = String(val)
+          // 截掉超出的部分
+          this.valueModel = val.substring(0, this.maxLength)
+        },
+        immediate: true
+      }
+    },
+    data() {
+      return {
+        valueModel: ''
+      }
+    },
+    methods: {
+      // 获取填写的值
+      getValue(e) {
+        const {
+          value
+        } = e.detail
+        this.valueModel = value
+        // 判断输入的长度是否超出了maxlength的值
+        if (String(value).length > this.maxLength) return
+        // 未达到maxlength之前，触发change事件，否则触发finish事件
+        this.$emit('change', value)
+        this.$emit('input', value)
+        if (String(value).length == this.maxLength) {
+          this.$emit('finish', value)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-verification-code {
+    text-align: center;
+    
+    .tn-code {
+      &__container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        position: relative;
+      }
+      
+      &__input {
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 200%;
+        height: 100%;
+        text-align: left;
+        z-index: 9;
+        opacity: 0;
+        background: none;
+      }
+      
+      &__item {
+        position: relative;
+        width: 80rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin: 10rpx 10rpx;
+        font-size: 60rpx;
+        font-weight: bold;
+        color: #838383;
+        
+        &--breathe {
+          animation: breathe 2s infinite ease;
+        }
+        
+        &__box {
+          border: 2rpx solid #AAAAAA;
+          border-radius: 6rpx;
+          
+          &--active {
+            animation-timing-function: ease-in-out;
+            animation-duration: 1500ms;
+            animation-iteration-count: infinite;
+            animation-direction: alternate;
+            overflow: hidden;
+            border: 2rpx solid #01BEFF;
+          }
+        }
+        
+        &__line {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: #AAAAAA;
+          
+          &--bold {
+            height: 4px !important;
+          }
+          
+          &--placeholder {
+            display: none;
+            width: 2rpx;
+            height: 40rpx;
+          }
+          
+          &--middle, &--bottom {
+            width: 80%;
+            height: 2px;
+            border-radius: 2px;
+          }
+          &--bottom {
+            top: auto !important;
+            bottom: 0;
+            transform: translateX(-50%) !important;
+          }
+          
+          &--active {
+            background-color: #01BEFF !important;
+          }
+        }
+        
+        &__dot {
+          font-size: 34rpx;
+          line-height: 34rpx;
+        }
+      }
+    }
+  }
+  
+  @keyframes breathe {
+    0% {
+      opacity: 0.3;
+    }
+    
+    50% {
+      opacity: 1;
+    }
+    
+    100% {
+      opacity: 0.3;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-verification-code/tn-verification-code.vue b/tuniao-ui/components/tn-verification-code/tn-verification-code.vue
new file mode 100644
index 0000000..9076ce4
--- /dev/null
+++ b/tuniao-ui/components/tn-verification-code/tn-verification-code.vue
@@ -0,0 +1,149 @@
+<template>
+  <view class="tn-code-class tn-code">
+    
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-verification-code',
+    props: {
+      // 倒计时总秒数
+      seconds: {
+        type: Number,
+        default: 60
+      },
+      // 开始时提示文字
+      startText: {
+        type: String,
+        default: '获取验证码'
+      },
+      // 倒计时提示文字
+      countDownText: {
+        type: String,
+        default: 's秒后重新获取'
+      },
+      // 结束时提示文字
+      endText: {
+        type: String,
+        default: '重新获取'
+      },
+      // 是否在H5刷新或各端返回再进入时继续倒计时
+      keepRunning: {
+      	type: Boolean,
+      	default: false
+      },
+      // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+      uniqueKey: {
+      	type: String,
+      	default: ''
+      }
+    },
+    data() {
+      return {
+        timer: null,
+        secNum: this.seconds,
+        // 是否可以执行验证码操作
+        canGetCode: true
+      }
+    },
+    watch: {
+      seconds: {
+        handler(n) {
+          this.secNum = n
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      this.checkKeepRunning()
+    },
+    beforeDestroy() {
+      this.setTimeToStorage()
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    methods: {
+      // 检查是否继续运行
+      checkKeepRunning() {
+        // 获取上一次退出页面时的时间戳，如果没有上次保存，该值为空
+        let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$tCountDownTimestamp'))
+        if (!lastTimestamp) return this.changeEvent(this.startText)
+        // 当前秒的时间戳
+        // + new Date() 相当于 new Date().getTime()
+        let nowTimestamp = Math.floor((+ new Date()) / 1000)
+        // 判断当前的时间戳，是否小于上一次的设定结束的时间，提前于结束的时间戳
+        if (this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+          // 剩余尚未执行完倒计时秒数
+          this.secNum = lastTimestamp - nowTimestamp
+          // 清除本地保存的变量
+          uni.removeStorageSync(this.uniqueKey + '_$tCountDownTimestamp')
+          // 开始倒计时
+          this.start()
+        } else {
+          // 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+          this.changeEvent(this.startText);
+        }
+      },
+      // 开始倒计时
+      start() {
+        // 防止快速点击获取验证码按钮导致产生多个定时器导致混乱
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+        this.$emit('start')
+        this.canGetCode = false
+        
+        this.changeEvent(this.countDownText.replace(/s|S/, this.secNum))
+        this.setTimeToStorage()
+        this.timer = setInterval(() => {
+          if (--this.secNum) {
+            this.changeEvent(this.countDownText.replace(/s|S/, this.secNum))
+          } else {
+            // 倒计时结束，清空定时器、重置提示信息
+            this.reset()
+            this.$emit('end')
+          }
+        }, 1000)
+      },
+      // 重置倒计时
+      reset() {
+        this.canGetCode = true
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+        this.secNum = this.seconds
+        this.changeEvent(this.endText)
+      },
+      // 倒计时改变事件
+      changeEvent(text) {
+        this.$emit('change', text)
+      },
+      // 保存当前时间戳
+      // 防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+      setTimeToStorage() {
+        if (!this.keepRunning ||!this.timer) return
+        // 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+        // 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+        if (this.secNum > 0 && this.secNum <= this.seconds) {
+          let nowTimestamp = Math.floor((+ new Date()) / 1000)
+          // 保存本次倒计时结束时候的时间戳
+          uni.setStorageSync(this.uniqueKey + '_$tCountDownTimestamp', nowTimestamp + this.secNum)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-code {
+    width: 0;
+    height: 0;
+    position: fixed;
+    z-index: -1;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-waterfall/tn-waterfall.vue b/tuniao-ui/components/tn-waterfall/tn-waterfall.vue
new file mode 100644
index 0000000..827be0e
--- /dev/null
+++ b/tuniao-ui/components/tn-waterfall/tn-waterfall.vue
@@ -0,0 +1,165 @@
+<template>
+  <view class="tn-waterfall-class tn-waterfall">
+    <view id="tn-waterfall-left" class="tn-waterfall__column"><slot name="left" :leftList="leftList"></slot></view>
+    <view id="tn-waterfall-right" class="tn-waterfall__column"><slot name="right" :rightList="rightList"></slot></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-waterfall',
+    props: {
+      // 瀑布流数据
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 数据的id值，根据id值对数据执行删除操作
+      // 如数据为：{id: 1, name: 'tuniao'}，那么该值设置为id
+      idKey: {
+        type: String,
+        default: 'id'
+      },
+      // 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好
+      // 单位ms
+      addTime: {
+        type: Number,
+        default: 200
+      }
+    },
+    computed: {
+      // 破坏value变量引用，否则数据会保持不变
+      copyValue() {
+        return this.cloneData(this.value)
+      }
+    },
+    watch: {
+      copyValue(nVal, oVal) {
+        // 取出数组发生变化的部分
+        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
+        // 拼接原有数据
+        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)))
+        this.splitData()
+      }
+    },
+    data() {
+      return {
+        // 左列表
+        leftList: [],
+        // 右列表
+        rightList: [],
+        // 临时列表
+        tempList: []
+      }
+    },
+    mounted() {
+      this.tempList = this.cloneData(this.copyValue)
+      this.splitData()
+    },
+    methods: {
+      // 拆分数据
+      async splitData() {
+        if (!this.tempList.length) return
+        
+        let leftRect = await this._tGetRect('#tn-waterfall-left')
+        let rightRect = await this._tGetRect('#tn-waterfall-right')
+        
+        let item = this.tempList[0]
+        // 因为经过上面两个await节点查询和定时器，数组有可能会变成空[]，导致item的值为undefined
+        // 解决多次快速滚动会导致数据乱的问题
+        if (!item) return
+        
+        // 如果左边小于或者等于右边，就添加到左边，否则添加到右边
+        if (leftRect.height < rightRect.height) {
+          this.leftList.push(item)
+        } else if (leftRect.height > rightRect.height) {
+          this.rightList.push(item)
+        } else {
+          // 为了保证前两项添加时，左右两边都还没有内容，这时候根据队列长度判断下一项该放在哪一边
+          if (this.leftList.length <= this.rightList.length) {
+            this.leftList.push(item)
+          } else {
+            this.rightList.push(item)
+          }
+        }
+        
+        // 移除临时数组中已处理的数据
+        this.tempList.splice(0, 1)
+        // 如果还有数据则继续执行
+        if (this.tempList.length) {
+          setTimeout(() => {
+            this.splitData()
+          }, this.addTime)
+        } else {
+          this.$emit('finish')
+        }
+      },
+      // 复制对象和数组（深度复制不会影响原对象和数组）
+      cloneData(data) {
+        return JSON.parse(JSON.stringify(data))
+      },
+      // 清空数据列表
+      clear() {
+        this.leftList = []
+        this.rightList = []
+        this.$emit('input', [])
+        this.tempList = []
+      },
+      // 清除指定的某一条数据，根据id来实现
+      remove(id) {
+        // 如果查找不到就返回-1
+        let index = -1
+        index = this.leftList.findIndex(val => val[this.idKey] == id)
+        if (index != -1) {
+          // 如果index不等于-1，说明已经找到了指定的数据
+          this.leftList.splice(index, 1)
+        } else {
+          // 同理于上面的方法
+          index = this.rightList.findIndex(val => val[this.idKey] == id)
+          if (index != -1) this.rightList.splice(index, 1)
+        }
+        // 同时删除父组件对应的数据
+        index = this.value.findIndex(val => val[this.idKey] == id)
+        if (index != -1) this.$emit('input', this.value.splice(index, 1))
+      },
+      // 修改指定数据的属性
+      modify(id, key, value) {
+        // 如果查找不到就返回-1
+        let index = -1
+        index = this.leftList.findIndex(val => val[this.idKey] == id)
+        if (index != -1) {
+          // 如果index不等于-1，说明已经找到了指定的数据
+          this.leftList[index][key] = value
+        } else {
+          // 同理于上面的方法
+          index = this.rightList.findIndex(val => val[this.idKey] == id)
+          if (index != -1) this.rightList[index][key] = value
+        }
+        // 同时删除父组件对应的数据
+        index = this.value.findIndex(val => val[this.idKey] == id)
+        if(index != -1) {
+          let data = this.cloneData(this.value)
+          data[index][key] = value
+          this.$emit('input', data)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-waterfall {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    
+    &__column {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: auto;
+    }
+  }
+</style>
diff --git a/tuniao-ui/iconfont.css b/tuniao-ui/iconfont.css
new file mode 100644
index 0000000..fa4bc39
--- /dev/null
+++ b/tuniao-ui/iconfont.css
@@ -0,0 +1,2969 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "tuniaoFont"; /* Project id 3063751 */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3063751_n73ve3v0qjd.woff?t=1687008660360') format('woff'),
+       url('//at.alicdn.com/t/c/font_3063751_n73ve3v0qjd.ttf?t=1687008660360') format('truetype');
+}
+
+[class*='tn-icon-'] {
+  font-family: 'tuniaoFont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  text-align: center;
+  text-decoration: none;
+}
+
+.tn-icon-arrivals:before {
+  content: "\ea27";
+}
+
+.tn-icon-departures:before {
+  content: "\ea28";
+}
+
+.tn-icon-parking:before {
+  content: "\ea26";
+}
+
+.tn-icon-fireworks:before {
+  content: "\ea25";
+}
+
+.tn-icon-cloud-fill:before {
+  content: "\ea23";
+}
+
+.tn-icon-cloud:before {
+  content: "\ea24";
+}
+
+.tn-icon-snowflake:before {
+  content: "\e949";
+}
+
+.tn-icon-prohibit:before {
+  content: "\ea22";
+}
+
+.tn-icon-honeycomb-fill:before {
+  content: "\ea20";
+}
+
+.tn-icon-honeycomb:before {
+  content: "\ea21";
+}
+
+.tn-icon-starry:before {
+  content: "\ea1e";
+}
+
+.tn-icon-vscode:before {
+  content: "\ea1f";
+}
+
+.tn-icon-tips-fill:before {
+  content: "\ea1b";
+}
+
+.tn-icon-tip:before {
+  content: "\ea1c";
+}
+
+.tn-icon-tips:before {
+  content: "\ea1d";
+}
+
+.tn-icon-write-feather-fill:before {
+  content: "\ea19";
+}
+
+.tn-icon-write-feather:before {
+  content: "\ea1a";
+}
+
+.tn-icon-eat:before {
+  content: "\e98b";
+}
+
+.tn-icon-eat-fill:before {
+  content: "\e98c";
+}
+
+.tn-icon-eat-west:before {
+  content: "\ea0f";
+}
+
+.tn-icon-eat-west-fill:before {
+  content: "\ea10";
+}
+
+.tn-icon-eat-other:before {
+  content: "\ea11";
+}
+
+.tn-icon-eat-other-fill:before {
+  content: "\ea12";
+}
+
+.tn-icon-food-fill:before {
+  content: "\ea13";
+}
+
+.tn-icon-food:before {
+  content: "\ea14";
+}
+
+.tn-icon-folder-reduce:before {
+  content: "\ea15";
+}
+
+.tn-icon-folder-add-fill:before {
+  content: "\ea16";
+}
+
+.tn-icon-folder-reduce-fill:before {
+  content: "\ea17";
+}
+
+.tn-icon-folder-add:before {
+  content: "\ea18";
+}
+
+.tn-icon-fold:before {
+  content: "\ea0d";
+}
+
+.tn-icon-unfold:before {
+  content: "\ea0e";
+}
+
+.tn-icon-refresh-simple:before {
+  content: "\ea0c";
+}
+
+.tn-icon-assign-fill:before {
+  content: "\ea0a";
+}
+
+.tn-icon-assign:before {
+  content: "\ea0b";
+}
+
+.tn-icon-praise-simple:before {
+  content: "\ea06";
+}
+
+.tn-icon-praise-simple-fill:before {
+  content: "\ea07";
+}
+
+.tn-icon-tread-simple-fill:before {
+  content: "\ea08";
+}
+
+.tn-icon-tread-simple:before {
+  content: "\ea09";
+}
+
+.tn-icon-fish:before {
+  content: "\ea05";
+}
+
+.tn-icon-pushpin-fill:before {
+  content: "\ea03";
+}
+
+.tn-icon-pushpin:before {
+  content: "\ea04";
+}
+
+.tn-icon-equal:before {
+  content: "\ea00";
+}
+
+.tn-icon-equal-fill:before {
+  content: "\ea01";
+}
+
+.tn-icon-totop-simple:before {
+  content: "\ea02";
+}
+
+.tn-icon-floral-fill:before {
+  content: "\e9fe";
+}
+
+.tn-icon-floral:before {
+  content: "\e9ff";
+}
+
+.tn-icon-my-job:before {
+  content: "\e9f9";
+}
+
+.tn-icon-my-job-fill:before {
+  content: "\e9fa";
+}
+
+.tn-icon-my-formal:before {
+  content: "\e9fb";
+}
+
+.tn-icon-my-formal-fill:before {
+  content: "\e9fc";
+}
+
+.tn-icon-history:before {
+  content: "\e9fd";
+}
+
+.tn-icon-seafox:before {
+  content: "\e9f8";
+}
+
+.tn-icon-norm-fill:before {
+  content: "\e9f6";
+}
+
+.tn-icon-norm:before {
+  content: "\e9f7";
+}
+
+.tn-icon-cargoship:before {
+  content: "\e9f5";
+}
+
+.tn-icon-menu-grille-fill:before {
+  content: "\e9f3";
+}
+
+.tn-icon-menu-grille:before {
+  content: "\e9f4";
+}
+
+.tn-icon-piggy-bank:before {
+  content: "\e9ef";
+}
+
+.tn-icon-skull-fill:before {
+  content: "\e9f0";
+}
+
+.tn-icon-skull:before {
+  content: "\e9f1";
+}
+
+.tn-icon-piggy-bank-fill:before {
+  content: "\e9f2";
+}
+
+.tn-icon-next-song:before {
+  content: "\e9eb";
+}
+
+.tn-icon-previous-song:before {
+  content: "\e9ec";
+}
+
+.tn-icon-previous-song-fill:before {
+  content: "\e9ed";
+}
+
+.tn-icon-next-song-fill:before {
+  content: "\e9ee";
+}
+
+.tn-icon-ai:before {
+  content: "\e9e9";
+}
+
+.tn-icon-ai-fill:before {
+  content: "\e9ea";
+}
+
+.tn-icon-headset-fill:before {
+  content: "\e9e8";
+}
+
+.tn-icon-reduce-rhombus-fill:before {
+  content: "\e9e6";
+}
+
+.tn-icon-reduce-rhombus:before {
+  content: "\e9e7";
+}
+
+.tn-icon-umbrella-fill:before {
+  content: "\e9a1";
+}
+
+.tn-icon-footprint-fill:before {
+  content: "\e992";
+}
+
+.tn-icon-folder:before {
+  content: "\e9df";
+}
+
+.tn-icon-folder-fill:before {
+  content: "\e9e0";
+}
+
+.tn-icon-folder-download-fill:before {
+  content: "\e9e1";
+}
+
+.tn-icon-pyramid:before {
+  content: "\e9e2";
+}
+
+.tn-icon-folder-upload:before {
+  content: "\e9e3";
+}
+
+.tn-icon-folder-download:before {
+  content: "\e9e4";
+}
+
+.tn-icon-folder-upload-fill:before {
+  content: "\e9e5";
+}
+
+.tn-icon-hotspot:before {
+  content: "\e9dc";
+}
+
+.tn-icon-router:before {
+  content: "\e9dd";
+}
+
+.tn-icon-router-fill:before {
+  content: "\e9de";
+}
+
+.tn-icon-menu-rhombus:before {
+  content: "\e9da";
+}
+
+.tn-icon-menu-rhombus-fill:before {
+  content: "\e9db";
+}
+
+.tn-icon-plane-fill:before {
+  content: "\e9d8";
+}
+
+.tn-icon-plane:before {
+  content: "\e9d9";
+}
+
+.tn-icon-spiral:before {
+  content: "\e9d2";
+}
+
+.tn-icon-lotus:before {
+  content: "\e9d3";
+}
+
+.tn-icon-koi:before {
+  content: "\e9d4";
+}
+
+.tn-icon-koi-fill:before {
+  content: "\e9d5";
+}
+
+.tn-icon-add-rhombus-fill:before {
+  content: "\e9d6";
+}
+
+.tn-icon-add-rhombus:before {
+  content: "\e9d7";
+}
+
+.tn-icon-bookmark:before {
+  content: "\e9ce";
+}
+
+.tn-icon-bookmark-fill:before {
+  content: "\e9cf";
+}
+
+.tn-icon-refresh:before {
+  content: "\e9d0";
+}
+
+.tn-icon-refresh-square:before {
+  content: "\e9d1";
+}
+
+.tn-icon-tread-fill:before {
+  content: "\e9cb";
+}
+
+.tn-icon-audio:before {
+  content: "\e9cc";
+}
+
+.tn-icon-tread:before {
+  content: "\e9cd";
+}
+
+.tn-icon-play:before {
+  content: "\e9c8";
+}
+
+.tn-icon-video-square:before {
+  content: "\e9c9";
+}
+
+.tn-icon-video-square-fill:before {
+  content: "\e9ca";
+}
+
+.tn-icon-inventory-fill:before {
+  content: "\e9c3";
+}
+
+.tn-icon-percent-fill:before {
+  content: "\e9c4";
+}
+
+.tn-icon-percent:before {
+  content: "\e9c5";
+}
+
+.tn-icon-inventory:before {
+  content: "\e9c6";
+}
+
+.tn-icon-activity:before {
+  content: "\e9c7";
+}
+
+.tn-icon-qr-code-circle:before {
+  content: "\e9c2";
+}
+
+.tn-icon-task-fill:before {
+  content: "\e9c0";
+}
+
+.tn-icon-task:before {
+  content: "\e9c1";
+}
+
+.tn-icon-text-best:before {
+  content: "\e9be";
+}
+
+.tn-icon-text-free:before {
+  content: "\e9bf";
+}
+
+.tn-icon-text-zgs:before {
+  content: "\e8ff";
+}
+
+.tn-icon-text-xzx:before {
+  content: "\e9ba";
+}
+
+.tn-icon-text-like:before {
+  content: "\e9bb";
+}
+
+.tn-icon-text-sale:before {
+  content: "\e9bc";
+}
+
+.tn-icon-text-hot:before {
+  content: "\e9bd";
+}
+
+.tn-icon-home-leaf:before {
+  content: "\e9b8";
+}
+
+.tn-icon-home-leaf-fill:before {
+  content: "\e9b9";
+}
+
+.tn-icon-service-simple-fill:before {
+  content: "\e9b6";
+}
+
+.tn-icon-service-simple:before {
+  content: "\e9b7";
+}
+
+.tn-icon-meteor-fill:before {
+  content: "\e9b4";
+}
+
+.tn-icon-meteor:before {
+  content: "\e9b5";
+}
+
+.tn-icon-dice-five:before {
+  content: "\e9ae";
+}
+
+.tn-icon-dice-one:before {
+  content: "\e9af";
+}
+
+.tn-icon-dice-three:before {
+  content: "\e9b0";
+}
+
+.tn-icon-dice-six:before {
+  content: "\e9b1";
+}
+
+.tn-icon-dice-four:before {
+  content: "\e9b2";
+}
+
+.tn-icon-dice-two:before {
+  content: "\e9b3";
+}
+
+.tn-icon-theme-fill:before {
+  content: "\e938";
+}
+
+.tn-icon-theme:before {
+  content: "\e9ad";
+}
+
+.tn-icon-download-simple:before {
+  content: "\e9ab";
+}
+
+.tn-icon-upload-simple:before {
+  content: "\e9ac";
+}
+
+.tn-icon-on:before {
+  content: "\e9a9";
+}
+
+.tn-icon-off:before {
+  content: "\e9aa";
+}
+
+.tn-icon-my-circle:before {
+  content: "\e9a7";
+}
+
+.tn-icon-my-circle-fill:before {
+  content: "\e9a8";
+}
+
+.tn-icon-temperature-f:before {
+  content: "\e9a5";
+}
+
+.tn-icon-temperature-c:before {
+  content: "\e9a6";
+}
+
+.tn-icon-sunrise:before {
+  content: "\e9a3";
+}
+
+.tn-icon-sunset:before {
+  content: "\e9a4";
+}
+
+.tn-icon-password:before {
+  content: "\e9a0";
+}
+
+.tn-icon-umbrella:before {
+  content: "\e9a2";
+}
+
+.tn-icon-unite:before {
+  content: "\e999";
+}
+
+.tn-icon-unite-fill:before {
+  content: "\e99a";
+}
+
+.tn-icon-global:before {
+  content: "\e99b";
+}
+
+.tn-icon-reload-home:before {
+  content: "\e99c";
+}
+
+.tn-icon-reload-planet:before {
+  content: "\e99d";
+}
+
+.tn-icon-reload-home-fill:before {
+  content: "\e99e";
+}
+
+.tn-icon-reload-planet-fill:before {
+  content: "\e99f";
+}
+
+.tn-icon-route:before {
+  content: "\e997";
+}
+
+.tn-icon-route-fill:before {
+  content: "\e998";
+}
+
+.tn-icon-my-simple-fill:before {
+  content: "\e98e";
+}
+
+.tn-icon-my-simple:before {
+  content: "\e98f";
+}
+
+.tn-icon-around-fill:before {
+  content: "\e990";
+}
+
+.tn-icon-around:before {
+  content: "\e991";
+}
+
+.tn-icon-footprint:before {
+  content: "\e993";
+}
+
+.tn-icon-my-lack-fill:before {
+  content: "\e994";
+}
+
+.tn-icon-my-lack:before {
+  content: "\e995";
+}
+
+.tn-icon-bigscreen:before {
+  content: "\e996";
+}
+
+.tn-icon-escalator:before {
+  content: "\e98d";
+}
+
+.tn-icon-suitcase:before {
+  content: "\e989";
+}
+
+.tn-icon-suitcase-fill:before {
+  content: "\e98a";
+}
+
+.tn-icon-add-square-fill:before {
+  content: "\e904";
+}
+
+.tn-icon-cute:before {
+  content: "\e988";
+}
+
+.tn-icon-compress:before {
+  content: "\e96e";
+}
+
+.tn-icon-expend:before {
+  content: "\e96f";
+}
+
+.tn-icon-windows:before {
+  content: "\e970";
+}
+
+.tn-icon-trademark:before {
+  content: "\e971";
+}
+
+.tn-icon-tailor:before {
+  content: "\e972";
+}
+
+.tn-icon-move:before {
+  content: "\e973";
+}
+
+.tn-icon-pillow:before {
+  content: "\e974";
+}
+
+.tn-icon-bathtub:before {
+  content: "\e975";
+}
+
+.tn-icon-buy:before {
+  content: "\e976";
+}
+
+.tn-icon-buy-fill:before {
+  content: "\e977";
+}
+
+.tn-icon-allday:before {
+  content: "\e978";
+}
+
+.tn-icon-home-love-fill:before {
+  content: "\e979";
+}
+
+.tn-icon-home-love:before {
+  content: "\e97a";
+}
+
+.tn-icon-gesture-two:before {
+  content: "\e97b";
+}
+
+.tn-icon-gesture-four:before {
+  content: "\e97c";
+}
+
+.tn-icon-gesture-five:before {
+  content: "\e97d";
+}
+
+.tn-icon-gesture-one:before {
+  content: "\e97e";
+}
+
+.tn-icon-gesture-three:before {
+  content: "\e97f";
+}
+
+.tn-icon-gesture-dropdown:before {
+  content: "\e980";
+}
+
+.tn-icon-plant-fill:before {
+  content: "\e981";
+}
+
+.tn-icon-plant:before {
+  content: "\e982";
+}
+
+.tn-icon-pillow-fill:before {
+  content: "\e983";
+}
+
+.tn-icon-bathtub-fill:before {
+  content: "\e984";
+}
+
+.tn-icon-wheelchair:before {
+  content: "\e985";
+}
+
+.tn-icon-narrow-all:before {
+  content: "\e986";
+}
+
+.tn-icon-fullscreen-all:before {
+  content: "\e987";
+}
+
+.tn-icon-close-square-fill:before {
+  content: "\e945";
+}
+
+.tn-icon-add-square:before {
+  content: "\e962";
+}
+
+.tn-icon-close-square:before {
+  content: "\e963";
+}
+
+.tn-icon-my-reduce:before {
+  content: "\e964";
+}
+
+.tn-icon-square-fill:before {
+  content: "\e965";
+}
+
+.tn-icon-pay-fill:before {
+  content: "\e966";
+}
+
+.tn-icon-commissary:before {
+  content: "\e967";
+}
+
+.tn-icon-commissary-fill:before {
+  content: "\e968";
+}
+
+.tn-icon-notice-no-fill:before {
+  content: "\e969";
+}
+
+.tn-icon-cross-fill:before {
+  content: "\e96a";
+}
+
+.tn-icon-nintendo-switch:before {
+  content: "\e96b";
+}
+
+.tn-icon-mammoth:before {
+  content: "\e96c";
+}
+
+.tn-icon-open:before {
+  content: "\e96d";
+}
+
+.tn-icon-bed-fill:before {
+  content: "\e916";
+}
+
+.tn-icon-bed:before {
+  content: "\e961";
+}
+
+.tn-icon-menu-flex-fill:before {
+  content: "\e956";
+}
+
+.tn-icon-menu-flex:before {
+  content: "\e957";
+}
+
+.tn-icon-logistics-fill:before {
+  content: "\e958";
+}
+
+.tn-icon-ghost-fill:before {
+  content: "\e959";
+}
+
+.tn-icon-keyboard-circle-fill:before {
+  content: "\e95a";
+}
+
+.tn-icon-brand-fill:before {
+  content: "\e95b";
+}
+
+.tn-icon-clear-fill:before {
+  content: "\e95c";
+}
+
+.tn-icon-mouse-fill:before {
+  content: "\e95d";
+}
+
+.tn-icon-brand:before {
+  content: "\e95e";
+}
+
+.tn-icon-monitor-fill:before {
+  content: "\e95f";
+}
+
+.tn-icon-covid-19-fill:before {
+  content: "\e960";
+}
+
+.tn-icon-install-fill:before {
+  content: "\e936";
+}
+
+.tn-icon-install:before {
+  content: "\e955";
+}
+
+.tn-icon-restroom-female:before {
+  content: "\e953";
+}
+
+.tn-icon-restroom-male:before {
+  content: "\e954";
+}
+
+.tn-icon-first:before {
+  content: "\e950";
+}
+
+.tn-icon-third:before {
+  content: "\e951";
+}
+
+.tn-icon-second:before {
+  content: "\e952";
+}
+
+.tn-icon-ninja:before {
+  content: "\e94b";
+}
+
+.tn-icon-program:before {
+  content: "\e94c";
+}
+
+.tn-icon-program-fill:before {
+  content: "\e94d";
+}
+
+.tn-icon-circle-more:before {
+  content: "\e94e";
+}
+
+.tn-icon-windmill:before {
+  content: "\e94f";
+}
+
+.tn-icon-alien:before {
+  content: "\e946";
+}
+
+.tn-icon-taichi:before {
+  content: "\e947";
+}
+
+.tn-icon-knot:before {
+  content: "\e948";
+}
+
+.tn-icon-whale:before {
+  content: "\e94a";
+}
+
+.tn-icon-dragon:before {
+  content: "\e944";
+}
+
+.tn-icon-home-in-fill:before {
+  content: "\e942";
+}
+
+.tn-icon-home-in:before {
+  content: "\e943";
+}
+
+.tn-icon-home-loading:before {
+  content: "\e940";
+}
+
+.tn-icon-home-loading-fill:before {
+  content: "\e941";
+}
+
+.tn-icon-cell:before {
+  content: "\e93b";
+}
+
+.tn-icon-loading:before {
+  content: "\e93c";
+}
+
+.tn-icon-orange:before {
+  content: "\e93d";
+}
+
+.tn-icon-bigbug:before {
+  content: "\e93e";
+}
+
+.tn-icon-dinosaur:before {
+  content: "\e93f";
+}
+
+.tn-icon-dna:before {
+  content: "\e931";
+}
+
+.tn-icon-chain:before {
+  content: "\e932";
+}
+
+.tn-icon-email:before {
+  content: "\e933";
+}
+
+.tn-icon-education:before {
+  content: "\e934";
+}
+
+.tn-icon-english:before {
+  content: "\e935";
+}
+
+.tn-icon-seal:before {
+  content: "\e937";
+}
+
+.tn-icon-book:before {
+  content: "\e939";
+}
+
+.tn-icon-email-fill:before {
+  content: "\e93a";
+}
+
+.tn-icon-maths:before {
+  content: "\e92f";
+}
+
+.tn-icon-molecule:before {
+  content: "\e930";
+}
+
+.tn-icon-ghost:before {
+  content: "\e92d";
+}
+
+.tn-icon-money-fill:before {
+  content: "\e92e";
+}
+
+.tn-icon-menu-alone:before {
+  content: "\e929";
+}
+
+.tn-icon-menu-alone-fill:before {
+  content: "\e92a";
+}
+
+.tn-icon-tree:before {
+  content: "\e92b";
+}
+
+.tn-icon-rabbit:before {
+  content: "\e92c";
+}
+
+.tn-icon-block-fill:before {
+  content: "\e925";
+}
+
+.tn-icon-block:before {
+  content: "\e926";
+}
+
+.tn-icon-menu-classify:before {
+  content: "\e927";
+}
+
+.tn-icon-menu-classify-fill:before {
+  content: "\e928";
+}
+
+.tn-icon-home-totop-fill:before {
+  content: "\e923";
+}
+
+.tn-icon-home-totop:before {
+  content: "\e924";
+}
+
+.tn-icon-petal:before {
+  content: "\e920";
+}
+
+.tn-icon-clover-fill:before {
+  content: "\e921";
+}
+
+.tn-icon-clover:before {
+  content: "\e922";
+}
+
+.tn-icon-heartbeat:before {
+  content: "\e917";
+}
+
+.tn-icon-paperbag:before {
+  content: "\e918";
+}
+
+.tn-icon-paperbag-fill:before {
+  content: "\e919";
+}
+
+.tn-icon-menu-match:before {
+  content: "\e91a";
+}
+
+.tn-icon-menu-match-fill:before {
+  content: "\e91b";
+}
+
+.tn-icon-sofa-fill:before {
+  content: "\e91c";
+}
+
+.tn-icon-fullscreen:before {
+  content: "\e91d";
+}
+
+.tn-icon-narrow:before {
+  content: "\e91e";
+}
+
+.tn-icon-smallscreen:before {
+  content: "\e91f";
+}
+
+.tn-icon-payment-wechat:before {
+  content: "\e90a";
+}
+
+.tn-icon-cursor:before {
+  content: "\e912";
+}
+
+.tn-icon-cursor-fill:before {
+  content: "\e913";
+}
+
+.tn-icon-check:before {
+  content: "\e914";
+}
+
+.tn-icon-payment-alipay:before {
+  content: "\e915";
+}
+
+.tn-icon-dashboard:before {
+  content: "\e90b";
+}
+
+.tn-icon-module:before {
+  content: "\e90c";
+}
+
+.tn-icon-at-sign:before {
+  content: "\e90d";
+}
+
+.tn-icon-copyright:before {
+  content: "\e90e";
+}
+
+.tn-icon-pin:before {
+  content: "\e90f";
+}
+
+.tn-icon-module-fill:before {
+  content: "\e910";
+}
+
+.tn-icon-dashboard-fill:before {
+  content: "\e911";
+}
+
+.tn-icon-birthday:before {
+  content: "\e905";
+}
+
+.tn-icon-sofa:before {
+  content: "\e906";
+}
+
+.tn-icon-iot:before {
+  content: "\e907";
+}
+
+.tn-icon-monitor:before {
+  content: "\e908";
+}
+
+.tn-icon-iot-fill:before {
+  content: "\e909";
+}
+
+.tn-icon-tabs-smile:before {
+  content: "\e900";
+}
+
+.tn-icon-huawei:before {
+  content: "\e901";
+}
+
+.tn-icon-iphone:before {
+  content: "\e902";
+}
+
+.tn-icon-tiktok:before {
+  content: "\e903";
+}
+
+.tn-icon-sword-fill:before {
+  content: "\e8fa";
+}
+
+.tn-icon-job-fill:before {
+  content: "\e8fb";
+}
+
+.tn-icon-rocket-fill:before {
+  content: "\e8fc";
+}
+
+.tn-icon-totop:before {
+  content: "\e8fd";
+}
+
+.tn-icon-totop-fill:before {
+  content: "\e8fe";
+}
+
+.tn-icon-logout:before {
+  content: "\e8f8";
+}
+
+.tn-icon-login:before {
+  content: "\e8f9";
+}
+
+.tn-icon-expand:before {
+  content: "\e8f7";
+}
+
+.tn-icon-bug:before {
+  content: "\e8e3";
+}
+
+.tn-icon-bug-fill:before {
+  content: "\e8e4";
+}
+
+.tn-icon-company-fill:before {
+  content: "\e8e5";
+}
+
+.tn-icon-edit-write-fill:before {
+  content: "\e8e6";
+}
+
+.tn-icon-menu-circle-fill:before {
+  content: "\e8e7";
+}
+
+.tn-icon-level-fill:before {
+  content: "\e8e8";
+}
+
+.tn-icon-menu-fill:before {
+  content: "\e8e9";
+}
+
+.tn-icon-science-fill:before {
+  content: "\e8ea";
+}
+
+.tn-icon-deploy-fill:before {
+  content: "\e8eb";
+}
+
+.tn-icon-menu-more-fill:before {
+  content: "\e8ec";
+}
+
+.tn-icon-search-menu-fill:before {
+  content: "\e8ed";
+}
+
+.tn-icon-organizatio-fill:before {
+  content: "\e8ee";
+}
+
+.tn-icon-platform-fill:before {
+  content: "\e8ef";
+}
+
+.tn-icon-platform:before {
+  content: "\e8f0";
+}
+
+.tn-icon-search-list-fill:before {
+  content: "\e8f1";
+}
+
+.tn-icon-menu-sort-fill:before {
+  content: "\e8f2";
+}
+
+.tn-icon-cube-fill:before {
+  content: "\e8f3";
+}
+
+.tn-icon-menu-sorts-fill:before {
+  content: "\e8f4";
+}
+
+.tn-icon-server-fill:before {
+  content: "\e8f5";
+}
+
+.tn-icon-menu-list-fill:before {
+  content: "\e8f6";
+}
+
+.tn-icon-errands:before {
+  content: "\e8df";
+}
+
+.tn-icon-errands-fill:before {
+  content: "\e8e0";
+}
+
+.tn-icon-delivery-fill:before {
+  content: "\e8e1";
+}
+
+.tn-icon-delivery:before {
+  content: "\e8e2";
+}
+
+.tn-icon-vip-text:before {
+  content: "\e8dc";
+}
+
+.tn-icon-panda:before {
+  content: "\e8dd";
+}
+
+.tn-icon-logo-shangpu:before {
+  content: "\e8de";
+}
+
+.tn-icon-mouse:before {
+  content: "\e8db";
+}
+
+.tn-icon-notebook-fill:before {
+  content: "\e8da";
+}
+
+.tn-icon-headset:before {
+  content: "\e8d8";
+}
+
+.tn-icon-shears:before {
+  content: "\e8d9";
+}
+
+.tn-icon-notebook:before {
+  content: "\e8d7";
+}
+
+.tn-icon-battery-empty:before {
+  content: "\e8d1";
+}
+
+.tn-icon-battery-low:before {
+  content: "\e8d2";
+}
+
+.tn-icon-battery-mid:before {
+  content: "\e8d3";
+}
+
+.tn-icon-battery-high:before {
+  content: "\e8d4";
+}
+
+.tn-icon-battery-full:before {
+  content: "\e8d5";
+}
+
+.tn-icon-bluetooth:before {
+  content: "\e8d6";
+}
+
+.tn-icon-science:before {
+  content: "\e8cf";
+}
+
+.tn-icon-clip:before {
+  content: "\e8d0";
+}
+
+.tn-icon-con-aquarius:before {
+  content: "\e8c2";
+}
+
+.tn-icon-con-pisces:before {
+  content: "\e8c3";
+}
+
+.tn-icon-con-aries:before {
+  content: "\e8c4";
+}
+
+.tn-icon-con-taurus:before {
+  content: "\e8c5";
+}
+
+.tn-icon-con-gemini:before {
+  content: "\e8c6";
+}
+
+.tn-icon-con-cancer:before {
+  content: "\e8c7";
+}
+
+.tn-icon-con-leo:before {
+  content: "\e8c8";
+}
+
+.tn-icon-con-virgo:before {
+  content: "\e8c9";
+}
+
+.tn-icon-con-libra:before {
+  content: "\e8ca";
+}
+
+.tn-icon-con-scorpio:before {
+  content: "\e8cb";
+}
+
+.tn-icon-con-sagittarius:before {
+  content: "\e8cc";
+}
+
+.tn-icon-con-apricorn:before {
+  content: "\e8cd";
+}
+
+.tn-icon-constellation:before {
+  content: "\e8ce";
+}
+
+.tn-icon-wea-cloud-more:before {
+  content: "\e8b9";
+}
+
+.tn-icon-wea-cloud:before {
+  content: "\e8ba";
+}
+
+.tn-icon-wea-cloud-sun:before {
+  content: "\e8bb";
+}
+
+.tn-icon-wea-rain:before {
+  content: "\e8bc";
+}
+
+.tn-icon-wea-rain-middle:before {
+  content: "\e8bd";
+}
+
+.tn-icon-wea-rain-heavy:before {
+  content: "\e8be";
+}
+
+.tn-icon-wea-snow:before {
+  content: "\e8bf";
+}
+
+.tn-icon-wea-wind:before {
+  content: "\e8c0";
+}
+
+.tn-icon-wea-sun:before {
+  content: "\e8c1";
+}
+
+.tn-icon-empty-data:before {
+  content: "\e8ab";
+}
+
+.tn-icon-empty-message:before {
+  content: "\e8ac";
+}
+
+.tn-icon-empty-cart:before {
+  content: "\e8ad";
+}
+
+.tn-icon-empty-history:before {
+  content: "\e8ae";
+}
+
+.tn-icon-empty-favor:before {
+  content: "\e8af";
+}
+
+.tn-icon-empty-list:before {
+  content: "\e8b0";
+}
+
+.tn-icon-empty-network:before {
+  content: "\e8b1";
+}
+
+.tn-icon-empty-search:before {
+  content: "\e8b2";
+}
+
+.tn-icon-empty-order:before {
+  content: "\e8b3";
+}
+
+.tn-icon-empty-comment:before {
+  content: "\e8b4";
+}
+
+.tn-icon-empty-coupon:before {
+  content: "\e8b5";
+}
+
+.tn-icon-empty-address:before {
+  content: "\e8b6";
+}
+
+.tn-icon-empty-permission:before {
+  content: "\e8b7";
+}
+
+.tn-icon-empty-page:before {
+  content: "\e8b8";
+}
+
+.tn-icon-job:before {
+  content: "\e8aa";
+}
+
+.tn-icon-rocket:before {
+  content: "\e8a5";
+}
+
+.tn-icon-sword:before {
+  content: "\e8a6";
+}
+
+.tn-icon-notice-no:before {
+  content: "\e8a7";
+}
+
+.tn-icon-notice-fill:before {
+  content: "\e8a8";
+}
+
+.tn-icon-notice:before {
+  content: "\e8a9";
+}
+
+.tn-icon-font:before {
+  content: "\e8a4";
+}
+
+.tn-icon-chemistry:before {
+  content: "\e8a3";
+}
+
+.tn-icon-biology:before {
+  content: "\e8a2";
+}
+
+.tn-icon-level:before {
+  content: "\e8a0";
+}
+
+.tn-icon-deploy:before {
+  content: "\e8a1";
+}
+
+.tn-icon-server:before {
+  content: "\e89f";
+}
+
+.tn-icon-cube:before {
+  content: "\e89e";
+}
+
+.tn-icon-organizatio:before {
+  content: "\e89d";
+}
+
+.tn-icon-company:before {
+  content: "\e89c";
+}
+
+.tn-icon-pharmacy:before {
+  content: "\e89b";
+}
+
+.tn-icon-medical:before {
+  content: "\e89a";
+}
+
+.tn-icon-my-add:before {
+  content: "\e898";
+}
+
+.tn-icon-my:before {
+  content: "\e897";
+}
+
+.tn-icon-my-fill:before {
+  content: "\e896";
+}
+
+.tn-icon-trust:before {
+  content: "\e895";
+}
+
+.tn-icon-trust-fill:before {
+  content: "\e894";
+}
+
+.tn-icon-moon:before {
+  content: "\e893";
+}
+
+.tn-icon-moon-fill:before {
+  content: "\e892";
+}
+
+.tn-icon-funds:before {
+  content: "\e891";
+}
+
+.tn-icon-funds-fill:before {
+  content: "\e890";
+}
+
+.tn-icon-signpost:before {
+  content: "\e88f";
+}
+
+.tn-icon-signpost-fill:before {
+  content: "\e88e";
+}
+
+.tn-icon-vip:before {
+  content: "\e88d";
+}
+
+.tn-icon-vip-fill:before {
+  content: "\e88c";
+}
+
+.tn-icon-hardware:before {
+  content: "\e88b";
+}
+
+.tn-icon-hardware-fill:before {
+  content: "\e88a";
+}
+
+.tn-icon-honor:before {
+  content: "\e889";
+}
+
+.tn-icon-honor-fill:before {
+  content: "\e888";
+}
+
+.tn-icon-count:before {
+  content: "\e887";
+}
+
+.tn-icon-count-fill:before {
+  content: "\e886";
+}
+
+.tn-icon-discover-planet:before {
+  content: "\e885";
+}
+
+.tn-icon-discover-planet-fill:before {
+  content: "\e884";
+}
+
+.tn-icon-discover:before {
+  content: "\e883";
+}
+
+.tn-icon-discover-fill:before {
+  content: "\e882";
+}
+
+.tn-icon-home:before {
+  content: "\e881";
+}
+
+.tn-icon-home-fill:before {
+  content: "\e880";
+}
+
+.tn-icon-home-vertical:before {
+  content: "\e87f";
+}
+
+.tn-icon-home-vertical-fill:before {
+  content: "\e87e";
+}
+
+.tn-icon-home-smile:before {
+  content: "\e87d";
+}
+
+.tn-icon-home-smile-fill:before {
+  content: "\e87c";
+}
+
+.tn-icon-home-capsule:before {
+  content: "\e87b";
+}
+
+.tn-icon-home-capsule-fill:before {
+  content: "\e87a";
+}
+
+.tn-icon-focus:before {
+  content: "\e878";
+}
+
+.tn-icon-all:before {
+  content: "\e877";
+}
+
+.tn-icon-assort-fill:before {
+  content: "\e876";
+}
+
+.tn-icon-assort:before {
+  content: "\e875";
+}
+
+.tn-icon-menu-list:before {
+  content: "\e874";
+}
+
+.tn-icon-menu-sorts:before {
+  content: "\e873";
+}
+
+.tn-icon-menu-sort:before {
+  content: "\e872";
+}
+
+.tn-icon-menu-more:before {
+  content: "\e871";
+}
+
+.tn-icon-menu:before {
+  content: "\e870";
+}
+
+.tn-icon-menu-circle:before {
+  content: "\e86f";
+}
+
+.tn-icon-search-menu:before {
+  content: "\e86e";
+}
+
+.tn-icon-search-list:before {
+  content: "\e86d";
+}
+
+.tn-icon-search:before {
+  content: "\e86c";
+}
+
+.tn-icon-link:before {
+  content: "\e86b";
+}
+
+.tn-icon-code:before {
+  content: "\e869";
+}
+
+.tn-icon-computer:before {
+  content: "\e868";
+}
+
+.tn-icon-computer-fill:before {
+  content: "\e867";
+}
+
+.tn-icon-ipad:before {
+  content: "\e866";
+}
+
+.tn-icon-ipad-fill:before {
+  content: "\e865";
+}
+
+.tn-icon-phone:before {
+  content: "\e864";
+}
+
+.tn-icon-phone-fill:before {
+  content: "\e863";
+}
+
+.tn-icon-tel:before {
+  content: "\e862";
+}
+
+.tn-icon-tel-circle-fill:before {
+  content: "\e860";
+}
+
+.tn-icon-tel-circle:before {
+  content: "\e861";
+}
+
+.tn-icon-watercup:before {
+  content: "\e85f";
+}
+
+.tn-icon-gloves-fill:before {
+  content: "\e85d";
+}
+
+.tn-icon-gloves:before {
+  content: "\e85e";
+}
+
+.tn-icon-covid-19:before {
+  content: "\e85c";
+}
+
+.tn-icon-sport-jog:before {
+  content: "\e858";
+}
+
+.tn-icon-sport-run:before {
+  content: "\e859";
+}
+
+.tn-icon-sport-swim:before {
+  content: "\e85a";
+}
+
+.tn-icon-sport-cycle:before {
+  content: "\e85b";
+}
+
+.tn-icon-airplane:before {
+  content: "\e857";
+}
+
+.tn-icon-train:before {
+  content: "\e855";
+}
+
+.tn-icon-steamship:before {
+  content: "\e856";
+}
+
+.tn-icon-bus:before {
+  content: "\e854";
+}
+
+.tn-icon-balancecar:before {
+  content: "\e853";
+}
+
+.tn-icon-electromobile:before {
+  content: "\e852";
+}
+
+.tn-icon-zodiac-zhu:before {
+  content: "\e851";
+}
+
+.tn-icon-zodiac-gou:before {
+  content: "\e850";
+}
+
+.tn-icon-zodiac-ji:before {
+  content: "\e84f";
+}
+
+.tn-icon-zodiac-hou:before {
+  content: "\e84e";
+}
+
+.tn-icon-zodiac-yang:before {
+  content: "\e84d";
+}
+
+.tn-icon-zodiac-ma:before {
+  content: "\e84c";
+}
+
+.tn-icon-zodiac-she:before {
+  content: "\e84b";
+}
+
+.tn-icon-zodiac-long:before {
+  content: "\e84a";
+}
+
+.tn-icon-zodiac-tu:before {
+  content: "\e849";
+}
+
+.tn-icon-zodiac-hu:before {
+  content: "\e848";
+}
+
+.tn-icon-zodiac-niu:before {
+  content: "\e847";
+}
+
+.tn-icon-zodiac-shu:before {
+  content: "\e846";
+}
+
+.tn-icon-lucky-money:before {
+  content: "\e844";
+}
+
+.tn-icon-lucky-money-fill:before {
+  content: "\e845";
+}
+
+.tn-icon-prize:before {
+  content: "\e842";
+}
+
+.tn-icon-gift:before {
+  content: "\e843";
+}
+
+.tn-icon-pay:before {
+  content: "\e841";
+}
+
+.tn-icon-refund:before {
+  content: "\e840";
+}
+
+.tn-icon-money:before {
+  content: "\e83f";
+}
+
+.tn-icon-power:before {
+  content: "\e83e";
+}
+
+.tn-icon-fingerprint:before {
+  content: "\e83d";
+}
+
+.tn-icon-qr-beibei:before {
+  content: "\e83c";
+}
+
+.tn-icon-qr-code:before {
+  content: "\e83b";
+}
+
+.tn-icon-qr-barcode:before {
+  content: "\e83a";
+}
+
+.tn-icon-scan:before {
+  content: "\e839";
+}
+
+.tn-icon-revoke:before {
+  content: "\e837";
+}
+
+.tn-icon-filter:before {
+  content: "\e838";
+}
+
+.tn-icon-upload:before {
+  content: "\e835";
+}
+
+.tn-icon-download:before {
+  content: "\e836";
+}
+
+.tn-icon-fork:before {
+  content: "\e832";
+}
+
+.tn-icon-relation:before {
+  content: "\e833";
+}
+
+.tn-icon-master:before {
+  content: "\e834";
+}
+
+.tn-icon-facebook:before {
+  content: "\e82e";
+}
+
+.tn-icon-google:before {
+  content: "\e82f";
+}
+
+.tn-icon-linkedin:before {
+  content: "\e830";
+}
+
+.tn-icon-twitter:before {
+  content: "\e831";
+}
+
+.tn-icon-logo-tuniao:before {
+  content: "\e82d";
+}
+
+.tn-icon-sina:before {
+  content: "\e82b";
+}
+
+.tn-icon-taobao:before {
+  content: "\e82c";
+}
+
+.tn-icon-gitee:before {
+  content: "\e82a";
+}
+
+.tn-icon-github:before {
+  content: "\e829";
+}
+
+.tn-icon-dingtalk:before {
+  content: "\e828";
+}
+
+.tn-icon-alipay:before {
+  content: "\e827";
+}
+
+.tn-icon-qq:before {
+  content: "\e826";
+}
+
+.tn-icon-moments:before {
+  content: "\e825";
+}
+
+.tn-icon-wechat:before {
+  content: "\e824";
+}
+
+.tn-icon-wechat-fill:before {
+  content: "\e823";
+}
+
+.tn-icon-service:before {
+  content: "\e821";
+}
+
+.tn-icon-service-fill:before {
+  content: "\e822";
+}
+
+.tn-icon-team:before {
+  content: "\e81f";
+}
+
+.tn-icon-team-fill:before {
+  content: "\e820";
+}
+
+.tn-icon-emoji-sad:before {
+  content: "\e81e";
+}
+
+.tn-icon-emoji-sad-fill:before {
+  content: "\e81d";
+}
+
+.tn-icon-emoji-general:before {
+  content: "\e81b";
+}
+
+.tn-icon-emoji-general-fill:before {
+  content: "\e818";
+}
+
+.tn-icon-emoji-good:before {
+  content: "\e817";
+}
+
+.tn-icon-emoji-good-fill:before {
+  content: "\e816";
+}
+
+.tn-icon-clock:before {
+  content: "\e812";
+}
+
+.tn-icon-clock-fill:before {
+  content: "\e813";
+}
+
+.tn-icon-time-fill:before {
+  content: "\e7d9";
+}
+
+.tn-icon-time:before {
+  content: "\e7dc";
+}
+
+.tn-icon-delete:before {
+  content: "\e7d6";
+}
+
+.tn-icon-delete-fill:before {
+  content: "\e7d7";
+}
+
+.tn-icon-clear:before {
+  content: "\e7d5";
+}
+
+.tn-icon-set:before {
+  content: "\e7d1";
+}
+
+.tn-icon-set-fill:before {
+  content: "\e7d2";
+}
+
+.tn-icon-keyboard-circle:before {
+  content: "\e810";
+}
+
+.tn-icon-keyboard:before {
+  content: "\e811";
+}
+
+.tn-icon-wifi-no:before {
+  content: "\e81c";
+}
+
+.tn-icon-wifi:before {
+  content: "\e7d0";
+}
+
+.tn-icon-creative-stop:before {
+  content: "\e819";
+}
+
+.tn-icon-creative-stop-fill:before {
+  content: "\e81a";
+}
+
+.tn-icon-creative-fill:before {
+  content: "\e80e";
+}
+
+.tn-icon-creative:before {
+  content: "\e80f";
+}
+
+.tn-icon-trophy-fill:before {
+  content: "\e80a";
+}
+
+.tn-icon-trophy:before {
+  content: "\e80b";
+}
+
+.tn-icon-game-fill:before {
+  content: "\e808";
+}
+
+.tn-icon-game:before {
+  content: "\e809";
+}
+
+.tn-icon-tag-fill:before {
+  content: "\e806";
+}
+
+.tn-icon-tag:before {
+  content: "\e807";
+}
+
+.tn-icon-logistics:before {
+  content: "\e7cf";
+}
+
+.tn-icon-taxi-fill:before {
+  content: "\e800";
+}
+
+.tn-icon-taxi:before {
+  content: "\e805";
+}
+
+.tn-icon-flag:before {
+  content: "\e7f5";
+}
+
+.tn-icon-flag-fill:before {
+  content: "\e7ff";
+}
+
+.tn-icon-baby:before {
+  content: "\e7f1";
+}
+
+.tn-icon-baby-fill:before {
+  content: "\e7f4";
+}
+
+.tn-icon-shop:before {
+  content: "\e7cd";
+}
+
+.tn-icon-shop-fill:before {
+  content: "\e7ce";
+}
+
+.tn-icon-coupon-fill:before {
+  content: "\e7c8";
+}
+
+.tn-icon-coupon:before {
+  content: "\e7c9";
+}
+
+.tn-icon-shopbag-fill:before {
+  content: "\e7c6";
+}
+
+.tn-icon-shopbag:before {
+  content: "\e7c7";
+}
+
+.tn-icon-basket-fill:before {
+  content: "\e7c4";
+}
+
+.tn-icon-basket:before {
+  content: "\e7c5";
+}
+
+.tn-icon-cart-fill:before {
+  content: "\e7c2";
+}
+
+.tn-icon-cart:before {
+  content: "\e7c3";
+}
+
+.tn-icon-ticket:before {
+  content: "\e7f8";
+}
+
+.tn-icon-ticket-fill:before {
+  content: "\e7fe";
+}
+
+.tn-icon-receipt:before {
+  content: "\e7f6";
+}
+
+.tn-icon-receipt-fill:before {
+  content: "\e7f7";
+}
+
+.tn-icon-cardbag:before {
+  content: "\e7fa";
+}
+
+.tn-icon-cardbag-fill:before {
+  content: "\e7fd";
+}
+
+.tn-icon-bankcard-fill:before {
+  content: "\e7d3";
+}
+
+.tn-icon-bankcard:before {
+  content: "\e7d4";
+}
+
+.tn-icon-identity:before {
+  content: "\e7cb";
+}
+
+.tn-icon-identity-fill:before {
+  content: "\e7cc";
+}
+
+.tn-icon-calendar:before {
+  content: "\e7c0";
+}
+
+.tn-icon-calendar-fill:before {
+  content: "\e7c1";
+}
+
+.tn-icon-order:before {
+  content: "\e7be";
+}
+
+.tn-icon-order-fill:before {
+  content: "\e7bf";
+}
+
+.tn-icon-image:before {
+  content: "\e7bc";
+}
+
+.tn-icon-image-fill:before {
+  content: "\e7bd";
+}
+
+.tn-icon-image-text:before {
+  content: "\e7bb";
+}
+
+.tn-icon-image-text-fill:before {
+  content: "\e7ba";
+}
+
+.tn-icon-data:before {
+  content: "\e7b9";
+}
+
+.tn-icon-data-fill:before {
+  content: "\e7b8";
+}
+
+.tn-icon-statistics:before {
+  content: "\e7b7";
+}
+
+.tn-icon-statistics-fill:before {
+  content: "\e7b6";
+}
+
+.tn-icon-trusty-fill:before {
+  content: "\e801";
+}
+
+.tn-icon-trusty:before {
+  content: "\e802";
+}
+
+.tn-icon-safe-fill:before {
+  content: "\e803";
+}
+
+.tn-icon-safe:before {
+  content: "\e804";
+}
+
+.tn-icon-edit:before {
+  content: "\e7b5";
+}
+
+.tn-icon-edit-form:before {
+  content: "\e7b4";
+}
+
+.tn-icon-edit-write:before {
+  content: "\e7b3";
+}
+
+.tn-icon-write-fill:before {
+  content: "\e7b1";
+}
+
+.tn-icon-write:before {
+  content: "\e7b2";
+}
+
+.tn-icon-eye-hide:before {
+  content: "\e7af";
+}
+
+.tn-icon-eye-close:before {
+  content: "\e7b0";
+}
+
+.tn-icon-eye:before {
+  content: "\e7ad";
+}
+
+.tn-icon-eye-fill:before {
+  content: "\e7ae";
+}
+
+.tn-icon-unlock:before {
+  content: "\e7da";
+}
+
+.tn-icon-lock:before {
+  content: "\e7db";
+}
+
+.tn-icon-sex:before {
+  content: "\e7ac";
+}
+
+.tn-icon-sex-female:before {
+  content: "\e7ab";
+}
+
+.tn-icon-sex-male:before {
+  content: "\e7aa";
+}
+
+.tn-icon-circle-lack:before {
+  content: "\e7a8";
+}
+
+.tn-icon-circle-arrow:before {
+  content: "\e7a9";
+}
+
+.tn-icon-circle-fill:before {
+  content: "\e7a4";
+}
+
+.tn-icon-circle:before {
+  content: "\e7a3";
+}
+
+.tn-icon-copy-fill:before {
+  content: "\e7a1";
+}
+
+.tn-icon-copy:before {
+  content: "\e7a2";
+}
+
+.tn-icon-square:before {
+  content: "\e7a0";
+}
+
+.tn-icon-group-double:before {
+  content: "\e79e";
+}
+
+.tn-icon-group-square:before {
+  content: "\e79f";
+}
+
+.tn-icon-group-triangle:before {
+  content: "\e795";
+}
+
+.tn-icon-group-circle:before {
+  content: "\e796";
+}
+
+.tn-icon-group-null:before {
+  content: "\e797";
+}
+
+.tn-icon-share-triangle:before {
+  content: "\e792";
+}
+
+.tn-icon-share-square:before {
+  content: "\e790";
+}
+
+.tn-icon-share-circle:before {
+  content: "\e791";
+}
+
+.tn-icon-share:before {
+  content: "\e78f";
+}
+
+.tn-icon-send-fill:before {
+  content: "\e793";
+}
+
+.tn-icon-send:before {
+  content: "\e794";
+}
+
+.tn-icon-light-fill:before {
+  content: "\e78d";
+}
+
+.tn-icon-light:before {
+  content: "\e78e";
+}
+
+.tn-icon-praise-fill:before {
+  content: "\e7eb";
+}
+
+.tn-icon-praise:before {
+  content: "\e7f0";
+}
+
+.tn-icon-star-fill:before {
+  content: "\e78b";
+}
+
+.tn-icon-star:before {
+  content: "\e78c";
+}
+
+.tn-icon-caring:before {
+  content: "\e789";
+}
+
+.tn-icon-caring-fill:before {
+  content: "\e78a";
+}
+
+.tn-icon-fire:before {
+  content: "\e787";
+}
+
+.tn-icon-fire-fill:before {
+  content: "\e788";
+}
+
+.tn-icon-topic:before {
+  content: "\e786";
+}
+
+.tn-icon-topics:before {
+  content: "\e784";
+}
+
+.tn-icon-topics-fill:before {
+  content: "\e785";
+}
+
+.tn-icon-like-break:before {
+  content: "\e782";
+}
+
+.tn-icon-like-lack:before {
+  content: "\e783";
+}
+
+.tn-icon-like:before {
+  content: "\e781";
+}
+
+.tn-icon-like-fill:before {
+  content: "\e780";
+}
+
+.tn-icon-reply:before {
+  content: "\e7a6";
+}
+
+.tn-icon-reply-fill:before {
+  content: "\e7a7";
+}
+
+.tn-icon-comment-fill:before {
+  content: "\e79c";
+}
+
+.tn-icon-comment:before {
+  content: "\e79d";
+}
+
+.tn-icon-message-fill:before {
+  content: "\e798";
+}
+
+.tn-icon-message:before {
+  content: "\e799";
+}
+
+.tn-icon-flower-fill:before {
+  content: "\e77e";
+}
+
+.tn-icon-flower:before {
+  content: "\e77f";
+}
+
+.tn-icon-location-fill:before {
+  content: "\e77c";
+}
+
+.tn-icon-location:before {
+  content: "\e77d";
+}
+
+.tn-icon-map-fill:before {
+  content: "\e77a";
+}
+
+.tn-icon-map:before {
+  content: "\e77b";
+}
+
+.tn-icon-camera:before {
+  content: "\e774";
+}
+
+.tn-icon-camera-fill:before {
+  content: "\e775";
+}
+
+.tn-icon-live-stream:before {
+  content: "\e7fb";
+}
+
+.tn-icon-live-stream-fill:before {
+  content: "\e7fc";
+}
+
+.tn-icon-sing:before {
+  content: "\e7f9";
+}
+
+.tn-icon-music-fill:before {
+  content: "\e7ec";
+}
+
+.tn-icon-music-stop:before {
+  content: "\e7ed";
+}
+
+.tn-icon-video-fill:before {
+  content: "\e7e9";
+}
+
+.tn-icon-video:before {
+  content: "\e7ea";
+}
+
+.tn-icon-voice-fill:before {
+  content: "\e7e7";
+}
+
+.tn-icon-voice:before {
+  content: "\e7e8";
+}
+
+.tn-icon-previous-fill:before {
+  content: "\e7f2";
+}
+
+.tn-icon-next-fill:before {
+  content: "\e7f3";
+}
+
+.tn-icon-play-fill:before {
+  content: "\e7ee";
+}
+
+.tn-icon-stop:before {
+  content: "\e7ef";
+}
+
+.tn-icon-backspace:before {
+  content: "\e814";
+}
+
+.tn-icon-backspace-fill:before {
+  content: "\e815";
+}
+
+.tn-icon-sound-close-fill:before {
+  content: "\e778";
+}
+
+.tn-icon-sound-close:before {
+  content: "\e779";
+}
+
+.tn-icon-sound-fill:before {
+  content: "\e776";
+}
+
+.tn-icon-sound:before {
+  content: "\e777";
+}
+
+.tn-icon-sound-reduce-fill:before {
+  content: "\e7e5";
+}
+
+.tn-icon-sound-reduce:before {
+  content: "\e7e6";
+}
+
+.tn-icon-sound-add:before {
+  content: "\e80c";
+}
+
+.tn-icon-sound-add-fill:before {
+  content: "\e80d";
+}
+
+.tn-icon-sequence-vertical:before {
+  content: "\e79a";
+}
+
+.tn-icon-sequence:before {
+  content: "\e79b";
+}
+
+.tn-icon-align-center:before {
+  content: "\e7e1";
+}
+
+.tn-icon-align-right:before {
+  content: "\e7e2";
+}
+
+.tn-icon-align-left:before {
+  content: "\e7e3";
+}
+
+.tn-icon-align:before {
+  content: "\e7e4";
+}
+
+.tn-icon-title:before {
+  content: "\e772";
+}
+
+.tn-icon-sort:before {
+  content: "\e773";
+}
+
+.tn-icon-more-vertical:before {
+  content: "\e770";
+}
+
+.tn-icon-more-horizontal:before {
+  content: "\e771";
+}
+
+.tn-icon-more-circle:before {
+  content: "\e76e";
+}
+
+.tn-icon-more-circle-fill:before {
+  content: "\e76f";
+}
+
+.tn-icon-warning:before {
+  content: "\e76c";
+}
+
+.tn-icon-warning-fill:before {
+  content: "\e76d";
+}
+
+.tn-icon-zoom-out:before {
+  content: "\e76a";
+}
+
+.tn-icon-zoom-out-fill:before {
+  content: "\e76b";
+}
+
+.tn-icon-zoom-in-fill:before {
+  content: "\e768";
+}
+
+.tn-icon-zoom-in:before {
+  content: "\e769";
+}
+
+.tn-icon-success-square:before {
+  content: "\e763";
+}
+
+.tn-icon-success-circle-fill:before {
+  content: "\e764";
+}
+
+.tn-icon-success-circle:before {
+  content: "\e765";
+}
+
+.tn-icon-success-square-fill:before {
+  content: "\e766";
+}
+
+.tn-icon-success:before {
+  content: "\e767";
+}
+
+.tn-icon-close-fill:before {
+  content: "\e760";
+}
+
+.tn-icon-close:before {
+  content: "\e761";
+}
+
+.tn-icon-close-circle:before {
+  content: "\e762";
+}
+
+.tn-icon-help:before {
+  content: "\e75e";
+}
+
+.tn-icon-help-fill:before {
+  content: "\e75f";
+}
+
+.tn-icon-tip-fill:before {
+  content: "\e75d";
+}
+
+.tn-icon-left:before {
+  content: "\e7e0";
+}
+
+.tn-icon-left-triangle:before {
+  content: "\e757";
+}
+
+.tn-icon-left-fill:before {
+  content: "\e758";
+}
+
+.tn-icon-left-double:before {
+  content: "\e759";
+}
+
+.tn-icon-left-circle:before {
+  content: "\e75a";
+}
+
+.tn-icon-left-arrow:before {
+  content: "\e75b";
+}
+
+.tn-icon-down:before {
+  content: "\e7df";
+}
+
+.tn-icon-down-arrow:before {
+  content: "\e752";
+}
+
+.tn-icon-down-circle:before {
+  content: "\e753";
+}
+
+.tn-icon-down-double:before {
+  content: "\e754";
+}
+
+.tn-icon-down-fill:before {
+  content: "\e755";
+}
+
+.tn-icon-down-triangle:before {
+  content: "\e756";
+}
+
+.tn-icon-right:before {
+  content: "\e7de";
+}
+
+.tn-icon-right-fill:before {
+  content: "\e74d";
+}
+
+.tn-icon-right-arrow:before {
+  content: "\e74e";
+}
+
+.tn-icon-right-double:before {
+  content: "\e74f";
+}
+
+.tn-icon-right-triangle:before {
+  content: "\e750";
+}
+
+.tn-icon-right-circle:before {
+  content: "\e751";
+}
+
+.tn-icon-up:before {
+  content: "\e7dd";
+}
+
+.tn-icon-up-arrow:before {
+  content: "\e748";
+}
+
+.tn-icon-up-circle:before {
+  content: "\e749";
+}
+
+.tn-icon-up-triangle:before {
+  content: "\e74a";
+}
+
+.tn-icon-up-double:before {
+  content: "\e74b";
+}
+
+.tn-icon-up-fill:before {
+  content: "\e74c";
+}
+
+.tn-icon-add-circle:before {
+  content: "\e740";
+}
+
+.tn-icon-add:before {
+  content: "\e741";
+}
+
+.tn-icon-add-fill:before {
+  content: "\e742";
+}
+
+.tn-icon-reduce:before {
+  content: "\e743";
+}
+
+.tn-icon-reduce-square-fill:before {
+  content: "\e744";
+}
+
+.tn-icon-reduce-square:before {
+  content: "\e745";
+}
+
+.tn-icon-reduce-circle:before {
+  content: "\e746";
+}
+
+.tn-icon-reduce-circle-fill:before {
+  content: "\e747";
+}
diff --git a/tuniao-ui/index.js b/tuniao-ui/index.js
new file mode 100644
index 0000000..140fc71
--- /dev/null
+++ b/tuniao-ui/index.js
@@ -0,0 +1,73 @@
+// 引入全局mixin
+import mixin from './libs/mixin/mixin.js'
+// 全局挂载引入http相关请求拦截插件
+import Request from './libs/luch-request'
+
+// 调试输出信息
+function wranning(str) {
+  // 开发环境进行信息输出,主要是一些报错信息
+  // 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
+  // 	https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
+  if (process.env.NODE_ENV === 'development') {
+  	console.warn(str)
+  }
+}
+
+// 更新自定义状态栏的信息
+import updateCustomBarInfo from './libs/function/updateCustomBarInfo.js'
+// 获取颜色工具
+import color from './libs/function/color.js'
+// 消息工具
+import message from './libs/function/message.js'
+// 获取唯一id
+import uuid from './libs/function/uuid.js'
+// 数组工具
+import array from './libs/function/array.js'
+
+// 规则检验
+import test from './libs/function/test.js'
+// 获取整个父组件
+import $parent from './libs/function/$parent.js'
+// 格式化字符串工具
+import string from './libs/function/string.js'
+// 格式化数值工具
+import number from './libs/function/number.js'
+// 深度复制
+import deepClone from './libs/function/deepClone.js'
+
+// z-index配置信息
+import zIndex from './libs/config/zIndex.js'
+// 主题颜色信息
+import colorInfo from './libs/config/color.js'
+
+const $tn = {
+  http: new Request(),
+  updateCustomBar: updateCustomBarInfo,
+  color,
+  message,
+  uuid,
+  array,
+  test,
+  $parent,
+  string,
+  number,
+  deepClone,
+  zIndex,
+  colorInfo,
+}
+
+// 挂载到uni对象上
+uni.$tn = $tn
+
+const install = Vue => {
+  // 全局混入
+  Vue.mixin(mixin)
+  
+  // Filter格式化
+  
+  Vue.prototype.$tn = $tn
+}
+
+export default {
+  install
+}
diff --git a/tuniao-ui/index.scss b/tuniao-ui/index.scss
new file mode 100644
index 0000000..b0493b3
--- /dev/null
+++ b/tuniao-ui/index.scss
@@ -0,0 +1,13 @@
+// 引入公共基础类
+@import './libs/css/main.scss';
+@import './libs/css/color.scss';
+
+// 小程序特有的样式
+/* #ifdef MP */
+@import "./libs/css/style.mp.scss";
+/* #endif */
+
+// H5特有的样式
+/* #ifdef H5 */
+@import "./libs/css/style.h5.scss";
+/* #endif */
\ No newline at end of file
diff --git a/tuniao-ui/libs/config/color.js b/tuniao-ui/libs/config/color.js
new file mode 100644
index 0000000..eb71bf2
--- /dev/null
+++ b/tuniao-ui/libs/config/color.js
@@ -0,0 +1,15 @@
+// TuniaoUI颜色值
+export default {
+  mainColor: '#01BEFF',
+  reverseMainColor: '#FFF00D',
+  femaleColor: '#FF71D2',
+  maleColor: '#82B2FF',
+  mainOrange: '#FBBD12',
+  bgColor: '#FFFFFF',
+  spaceColor: '#F8F7F8',
+  fontColor: '#080808',
+  fontSubColor: '#AAAAAA',
+  contentColor: '#838383',
+  fontHolderColor: '#E6E6E6',
+  maskBgColor: 'rgba(0, 0, 0, 0.4)',
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/config/zIndex.js b/tuniao-ui/libs/config/zIndex.js
new file mode 100644
index 0000000..e3ba9a3
--- /dev/null
+++ b/tuniao-ui/libs/config/zIndex.js
@@ -0,0 +1,17 @@
+// 各组件的z-index值
+export default {
+  landsacpe: 29100,
+  navbar: 29090,
+  toast: 20090,
+  goodsNav: 20089,
+  alert: 20085,
+  modal: 20080,
+  popup: 20075,
+  tips: 19080,
+  sticky: 19075,
+  indexListSticky: 19070,
+  fab: 19060,
+  mask: 9999,
+  tableTr: 1001,
+  tableTd: 1000
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/css/color.scss b/tuniao-ui/libs/css/color.scss
new file mode 100644
index 0000000..d23f7b6
--- /dev/null
+++ b/tuniao-ui/libs/css/color.scss
@@ -0,0 +1,563 @@
+
+@mixin getColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  color: $color !important;
+  @if $color != #FFFFFF and $color != #000000 {
+    &--light {
+      color: $light-color !important;
+    }
+    &--dark {
+      color: $dark-color !important;
+    }
+    &--disabled {
+      color: $disabled-color !important;
+    }
+  }
+}
+
+@mixin getBorderColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  @if $color != #FFFFFF and $color != #000000 {
+    &--light {
+        border-color: $light-color !important;
+    }
+    &--dark {
+        border-color: $dark-color !important;
+    }
+    &--disabled {
+        border-color: $disabled-color !important;
+    }
+  }
+    border-color: $color !important;
+}
+
+@mixin getBackgroundColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  background-color: $color !important;
+  @if $color != #FFFFFF and $color != #000000 {
+    color: $tn-font-color;
+    &--light {
+      background-color: $light-color !important;
+    }
+    &--dark {
+      background-color: $dark-color !important;
+    }
+    &--disabled {
+      background-color: $disabled-color !important;
+    }
+  }
+  @else {
+    color: $tn-font-color;
+  }
+}
+
+@mixin getShadowColor($type: box, $color: #FFFFFF) {
+  @if $type == box {
+    box-shadow: 12rpx 12rpx 16rpx #{$color};
+  } @else if $type == text {
+    text-shadow: 6rpx 6rpx 8rpx #{$color};
+  }
+}
+
+@mixin getGradientColor($start-color, $end-color, $font-color: #FFFFFF) {
+  background-image: repeating-linear-gradient(45deg, $start-color, $end-color);
+  color: $font-color;
+  
+  &--reverse {
+    background-image: repeating-linear-gradient(-45deg, $start-color, $end-color);
+    color: $font-color;
+  }
+}
+
+@mixin getMainColorGradient($start-color, $start-color-light, $start-color-disabled, $end-color, $end-color-light) {
+  @include getGradientColor($start-color, $end-color);
+  
+  &--light {
+    @include getGradientColor($start-color-light, $end-color-light, $start-color);
+  }
+  
+  &--single {
+    @include getGradientColor($start-color, $start-color-disabled);
+  }
+}
+
+/* 颜色 start */
+.tn-color-red {
+  @include getColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-color-purplered {
+  @include getColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-color-purple {
+  @include getColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-color-bluepurple {
+  @include getColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-color-aquablue {
+  @include getColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-color-blue {
+  @include getColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-color-indigo {
+  @include getColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-color-cyan {
+  @include getColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-color-teal {
+  @include getColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-color-green {
+  @include getColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-color-yellowgreen {
+  @include getColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-color-lime {
+  @include getColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-color-yellow {
+  @include getColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-color-orangeyellow {
+  @include getColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-color-orange {
+  @include getColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-color-orangered {
+  @include getColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-color-brown {
+  @include getColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-color-grey {
+  @include getColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-color-gray {
+  @include getColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-color-white {
+  @include getColor();
+}
+.tn-color-black {
+  @include getColor(#000000);
+}
+/* 颜色 end */
+
+/* 边框颜色 start */
+.tn-border-red {
+  @include getBorderColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-border-purplered {
+  @include getBorderColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-border-purple {
+  @include getBorderColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-border-bluepurple {
+  @include getBorderColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-border-aquablue {
+  @include getBorderColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-border-blue {
+  @include getBorderColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-border-indigo {
+  @include getBorderColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-border-cyan {
+  @include getBorderColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-border-teal {
+  @include getBorderColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-border-green {
+  @include getBorderColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-border-yellowgreen {
+  @include getBorderColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-border-lime {
+  @include getBorderColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-border-yellow {
+  @include getBorderColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-border-orangeyellow {
+  @include getBorderColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-border-orange {
+  @include getBorderColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-border-orangered {
+  @include getBorderColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-border-brown {
+  @include getBorderColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-border-grey {
+  @include getBorderColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-border-gray {
+  @include getBorderColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-border-white {
+  @include getBorderColor();
+}
+.tn-border-black {
+  @include getBorderColor(#000000);
+}
+/* 边框颜色 end */
+
+/* 背景颜色 start */
+.tn-bg-red {
+  @include getBackgroundColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-bg-purplered {
+  @include getBackgroundColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-bg-purple {
+  @include getBackgroundColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-bg-bluepurple {
+  @include getBackgroundColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-bg-aquablue {
+  @include getBackgroundColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-bg-blue {
+  @include getBackgroundColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-bg-indigo {
+  @include getBackgroundColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-bg-cyan {
+  @include getBackgroundColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-bg-teal {
+  @include getBackgroundColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-bg-green {
+  @include getBackgroundColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-bg-yellowgreen {
+  @include getBackgroundColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-bg-lime {
+  @include getBackgroundColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-bg-yellow {
+  @include getBackgroundColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-bg-orangeyellow {
+  @include getBackgroundColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-bg-orange {
+  @include getBackgroundColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-bg-orangered {
+  @include getBackgroundColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-bg-brown {
+  @include getBackgroundColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-bg-grey {
+  @include getBackgroundColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-bg-gray {
+  @include getBackgroundColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-bg-white {
+  @include getBackgroundColor();
+}
+.tn-bg-black {
+  @include getBackgroundColor(#000000);
+}
+/* 背景颜色 end */
+
+/* 阴影颜色 start */
+.tn-shadow-red {
+  @include getShadowColor(box, $tn-color-red-light);
+}
+.tn-shadow-purplered {
+  @include getShadowColor(box, $tn-color-purplered-light);
+}
+.tn-shadow-purple {
+  @include getShadowColor(box, $tn-color-purple-light);
+}
+.tn-shadow-bluepurple {
+  @include getShadowColor(box, $tn-color-bluepurple-light);
+}
+.tn-shadow-aquablue {
+  @include getShadowColor(box, $tn-color-aquablue-light);
+}
+.tn-shadow-blue {
+  @include getShadowColor(box, $tn-color-blue-light);
+}
+.tn-shadow-indigo {
+  @include getShadowColor(box, $tn-color-indigo-light);
+}
+.tn-shadow-cyan {
+  @include getShadowColor(box, $tn-color-cyan-light);
+}
+.tn-shadow-teal {
+  @include getShadowColor(box, $tn-color-teal-light);
+}
+.tn-shadow-green {
+  @include getShadowColor(box, $tn-color-green-light);
+}
+.tn-shadow-yellowgreen {
+  @include getShadowColor(box, $tn-color-yellowgreen-light);
+}
+.tn-shadow-lime {
+  @include getShadowColor(box, $tn-color-lime-light);
+}
+.tn-shadow-yellow {
+  @include getShadowColor(box, $tn-color-yellow-light);
+}
+.tn-shadow-orangeyellow {
+  @include getShadowColor(box, $tn-color-orangeyellow-light);
+}
+.tn-shadow-orange {
+  @include getShadowColor(box, $tn-color-orange-light);
+}
+.tn-shadow-orangered {
+  @include getShadowColor(box, $tn-color-orangered-light);
+}
+.tn-shadow-brown {
+  @include getShadowColor(box, $tn-color-brown-light);
+}
+.tn-shadow-grey {
+  @include getShadowColor(box, $tn-color-grey-light);
+}
+.tn-shadow-gray {
+  @include getShadowColor(box, $tn-color-gray-light);
+}
+
+.tn-text-shadow-red {
+  @include getShadowColor(text, $tn-color-red-light);
+}
+.tn-text-shadow-purplered {
+  @include getShadowColor(text, $tn-color-purplered-light);
+}
+.tn-text-shadow-purple {
+  @include getShadowColor(text, $tn-color-purple-light);
+}
+.tn-text-shadow-bluepurple {
+  @include getShadowColor(text, $tn-color-bluepurple-light);
+}
+.tn-text-shadow-aquablue {
+  @include getShadowColor(text, $tn-color-aquablue-light);
+}
+.tn-text-shadow-blue {
+  @include getShadowColor(text, $tn-color-blue-light);
+}
+.tn-text-shadow-indigo {
+  @include getShadowColor(text, $tn-color-indigo-light);
+}
+.tn-text-shadow-cyan {
+  @include getShadowColor(text, $tn-color-cyan-light);
+}
+.tn-text-shadow-teal {
+  @include getShadowColor(text, $tn-color-teal-light);
+}
+.tn-text-shadow-green {
+  @include getShadowColor(text, $tn-color-green-light);
+}
+.tn-text-shadow-yellowgreen {
+  @include getShadowColor(text, $tn-color-yellowgreen-light);
+}
+.tn-text-shadow-lime {
+  @include getShadowColor(text, $tn-color-lime-light);
+}
+.tn-text-shadow-yellow {
+  @include getShadowColor(text, $tn-color-yellow-light);
+}
+.tn-text-shadow-orangeyellow {
+  @include getShadowColor(text, $tn-color-orangeyellow-light);
+}
+.tn-text-shadow-orange {
+  @include getShadowColor(text, $tn-color-orange-light);
+}
+.tn-text-shadow-orangered {
+  @include getShadowColor(text, $tn-color-orangered-light);
+}
+.tn-text-shadow-brown {
+  @include getShadowColor(text, $tn-color-brown-light);
+}
+.tn-text-shadow-grey {
+  @include getShadowColor(text, $tn-color-grey-light);
+}
+.tn-text-shadow-gray {
+  @include getShadowColor(text, $tn-color-gray-light);
+}
+/* 阴影颜色 end */
+
+/* 主色渐变色 start */
+.tn-main-gradient-red {
+  @include getMainColorGradient($tn-color-red, $tn-color-red-light, $tn-color-red-disabled, $tn-color-purplered, $tn-color-purplered-light);
+}
+.tn-main-gradient-purplered {
+  @include getMainColorGradient($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-disabled, $tn-color-purple, $tn-color-purple-light);
+}
+.tn-main-gradient-purple {
+  @include getMainColorGradient($tn-color-purple, $tn-color-purple-light, $tn-color-purple-disabled, $tn-color-bluepurple, $tn-color-bluepurple-light);
+}
+.tn-main-gradient-bluepurple {
+  @include getMainColorGradient($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-disabled, $tn-color-aquablue, $tn-color-aquablue-light);
+}
+.tn-main-gradient-aquablue {
+  @include getMainColorGradient($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-disabled, $tn-color-blue, $tn-color-blue-light);
+}
+.tn-main-gradient-blue {
+  @include getMainColorGradient($tn-color-blue, $tn-color-blue-light, $tn-color-blue-disabled, $tn-color-indigo, $tn-color-indigo-light);
+}
+.tn-main-gradient-indigo {
+  @include getMainColorGradient($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-disabled, $tn-color-cyan, $tn-color-cyan-light);
+}
+.tn-main-gradient-cyan {
+  @include getMainColorGradient($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-disabled, $tn-color-teal, $tn-color-teal-light);
+}
+.tn-main-gradient-teal {
+  @include getMainColorGradient($tn-color-teal, $tn-color-teal-light, $tn-color-teal-disabled, $tn-color-green, $tn-color-green-light);
+}
+.tn-main-gradient-green {
+  @include getMainColorGradient($tn-color-green, $tn-color-green-light, $tn-color-green-disabled, $tn-color-yellowgreen, $tn-color-yellowgreen-light);
+}
+.tn-main-gradient-yellowgreen {
+  @include getMainColorGradient($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-disabled, $tn-color-lime, $tn-color-lime-light);
+}
+.tn-main-gradient-lime {
+  @include getMainColorGradient($tn-color-lime, $tn-color-lime-light, $tn-color-lime-disabled, $tn-color-yellow, $tn-color-yellow-light);
+}
+.tn-main-gradient-yellow {
+  @include getMainColorGradient($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-disabled, $tn-color-orangeyellow, $tn-color-orangeyellow-light);
+}
+.tn-main-gradient-orangeyellow {
+  @include getMainColorGradient($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-disabled, $tn-color-orange, $tn-color-orange-light);
+}
+.tn-main-gradient-orange {
+  @include getMainColorGradient($tn-color-orange, $tn-color-orange-light, $tn-color-orange-disabled, $tn-color-orangered, $tn-color-orangered-light);
+}
+.tn-main-gradient-orangered {
+  @include getMainColorGradient($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-disabled, $tn-color-red, $tn-color-red-light);
+}
+/* 主色渐变色 end */
+
+/* 动态背景颜色 start */
+
+.tn-dynamic-bg-1 {
+  color: #fff;
+  background: linear-gradient(45deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+  background-size: 500% 500%;
+  animation: dynamicBg 15s ease infinite;
+}
+
+@keyframes dynamicBg {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 动态背景颜色 end */
+
+/* 酷炫背景颜色图片 start */
+
+.tn-cool-bg-color-1 {
+  @include getGradientColor($tn-cool-bg-color-1-start, $tn-cool-bg-color-1-end);
+}
+.tn-cool-bg-color-2 {
+  @include getGradientColor($tn-cool-bg-color-2-start, $tn-cool-bg-color-2-end);
+}
+.tn-cool-bg-color-3 {
+  @include getGradientColor($tn-cool-bg-color-3-start, $tn-cool-bg-color-3-end);
+}
+.tn-cool-bg-color-4 {
+  @include getGradientColor($tn-cool-bg-color-4-start, $tn-cool-bg-color-4-end);
+}
+.tn-cool-bg-color-5 {
+  @include getGradientColor($tn-cool-bg-color-5-start, $tn-cool-bg-color-5-end);
+}
+.tn-cool-bg-color-6 {
+  @include getGradientColor($tn-cool-bg-color-6-start, $tn-cool-bg-color-6-end);
+}
+.tn-cool-bg-color-7 {
+  @include getGradientColor($tn-cool-bg-color-7-start, $tn-cool-bg-color-7-end);
+}
+.tn-cool-bg-color-8 {
+  @include getGradientColor($tn-cool-bg-color-8-start, $tn-cool-bg-color-8-end);
+}
+.tn-cool-bg-color-9 {
+  @include getGradientColor($tn-cool-bg-color-9-start, $tn-cool-bg-color-9-end);
+}
+.tn-cool-bg-color-10 {
+  @include getGradientColor($tn-cool-bg-color-10-start, $tn-cool-bg-color-10-end);
+}
+.tn-cool-bg-color-11 {
+  @include getGradientColor($tn-cool-bg-color-11-start, $tn-cool-bg-color-11-end);
+}
+.tn-cool-bg-color-12 {
+  @include getGradientColor($tn-cool-bg-color-12-start, $tn-cool-bg-color-12-end);
+}
+.tn-cool-bg-color-13 {
+  @include getGradientColor($tn-cool-bg-color-13-start, $tn-cool-bg-color-13-end);
+}
+.tn-cool-bg-color-14 {
+  @include getGradientColor($tn-cool-bg-color-14-start, $tn-cool-bg-color-14-end);
+}
+.tn-cool-bg-color-15 {
+  @include getGradientColor($tn-cool-bg-color-15-start, $tn-cool-bg-color-15-end);
+}
+.tn-cool-bg-color-16 {
+  @include getGradientColor($tn-cool-bg-color-16-start, $tn-cool-bg-color-16-end);
+}
+
+.tn-cool-bg-image::after {
+  content: " ";
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+  border-radius: 10rpx;
+  opacity: 1;
+  transform: scale(1, 1);
+  background-size: 100% 100%;
+  background-image: inherit;
+}
+
+.tn-cool-bg-image:nth-of-type(1n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/1.png);
+}
+
+.tn-cool-bg-image:nth-of-type(2n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/2.png);
+}
+
+.tn-cool-bg-image:nth-of-type(3n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
+}
+
+.tn-cool-bg-image:nth-of-type(4n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/4.png);
+}
+
+.tn-cool-bg-image:nth-of-type(5n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/5.png);
+}
+
+.tn-cool-bg-image:nth-of-type(6n)::after {
+  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
+}
+
+/* 酷炫背景颜色图片 end */
diff --git a/tuniao-ui/libs/css/main.scss b/tuniao-ui/libs/css/main.scss
new file mode 100644
index 0000000..f60ab11
--- /dev/null
+++ b/tuniao-ui/libs/css/main.scss
@@ -0,0 +1,722 @@
+$direction: top, right, bottom, left;
+
+body {
+  // 全局灰白效果
+  /* filter: grayscale(100%);
+  -webkit-filter: grayscale(100%); */
+  
+	background-color: $tn-bg-color;
+	/* background-color: #ffffff; */
+	font-size: 28rpx;
+	color: $tn-font-color;
+	font-family: Helvetica Neue, Helvetica, sans-serif;
+  // 修复点击view标签的时候会有蓝色遮罩
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+view,
+scroll-view,
+swiper,
+button,
+input,
+textarea,
+label,
+navigator,
+image {
+	box-sizing: border-box;
+}
+
+button::after {
+	border: none;
+}
+
+.tn-round {
+	border-radius: 5000rpx !important;
+}
+
+.tn-radius {
+	border-radius: 6rpx;
+}
+
+/* 基本样式 start */
+
+.tn-width-full {
+  width: 100%;
+}
+
+.tn-height-full {
+  height: 100%;
+}
+
+/* 基本样式 end */
+
+
+/* 边框 start */
+
+.tn-border-solid,
+.tn-border-solid-top,
+.tn-border-solid-right,
+.tn-border-solid-bottom,
+.tn-border-solid-left,
+.tn-border-solids,
+.tn-border-solids-top,
+.tn-border-solids-right,
+.tn-border-solids-bottom,
+.tn-border-solids-left,
+.tn-border-dashed,
+.tn-border-dashed-top,
+.tn-border-dashed-right,
+.tn-border-dashed-bottom,
+.tn-border-dashed-left {
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-border-solid {
+      border-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solid-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+    .tn-border-solids {
+      border-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solids-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+    .tn-border-dashed {
+      border-width: 1rpx !important;
+      border-style: dashed;
+      border-color: $tn-border-dashed-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+  } @else {
+    .tn-border-solid-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solid-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+    .tn-border-solids-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solids-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+    .tn-border-dashed-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: dashed;
+      border-color: $tn-border-dashed-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+  }
+}
+
+.tn-none-border.tn-border-solid,
+.tn-none-border.tn-border-solid-top,
+.tn-none-border.tn-border-solid-right,
+.tn-none-border.tn-border-solid-bottom,
+.tn-none-border.tn-border-solid-left,
+.tn-none-border.tn-border-solids,
+.tn-none-border.tn-border-solids-top,
+.tn-none-border.tn-border-solids-right,
+.tn-none-border.tn-border-solids-bottom,
+.tn-none-border.tn-border-solids-left,
+.tn-none-border.tn-border-dashed,
+.tn-none-border.tn-border-dashed-top,
+.tn-none-border.tn-border-dashed-right,
+.tn-none-border.tn-border-dashed-bottom,
+.tn-none-border.tn-border-dashed-left {
+  border: 0 !important;
+}
+
+.tn-none-border-top.tn-border-solid,
+.tn-none-border-top.tn-border-solid-top,
+.tn-none-border-top.tn-border-solid-right,
+.tn-none-border-top.tn-border-solid-bottom,
+.tn-none-border-top.tn-border-solid-left,
+.tn-none-border-top.tn-border-solids,
+.tn-none-border-top.tn-border-solids-top,
+.tn-none-border-top.tn-border-solids-right,
+.tn-none-border-top.tn-border-solids-bottom,
+.tn-none-border-top.tn-border-solids-left,
+.tn-none-border-top.tn-border-dashed,
+.tn-none-border-top.tn-border-dashed-top,
+.tn-none-border-top.tn-border-dashed-right,
+.tn-none-border-top.tn-border-dashed-bottom,
+.tn-none-border-top.tn-border-dashed-left {
+  /* height: 0 !important; */
+  border-top: 0 !important;
+}
+
+.tn-none-border-right.tn-border-solid,
+.tn-none-border-right.tn-border-solid-top,
+.tn-none-border-right.tn-border-solid-right,
+.tn-none-border-right.tn-border-solid-bottom,
+.tn-none-border-right.tn-border-solid-left,
+.tn-none-border-right.tn-border-solids,
+.tn-none-border-right.tn-border-solids-top,
+.tn-none-border-right.tn-border-solids-right,
+.tn-none-border-right.tn-border-solids-bottom,
+.tn-none-border-right.tn-border-solids-left,
+.tn-none-border-right.tn-border-dashed,
+.tn-none-border-right.tn-border-dashed-top,
+.tn-none-border-right.tn-border-dashed-right,
+.tn-none-border-right.tn-border-dashed-bottom,
+.tn-none-border-right.tn-border-dashed-left {
+  /* width: 0 !important; */
+  border-right: 0 !important;
+}
+
+.tn-none-border-bottom.tn-border-solid,
+.tn-none-border-bottom.tn-border-solid-top,
+.tn-none-border-bottom.tn-border-solid-right,
+.tn-none-border-bottom.tn-border-solid-bottom,
+.tn-none-border-bottom.tn-border-solid-left,
+.tn-none-border-bottom.tn-border-solids,
+.tn-none-border-bottom.tn-border-solids-top,
+.tn-none-border-bottom.tn-border-solids-right,
+.tn-none-border-bottom.tn-border-solids-bottom,
+.tn-none-border-bottom.tn-border-solids-left,
+.tn-none-border-bottom.tn-border-dashed,
+.tn-none-border-bottom.tn-border-dashed-top,
+.tn-none-border-bottom.tn-border-dashed-right,
+.tn-none-border-bottom.tn-border-dashed-bottom,
+.tn-none-border-bottom.tn-border-dashed-left {
+  /* height: 0 !important; */
+  border-bottom: 0 !important;
+}
+
+.tn-none-border-left.tn-border-solid,
+.tn-none-border-left.tn-border-solid-top,
+.tn-none-border-left.tn-border-solid-right,
+.tn-none-border-left.tn-border-solid-bottom,
+.tn-none-border-left.tn-border-solid-left,
+.tn-none-border-left.tn-border-solids,
+.tn-none-border-left.tn-border-solids-top,
+.tn-none-border-left.tn-border-solids-right,
+.tn-none-border-left.tn-border-solids-bottom,
+.tn-none-border-left.tn-border-solids-left,
+.tn-none-border-left.tn-border-dashed,
+.tn-none-border-left.tn-border-dashed-top,
+.tn-none-border-left.tn-border-dashed-right,
+.tn-none-border-left.tn-border-dashed-bottom,
+.tn-none-border-left.tn-border-dashed-left {
+  /* width: 0 !important; */
+  border-left: 0 !important;
+}
+
+/* 边框 end */
+
+
+/* 阴影 start */
+
+.tn-shadow {
+  box-shadow: 6rpx 6rpx 8rpx $tn-shadow-color;
+}
+
+.tn-shadow-warp {
+  position: relative;
+  box-shadow: 0 0 10rpx $tn-shadow-color;
+}
+
+.tn-shadow-warp::before,
+.tn-shadow-warp::after {
+  content: " ";
+  position: absolute;
+  top: 20rpx;
+  bottom: 30rpx;
+  left: 20rpx;
+  width: 50%;
+  box-shadow: 0 30rpx 20rpx $tn-box-shadow-color;
+  transform: rotate(-3deg);
+  z-index: -1;
+}
+
+.tn-shadow-warp::after {
+  right: 20rpx;
+  left: auto;
+  transform: rotate(3deg);
+}
+
+.tn-shadow-blur {
+  position: relative;
+}
+
+.tn-shadow-blur::before {
+  content: " ";
+  display: block;
+  background: inherit;
+  filter: blur(10rpx);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 10rpx;
+  left: 10rpx;
+  z-index: -1;
+  opacity: 0.4;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  transform: scale(1, 1);
+}
+
+/* 阴影 end */
+
+
+/* flex start */
+
+.tn-flex {
+  display: -webkit-flex;
+  display: flex;
+}
+
+/* flex伸缩基准值 */
+.tn-flex-basic-xs {
+  flex-basis: 20%;
+}
+
+.tn-flex-basic-sm {
+  flex-basis: 40%;
+}
+
+.tn-flex-basic-md {
+  flex-basis: 50%;
+}
+
+.tn-flex-basic-lg {
+  flex-basis: 60%;
+}
+
+.tn-flex-basic-xl {
+  flex-basis: 80%;
+}
+
+.tn-flex-basic-full {
+  flex-basis: 100%;
+}
+
+/* flex布局的方向 */
+.tn-flex-direction-column {
+  flex-direction: column;
+}
+
+.tn-flex-direction-row {
+  flex-direction: row;
+}
+
+.tn-flex-direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.tn-flex-direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+/* flex容器设置换行 */
+.tn-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.tn-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+/* flex容器自身垂直方向对齐方式 */
+.tn-flex-center {
+  align-self: center;
+}
+
+.tn-flex-top {
+  align-self: flex-start;
+}
+
+.tn-flex-end {
+  align-self: flex-end;
+}
+
+.tn-flex-stretch {
+  align-self: stretch;
+}
+
+/* flex子元素垂直方向对齐方式 */
+.tn-flex-col-center {
+  align-items: center;
+}
+
+.tn-flex-col-top {
+  align-items: flex-start;
+}
+
+.tn-flex-col-bottom {
+  align-items: flex-end;
+}
+
+/* flex子元素水平方向对齐方式 */
+.tn-flex-row-center {
+  justify-content: center;
+}
+
+.tn-flex-row-left {
+  justify-content: flex-start;
+}
+
+.tn-flex-row-right {
+  justify-content: flex-end;
+}
+
+.tn-flex-row-between {
+  justify-content: space-between;
+}
+
+.tn-flex-row-around {
+  justify-content: space-around;
+}
+
+/* flex子元素空间分配 */
+@for $i from 0 to 12 {
+  .tn-flex-#{$i} {
+    flex: $i;
+  }
+}
+
+.tn-col-12 {
+  width: 100%;
+}
+
+.tn-col-11 {
+  width: 91.66666667%;
+}
+
+.tn-col-10 {
+  width: 83.33333333%;
+}
+
+.tn-col-9 {
+  width: 75%;
+}
+
+.tn-col-8 {
+  width: 66.66666667%;
+}
+
+.tn-col-7 {
+  width: 58.33333333%;
+}
+
+.tn-col-6 {
+  width: 50%;
+}
+
+.tn-col-5 {
+  width: 41.66666667%;
+}
+
+.tn-col-4 {
+  width: 33.33333333%;
+}
+
+.tn-col-3 {
+  width: 25%;
+}
+
+.tn-col-2 {
+  width: 16.66666667%;
+}
+
+.tn-col-1 {
+  width: 8.33333333%;
+}
+
+/* flex end */
+
+/* 内边距 start */
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-no-margin {
+      margin: 0;
+    }
+    .tn-margin-xs {
+    	margin: 10rpx;
+    }
+    .tn-margin-sm {
+    	margin: 20rpx;
+    }
+    .tn-margin {
+    	margin: 30rpx;
+    }
+    .tn-margin-lg {
+    	margin: 40rpx;
+    }
+    .tn-margin-xl {
+    	margin: 50rpx;
+    }
+  } @else {
+    .tn-no-margin-#{nth($direction, $i)} {
+      margin-#{nth($direction, $i)}: 0;
+    }
+    .tn-margin-#{nth($direction, $i)}-xs {
+    	margin-#{nth($direction, $i)}: 10rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-sm {
+    	margin-#{nth($direction, $i)}: 20rpx;
+    }
+    .tn-margin-#{nth($direction, $i)} {
+    	margin-#{nth($direction, $i)}: 30rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-lg {
+    	margin-#{nth($direction, $i)}: 40rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-xl {
+    	margin-#{nth($direction, $i)}: 50rpx;
+    }
+  }
+}
+
+/* 内边距 end */
+
+/* 外边距 start */
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-no-padding {
+      padding: 0;
+    }
+    .tn-padding-xs {
+    	padding: 10rpx;
+    }
+    .tn-padding-sm {
+    	padding: 20rpx;
+    }
+    .tn-padding {
+    	padding: 30rpx;
+    }
+    .tn-padding-lg {
+    	padding: 40rpx;
+    }
+    .tn-padding-xl {
+    	padding: 50rpx;
+    }
+  } @else {
+    .tn-no-padding-#{nth($direction, $i)} {
+      padding-#{nth($direction, $i)}: 0;
+    }
+    .tn-padding-#{nth($direction, $i)}-xs {
+    	padding-#{nth($direction, $i)}: 10rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-sm {
+    	padding-#{nth($direction, $i)}: 20rpx;
+    }
+    .tn-padding-#{nth($direction, $i)} {
+    	padding-#{nth($direction, $i)}: 30rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-lg {
+    	padding-#{nth($direction, $i)}: 40rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-xl {
+    	padding-#{nth($direction, $i)}: 50rpx;
+    }
+  }
+}
+
+/* 外边距 end */
+
+/* float start */
+
+.tn-float-left {
+  float: left;
+}
+
+.tn-float-right {
+  float: right;
+}
+
+.tn-clear-float {
+  clear: both;
+}
+
+.tn-clear-float::after,
+.tn-clear-float::before {
+  content: " ";
+  display: table;
+  clear: both;
+}
+
+/* float end */
+
+/* 文本 start */
+
+.tn-text-xs {
+  font-size: 20rpx;
+}
+
+.tn-text-sm {
+  font-size: 24rpx;
+}
+
+.tn-text-md {
+  font-size: 28rpx;
+}
+
+.tn-text-lg {
+  font-size: 32rpx;
+}
+
+.tn-text-xl {
+  font-size: 36rpx;
+}
+
+.tn-text-xxl {
+  font-size: 40rpx;
+}
+
+.tn-text-xl-xxl {
+  font-size: 80rpx;
+}
+
+.tn-text-xxl-xxl {
+  font-size: 120rpx;
+}
+
+.tn-text-upper {
+  text-transform: uppercase;
+}
+
+.tn-text-cap {
+  text-transform: capitalize;
+}
+
+.tn-text-lower {
+  text-transform: lowercase;
+}
+
+.tn-text-bold {
+  font-weight: bold;
+}
+
+.tn-text-center {
+  text-align: center;
+}
+
+.tn-text-left {
+	text-align: left;
+}
+
+.tn-text-right {
+	text-align: right;
+}
+
+.tn-text-justify {
+	text-align: justify;
+}
+
+.tn-text-content {
+  line-height: 1.6;
+}
+
+.tn-text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tn-text-ellipsis-2 {
+	display: -webkit-box;
+	overflow: hidden;
+	white-space: normal !important;
+	text-overflow: ellipsis;
+	word-wrap: break-word;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.tn-text-clip {
+  -webkit-background-clip: text;
+  color: transparent !important;
+}
+
+.tn-text-break-word {
+  word-wrap: break-word;
+}
+
+/* 文本 end */
+
+/* hover 点击效果 start */
+.tn-hover {
+  opacity: 0.6;
+}
+/* hover 点击效果 end */
+
+/* 去除原生button样式 start */
+.tn-button--clear-style {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: inherit;
+  color: inherit;
+}
+/* 去除原生button样式 end */
+
+/* 头像组 start */
+// .tn-avatar-group {
+//   direction: rtl;
+//   unicode-bidi: bidi-override;
+//   padding: 0 10rpx 0 40rpx;
+//   display: inline-block;
+  
+//   .tn-avatar {
+//     margin-left: -30rpx !important;
+//     border: 4rpx solid $tn-border-solid-color;
+//     vertical-align: middle;
+    
+//     &--sm {
+//       margin-left: -20rpx !important;
+//       border: 1rpx solid $tn-border-solid-color;
+//     }
+//   }
+// }
+/* 头像组 end */
+
+/* 提升H5端uni.toast()的层级，避免被tn-modal等遮盖 start */
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+/* 提升H5端uni.toast()的层级，避免被tn-modal等遮盖 end */
+
+/* iPhoneX底部安全区定义 start */
+.tn-safe-area-inset-bottom {
+  padding-bottom: 0;  
+  padding-bottom: constant(safe-area-inset-bottom);  
+  padding-bottom: env(safe-area-inset-bottom);  
+} 
+/* iPhoneX底部安全区定义 end */
\ No newline at end of file
diff --git a/tuniao-ui/libs/css/style.h5.scss b/tuniao-ui/libs/css/style.h5.scss
new file mode 100644
index 0000000..647c902
--- /dev/null
+++ b/tuniao-ui/libs/css/style.h5.scss
@@ -0,0 +1,35 @@
+/* H5的时候，隐藏滚动条 */
+::-webkit-scrollbar {
+	display: none;  
+	width: 0 !important;  
+	height: 0 !important;  
+	-webkit-appearance: none;  
+	background: transparent;  
+}
+
+/* 双标签 start*/
+.capsule {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 20%;
+  min-width: 136rpx;
+  height: 45rpx;
+  
+  .capsule-tag {
+    margin: 0;
+    
+    &:first-child {
+      border-top-right-radius: 0rpx;
+      border-bottom-right-radius: 0rpx;
+    }
+    
+    &:last-child {
+      
+      &::after {
+        border-top-left-radius: 0rpx;
+        border-bottom-left-radius: 0rpx;
+      }
+    }
+  }
+}
+/* 双标签 end*/
\ No newline at end of file
diff --git a/tuniao-ui/libs/css/style.mp.scss b/tuniao-ui/libs/css/style.mp.scss
new file mode 100644
index 0000000..f5aed9e
--- /dev/null
+++ b/tuniao-ui/libs/css/style.mp.scss
@@ -0,0 +1,52 @@
+::-webkit-scrollbar {
+	display: none;  
+	width: 0 !important;  
+	height: 0 !important;  
+	-webkit-appearance: none;  
+	background: transparent;  
+}
+/* 微信小程序编译后页面有组件名的元素，特别处理 start */
+/* #ifdef MP-WEIXIN || MP-QQ */
+// 各家小程序宫格组件外层设置为100%，避免受到父元素display: flex;的影响
+
+/* 双标签 start*/
+.capsule {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 20%;
+  min-width: 136rpx;
+  height: 45rpx;
+  
+  tn-tag {
+    margin: 0;
+    width: 100%;
+    
+    &:first-child {
+      .tn-tag {
+        border-top-right-radius: 0rpx;
+        border-bottom-right-radius: 0rpx;
+      }
+    }
+    
+    &:last-child {
+      .tn-tag {
+        &::after {
+          border-top-left-radius: 0rpx;
+          border-bottom-left-radius: 0rpx;
+        }
+      }
+      
+      
+    }
+  }
+}
+/* 双标签 end*/
+
+/* #endif */
+/* 微信小程序编译后页面有组件名的元素，特别处理 end */
+
+/* 头条小程序编译后页面有组件名的元素，特别处理 start */
+/* #ifdef MP-TOUTIAO */
+// 各家小程序宫格组件外层设置为100%，避免受到父元素display: flex;的影响
+/* #endif */
+/* 头条小程序编译后页面有组件名的元素，特别处理 end */
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/$parent.js b/tuniao-ui/libs/function/$parent.js
new file mode 100644
index 0000000..49854cc
--- /dev/null
+++ b/tuniao-ui/libs/function/$parent.js
@@ -0,0 +1,18 @@
+// 获取父组件的参数，在支付宝小程序中不支持provide/inject的写法
+// 在非H5中this.$parent可以获取到父组件，但是在H5中需要多次调用this.$parent.$parent.xxx
+// 传递默认值undefined表示查找最顶层的$parent
+export default function $parent(name = undefined) {
+  let parent = this.$parent
+  // 通过whle遍历，这里主要是为了H5需要多层解析
+  while(parent) {
+    // 父组件
+    if (parent.$options && parent.$options.name !== name) {
+      // 如果组件的name不相等，则继续查找
+      parent = parent.$parent
+    } else {
+      return parent
+    }
+  }
+  
+  return false
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/array.js b/tuniao-ui/libs/function/array.js
new file mode 100644
index 0000000..fa947ea
--- /dev/null
+++ b/tuniao-ui/libs/function/array.js
@@ -0,0 +1,22 @@
+/**
+ * 打乱传入的数组
+ * 
+ * @param {Array} array 待打乱的数组 
+ */
+function random(array = []) {
+  return array.sort(() => Math.random() - 0.5)
+}
+
+/**
+ * 判断是否为数组
+ * 
+ * @param {Object} arr
+ */
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]'
+}
+
+export default {
+  random,
+  isArray
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/color.js b/tuniao-ui/libs/function/color.js
new file mode 100644
index 0000000..11f3365
--- /dev/null
+++ b/tuniao-ui/libs/function/color.js
@@ -0,0 +1,270 @@
+let color = [
+  'red',
+  'purplered',
+  'purple',
+  'bluepurple',
+  'aquablue',
+  'blue',
+  'indigo',
+  'cyan',
+  'teal',
+  'green',
+  'yellowgreen',
+  'lime',
+  'yellow',
+  'orangeyellow',
+  'orange',
+  'orangered',
+  'brown',
+  'grey',
+  'gray'
+]
+
+// 酷炫颜色的数量
+const COOL_BG_COLOR_COUNT = 16
+
+/**
+ * 获取图鸟配色颜色列表
+ */
+function getTuniaoColorList() {
+  return color
+}
+
+/**
+ * 获取指定类型的随机颜色对应的类
+ * @param {String} type 颜色类型
+ */
+function getRandomColorClass(type = 'bg') {
+  const index = Math.floor(Math.random() * color.length)
+  const colorValue = color[index]
+
+  return 'tn-' + type + '-' + colorValue
+}
+
+/**
+ * 随机获取酷炫背景对应的类
+ */
+function getRandomCoolBgClass() {
+  const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
+  return 'tn-cool-bg-color-' + Math.floor(index)
+}
+
+/**
+ * 根据传入的值获取内部背景颜色类
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorInternalClass(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取背景颜色样式
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorStyle(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (!backgroundColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取内部字体颜色类
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorInternalClass(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (['tn-color'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取字体颜色样式
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorStyle(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (!fontColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 求两个颜色之间的渐变值
+ * 
+ * @param {String} startColor 开始颜色
+ * @param {String} endColor 结束颜色
+ * @param {Number} step 颜色等分的份额 
+ */
+function colorGradient(startColor = 'rgb(0, 0, 0)', endColor='rgb(255, 255, 255)', step = 10) {
+  let startRGB = hexToRGB(startColor, false)
+  let startR = startRGB[0]
+  let startG = startRGB[1]
+  let startB = startRGB[2]
+  
+  let endRGB = hexToRGB(endColor, false)
+  let endR = endRGB[0]
+  let endG = endRGB[1]
+  let endB = endRGB[2]
+  
+  // 求差值
+  let R = (endR - startR) / step
+  let G = (endG - startG) / step
+  let B = (endB - startB) / step
+  
+  let colorArr = []
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    let hex = rgbToHex(`rgb(${Math.round(R * i + startR)}, ${Math.round(G * i + startG)}, ${Math.round(B * i + startB)})`)
+    colorArr.push(hex)
+  }
+  return colorArr
+}
+
+/**
+ * 将hex的颜色表示方式转换为rgb表示方式
+ * 
+ * @param {String} color 颜色
+ * @param {Boolean} str 是否返回字符串
+ * @return {Array|String} rgb的值
+ */
+function hexToRGB(color, str = true) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    if (!str) {
+      return colorChange
+    } else {
+      return `rgb(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]})`
+    }
+  } else if (/^(rgb|RGB)/.test(color)) {
+    let arr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(',')
+    return arr.map(item => Number(item))
+  } else {
+    return color
+  }
+}
+
+/**
+ * 将rgb的颜色表示方式转换成hex表示方式
+ * 
+ * @param {Object} rgb rgb颜色值
+ */
+function rgbToHex(rgb) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  if (/^(rgb|RGB)/.test(rgb)) {
+    let color = rgb.replace(/(?:\(|\)|rgb|GRB)*/g, "").split(',')
+    let strHex = '#'
+    for (let i = 0; i < color.length; i++) {
+      let hex = Number(color[i]).toString(16)
+      // 保证每个值否是两位数
+      hex = String(hex).length === 1 ? 0 + '' + hex: hex
+      if (hex === '0') {
+        hex += hex
+      }
+      strHex += hex
+    }
+    if (strHex.length !== 7) {
+      strHex = rgb
+    }
+    return strHex
+  } else if (reg.test(rgb)) {
+    let num = rgb.replace(/#/, '').split('')
+    if (num.length === 6) {
+      return rgb
+    } else if (num.length === 3) {
+      let numHex = '#'
+      for (let i = 0; i < num.length; i++) {
+        numHex += (num[i] + num[i])
+      }
+      return numHex
+    }
+  } else {
+    return rgb
+  }
+}
+
+/**
+ * 将传入的颜色值转换为rgba字符串
+ * 
+ * @param {String} color 颜色
+ * @param {Number} alpha 透明度
+ */
+function colorToRGBA(color, alpha = 0.3) {
+  color = rgbToHex(color)
+  // 十六进制颜色值的正则表达式
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    return `rgba(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]}, ${alpha})`
+  } else {
+    return color
+  }
+}
+
+export default {
+  COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
+  getTuniaoColorList,
+  getRandomColorClass,
+  getRandomCoolBgClass,
+  getBackgroundColorInternalClass,
+  getBackgroundColorStyle,
+  getFontColorInternalClass,
+  getFontColorStyle,
+  colorGradient,
+  hexToRGB,
+  rgbToHex,
+  colorToRGBA
+}
diff --git a/tuniao-ui/libs/function/deepClone.js b/tuniao-ui/libs/function/deepClone.js
new file mode 100644
index 0000000..81f4e42
--- /dev/null
+++ b/tuniao-ui/libs/function/deepClone.js
@@ -0,0 +1,29 @@
+/**
+ * 判断是否为数组
+ * 
+ * @param {Object} arr
+ */
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]'
+}
+
+/**
+ * 深度复制数据
+ * 
+ * @param {Object} obj
+ */
+function deepClone(obj) {
+  if ([null, undefined, NaN, false].includes(obj)) return obj
+  if (typeof obj !== 'object' && typeof obj !== 'function') {
+    return obj
+  }
+  var o = isArray(obj) ? [] : {}
+  for (let i in obj) {
+    if (obj.hasOwnProperty(i)) {
+      o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
+    }
+  }
+  return o
+}
+
+export default deepClone
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/message.js b/tuniao-ui/libs/function/message.js
new file mode 100644
index 0000000..113cc0f
--- /dev/null
+++ b/tuniao-ui/libs/function/message.js
@@ -0,0 +1,74 @@
+/**
+ * 弹出系统内置的toast
+ */
+function toast(title, mask = false, cb = null, icon = 'none', duration = 1500) {
+  uni.showToast({
+    title: title,
+    icon: icon,
+    mask: mask,
+    duration: duration,
+    success: () => {
+      setTimeout(() => {
+        cb && cb()
+      }, duration)
+    }
+  })
+}
+
+/**
+ * 弹出内置的加载框
+ */
+function loading(title) {
+  uni.showLoading({
+    title: title,
+    mask: true
+  })
+}
+
+/**
+ * 弹出系统内置的modal
+ */
+function modal(title,
+  content,
+  confirmCb,
+  showCancel = false,
+  cancelCb = null,
+  confirmText = "确定",
+  cancelText = "取消") {
+  uni.showModal({
+    title: title,
+    content: content,
+    showCancel: showCancel,
+    cancelText: cancelText,
+    confirmText: confirmText,
+    success: (res) => {
+      if (res.cancel) {
+        cancelCb && cancelCb()
+      } else if (res.confirm) {
+        confirmCb && confirmCb()
+      }
+    }
+  })
+}
+
+/**
+ * 关闭系统内置toast
+ */
+function closeToast() {
+  uni.hideToast()
+}
+
+/**
+ * 关闭系统内置的加载框
+ */
+function closeLoading() {
+  uni.hideLoading()
+}
+
+export default {
+  toast,
+  loading,
+  modal,
+  closeToast,
+  closeLoading
+}
diff --git a/tuniao-ui/libs/function/number.js b/tuniao-ui/libs/function/number.js
new file mode 100644
index 0000000..ec64ff0
--- /dev/null
+++ b/tuniao-ui/libs/function/number.js
@@ -0,0 +1,128 @@
+/**
+ * 格式化数字字符串
+ * @param {String, Number} value 待格式化的字符串
+ * @param {Number} digits 保留位数 
+ */
+function formatNumberString(value, digits = 2) {
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  if (isNaN(number) || number === 0) {
+    return 0
+  }
+  
+  let maxNumber = Math.pow(10, digits) - 1
+  if (number > maxNumber) {
+    return `${maxNumber}+`
+  }
+  
+  return number
+}
+
+/**
+ * 格式化数字字符串，往数字前添加0
+ * 
+ * @param {Object} num 待格式化的数值
+ */
+function formatNumberAddZero(value) {
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  if (isNaN(number) || +number < 10) {
+    return '0' + number
+  } else {
+    return String(number)
+  }
+  
+}
+
+/**
+ * 格式化数字，往数值后添加单位
+ *
+ * @param {Object} value 待格式化的数值
+ * @param {Object} digits 保留位数
+ */
+function formatNumberAddPriceUnit(value, digits = 2) {
+  // 数值分割点
+  const unitSplit = [
+    { value: 1, symbol: ''},
+    { value: 1E3, symbol: 'K'},
+    { value: 1E4, symbol: 'W'},
+  ]
+  
+  const reg = /\.0+$|(\.[0=9]*[1-9])0+$/
+  
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  
+  let i
+  for (i = unitSplit.length - 1; i > 0; i--) {
+    if (number >= unitSplit[i].value) break
+  }
+  return (number / unitSplit[i].value).toFixed(digits).replace(reg, "$1") + unitSplit[i].symbol
+}
+
+/**
+ * 获取数值的整数位数
+ *
+ * @param {Object} number 数值 
+ */
+function getDigit(number) {
+  let digit = -1
+  while (number >= 1) {
+    digit++
+    number = number / 10
+  }
+  return digit
+}
+
+/**
+ * 获取指定范围的随机数(返回整数)
+ 
+ * @param {Object} min 最小值
+ * @param {Object} max 最大值
+ */
+function random(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    let gab = max - min
+    return Math.random() * gab + min
+  } else {
+    return 0
+  }
+}
+
+/**
+ * 获取指定范围的随机数(返回整数)
+ 
+ * @param {Object} min 最小值
+ * @param {Object} max 最大值
+ */
+function randomInt(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    let gab = max - min + 1
+    return Math.floor(Math.random() * gab + min)
+  } else {
+    return 0
+  }
+}
+
+export default {
+  formatNumberString,
+  formatNumberAddZero,
+  formatNumberAddPriceUnit,
+  random,
+  randomInt
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/string.js b/tuniao-ui/libs/function/string.js
new file mode 100644
index 0000000..dadc24c
--- /dev/null
+++ b/tuniao-ui/libs/function/string.js
@@ -0,0 +1,69 @@
+/**
+ * 去掉字符串中空格
+ * 
+ * @param {String} str 待处理的字符串
+ * @param {String} type 处理类型
+ */
+function trim(str, type = 'both') {
+  if (type === 'both') {
+    return str.replace(/^\s+|\s+$/g, "")
+  } else if (type === 'left') {
+    return str.replace(/^\s*/g, "")
+  } else if (type === 'right') {
+    return str.replace(/(\s*$)/g, "")
+  } else if (type === 'all') {
+    return str.replace(/\s+/g, "")
+  } else {
+    return str
+  }
+}
+
+/**
+ * 获取带单位的长度值
+ * 
+ * @param {String} value 待处理的值
+ * @param {String} unit 单位
+ */
+function getLengthUnitValue(value, unit = 'rpx') {
+  if (!value) {
+    return ''
+  }
+  if (/(%|px|rpx|auto)$/.test(value)) return value
+  else return value + unit
+}
+
+/**
+ * 将驼峰命名的字符串转换为指定连接符来进行连接
+ * 
+ * @param {Object} string 待转换的字符串
+ * @param {Object} replace 进行连接的字符
+ */
+function humpConvertChar(string, replace = '_') {
+  if (!string || !replace) {
+    return ''
+  }
+  return string.replace(/([A-Z])/g, `${replace}$1`).toLowerCase()
+}
+
+/**
+ * 将用指定连接符来进行连接的字符串转为驼峰命名的字符串
+ * 
+ * @param {Object} string 待转换的字符串
+ * @param {Object} replace 进行连接的字符
+ */
+function charConvertHump(string, replace = '_') {
+  if (!string || !replace) {
+    return ''
+  }
+  let reg = RegExp(replace + "(\\w)", "g")
+  return string.replace(reg, function(all, letter) {
+    return letter.toUpperCase()
+  })
+}
+
+export default {
+  trim,
+  getLengthUnitValue,
+  humpConvertChar,
+  charConvertHump
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/test.js b/tuniao-ui/libs/function/test.js
new file mode 100644
index 0000000..94fddac
--- /dev/null
+++ b/tuniao-ui/libs/function/test.js
@@ -0,0 +1,232 @@
+/**
+ * 验证电子邮箱格式
+ */
+function email(value) {
+	return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value);
+}
+
+/**
+ * 验证手机格式
+ */
+function mobile(value) {
+	return /^1[3-9]\d{9}$/.test(value)
+}
+
+/**
+ * 验证URL格式
+ */
+function url(value) {
+	return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/.test(value)
+}
+
+/**
+ * 验证日期格式
+ */
+function date(value) {
+	return !/Invalid|NaN/.test(new Date(value).toString())
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+function dateISO(value) {
+	return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+}
+
+/**
+ * 验证十进制数字
+ */
+function number(value) {
+	return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
+}
+
+/**
+ * 验证整数
+ */
+function digits(value) {
+	return /^\d+$/.test(value)
+}
+
+/**
+ * 验证身份证号码
+ */
+function idCard(value) {
+	return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
+		value)
+}
+
+/**
+ * 是否车牌号
+ */
+function carNo(value) {
+	// 新能源车牌
+	const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
+	// 旧车牌
+	const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
+	if (value.length === 7) {
+		return creg.test(value);
+	} else if (value.length === 8) {
+		return xreg.test(value);
+	} else {
+		return false;
+	}
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+function amount(value) {
+	//金额，只允许保留两位小数
+	return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
+}
+
+/**
+ * 中文
+ */
+function chinese(value) {
+	let reg = /^[\u4e00-\u9fa5]+$/gi;
+	return reg.test(value);
+}
+
+/**
+ * 只能输入字母
+ */
+function letter(value) {
+	return /^[a-zA-Z]*$/.test(value);
+}
+
+/**
+ * 只能是字母或者数字
+ */
+function enOrNum(value) {
+	//英文或者数字
+	let reg = /^[0-9a-zA-Z]*$/g;
+	return reg.test(value);
+}
+
+/**
+ * 验证是否包含某个值
+ */
+function contains(value, param) {
+	return value.indexOf(param) >= 0
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+function range(value, param) {
+	return value >= param[0] && value <= param[1]
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+function rangeLength(value, param) {
+	return value.length >= param[0] && value.length <= param[1]
+}
+
+/**
+ * 是否固定电话
+ */
+function landline(value) {
+	let reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
+	return reg.test(value);
+}
+
+/**
+ * 判断是否为空
+ */
+function empty(value) {
+	switch (typeof value) {
+		case 'undefined':
+			return true;
+		case 'string':
+			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+			break;
+		case 'boolean':
+			if (!value) return true;
+			break;
+		case 'number':
+			if (0 === value || isNaN(value)) return true;
+			break;
+		case 'object':
+			if (null === value || value.length === 0) return true;
+			for (var i in value) {
+				return false;
+			}
+			return true;
+	}
+	return false;
+}
+
+/**
+ * 是否json字符串
+ */
+function jsonString(value) {
+	if (typeof value == 'string') {
+		try {
+			var obj = JSON.parse(value);
+			if (typeof obj == 'object' && obj) {
+				return true;
+			} else {
+				return false;
+			}
+		} catch (e) {
+			return false;
+		}
+	}
+	return false;
+}
+
+
+/**
+ * 是否数组
+ */
+function array(value) {
+	if (typeof Array.isArray === "function") {
+		return Array.isArray(value);
+	} else {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+}
+
+/**
+ * 是否对象
+ */
+function object(value) {
+	return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/**
+ * 是否短信验证码
+ */
+function code(value, len = 6) {
+	return new RegExp(`^\\d{${len}}$`).test(value);
+}
+
+
+export default {
+	email,
+	mobile,
+	url,
+	date,
+	dateISO,
+	number,
+	digits,
+	idCard,
+	carNo,
+	amount,
+	chinese,
+	letter,
+	enOrNum,
+	contains,
+	range,
+	rangeLength,
+	empty,
+	isEmpty: empty,
+	jsonString,
+	landline,
+	object,
+	array,
+	code
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/updateCustomBarInfo.js b/tuniao-ui/libs/function/updateCustomBarInfo.js
new file mode 100644
index 0000000..eae9f45
--- /dev/null
+++ b/tuniao-ui/libs/function/updateCustomBarInfo.js
@@ -0,0 +1,44 @@
+/**
+ * 更新自定义顶部导航栏的高度
+ */
+function updateCustomBarInfo () {
+  return new Promise((resolve, reject) => {
+    uni.getSystemInfo({
+      success: (e) => {
+        let statusBarHeight = 0
+        let customBarHeight = 0
+        // #ifndef MP
+        statusBarHeight = e.statusBarHeight
+        if (e.platform == 'android') {
+          customBarHeight = e.statusBarHeight + 50
+        } else {
+          customBarHeight = e.statusBarHeight + 45
+        };
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        statusBarHeight = e.statusBarHeight
+        let custom = wx.getMenuButtonBoundingClientRect()
+        customBarHeight = custom.bottom + ((custom.top - e.statusBarHeight) <= 4 ? (custom.top - e
+          .statusBarHeight) + 4 : (custom.top - e.statusBarHeight))
+        // #endif		
+
+        // #ifdef MP-ALIPAY
+        statusBarHeight = e.statusBarHeight
+        customBarHeight = e.statusBarHeight + e.titleBarHeight
+        // #endif
+        resolve({
+          statusBarHeight,
+          customBarHeight
+        })
+      },
+      fail: (err) => {
+        console.log("获取设备信息失败", err);
+        reject()
+      }
+    })
+
+  })
+}
+
+export default updateCustomBarInfo
diff --git a/tuniao-ui/libs/function/uuid.js b/tuniao-ui/libs/function/uuid.js
new file mode 100644
index 0000000..e3cf39e
--- /dev/null
+++ b/tuniao-ui/libs/function/uuid.js
@@ -0,0 +1,41 @@
+/**
+ * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
+ * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) 
+ * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
+ * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
+ * v-for的时候,推荐使用后端返回的id而不是循环的index
+ * @param {Number} len uuid的长度
+ * @param {Boolean} firstT 将返回的首字母置为"t"
+ * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+ */
+function uuid(len = 32, firstT = true, radix = null) {
+	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+	let uuid = []
+	radix = radix || chars.length
+
+	if (len) {
+		// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+		for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
+	} else {
+		let r;
+		// rfc4122标准要求返回的uuid中,某些位为固定的字符
+		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+		uuid[14] = '4'
+
+		for (let i = 0; i < 36; i++) {
+			if (!uuid[i]) {
+				r = 0 | Math.random() * 16
+				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
+			}
+		}
+	}
+	// 移除第一个字符,并用t替代,因为第一个字符为数值时,该uuid不能用作id或者class
+	if (firstT) {
+		uuid.shift()
+		return 't' + uuid.join('')
+	} else {
+		return uuid.join('')
+	}
+}
+
+export default uuid
\ No newline at end of file
diff --git a/tuniao-ui/libs/luch-request/adapters/index.js b/tuniao-ui/libs/luch-request/adapters/index.js
new file mode 100644
index 0000000..5a478b5
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/adapters/index.js
@@ -0,0 +1,99 @@
+import buildURL from '../helpers/buildURL'
+import buildFullPath from '../core/buildFullPath'
+import settle from '../core/settle'
+import { isUndefined } from "../utils"
+
+/**
+ * 返回可选值存在的配置
+ * @param {Array} keys - 可选值数组
+ * @param {Object} config2 - 配置
+ * @return {{}} - 存在的配置项
+ */
+const mergeKeys = (keys, config2) => {
+  let config = {}
+  keys.forEach(prop => {
+    if (!isUndefined(config2[prop])) {
+      config[prop] = config2[prop]
+    }
+  })
+  return config
+}
+export default (config) => {
+  return new Promise((resolve, reject) => {
+    let fullPath = buildURL(buildFullPath(config.baseURL, config.url), config.params)
+    const _config = {
+      url: fullPath,
+      header: config.header,
+      complete: (response) => {
+        config.fullPath = fullPath
+        response.config = config
+        try {
+          // 对可能字符串不是json 的情况容错
+          if (typeof response.data === 'string') {
+            response.data = JSON.parse(response.data)
+          }
+          // eslint-disable-next-line no-empty
+        } catch (e) {
+        }
+        settle(resolve, reject, response)
+      }
+    }
+    let requestTask
+    if (config.method === 'UPLOAD') {
+      delete _config.header['content-type']
+      delete _config.header['Content-Type']
+      let otherConfig = {
+        // #ifdef MP-ALIPAY
+        fileType: config.fileType,
+        // #endif
+        filePath: config.filePath,
+        name: config.name
+      }
+      const optionalKeys = [
+        // #ifdef APP-PLUS || H5
+        'files',
+        // #endif
+        // #ifdef H5
+        'file',
+        // #endif
+        // #ifdef H5 || APP-PLUS
+        'timeout',
+        // #endif
+        'formData'
+      ]
+      requestTask = uni.uploadFile({..._config, ...otherConfig, ...mergeKeys(optionalKeys, config)})
+    } else if (config.method === 'DOWNLOAD') {
+      // #ifdef H5 || APP-PLUS
+      if (!isUndefined(config['timeout'])) {
+        _config['timeout'] = config['timeout']
+      }
+      // #endif
+      requestTask = uni.downloadFile(_config)
+    } else {
+      const optionalKeys = [
+        'data',
+        'method',
+        // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+        'timeout',
+        // #endif
+        'dataType',
+        // #ifndef MP-ALIPAY
+        'responseType',
+        // #endif
+        // #ifdef APP-PLUS
+        'sslVerify',
+        // #endif
+        // #ifdef H5
+        'withCredentials',
+        // #endif
+        // #ifdef APP-PLUS
+        'firstIpv4',
+        // #endif
+      ]
+      requestTask = uni.request({..._config,...mergeKeys(optionalKeys, config)})
+    }
+    if (config.getTask) {
+      config.getTask(requestTask, config)
+    }
+  })
+}
diff --git a/tuniao-ui/libs/luch-request/core/InterceptorManager.js b/tuniao-ui/libs/luch-request/core/InterceptorManager.js
new file mode 100644
index 0000000..3ea0d5e
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/InterceptorManager.js
@@ -0,0 +1,51 @@
+'use strict'
+
+
+function InterceptorManager() {
+  this.handlers = []
+}
+
+/**
+ * Add a new interceptor to the stack
+ *
+ * @param {Function} fulfilled The function to handle `then` for a `Promise`
+ * @param {Function} rejected The function to handle `reject` for a `Promise`
+ *
+ * @return {Number} An ID used to remove interceptor later
+ */
+InterceptorManager.prototype.use = function use(fulfilled, rejected) {
+  this.handlers.push({
+    fulfilled: fulfilled,
+    rejected: rejected
+  })
+  return this.handlers.length - 1
+}
+
+/**
+ * Remove an interceptor from the stack
+ *
+ * @param {Number} id The ID that was returned by `use`
+ */
+InterceptorManager.prototype.eject = function eject(id) {
+  if (this.handlers[id]) {
+    this.handlers[id] = null
+  }
+}
+
+/**
+ * Iterate over all the registered interceptors
+ *
+ * This method is particularly useful for skipping over any
+ * interceptors that may have become `null` calling `eject`.
+ *
+ * @param {Function} fn The function to call for each interceptor
+ */
+InterceptorManager.prototype.forEach = function forEach(fn) {
+  this.handlers.forEach(h => {
+    if (h !== null) {
+      fn(h)
+    }
+  })
+}
+
+export default InterceptorManager
diff --git a/tuniao-ui/libs/luch-request/core/Request.js b/tuniao-ui/libs/luch-request/core/Request.js
new file mode 100644
index 0000000..43bb14c
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/Request.js
@@ -0,0 +1,200 @@
+/**
+ * @Class Request
+ * @description luch-request http请求插件
+ * @version 3.0.7
+ * @Author lu-ch
+ * @Date 2021-09-04
+ * @Email webwork.s@qq.com
+ * 文档: https://www.quanzhan.co/luch-request/
+ * github: https://github.com/lei-mu/luch-request
+ * DCloud: http://ext.dcloud.net.cn/plugin?id=392
+ * HBuilderX: beat-3.0.4 alpha-3.0.4
+ */
+
+
+import dispatchRequest from './dispatchRequest'
+import InterceptorManager from './InterceptorManager'
+import mergeConfig from './mergeConfig'
+import defaults from './defaults'
+import { isPlainObject } from '../utils'
+import clone from '../utils/clone'
+
+export default class Request {
+  /**
+   * @param {Object} arg - 全局配置
+   * @param {String} arg.baseURL - 全局根路径
+   * @param {Object} arg.header - 全局header
+   * @param {String} arg.method = [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE] - 全局默认请求方式
+   * @param {String} arg.dataType = [json] - 全局默认的dataType
+   * @param {String} arg.responseType = [text|arraybuffer] - 全局默认的responseType。支付宝小程序不支持
+   * @param {Object} arg.custom - 全局默认的自定义参数
+   * @param {Number} arg.timeout - 全局默认的超时时间，单位 ms。默认60000。H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
+   * @param {Boolean} arg.sslVerify - 全局默认的是否验证 ssl 证书。默认true.仅App安卓端支持（HBuilderX 2.3.3+）
+   * @param {Boolean} arg.withCredentials - 全局默认的跨域请求时是否携带凭证（cookies）。默认false。仅H5支持（HBuilderX 2.6.15+）
+   * @param {Boolean} arg.firstIpv4 - 全DNS解析时优先使用ipv4。默认false。仅 App-Android 支持 (HBuilderX 2.8.0+)
+   * @param {Function(statusCode):Boolean} arg.validateStatus - 全局默认的自定义验证器。默认statusCode >= 200 && statusCode < 300
+   */
+  constructor(arg = {}) {
+    if (!isPlainObject(arg)) {
+      arg = {}
+      console.warn('设置全局参数必须接收一个Object')
+    }
+    this.config = clone({...defaults, ...arg})
+    this.interceptors = {
+      request: new InterceptorManager(),
+      response: new InterceptorManager()
+    }
+  }
+
+  /**
+   * @Function
+   * @param {Request~setConfigCallback} f - 设置全局默认配置
+   */
+  setConfig(f) {
+    this.config = f(this.config)
+  }
+
+  middleware(config) {
+    config = mergeConfig(this.config, config)
+    let chain = [dispatchRequest, undefined]
+    let promise = Promise.resolve(config)
+
+    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
+      chain.unshift(interceptor.fulfilled, interceptor.rejected)
+    })
+
+    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
+      chain.push(interceptor.fulfilled, interceptor.rejected)
+    })
+
+    while (chain.length) {
+      promise = promise.then(chain.shift(), chain.shift())
+    }
+
+    return promise
+  }
+
+  /**
+   * @Function
+   * @param {Object} config - 请求配置项
+   * @prop {String} options.url - 请求路径
+   * @prop {Object} options.data - 请求参数
+   * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
+   * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
+   * @prop {Object} [options.header = config.header] - 请求header
+   * @prop {Object} [options.method = config.method] - 请求方法
+   * @returns {Promise<unknown>}
+   */
+  request(config = {}) {
+    return this.middleware(config)
+  }
+
+  get(url, options = {}) {
+    return this.middleware({
+      url,
+      method: 'GET',
+      ...options
+    })
+  }
+
+  post(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'POST',
+      ...options
+    })
+  }
+
+  // #ifndef MP-ALIPAY
+  put(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'PUT',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+  delete(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'DELETE',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef H5 || MP-WEIXIN
+  connect(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'CONNECT',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef  H5 || MP-WEIXIN || MP-BAIDU
+  head(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'HEAD',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+  options(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'OPTIONS',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef H5 || MP-WEIXIN
+  trace(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'TRACE',
+      ...options
+    })
+  }
+
+  // #endif
+
+  upload(url, config = {}) {
+    config.url = url
+    config.method = 'UPLOAD'
+    return this.middleware(config)
+  }
+
+  download(url, config = {}) {
+    config.url = url
+    config.method = 'DOWNLOAD'
+    return this.middleware(config)
+  }
+}
+
+
+/**
+ * setConfig回调
+ * @return {Object} - 返回操作后的config
+ * @callback Request~setConfigCallback
+ * @param {Object} config - 全局默认config
+ */
diff --git a/tuniao-ui/libs/luch-request/core/buildFullPath.js b/tuniao-ui/libs/luch-request/core/buildFullPath.js
new file mode 100644
index 0000000..f2852f4
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/buildFullPath.js
@@ -0,0 +1,20 @@
+'use strict'
+
+import isAbsoluteURL from '../helpers/isAbsoluteURL'
+import combineURLs from '../helpers/combineURLs'
+
+/**
+ * Creates a new URL by combining the baseURL with the requestedURL,
+ * only when the requestedURL is not already an absolute URL.
+ * If the requestURL is absolute, this function returns the requestedURL untouched.
+ *
+ * @param {string} baseURL The base URL
+ * @param {string} requestedURL Absolute or relative URL to combine
+ * @returns {string} The combined full path
+ */
+export default function buildFullPath(baseURL, requestedURL) {
+  if (baseURL && !isAbsoluteURL(requestedURL)) {
+    return combineURLs(baseURL, requestedURL)
+  }
+  return requestedURL
+}
diff --git a/tuniao-ui/libs/luch-request/core/defaults.js b/tuniao-ui/libs/luch-request/core/defaults.js
new file mode 100644
index 0000000..38afc3a
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/defaults.js
@@ -0,0 +1,30 @@
+/**
+ * 默认的全局配置
+ */
+
+
+export default {
+  baseURL: '',
+  header: {},
+  method: 'GET',
+  dataType: 'json',
+  // #ifndef MP-ALIPAY
+  responseType: 'text',
+  // #endif
+  custom: {},
+  // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+  timeout: 60000,
+  // #endif
+  // #ifdef APP-PLUS
+  sslVerify: true,
+  // #endif
+  // #ifdef H5
+  withCredentials: false,
+  // #endif
+  // #ifdef APP-PLUS
+  firstIpv4: false,
+  // #endif
+  validateStatus: function validateStatus(status) {
+    return status >= 200 && status < 300
+  }
+}
diff --git a/tuniao-ui/libs/luch-request/core/dispatchRequest.js b/tuniao-ui/libs/luch-request/core/dispatchRequest.js
new file mode 100644
index 0000000..c5f2c85
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/dispatchRequest.js
@@ -0,0 +1,6 @@
+import adapter from '../adapters/index'
+
+
+export default (config) => {
+  return adapter(config)
+}
diff --git a/tuniao-ui/libs/luch-request/core/mergeConfig.js b/tuniao-ui/libs/luch-request/core/mergeConfig.js
new file mode 100644
index 0000000..a3ccbf7
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/mergeConfig.js
@@ -0,0 +1,103 @@
+import {deepMerge, isUndefined} from '../utils'
+
+/**
+ * 合并局部配置优先的配置，如果局部有该配置项则用局部，如果全局有该配置项则用全局
+ * @param {Array} keys - 配置项
+ * @param {Object} globalsConfig - 当前的全局配置
+ * @param {Object} config2 - 局部配置
+ * @return {{}}
+ */
+const mergeKeys = (keys, globalsConfig, config2) => {
+  let config = {}
+  keys.forEach(prop => {
+    if (!isUndefined(config2[prop])) {
+      config[prop] = config2[prop]
+    } else if (!isUndefined(globalsConfig[prop])) {
+      config[prop] = globalsConfig[prop]
+    }
+  })
+  return config
+}
+/**
+ *
+ * @param globalsConfig - 当前实例的全局配置
+ * @param config2 - 当前的局部配置
+ * @return - 合并后的配置
+ */
+export default (globalsConfig, config2 = {}) => {
+  const method = config2.method || globalsConfig.method || 'GET'
+  let config = {
+    baseURL: globalsConfig.baseURL || '',
+    method: method,
+    url: config2.url || '',
+    params: config2.params || {},
+    custom: {...(globalsConfig.custom || {}), ...(config2.custom || {})},
+    header: deepMerge(globalsConfig.header || {}, config2.header || {})
+  }
+  const defaultToConfig2Keys = ['getTask', 'validateStatus']
+  config = {...config, ...mergeKeys(defaultToConfig2Keys, globalsConfig, config2)}
+
+  // eslint-disable-next-line no-empty
+  if (method === 'DOWNLOAD') {
+    // #ifdef H5 || APP-PLUS
+    if (!isUndefined(config2.timeout)) {
+      config['timeout'] = config2['timeout']
+    } else if (!isUndefined(globalsConfig.timeout)) {
+      config['timeout'] = globalsConfig['timeout']
+    }
+    // #endif
+  } else if (method === 'UPLOAD') {
+    delete config.header['content-type']
+    delete config.header['Content-Type']
+    const uploadKeys = [
+      // #ifdef APP-PLUS || H5
+      'files',
+      // #endif
+      // #ifdef MP-ALIPAY
+      'fileType',
+      // #endif
+      // #ifdef H5
+      'file',
+      // #endif
+      'filePath',
+      'name',
+      // #ifdef H5 || APP-PLUS
+      'timeout',
+      // #endif
+      'formData',
+    ]
+    uploadKeys.forEach(prop => {
+      if (!isUndefined(config2[prop])) {
+        config[prop] = config2[prop]
+      }
+    })
+    // #ifdef H5 || APP-PLUS
+    if (isUndefined(config.timeout) && !isUndefined(globalsConfig.timeout)) {
+      config['timeout'] = globalsConfig['timeout']
+    }
+    // #endif
+  } else {
+    const defaultsKeys = [
+      'data',
+      // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+      'timeout',
+      // #endif
+      'dataType',
+      // #ifndef MP-ALIPAY
+      'responseType',
+      // #endif
+      // #ifdef APP-PLUS
+      'sslVerify',
+      // #endif
+      // #ifdef H5
+      'withCredentials',
+      // #endif
+      // #ifdef APP-PLUS
+      'firstIpv4',
+      // #endif
+    ]
+    config = {...config, ...mergeKeys(defaultsKeys, globalsConfig, config2)}
+  }
+
+  return config
+}
diff --git a/tuniao-ui/libs/luch-request/core/settle.js b/tuniao-ui/libs/luch-request/core/settle.js
new file mode 100644
index 0000000..b2f1659
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/settle.js
@@ -0,0 +1,16 @@
+/**
+ * Resolve or reject a Promise based on response status.
+ *
+ * @param {Function} resolve A function that resolves the promise.
+ * @param {Function} reject A function that rejects the promise.
+ * @param {object} response The response.
+ */
+export default function settle(resolve, reject, response) {
+  const validateStatus = response.config.validateStatus
+  const status = response.statusCode
+  if (status && (!validateStatus || validateStatus(status))) {
+    resolve(response)
+  } else {
+    reject(response)
+  }
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/buildURL.js b/tuniao-ui/libs/luch-request/helpers/buildURL.js
new file mode 100644
index 0000000..d26dc30
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/buildURL.js
@@ -0,0 +1,69 @@
+'use strict'
+
+import * as utils from './../utils'
+
+function encode(val) {
+  return encodeURIComponent(val).
+    replace(/%40/gi, '@').
+    replace(/%3A/gi, ':').
+    replace(/%24/g, '$').
+    replace(/%2C/gi, ',').
+    replace(/%20/g, '+').
+    replace(/%5B/gi, '[').
+    replace(/%5D/gi, ']')
+}
+
+/**
+ * Build a URL by appending params to the end
+ *
+ * @param {string} url The base of the url (e.g., http://www.google.com)
+ * @param {object} [params] The params to be appended
+ * @returns {string} The formatted url
+ */
+export default function buildURL(url, params) {
+  /*eslint no-param-reassign:0*/
+  if (!params) {
+    return url
+  }
+
+  var serializedParams
+  if (utils.isURLSearchParams(params)) {
+    serializedParams = params.toString()
+  } else {
+    var parts = []
+
+    utils.forEach(params, function serialize(val, key) {
+      if (val === null || typeof val === 'undefined') {
+        return
+      }
+
+      if (utils.isArray(val)) {
+        key = key + '[]'
+      } else {
+        val = [val]
+      }
+
+      utils.forEach(val, function parseValue(v) {
+        if (utils.isDate(v)) {
+          v = v.toISOString()
+        } else if (utils.isObject(v)) {
+          v = JSON.stringify(v)
+        }
+        parts.push(encode(key) + '=' + encode(v))
+      })
+    })
+
+    serializedParams = parts.join('&')
+  }
+
+  if (serializedParams) {
+    var hashmarkIndex = url.indexOf('#')
+    if (hashmarkIndex !== -1) {
+      url = url.slice(0, hashmarkIndex)
+    }
+
+    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
+  }
+
+  return url
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/combineURLs.js b/tuniao-ui/libs/luch-request/helpers/combineURLs.js
new file mode 100644
index 0000000..7b9d1ef
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/combineURLs.js
@@ -0,0 +1,14 @@
+'use strict'
+
+/**
+ * Creates a new URL by combining the specified URLs
+ *
+ * @param {string} baseURL The base URL
+ * @param {string} relativeURL The relative URL
+ * @returns {string} The combined URL
+ */
+export default function combineURLs(baseURL, relativeURL) {
+  return relativeURL
+    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
+    : baseURL
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js b/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js
new file mode 100644
index 0000000..2a82517
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js
@@ -0,0 +1,14 @@
+'use strict'
+
+/**
+ * Determines whether the specified URL is absolute
+ *
+ * @param {string} url The URL to test
+ * @returns {boolean} True if the specified URL is absolute, otherwise false
+ */
+export default function isAbsoluteURL(url) {
+  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
+  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
+  // by any combination of letters, digits, plus, period, or hyphen.
+  return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
+}
diff --git a/tuniao-ui/libs/luch-request/index.d.ts b/tuniao-ui/libs/luch-request/index.d.ts
new file mode 100644
index 0000000..e939ce1
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/index.d.ts
@@ -0,0 +1,116 @@
+type AnyObject = Record<string | number | symbol, any>
+type HttpPromise<T> = Promise<HttpResponse<T>>;
+type Tasks = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask
+export interface RequestTask {
+  abort: () => void;
+  offHeadersReceived: () => void;
+  onHeadersReceived: () => void;
+}
+export interface HttpRequestConfig<T = Tasks> {
+  /** 请求基地址 */
+  baseURL?: string;
+  /** 请求服务器接口地址 */
+  url?: string;
+
+  /** 请求查询参数，自动拼接为查询字符串 */
+  params?: AnyObject;
+  /** 请求体参数 */
+  data?: AnyObject;
+
+  /** 文件对应的 key */
+  name?: string;
+  /** HTTP 请求中其他额外的 form data */
+  formData?: AnyObject;
+  /** 要上传文件资源的路径。 */
+  filePath?: string;
+  /** 需要上传的文件列表。使用 files 时，filePath 和 name 不生效，App、H5（ 2.6.15+） */
+  files?: Array<{
+    name?: string;
+    file?: File;
+    uri: string;
+  }>;
+  /** 要上传的文件对象，仅H5（2.6.15+）支持 */
+  file?: File;
+
+  /** 请求头信息 */
+  header?: AnyObject;
+  /** 请求方式 */
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "CONNECT" | "HEAD" | "OPTIONS" | "TRACE" | "UPLOAD" | "DOWNLOAD";
+  /** 如果设为 json，会尝试对返回的数据做一次 JSON.parse */
+  dataType?: string;
+  /** 设置响应的数据类型，支付宝小程序不支持 */
+  responseType?: "text" | "arraybuffer";
+  /** 自定义参数 */
+  custom?: AnyObject;
+  /** 超时时间，仅微信小程序（2.10.0）、支付宝小程序支持 */
+  timeout?: number;
+  /** DNS解析时优先使用ipv4，仅 App-Android 支持 (HBuilderX 2.8.0+) */
+  firstIpv4?: boolean;
+  /** 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+） */
+  sslVerify?: boolean;
+  /** 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+） */
+  withCredentials?: boolean;
+
+  /** 返回当前请求的task, options。请勿在此处修改options。 */
+  getTask?: (task: T, options: HttpRequestConfig<T>) => void;
+  /**  全局自定义验证器 */
+  validateStatus?: (statusCode: number) => boolean | void;
+}
+export interface HttpResponse<T = any> {
+  config: HttpRequestConfig;
+  statusCode: number;
+  cookies: Array<string>;
+  data: T;
+  errMsg: string;
+  header: AnyObject;
+}
+export interface HttpUploadResponse<T = any> {
+  config: HttpRequestConfig;
+  statusCode: number;
+  data: T;
+  errMsg: string;
+}
+export interface HttpDownloadResponse extends HttpResponse {
+  tempFilePath: string;
+}
+export interface HttpError {
+  config: HttpRequestConfig;
+  statusCode?: number;
+  cookies?: Array<string>;
+  data?: any;
+  errMsg: string;
+  header?: AnyObject;
+}
+export interface HttpInterceptorManager<V, E = V> {
+  use(
+    onFulfilled?: (config: V) => Promise<V> | V,
+    onRejected?: (config: E) => Promise<E> | E
+  ): void;
+  eject(id: number): void;
+}
+export abstract class HttpRequestAbstract {
+  constructor(config?: HttpRequestConfig);
+  config: HttpRequestConfig;
+  interceptors: {
+    request: HttpInterceptorManager<HttpRequestConfig, HttpRequestConfig>;
+    response: HttpInterceptorManager<HttpResponse, HttpError>;
+  }
+  middleware<T = any>(config: HttpRequestConfig): HttpPromise<T>;
+  request<T = any>(config: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  get<T = any>(url: string, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  upload<T = any>(url: string, config?: HttpRequestConfig<UniApp.UploadTask>): HttpPromise<T>;
+  delete<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  head<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  post<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  put<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  connect<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  options<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  trace<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+
+  download(url: string, config?: HttpRequestConfig<UniApp.DownloadTask>): Promise<HttpDownloadResponse>;
+
+  setConfig(onSend: (config: HttpRequestConfig) => HttpRequestConfig): void;
+}
+
+declare class HttpRequest extends HttpRequestAbstract { }
+export default HttpRequest;
diff --git a/tuniao-ui/libs/luch-request/index.js b/tuniao-ui/libs/luch-request/index.js
new file mode 100644
index 0000000..d8fe348
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/index.js
@@ -0,0 +1,2 @@
+import Request from './core/Request'
+export default Request
diff --git a/tuniao-ui/libs/luch-request/utils.js b/tuniao-ui/libs/luch-request/utils.js
new file mode 100644
index 0000000..0b5bf21
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/utils.js
@@ -0,0 +1,135 @@
+'use strict'
+
+// utils is a library of generic helper functions non-specific to axios
+
+var toString = Object.prototype.toString
+
+/**
+ * Determine if a value is an Array
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Array, otherwise false
+ */
+export function isArray (val) {
+  return toString.call(val) === '[object Array]'
+}
+
+
+/**
+ * Determine if a value is an Object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Object, otherwise false
+ */
+export function isObject (val) {
+  return val !== null && typeof val === 'object'
+}
+
+/**
+ * Determine if a value is a Date
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Date, otherwise false
+ */
+export function isDate (val) {
+  return toString.call(val) === '[object Date]'
+}
+
+/**
+ * Determine if a value is a URLSearchParams object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a URLSearchParams object, otherwise false
+ */
+export function isURLSearchParams (val) {
+  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
+}
+
+
+/**
+ * Iterate over an Array or an Object invoking a function for each item.
+ *
+ * If `obj` is an Array callback will be called passing
+ * the value, index, and complete array for each item.
+ *
+ * If 'obj' is an Object callback will be called passing
+ * the value, key, and complete object for each property.
+ *
+ * @param {Object|Array} obj The object to iterate
+ * @param {Function} fn The callback to invoke for each item
+ */
+export function forEach (obj, fn) {
+  // Don't bother if no value provided
+  if (obj === null || typeof obj === 'undefined') {
+    return
+  }
+
+  // Force an array if not already something iterable
+  if (typeof obj !== 'object') {
+    /*eslint no-param-reassign:0*/
+    obj = [obj]
+  }
+
+  if (isArray(obj)) {
+    // Iterate over array values
+    for (var i = 0, l = obj.length; i < l; i++) {
+      fn.call(null, obj[i], i, obj)
+    }
+  } else {
+    // Iterate over object keys
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        fn.call(null, obj[key], key, obj)
+      }
+    }
+  }
+}
+
+/**
+ * 是否为boolean 值
+ * @param val
+ * @returns {boolean}
+ */
+export function isBoolean(val) {
+  return typeof val === 'boolean'
+}
+
+/**
+ * 是否为真正的对象{} new Object
+ * @param {any} obj - 检测的对象
+ * @returns {boolean}
+ */
+export function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+
+
+/**
+ * Function equal to merge with the difference being that no reference
+ * to original objects is kept.
+ *
+ * @see merge
+ * @param {Object} obj1 Object to merge
+ * @returns {Object} Result of all merge properties
+ */
+export function deepMerge(/* obj1, obj2, obj3, ... */) {
+  let result = {}
+  function assignValue(val, key) {
+    if (typeof result[key] === 'object' && typeof val === 'object') {
+      result[key] = deepMerge(result[key], val)
+    } else if (typeof val === 'object') {
+      result[key] = deepMerge({}, val)
+    } else {
+      result[key] = val
+    }
+  }
+  for (let i = 0, l = arguments.length; i < l; i++) {
+    forEach(arguments[i], assignValue)
+  }
+  return result
+}
+
+export function isUndefined (val) {
+  return typeof val === 'undefined'
+}
diff --git a/tuniao-ui/libs/luch-request/utils/clone.js b/tuniao-ui/libs/luch-request/utils/clone.js
new file mode 100644
index 0000000..2fee704
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/utils/clone.js
@@ -0,0 +1,264 @@
+/* eslint-disable */
+var clone = (function() {
+  'use strict';
+
+  function _instanceof(obj, type) {
+    return type != null && obj instanceof type;
+  }
+
+  var nativeMap;
+  try {
+    nativeMap = Map;
+  } catch(_) {
+    // maybe a reference error because no `Map`. Give it a dummy value that no
+    // value will ever be an instanceof.
+    nativeMap = function() {};
+  }
+
+  var nativeSet;
+  try {
+    nativeSet = Set;
+  } catch(_) {
+    nativeSet = function() {};
+  }
+
+  var nativePromise;
+  try {
+    nativePromise = Promise;
+  } catch(_) {
+    nativePromise = function() {};
+  }
+
+  /**
+   * Clones (copies) an Object using deep copying.
+   *
+   * This function supports circular references by default, but if you are certain
+   * there are no circular references in your object, you can save some CPU time
+   * by calling clone(obj, false).
+   *
+   * Caution: if `circular` is false and `parent` contains circular references,
+   * your program may enter an infinite loop and crash.
+   *
+   * @param `parent` - the object to be cloned
+   * @param `circular` - set to true if the object to be cloned may contain
+   *    circular references. (optional - true by default)
+   * @param `depth` - set to a number if the object is only to be cloned to
+   *    a particular depth. (optional - defaults to Infinity)
+   * @param `prototype` - sets the prototype to be used when cloning an object.
+   *    (optional - defaults to parent prototype).
+   * @param `includeNonEnumerable` - set to true if the non-enumerable properties
+   *    should be cloned as well. Non-enumerable properties on the prototype
+   *    chain will be ignored. (optional - false by default)
+   */
+  function clone(parent, circular, depth, prototype, includeNonEnumerable) {
+    if (typeof circular === 'object') {
+      depth = circular.depth;
+      prototype = circular.prototype;
+      includeNonEnumerable = circular.includeNonEnumerable;
+      circular = circular.circular;
+    }
+    // maintain two arrays for circular references, where corresponding parents
+    // and children have the same index
+    var allParents = [];
+    var allChildren = [];
+
+    var useBuffer = typeof Buffer != 'undefined';
+
+    if (typeof circular == 'undefined')
+      circular = true;
+
+    if (typeof depth == 'undefined')
+      depth = Infinity;
+
+    // recurse this function so we don't reset allParents and allChildren
+    function _clone(parent, depth) {
+      // cloning null always returns null
+      if (parent === null)
+        return null;
+
+      if (depth === 0)
+        return parent;
+
+      var child;
+      var proto;
+      if (typeof parent != 'object') {
+        return parent;
+      }
+
+      if (_instanceof(parent, nativeMap)) {
+        child = new nativeMap();
+      } else if (_instanceof(parent, nativeSet)) {
+        child = new nativeSet();
+      } else if (_instanceof(parent, nativePromise)) {
+        child = new nativePromise(function (resolve, reject) {
+          parent.then(function(value) {
+            resolve(_clone(value, depth - 1));
+          }, function(err) {
+            reject(_clone(err, depth - 1));
+          });
+        });
+      } else if (clone.__isArray(parent)) {
+        child = [];
+      } else if (clone.__isRegExp(parent)) {
+        child = new RegExp(parent.source, __getRegExpFlags(parent));
+        if (parent.lastIndex) child.lastIndex = parent.lastIndex;
+      } else if (clone.__isDate(parent)) {
+        child = new Date(parent.getTime());
+      } else if (useBuffer && Buffer.isBuffer(parent)) {
+        if (Buffer.from) {
+          // Node.js >= 5.10.0
+          child = Buffer.from(parent);
+        } else {
+          // Older Node.js versions
+          child = new Buffer(parent.length);
+          parent.copy(child);
+        }
+        return child;
+      } else if (_instanceof(parent, Error)) {
+        child = Object.create(parent);
+      } else {
+        if (typeof prototype == 'undefined') {
+          proto = Object.getPrototypeOf(parent);
+          child = Object.create(proto);
+        }
+        else {
+          child = Object.create(prototype);
+          proto = prototype;
+        }
+      }
+
+      if (circular) {
+        var index = allParents.indexOf(parent);
+
+        if (index != -1) {
+          return allChildren[index];
+        }
+        allParents.push(parent);
+        allChildren.push(child);
+      }
+
+      if (_instanceof(parent, nativeMap)) {
+        parent.forEach(function(value, key) {
+          var keyChild = _clone(key, depth - 1);
+          var valueChild = _clone(value, depth - 1);
+          child.set(keyChild, valueChild);
+        });
+      }
+      if (_instanceof(parent, nativeSet)) {
+        parent.forEach(function(value) {
+          var entryChild = _clone(value, depth - 1);
+          child.add(entryChild);
+        });
+      }
+
+      for (var i in parent) {
+        var attrs = Object.getOwnPropertyDescriptor(parent, i);
+        if (attrs) {
+          child[i] = _clone(parent[i], depth - 1);
+        }
+
+        try {
+          var objProperty = Object.getOwnPropertyDescriptor(parent, i);
+          if (objProperty.set === 'undefined') {
+            // no setter defined. Skip cloning this property
+            continue;
+          }
+          child[i] = _clone(parent[i], depth - 1);
+        } catch(e){
+          if (e instanceof TypeError) {
+            // when in strict mode, TypeError will be thrown if child[i] property only has a getter
+            // we can't do anything about this, other than inform the user that this property cannot be set.
+            continue
+          } else if (e instanceof ReferenceError) {
+            //this may happen in non strict mode
+            continue
+          }
+        }
+
+      }
+
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(parent);
+        for (var i = 0; i < symbols.length; i++) {
+          // Don't need to worry about cloning a symbol because it is a primitive,
+          // like a number or string.
+          var symbol = symbols[i];
+          var descriptor = Object.getOwnPropertyDescriptor(parent, symbol);
+          if (descriptor && !descriptor.enumerable && !includeNonEnumerable) {
+            continue;
+          }
+          child[symbol] = _clone(parent[symbol], depth - 1);
+          Object.defineProperty(child, symbol, descriptor);
+        }
+      }
+
+      if (includeNonEnumerable) {
+        var allPropertyNames = Object.getOwnPropertyNames(parent);
+        for (var i = 0; i < allPropertyNames.length; i++) {
+          var propertyName = allPropertyNames[i];
+          var descriptor = Object.getOwnPropertyDescriptor(parent, propertyName);
+          if (descriptor && descriptor.enumerable) {
+            continue;
+          }
+          child[propertyName] = _clone(parent[propertyName], depth - 1);
+          Object.defineProperty(child, propertyName, descriptor);
+        }
+      }
+
+      return child;
+    }
+
+    return _clone(parent, depth);
+  }
+
+  /**
+   * Simple flat clone using prototype, accepts only objects, usefull for property
+   * override on FLAT configuration object (no nested props).
+   *
+   * USE WITH CAUTION! This may not behave as you wish if you do not know how this
+   * works.
+   */
+  clone.clonePrototype = function clonePrototype(parent) {
+    if (parent === null)
+      return null;
+
+    var c = function () {};
+    c.prototype = parent;
+    return new c();
+  };
+
+// private utility functions
+
+  function __objToStr(o) {
+    return Object.prototype.toString.call(o);
+  }
+  clone.__objToStr = __objToStr;
+
+  function __isDate(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object Date]';
+  }
+  clone.__isDate = __isDate;
+
+  function __isArray(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object Array]';
+  }
+  clone.__isArray = __isArray;
+
+  function __isRegExp(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object RegExp]';
+  }
+  clone.__isRegExp = __isRegExp;
+
+  function __getRegExpFlags(re) {
+    var flags = '';
+    if (re.global) flags += 'g';
+    if (re.ignoreCase) flags += 'i';
+    if (re.multiline) flags += 'm';
+    return flags;
+  }
+  clone.__getRegExpFlags = __getRegExpFlags;
+
+  return clone;
+})();
+
+export default clone
diff --git a/tuniao-ui/libs/mixin/components_color.js b/tuniao-ui/libs/mixin/components_color.js
new file mode 100644
index 0000000..4cda18a
--- /dev/null
+++ b/tuniao-ui/libs/mixin/components_color.js
@@ -0,0 +1,47 @@
+module.exports = {
+  data() {
+    
+  },
+  props: {
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: ''
+    },
+    // 字体颜色
+    fontColor: {
+      type: String,
+      default: ''
+    },
+    // 字体大小
+    fontSize: {
+      type: Number,
+      default: 0
+    },
+    // 字体大小单位
+    fontUnit: {
+      type: String,
+      default: 'rpx'
+    }
+  },
+  computed: {
+    backgroundColorStyle() {
+      return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
+    },
+    backgroundColorClass() {
+      return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
+    },
+    fontColorStyle() {
+      return this.$tn.color.getFontColorStyle(this.fontColor)
+    },
+    fontColorClass() {
+      return this.$tn.color.getFontColorInternalClass(this.fontColor)
+    },
+    fontSizeStyle() {
+      return this.$tn.string.getLengthUnitValue(this.fontSize, this.fontUnit)
+    }
+  },
+  methods: {
+    
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/mixin.js b/tuniao-ui/libs/mixin/mixin.js
new file mode 100644
index 0000000..1110dde
--- /dev/null
+++ b/tuniao-ui/libs/mixin/mixin.js
@@ -0,0 +1,68 @@
+module.exports = {
+  data() {
+    return {}
+  },
+  onLoad() {
+    // getRect挂载再$t上，用为这个方法需要使用in（this），所以无法把它独立层一个单独的文件导出
+    this.$tn.getRect = this._tGetRect
+  },
+  beforeDestory() {
+    // 判断当前页面是否存在parent和children
+    // 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
+    if (this.parent && uni.$tn.test.array(this.parent.children)) {
+      // 组件销毁时，移除子组件在父组件children数组中的实例
+      const childrenList = this.parent.children
+      childrenList.map((child, index) => {
+        // 如果相对，则移除
+        if (child === this) {
+          childrenList.splice(index, 1)
+        }
+      })
+    }
+  },
+  methods: {
+    /**
+     * 查询节点信息
+     * 当前方法在支付宝小程序中无法获取组件跟接点的尺寸
+     * 解决办法：为组件根部再套一个没有任何作用的view元素
+     */
+    _tGetRect(selector, all) {
+      return new Promise((resolve) => {
+        uni.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            if (all && Array.isArray(rect) && rect.length) {
+              resolve(rect)
+            }
+            if (!all && rect) {
+              resolve(rect)
+            }
+          })
+          .exec()
+      })
+    },
+    /**
+     * 获取父组件的数据
+     */
+    getParentData(parentName = '') {
+      // 避免再created中定义parent变量
+      if (!this.parent) this.parent = false
+      // 通过获取父组件实例
+      // 将父组件this中对应的参数，赋值给本组件的parentData对象中对应的属性
+      // 头条小程序不支持通过this.parent.xxx去监听父组件参数的变化，所以需要本方法进行实现
+      this.parent = this.$tn.$parent.call(this, parentName)
+      if (this.parent) {
+        // 遍历parentData中的属性，将parent中同名的属性赋值给parentData
+        Object.keys(this.parentData).map(key => {
+          this.parentData[key] = this.parent[key]
+        })
+      }
+    },
+    /**
+     * 阻止事件冒泡
+     */
+    preventEvent(e) {
+      e && e.stopPropagation && e.stopPropagation()
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/mpShare.js b/tuniao-ui/libs/mixin/mpShare.js
new file mode 100644
index 0000000..b1ae33f
--- /dev/null
+++ b/tuniao-ui/libs/mixin/mpShare.js
@@ -0,0 +1,30 @@
+module.exports = {
+  onLoad() {
+    // 设置默认的转发参数
+    this.$tn.mpShare = {
+      // 分享的标题，默认为小程序名称
+      title: '',
+      // 分享的路径，默认为当前页面
+      path: '',
+      // 分享时显示的图片，默认为当前页面截图
+      imageUrl: '',
+      // 当前页面是否可以分享
+      share: true
+    }
+    if (!this.$tn.mpShare.share) {
+      uni.hideShareMenu()
+    }
+  },
+  onShareAppMessage() {
+    return this.$tn.mpShare
+  },
+  // #ifdef MP-WEIXIN
+  onShareTimeline() {
+    return {
+      title: this.$tn.mpShare.title,
+      query: this.$tn.mpShare.path.substring(this.$tn.mpShare.path.indexOf('?') + 1, this.$tn.mpShare.path.length),
+      imageUrl: this.$tn.mpShare.imageUrl
+    }
+  }
+  // #endif
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/touch.js b/tuniao-ui/libs/mixin/touch.js
new file mode 100644
index 0000000..a77445f
--- /dev/null
+++ b/tuniao-ui/libs/mixin/touch.js
@@ -0,0 +1,61 @@
+const MIN_DISTANCE = 10
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal'
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical'
+  }
+  return ''
+}
+
+export default {
+  methods: {
+    touchStart(e) {
+      this.resetTouchStatus()
+      const touch = this.getTouchPoint(e)
+      this.startX = touch.x
+      this.startY = touch.y
+    },
+    touchMove(e) {
+      const touch = this.getTouchPoint(e)
+      this.deltaX = touch.x - this.startX
+      this.deltaY = touch.y - this.startY
+      this.offsetX = Math.abs(this.deltaX)
+      this.offsetY = Math.abs(this.deltaY)
+      this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
+    },
+    getTouchPoint(e) {
+      if (!e) {
+        return {
+          x: 0,
+          y: 0
+        }
+      }
+      if (e.touches && e.touches[0]) {
+        return {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY
+        }
+      }
+      if (e.changedTouches && e.changedTouches[0]) {
+        return {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        }
+      }
+      return {
+        x: e.clientX || 0,
+        y: e.clientY || 0
+      }
+    },
+    resetTouchStatus() {
+      this.direction = ''
+      this.deltaX = 0
+      this.deltaY = 0
+      this.offsetX = 0
+      this.offsetY = 0
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/area.js b/tuniao-ui/libs/utils/area.js
new file mode 100644
index 0000000..0d602e9
--- /dev/null
+++ b/tuniao-ui/libs/utils/area.js
@@ -0,0 +1 @@
+var areaData=[[[{"label":"东城区","value":"110101"},{"label":"西城区","value":"110102"},{"label":"朝阳区","value":"110105"},{"label":"丰台区","value":"110106"},{"label":"石景山区","value":"110107"},{"label":"海淀区","value":"110108"},{"label":"门头沟区","value":"110109"},{"label":"房山区","value":"110111"},{"label":"通州区","value":"110112"},{"label":"顺义区","value":"110113"},{"label":"昌平区","value":"110114"},{"label":"大兴区","value":"110115"},{"label":"怀柔区","value":"110116"},{"label":"平谷区","value":"110117"},{"label":"密云区","value":"110118"},{"label":"延庆区","value":"110119"}]],[[{"label":"和平区","value":"120101"},{"label":"河东区","value":"120102"},{"label":"河西区","value":"120103"},{"label":"南开区","value":"120104"},{"label":"河北区","value":"120105"},{"label":"红桥区","value":"120106"},{"label":"东丽区","value":"120110"},{"label":"西青区","value":"120111"},{"label":"津南区","value":"120112"},{"label":"北辰区","value":"120113"},{"label":"武清区","value":"120114"},{"label":"宝坻区","value":"120115"},{"label":"滨海新区","value":"120116"},{"label":"宁河区","value":"120117"},{"label":"静海区","value":"120118"},{"label":"蓟州区","value":"120119"}]],[[{"label":"长安区","value":"130102"},{"label":"桥西区","value":"130104"},{"label":"新华区","value":"130105"},{"label":"井陉矿区","value":"130107"},{"label":"裕华区","value":"130108"},{"label":"藁城区","value":"130109"},{"label":"鹿泉区","value":"130110"},{"label":"栾城区","value":"130111"},{"label":"井陉县","value":"130121"},{"label":"正定县","value":"130123"},{"label":"行唐县","value":"130125"},{"label":"灵寿县","value":"130126"},{"label":"高邑县","value":"130127"},{"label":"深泽县","value":"130128"},{"label":"赞皇县","value":"130129"},{"label":"无极县","value":"130130"},{"label":"平山县","value":"130131"},{"label":"元氏县","value":"130132"},{"label":"赵县","value":"130133"},{"label":"石家庄高新技术产业开发区","value":"130171"},{"label":"石家庄循环化工园区","value":"130172"},{"label":"辛集市","value":"130181"},{"label":"晋州市","value":"130183"},{"label":"新乐市","value":"130184"}],[{"label":"路南区","value":"130202"},{"label":"路北区","value":"130203"},{"label":"古冶区","value":"130204"},{"label":"开平区","value":"130205"},{"label":"丰南区","value":"130207"},{"label":"丰润区","value":"130208"},{"label":"曹妃甸区","value":"130209"},{"label":"滦县","value":"130223"},{"label":"滦南县","value":"130224"},{"label":"乐亭县","value":"130225"},{"label":"迁西县","value":"130227"},{"label":"玉田县","value":"130229"},{"label":"唐山市芦台经济技术开发区","value":"130271"},{"label":"唐山市汉沽管理区","value":"130272"},{"label":"唐山高新技术产业开发区","value":"130273"},{"label":"河北唐山海港经济开发区","value":"130274"},{"label":"遵化市","value":"130281"},{"label":"迁安市","value":"130283"}],[{"label":"海港区","value":"130302"},{"label":"山海关区","value":"130303"},{"label":"北戴河区","value":"130304"},{"label":"抚宁区","value":"130306"},{"label":"青龙满族自治县","value":"130321"},{"label":"昌黎县","value":"130322"},{"label":"卢龙县","value":"130324"},{"label":"秦皇岛市经济技术开发区","value":"130371"},{"label":"北戴河新区","value":"130372"}],[{"label":"邯山区","value":"130402"},{"label":"丛台区","value":"130403"},{"label":"复兴区","value":"130404"},{"label":"峰峰矿区","value":"130406"},{"label":"肥乡区","value":"130407"},{"label":"永年区","value":"130408"},{"label":"临漳县","value":"130423"},{"label":"成安县","value":"130424"},{"label":"大名县","value":"130425"},{"label":"涉县","value":"130426"},{"label":"磁县","value":"130427"},{"label":"邱县","value":"130430"},{"label":"鸡泽县","value":"130431"},{"label":"广平县","value":"130432"},{"label":"馆陶县","value":"130433"},{"label":"魏县","value":"130434"},{"label":"曲周县","value":"130435"},{"label":"邯郸经济技术开发区","value":"130471"},{"label":"邯郸冀南新区","value":"130473"},{"label":"武安市","value":"130481"}],[{"label":"桥东区","value":"130502"},{"label":"桥西区","value":"130503"},{"label":"邢台县","value":"130521"},{"label":"临城县","value":"130522"},{"label":"内丘县","value":"130523"},{"label":"柏乡县","value":"130524"},{"label":"隆尧县","value":"130525"},{"label":"任县","value":"130526"},{"label":"南和县","value":"130527"},{"label":"宁晋县","value":"130528"},{"label":"巨鹿县","value":"130529"},{"label":"新河县","value":"130530"},{"label":"广宗县","value":"130531"},{"label":"平乡县","value":"130532"},{"label":"威县","value":"130533"},{"label":"清河县","value":"130534"},{"label":"临西县","value":"130535"},{"label":"河北邢台经济开发区","value":"130571"},{"label":"南宫市","value":"130581"},{"label":"沙河市","value":"130582"}],[{"label":"竞秀区","value":"130602"},{"label":"莲池区","value":"130606"},{"label":"满城区","value":"130607"},{"label":"清苑区","value":"130608"},{"label":"徐水区","value":"130609"},{"label":"涞水县","value":"130623"},{"label":"阜平县","value":"130624"},{"label":"定兴县","value":"130626"},{"label":"唐县","value":"130627"},{"label":"高阳县","value":"130628"},{"label":"容城县","value":"130629"},{"label":"涞源县","value":"130630"},{"label":"望都县","value":"130631"},{"label":"安新县","value":"130632"},{"label":"易县","value":"130633"},{"label":"曲阳县","value":"130634"},{"label":"蠡县","value":"130635"},{"label":"顺平县","value":"130636"},{"label":"博野县","value":"130637"},{"label":"雄县","value":"130638"},{"label":"保定高新技术产业开发区","value":"130671"},{"label":"保定白沟新城","value":"130672"},{"label":"涿州市","value":"130681"},{"label":"定州市","value":"130682"},{"label":"安国市","value":"130683"},{"label":"高碑店市","value":"130684"}],[{"label":"桥东区","value":"130702"},{"label":"桥西区","value":"130703"},{"label":"宣化区","value":"130705"},{"label":"下花园区","value":"130706"},{"label":"万全区","value":"130708"},{"label":"崇礼区","value":"130709"},{"label":"张北县","value":"130722"},{"label":"康保县","value":"130723"},{"label":"沽源县","value":"130724"},{"label":"尚义县","value":"130725"},{"label":"蔚县","value":"130726"},{"label":"阳原县","value":"130727"},{"label":"怀安县","value":"130728"},{"label":"怀来县","value":"130730"},{"label":"涿鹿县","value":"130731"},{"label":"赤城县","value":"130732"},{"label":"张家口市高新技术产业开发区","value":"130771"},{"label":"张家口市察北管理区","value":"130772"},{"label":"张家口市塞北管理区","value":"130773"}],[{"label":"双桥区","value":"130802"},{"label":"双滦区","value":"130803"},{"label":"鹰手营子矿区","value":"130804"},{"label":"承德县","value":"130821"},{"label":"兴隆县","value":"130822"},{"label":"滦平县","value":"130824"},{"label":"隆化县","value":"130825"},{"label":"丰宁满族自治县","value":"130826"},{"label":"宽城满族自治县","value":"130827"},{"label":"围场满族蒙古族自治县","value":"130828"},{"label":"承德高新技术产业开发区","value":"130871"},{"label":"平泉市","value":"130881"}],[{"label":"新华区","value":"130902"},{"label":"运河区","value":"130903"},{"label":"沧县","value":"130921"},{"label":"青县","value":"130922"},{"label":"东光县","value":"130923"},{"label":"海兴县","value":"130924"},{"label":"盐山县","value":"130925"},{"label":"肃宁县","value":"130926"},{"label":"南皮县","value":"130927"},{"label":"吴桥县","value":"130928"},{"label":"献县","value":"130929"},{"label":"孟村回族自治县","value":"130930"},{"label":"河北沧州经济开发区","value":"130971"},{"label":"沧州高新技术产业开发区","value":"130972"},{"label":"沧州渤海新区","value":"130973"},{"label":"泊头市","value":"130981"},{"label":"任丘市","value":"130982"},{"label":"黄骅市","value":"130983"},{"label":"河间市","value":"130984"}],[{"label":"安次区","value":"131002"},{"label":"广阳区","value":"131003"},{"label":"固安县","value":"131022"},{"label":"永清县","value":"131023"},{"label":"香河县","value":"131024"},{"label":"大城县","value":"131025"},{"label":"文安县","value":"131026"},{"label":"大厂回族自治县","value":"131028"},{"label":"廊坊经济技术开发区","value":"131071"},{"label":"霸州市","value":"131081"},{"label":"三河市","value":"131082"}],[{"label":"桃城区","value":"131102"},{"label":"冀州区","value":"131103"},{"label":"枣强县","value":"131121"},{"label":"武邑县","value":"131122"},{"label":"武强县","value":"131123"},{"label":"饶阳县","value":"131124"},{"label":"安平县","value":"131125"},{"label":"故城县","value":"131126"},{"label":"景县","value":"131127"},{"label":"阜城县","value":"131128"},{"label":"河北衡水经济开发区","value":"131171"},{"label":"衡水滨湖新区","value":"131172"},{"label":"深州市","value":"131182"}]],[[{"label":"小店区","value":"140105"},{"label":"迎泽区","value":"140106"},{"label":"杏花岭区","value":"140107"},{"label":"尖草坪区","value":"140108"},{"label":"万柏林区","value":"140109"},{"label":"晋源区","value":"140110"},{"label":"清徐县","value":"140121"},{"label":"阳曲县","value":"140122"},{"label":"娄烦县","value":"140123"},{"label":"山西转型综合改革示范区","value":"140171"},{"label":"古交市","value":"140181"}],[{"label":"城区","value":"140202"},{"label":"矿区","value":"140203"},{"label":"南郊区","value":"140211"},{"label":"新荣区","value":"140212"},{"label":"阳高县","value":"140221"},{"label":"天镇县","value":"140222"},{"label":"广灵县","value":"140223"},{"label":"灵丘县","value":"140224"},{"label":"浑源县","value":"140225"},{"label":"左云县","value":"140226"},{"label":"大同县","value":"140227"},{"label":"山西大同经济开发区","value":"140271"}],[{"label":"城区","value":"140302"},{"label":"矿区","value":"140303"},{"label":"郊区","value":"140311"},{"label":"平定县","value":"140321"},{"label":"盂县","value":"140322"},{"label":"山西阳泉经济开发区","value":"140371"}],[{"label":"城区","value":"140402"},{"label":"郊区","value":"140411"},{"label":"长治县","value":"140421"},{"label":"襄垣县","value":"140423"},{"label":"屯留县","value":"140424"},{"label":"平顺县","value":"140425"},{"label":"黎城县","value":"140426"},{"label":"壶关县","value":"140427"},{"label":"长子县","value":"140428"},{"label":"武乡县","value":"140429"},{"label":"沁县","value":"140430"},{"label":"沁源县","value":"140431"},{"label":"山西长治高新技术产业园区","value":"140471"},{"label":"潞城市","value":"140481"}],[{"label":"城区","value":"140502"},{"label":"沁水县","value":"140521"},{"label":"阳城县","value":"140522"},{"label":"陵川县","value":"140524"},{"label":"泽州县","value":"140525"},{"label":"高平市","value":"140581"}],[{"label":"朔城区","value":"140602"},{"label":"平鲁区","value":"140603"},{"label":"山阴县","value":"140621"},{"label":"应县","value":"140622"},{"label":"右玉县","value":"140623"},{"label":"怀仁县","value":"140624"},{"label":"山西朔州经济开发区","value":"140671"}],[{"label":"榆次区","value":"140702"},{"label":"榆社县","value":"140721"},{"label":"左权县","value":"140722"},{"label":"和顺县","value":"140723"},{"label":"昔阳县","value":"140724"},{"label":"寿阳县","value":"140725"},{"label":"太谷县","value":"140726"},{"label":"祁县","value":"140727"},{"label":"平遥县","value":"140728"},{"label":"灵石县","value":"140729"},{"label":"介休市","value":"140781"}],[{"label":"盐湖区","value":"140802"},{"label":"临猗县","value":"140821"},{"label":"万荣县","value":"140822"},{"label":"闻喜县","value":"140823"},{"label":"稷山县","value":"140824"},{"label":"新绛县","value":"140825"},{"label":"绛县","value":"140826"},{"label":"垣曲县","value":"140827"},{"label":"夏县","value":"140828"},{"label":"平陆县","value":"140829"},{"label":"芮城县","value":"140830"},{"label":"永济市","value":"140881"},{"label":"河津市","value":"140882"}],[{"label":"忻府区","value":"140902"},{"label":"定襄县","value":"140921"},{"label":"五台县","value":"140922"},{"label":"代县","value":"140923"},{"label":"繁峙县","value":"140924"},{"label":"宁武县","value":"140925"},{"label":"静乐县","value":"140926"},{"label":"神池县","value":"140927"},{"label":"五寨县","value":"140928"},{"label":"岢岚县","value":"140929"},{"label":"河曲县","value":"140930"},{"label":"保德县","value":"140931"},{"label":"偏关县","value":"140932"},{"label":"五台山风景名胜区","value":"140971"},{"label":"原平市","value":"140981"}],[{"label":"尧都区","value":"141002"},{"label":"曲沃县","value":"141021"},{"label":"翼城县","value":"141022"},{"label":"襄汾县","value":"141023"},{"label":"洪洞县","value":"141024"},{"label":"古县","value":"141025"},{"label":"安泽县","value":"141026"},{"label":"浮山县","value":"141027"},{"label":"吉县","value":"141028"},{"label":"乡宁县","value":"141029"},{"label":"大宁县","value":"141030"},{"label":"隰县","value":"141031"},{"label":"永和县","value":"141032"},{"label":"蒲县","value":"141033"},{"label":"汾西县","value":"141034"},{"label":"侯马市","value":"141081"},{"label":"霍州市","value":"141082"}],[{"label":"离石区","value":"141102"},{"label":"文水县","value":"141121"},{"label":"交城县","value":"141122"},{"label":"兴县","value":"141123"},{"label":"临县","value":"141124"},{"label":"柳林县","value":"141125"},{"label":"石楼县","value":"141126"},{"label":"岚县","value":"141127"},{"label":"方山县","value":"141128"},{"label":"中阳县","value":"141129"},{"label":"交口县","value":"141130"},{"label":"孝义市","value":"141181"},{"label":"汾阳市","value":"141182"}]],[[{"label":"新城区","value":"150102"},{"label":"回民区","value":"150103"},{"label":"玉泉区","value":"150104"},{"label":"赛罕区","value":"150105"},{"label":"土默特左旗","value":"150121"},{"label":"托克托县","value":"150122"},{"label":"和林格尔县","value":"150123"},{"label":"清水河县","value":"150124"},{"label":"武川县","value":"150125"},{"label":"呼和浩特金海工业园区","value":"150171"},{"label":"呼和浩特经济技术开发区","value":"150172"}],[{"label":"东河区","value":"150202"},{"label":"昆都仑区","value":"150203"},{"label":"青山区","value":"150204"},{"label":"石拐区","value":"150205"},{"label":"白云鄂博矿区","value":"150206"},{"label":"九原区","value":"150207"},{"label":"土默特右旗","value":"150221"},{"label":"固阳县","value":"150222"},{"label":"达尔罕茂明安联合旗","value":"150223"},{"label":"包头稀土高新技术产业开发区","value":"150271"}],[{"label":"海勃湾区","value":"150302"},{"label":"海南区","value":"150303"},{"label":"乌达区","value":"150304"}],[{"label":"红山区","value":"150402"},{"label":"元宝山区","value":"150403"},{"label":"松山区","value":"150404"},{"label":"阿鲁科尔沁旗","value":"150421"},{"label":"巴林左旗","value":"150422"},{"label":"巴林右旗","value":"150423"},{"label":"林西县","value":"150424"},{"label":"克什克腾旗","value":"150425"},{"label":"翁牛特旗","value":"150426"},{"label":"喀喇沁旗","value":"150428"},{"label":"宁城县","value":"150429"},{"label":"敖汉旗","value":"150430"}],[{"label":"科尔沁区","value":"150502"},{"label":"科尔沁左翼中旗","value":"150521"},{"label":"科尔沁左翼后旗","value":"150522"},{"label":"开鲁县","value":"150523"},{"label":"库伦旗","value":"150524"},{"label":"奈曼旗","value":"150525"},{"label":"扎鲁特旗","value":"150526"},{"label":"通辽经济技术开发区","value":"150571"},{"label":"霍林郭勒市","value":"150581"}],[{"label":"东胜区","value":"150602"},{"label":"康巴什区","value":"150603"},{"label":"达拉特旗","value":"150621"},{"label":"准格尔旗","value":"150622"},{"label":"鄂托克前旗","value":"150623"},{"label":"鄂托克旗","value":"150624"},{"label":"杭锦旗","value":"150625"},{"label":"乌审旗","value":"150626"},{"label":"伊金霍洛旗","value":"150627"}],[{"label":"海拉尔区","value":"150702"},{"label":"扎赉诺尔区","value":"150703"},{"label":"阿荣旗","value":"150721"},{"label":"莫力达瓦达斡尔族自治旗","value":"150722"},{"label":"鄂伦春自治旗","value":"150723"},{"label":"鄂温克族自治旗","value":"150724"},{"label":"陈巴尔虎旗","value":"150725"},{"label":"新巴尔虎左旗","value":"150726"},{"label":"新巴尔虎右旗","value":"150727"},{"label":"满洲里市","value":"150781"},{"label":"牙克石市","value":"150782"},{"label":"扎兰屯市","value":"150783"},{"label":"额尔古纳市","value":"150784"},{"label":"根河市","value":"150785"}],[{"label":"临河区","value":"150802"},{"label":"五原县","value":"150821"},{"label":"磴口县","value":"150822"},{"label":"乌拉特前旗","value":"150823"},{"label":"乌拉特中旗","value":"150824"},{"label":"乌拉特后旗","value":"150825"},{"label":"杭锦后旗","value":"150826"}],[{"label":"集宁区","value":"150902"},{"label":"卓资县","value":"150921"},{"label":"化德县","value":"150922"},{"label":"商都县","value":"150923"},{"label":"兴和县","value":"150924"},{"label":"凉城县","value":"150925"},{"label":"察哈尔右翼前旗","value":"150926"},{"label":"察哈尔右翼中旗","value":"150927"},{"label":"察哈尔右翼后旗","value":"150928"},{"label":"四子王旗","value":"150929"},{"label":"丰镇市","value":"150981"}],[{"label":"乌兰浩特市","value":"152201"},{"label":"阿尔山市","value":"152202"},{"label":"科尔沁右翼前旗","value":"152221"},{"label":"科尔沁右翼中旗","value":"152222"},{"label":"扎赉特旗","value":"152223"},{"label":"突泉县","value":"152224"}],[{"label":"二连浩特市","value":"152501"},{"label":"锡林浩特市","value":"152502"},{"label":"阿巴嘎旗","value":"152522"},{"label":"苏尼特左旗","value":"152523"},{"label":"苏尼特右旗","value":"152524"},{"label":"东乌珠穆沁旗","value":"152525"},{"label":"西乌珠穆沁旗","value":"152526"},{"label":"太仆寺旗","value":"152527"},{"label":"镶黄旗","value":"152528"},{"label":"正镶白旗","value":"152529"},{"label":"正蓝旗","value":"152530"},{"label":"多伦县","value":"152531"},{"label":"乌拉盖管委会","value":"152571"}],[{"label":"阿拉善左旗","value":"152921"},{"label":"阿拉善右旗","value":"152922"},{"label":"额济纳旗","value":"152923"},{"label":"内蒙古阿拉善经济开发区","value":"152971"}]],[[{"label":"和平区","value":"210102"},{"label":"沈河区","value":"210103"},{"label":"大东区","value":"210104"},{"label":"皇姑区","value":"210105"},{"label":"铁西区","value":"210106"},{"label":"苏家屯区","value":"210111"},{"label":"浑南区","value":"210112"},{"label":"沈北新区","value":"210113"},{"label":"于洪区","value":"210114"},{"label":"辽中区","value":"210115"},{"label":"康平县","value":"210123"},{"label":"法库县","value":"210124"},{"label":"新民市","value":"210181"}],[{"label":"中山区","value":"210202"},{"label":"西岗区","value":"210203"},{"label":"沙河口区","value":"210204"},{"label":"甘井子区","value":"210211"},{"label":"旅顺口区","value":"210212"},{"label":"金州区","value":"210213"},{"label":"普兰店区","value":"210214"},{"label":"长海县","value":"210224"},{"label":"瓦房店市","value":"210281"},{"label":"庄河市","value":"210283"}],[{"label":"铁东区","value":"210302"},{"label":"铁西区","value":"210303"},{"label":"立山区","value":"210304"},{"label":"千山区","value":"210311"},{"label":"台安县","value":"210321"},{"label":"岫岩满族自治县","value":"210323"},{"label":"海城市","value":"210381"}],[{"label":"新抚区","value":"210402"},{"label":"东洲区","value":"210403"},{"label":"望花区","value":"210404"},{"label":"顺城区","value":"210411"},{"label":"抚顺县","value":"210421"},{"label":"新宾满族自治县","value":"210422"},{"label":"清原满族自治县","value":"210423"}],[{"label":"平山区","value":"210502"},{"label":"溪湖区","value":"210503"},{"label":"明山区","value":"210504"},{"label":"南芬区","value":"210505"},{"label":"本溪满族自治县","value":"210521"},{"label":"桓仁满族自治县","value":"210522"}],[{"label":"元宝区","value":"210602"},{"label":"振兴区","value":"210603"},{"label":"振安区","value":"210604"},{"label":"宽甸满族自治县","value":"210624"},{"label":"东港市","value":"210681"},{"label":"凤城市","value":"210682"}],[{"label":"古塔区","value":"210702"},{"label":"凌河区","value":"210703"},{"label":"太和区","value":"210711"},{"label":"黑山县","value":"210726"},{"label":"义县","value":"210727"},{"label":"凌海市","value":"210781"},{"label":"北镇市","value":"210782"}],[{"label":"站前区","value":"210802"},{"label":"西市区","value":"210803"},{"label":"鲅鱼圈区","value":"210804"},{"label":"老边区","value":"210811"},{"label":"盖州市","value":"210881"},{"label":"大石桥市","value":"210882"}],[{"label":"海州区","value":"210902"},{"label":"新邱区","value":"210903"},{"label":"太平区","value":"210904"},{"label":"清河门区","value":"210905"},{"label":"细河区","value":"210911"},{"label":"阜新蒙古族自治县","value":"210921"},{"label":"彰武县","value":"210922"}],[{"label":"白塔区","value":"211002"},{"label":"文圣区","value":"211003"},{"label":"宏伟区","value":"211004"},{"label":"弓长岭区","value":"211005"},{"label":"太子河区","value":"211011"},{"label":"辽阳县","value":"211021"},{"label":"灯塔市","value":"211081"}],[{"label":"双台子区","value":"211102"},{"label":"兴隆台区","value":"211103"},{"label":"大洼区","value":"211104"},{"label":"盘山县","value":"211122"}],[{"label":"银州区","value":"211202"},{"label":"清河区","value":"211204"},{"label":"铁岭县","value":"211221"},{"label":"西丰县","value":"211223"},{"label":"昌图县","value":"211224"},{"label":"调兵山市","value":"211281"},{"label":"开原市","value":"211282"}],[{"label":"双塔区","value":"211302"},{"label":"龙城区","value":"211303"},{"label":"朝阳县","value":"211321"},{"label":"建平县","value":"211322"},{"label":"喀喇沁左翼蒙古族自治县","value":"211324"},{"label":"北票市","value":"211381"},{"label":"凌源市","value":"211382"}],[{"label":"连山区","value":"211402"},{"label":"龙港区","value":"211403"},{"label":"南票区","value":"211404"},{"label":"绥中县","value":"211421"},{"label":"建昌县","value":"211422"},{"label":"兴城市","value":"211481"}]],[[{"label":"南关区","value":"220102"},{"label":"宽城区","value":"220103"},{"label":"朝阳区","value":"220104"},{"label":"二道区","value":"220105"},{"label":"绿园区","value":"220106"},{"label":"双阳区","value":"220112"},{"label":"九台区","value":"220113"},{"label":"农安县","value":"220122"},{"label":"长春经济技术开发区","value":"220171"},{"label":"长春净月高新技术产业开发区","value":"220172"},{"label":"长春高新技术产业开发区","value":"220173"},{"label":"长春汽车经济技术开发区","value":"220174"},{"label":"榆树市","value":"220182"},{"label":"德惠市","value":"220183"}],[{"label":"昌邑区","value":"220202"},{"label":"龙潭区","value":"220203"},{"label":"船营区","value":"220204"},{"label":"丰满区","value":"220211"},{"label":"永吉县","value":"220221"},{"label":"吉林经济开发区","value":"220271"},{"label":"吉林高新技术产业开发区","value":"220272"},{"label":"吉林中国新加坡食品区","value":"220273"},{"label":"蛟河市","value":"220281"},{"label":"桦甸市","value":"220282"},{"label":"舒兰市","value":"220283"},{"label":"磐石市","value":"220284"}],[{"label":"铁西区","value":"220302"},{"label":"铁东区","value":"220303"},{"label":"梨树县","value":"220322"},{"label":"伊通满族自治县","value":"220323"},{"label":"公主岭市","value":"220381"},{"label":"双辽市","value":"220382"}],[{"label":"龙山区","value":"220402"},{"label":"西安区","value":"220403"},{"label":"东丰县","value":"220421"},{"label":"东辽县","value":"220422"}],[{"label":"东昌区","value":"220502"},{"label":"二道江区","value":"220503"},{"label":"通化县","value":"220521"},{"label":"辉南县","value":"220523"},{"label":"柳河县","value":"220524"},{"label":"梅河口市","value":"220581"},{"label":"集安市","value":"220582"}],[{"label":"浑江区","value":"220602"},{"label":"江源区","value":"220605"},{"label":"抚松县","value":"220621"},{"label":"靖宇县","value":"220622"},{"label":"长白朝鲜族自治县","value":"220623"},{"label":"临江市","value":"220681"}],[{"label":"宁江区","value":"220702"},{"label":"前郭尔罗斯蒙古族自治县","value":"220721"},{"label":"长岭县","value":"220722"},{"label":"乾安县","value":"220723"},{"label":"吉林松原经济开发区","value":"220771"},{"label":"扶余市","value":"220781"}],[{"label":"洮北区","value":"220802"},{"label":"镇赉县","value":"220821"},{"label":"通榆县","value":"220822"},{"label":"吉林白城经济开发区","value":"220871"},{"label":"洮南市","value":"220881"},{"label":"大安市","value":"220882"}],[{"label":"延吉市","value":"222401"},{"label":"图们市","value":"222402"},{"label":"敦化市","value":"222403"},{"label":"珲春市","value":"222404"},{"label":"龙井市","value":"222405"},{"label":"和龙市","value":"222406"},{"label":"汪清县","value":"222424"},{"label":"安图县","value":"222426"}]],[[{"label":"道里区","value":"230102"},{"label":"南岗区","value":"230103"},{"label":"道外区","value":"230104"},{"label":"平房区","value":"230108"},{"label":"松北区","value":"230109"},{"label":"香坊区","value":"230110"},{"label":"呼兰区","value":"230111"},{"label":"阿城区","value":"230112"},{"label":"双城区","value":"230113"},{"label":"依兰县","value":"230123"},{"label":"方正县","value":"230124"},{"label":"宾县","value":"230125"},{"label":"巴彦县","value":"230126"},{"label":"木兰县","value":"230127"},{"label":"通河县","value":"230128"},{"label":"延寿县","value":"230129"},{"label":"尚志市","value":"230183"},{"label":"五常市","value":"230184"}],[{"label":"龙沙区","value":"230202"},{"label":"建华区","value":"230203"},{"label":"铁锋区","value":"230204"},{"label":"昂昂溪区","value":"230205"},{"label":"富拉尔基区","value":"230206"},{"label":"碾子山区","value":"230207"},{"label":"梅里斯达斡尔族区","value":"230208"},{"label":"龙江县","value":"230221"},{"label":"依安县","value":"230223"},{"label":"泰来县","value":"230224"},{"label":"甘南县","value":"230225"},{"label":"富裕县","value":"230227"},{"label":"克山县","value":"230229"},{"label":"克东县","value":"230230"},{"label":"拜泉县","value":"230231"},{"label":"讷河市","value":"230281"}],[{"label":"鸡冠区","value":"230302"},{"label":"恒山区","value":"230303"},{"label":"滴道区","value":"230304"},{"label":"梨树区","value":"230305"},{"label":"城子河区","value":"230306"},{"label":"麻山区","value":"230307"},{"label":"鸡东县","value":"230321"},{"label":"虎林市","value":"230381"},{"label":"密山市","value":"230382"}],[{"label":"向阳区","value":"230402"},{"label":"工农区","value":"230403"},{"label":"南山区","value":"230404"},{"label":"兴安区","value":"230405"},{"label":"东山区","value":"230406"},{"label":"兴山区","value":"230407"},{"label":"萝北县","value":"230421"},{"label":"绥滨县","value":"230422"}],[{"label":"尖山区","value":"230502"},{"label":"岭东区","value":"230503"},{"label":"四方台区","value":"230505"},{"label":"宝山区","value":"230506"},{"label":"集贤县","value":"230521"},{"label":"友谊县","value":"230522"},{"label":"宝清县","value":"230523"},{"label":"饶河县","value":"230524"}],[{"label":"萨尔图区","value":"230602"},{"label":"龙凤区","value":"230603"},{"label":"让胡路区","value":"230604"},{"label":"红岗区","value":"230605"},{"label":"大同区","value":"230606"},{"label":"肇州县","value":"230621"},{"label":"肇源县","value":"230622"},{"label":"林甸县","value":"230623"},{"label":"杜尔伯特蒙古族自治县","value":"230624"},{"label":"大庆高新技术产业开发区","value":"230671"}],[{"label":"伊春区","value":"230702"},{"label":"南岔区","value":"230703"},{"label":"友好区","value":"230704"},{"label":"西林区","value":"230705"},{"label":"翠峦区","value":"230706"},{"label":"新青区","value":"230707"},{"label":"美溪区","value":"230708"},{"label":"金山屯区","value":"230709"},{"label":"五营区","value":"230710"},{"label":"乌马河区","value":"230711"},{"label":"汤旺河区","value":"230712"},{"label":"带岭区","value":"230713"},{"label":"乌伊岭区","value":"230714"},{"label":"红星区","value":"230715"},{"label":"上甘岭区","value":"230716"},{"label":"嘉荫县","value":"230722"},{"label":"铁力市","value":"230781"}],[{"label":"向阳区","value":"230803"},{"label":"前进区","value":"230804"},{"label":"东风区","value":"230805"},{"label":"郊区","value":"230811"},{"label":"桦南县","value":"230822"},{"label":"桦川县","value":"230826"},{"label":"汤原县","value":"230828"},{"label":"同江市","value":"230881"},{"label":"富锦市","value":"230882"},{"label":"抚远市","value":"230883"}],[{"label":"新兴区","value":"230902"},{"label":"桃山区","value":"230903"},{"label":"茄子河区","value":"230904"},{"label":"勃利县","value":"230921"}],[{"label":"东安区","value":"231002"},{"label":"阳明区","value":"231003"},{"label":"爱民区","value":"231004"},{"label":"西安区","value":"231005"},{"label":"林口县","value":"231025"},{"label":"牡丹江经济技术开发区","value":"231071"},{"label":"绥芬河市","value":"231081"},{"label":"海林市","value":"231083"},{"label":"宁安市","value":"231084"},{"label":"穆棱市","value":"231085"},{"label":"东宁市","value":"231086"}],[{"label":"爱辉区","value":"231102"},{"label":"嫩江县","value":"231121"},{"label":"逊克县","value":"231123"},{"label":"孙吴县","value":"231124"},{"label":"北安市","value":"231181"},{"label":"五大连池市","value":"231182"}],[{"label":"北林区","value":"231202"},{"label":"望奎县","value":"231221"},{"label":"兰西县","value":"231222"},{"label":"青冈县","value":"231223"},{"label":"庆安县","value":"231224"},{"label":"明水县","value":"231225"},{"label":"绥棱县","value":"231226"},{"label":"安达市","value":"231281"},{"label":"肇东市","value":"231282"},{"label":"海伦市","value":"231283"}],[{"label":"加格达奇区","value":"232701"},{"label":"松岭区","value":"232702"},{"label":"新林区","value":"232703"},{"label":"呼中区","value":"232704"},{"label":"呼玛县","value":"232721"},{"label":"塔河县","value":"232722"},{"label":"漠河县","value":"232723"}]],[[{"label":"黄浦区","value":"310101"},{"label":"徐汇区","value":"310104"},{"label":"长宁区","value":"310105"},{"label":"静安区","value":"310106"},{"label":"普陀区","value":"310107"},{"label":"虹口区","value":"310109"},{"label":"杨浦区","value":"310110"},{"label":"闵行区","value":"310112"},{"label":"宝山区","value":"310113"},{"label":"嘉定区","value":"310114"},{"label":"浦东新区","value":"310115"},{"label":"金山区","value":"310116"},{"label":"松江区","value":"310117"},{"label":"青浦区","value":"310118"},{"label":"奉贤区","value":"310120"},{"label":"崇明区","value":"310151"}]],[[{"label":"玄武区","value":"320102"},{"label":"秦淮区","value":"320104"},{"label":"建邺区","value":"320105"},{"label":"鼓楼区","value":"320106"},{"label":"浦口区","value":"320111"},{"label":"栖霞区","value":"320113"},{"label":"雨花台区","value":"320114"},{"label":"江宁区","value":"320115"},{"label":"六合区","value":"320116"},{"label":"溧水区","value":"320117"},{"label":"高淳区","value":"320118"}],[{"label":"锡山区","value":"320205"},{"label":"惠山区","value":"320206"},{"label":"滨湖区","value":"320211"},{"label":"梁溪区","value":"320213"},{"label":"新吴区","value":"320214"},{"label":"江阴市","value":"320281"},{"label":"宜兴市","value":"320282"}],[{"label":"鼓楼区","value":"320302"},{"label":"云龙区","value":"320303"},{"label":"贾汪区","value":"320305"},{"label":"泉山区","value":"320311"},{"label":"铜山区","value":"320312"},{"label":"丰县","value":"320321"},{"label":"沛县","value":"320322"},{"label":"睢宁县","value":"320324"},{"label":"徐州经济技术开发区","value":"320371"},{"label":"新沂市","value":"320381"},{"label":"邳州市","value":"320382"}],[{"label":"天宁区","value":"320402"},{"label":"钟楼区","value":"320404"},{"label":"新北区","value":"320411"},{"label":"武进区","value":"320412"},{"label":"金坛区","value":"320413"},{"label":"溧阳市","value":"320481"}],[{"label":"虎丘区","value":"320505"},{"label":"吴中区","value":"320506"},{"label":"相城区","value":"320507"},{"label":"姑苏区","value":"320508"},{"label":"吴江区","value":"320509"},{"label":"苏州工业园区","value":"320571"},{"label":"常熟市","value":"320581"},{"label":"张家港市","value":"320582"},{"label":"昆山市","value":"320583"},{"label":"太仓市","value":"320585"}],[{"label":"崇川区","value":"320602"},{"label":"港闸区","value":"320611"},{"label":"通州区","value":"320612"},{"label":"海安县","value":"320621"},{"label":"如东县","value":"320623"},{"label":"南通经济技术开发区","value":"320671"},{"label":"启东市","value":"320681"},{"label":"如皋市","value":"320682"},{"label":"海门市","value":"320684"}],[{"label":"连云区","value":"320703"},{"label":"海州区","value":"320706"},{"label":"赣榆区","value":"320707"},{"label":"东海县","value":"320722"},{"label":"灌云县","value":"320723"},{"label":"灌南县","value":"320724"},{"label":"连云港经济技术开发区","value":"320771"},{"label":"连云港高新技术产业开发区","value":"320772"}],[{"label":"淮安区","value":"320803"},{"label":"淮阴区","value":"320804"},{"label":"清江浦区","value":"320812"},{"label":"洪泽区","value":"320813"},{"label":"涟水县","value":"320826"},{"label":"盱眙县","value":"320830"},{"label":"金湖县","value":"320831"},{"label":"淮安经济技术开发区","value":"320871"}],[{"label":"亭湖区","value":"320902"},{"label":"盐都区","value":"320903"},{"label":"大丰区","value":"320904"},{"label":"响水县","value":"320921"},{"label":"滨海县","value":"320922"},{"label":"阜宁县","value":"320923"},{"label":"射阳县","value":"320924"},{"label":"建湖县","value":"320925"},{"label":"盐城经济技术开发区","value":"320971"},{"label":"东台市","value":"320981"}],[{"label":"广陵区","value":"321002"},{"label":"邗江区","value":"321003"},{"label":"江都区","value":"321012"},{"label":"宝应县","value":"321023"},{"label":"扬州经济技术开发区","value":"321071"},{"label":"仪征市","value":"321081"},{"label":"高邮市","value":"321084"}],[{"label":"京口区","value":"321102"},{"label":"润州区","value":"321111"},{"label":"丹徒区","value":"321112"},{"label":"镇江新区","value":"321171"},{"label":"丹阳市","value":"321181"},{"label":"扬中市","value":"321182"},{"label":"句容市","value":"321183"}],[{"label":"海陵区","value":"321202"},{"label":"高港区","value":"321203"},{"label":"姜堰区","value":"321204"},{"label":"泰州医药高新技术产业开发区","value":"321271"},{"label":"兴化市","value":"321281"},{"label":"靖江市","value":"321282"},{"label":"泰兴市","value":"321283"}],[{"label":"宿城区","value":"321302"},{"label":"宿豫区","value":"321311"},{"label":"沭阳县","value":"321322"},{"label":"泗阳县","value":"321323"},{"label":"泗洪县","value":"321324"},{"label":"宿迁经济技术开发区","value":"321371"}]],[[{"label":"上城区","value":"330102"},{"label":"下城区","value":"330103"},{"label":"江干区","value":"330104"},{"label":"拱墅区","value":"330105"},{"label":"西湖区","value":"330106"},{"label":"滨江区","value":"330108"},{"label":"萧山区","value":"330109"},{"label":"余杭区","value":"330110"},{"label":"富阳区","value":"330111"},{"label":"临安区","value":"330112"},{"label":"桐庐县","value":"330122"},{"label":"淳安县","value":"330127"},{"label":"建德市","value":"330182"}],[{"label":"海曙区","value":"330203"},{"label":"江北区","value":"330205"},{"label":"北仑区","value":"330206"},{"label":"镇海区","value":"330211"},{"label":"鄞州区","value":"330212"},{"label":"奉化区","value":"330213"},{"label":"象山县","value":"330225"},{"label":"宁海县","value":"330226"},{"label":"余姚市","value":"330281"},{"label":"慈溪市","value":"330282"}],[{"label":"鹿城区","value":"330302"},{"label":"龙湾区","value":"330303"},{"label":"瓯海区","value":"330304"},{"label":"洞头区","value":"330305"},{"label":"永嘉县","value":"330324"},{"label":"平阳县","value":"330326"},{"label":"苍南县","value":"330327"},{"label":"文成县","value":"330328"},{"label":"泰顺县","value":"330329"},{"label":"温州经济技术开发区","value":"330371"},{"label":"瑞安市","value":"330381"},{"label":"乐清市","value":"330382"}],[{"label":"南湖区","value":"330402"},{"label":"秀洲区","value":"330411"},{"label":"嘉善县","value":"330421"},{"label":"海盐县","value":"330424"},{"label":"海宁市","value":"330481"},{"label":"平湖市","value":"330482"},{"label":"桐乡市","value":"330483"}],[{"label":"吴兴区","value":"330502"},{"label":"南浔区","value":"330503"},{"label":"德清县","value":"330521"},{"label":"长兴县","value":"330522"},{"label":"安吉县","value":"330523"}],[{"label":"越城区","value":"330602"},{"label":"柯桥区","value":"330603"},{"label":"上虞区","value":"330604"},{"label":"新昌县","value":"330624"},{"label":"诸暨市","value":"330681"},{"label":"嵊州市","value":"330683"}],[{"label":"婺城区","value":"330702"},{"label":"金东区","value":"330703"},{"label":"武义县","value":"330723"},{"label":"浦江县","value":"330726"},{"label":"磐安县","value":"330727"},{"label":"兰溪市","value":"330781"},{"label":"义乌市","value":"330782"},{"label":"东阳市","value":"330783"},{"label":"永康市","value":"330784"}],[{"label":"柯城区","value":"330802"},{"label":"衢江区","value":"330803"},{"label":"常山县","value":"330822"},{"label":"开化县","value":"330824"},{"label":"龙游县","value":"330825"},{"label":"江山市","value":"330881"}],[{"label":"定海区","value":"330902"},{"label":"普陀区","value":"330903"},{"label":"岱山县","value":"330921"},{"label":"嵊泗县","value":"330922"}],[{"label":"椒江区","value":"331002"},{"label":"黄岩区","value":"331003"},{"label":"路桥区","value":"331004"},{"label":"三门县","value":"331022"},{"label":"天台县","value":"331023"},{"label":"仙居县","value":"331024"},{"label":"温岭市","value":"331081"},{"label":"临海市","value":"331082"},{"label":"玉环市","value":"331083"}],[{"label":"莲都区","value":"331102"},{"label":"青田县","value":"331121"},{"label":"缙云县","value":"331122"},{"label":"遂昌县","value":"331123"},{"label":"松阳县","value":"331124"},{"label":"云和县","value":"331125"},{"label":"庆元县","value":"331126"},{"label":"景宁畲族自治县","value":"331127"},{"label":"龙泉市","value":"331181"}]],[[{"label":"瑶海区","value":"340102"},{"label":"庐阳区","value":"340103"},{"label":"蜀山区","value":"340104"},{"label":"包河区","value":"340111"},{"label":"长丰县","value":"340121"},{"label":"肥东县","value":"340122"},{"label":"肥西县","value":"340123"},{"label":"庐江县","value":"340124"},{"label":"合肥高新技术产业开发区","value":"340171"},{"label":"合肥经济技术开发区","value":"340172"},{"label":"合肥新站高新技术产业开发区","value":"340173"},{"label":"巢湖市","value":"340181"}],[{"label":"镜湖区","value":"340202"},{"label":"弋江区","value":"340203"},{"label":"鸠江区","value":"340207"},{"label":"三山区","value":"340208"},{"label":"芜湖县","value":"340221"},{"label":"繁昌县","value":"340222"},{"label":"南陵县","value":"340223"},{"label":"无为县","value":"340225"},{"label":"芜湖经济技术开发区","value":"340271"},{"label":"安徽芜湖长江大桥经济开发区","value":"340272"}],[{"label":"龙子湖区","value":"340302"},{"label":"蚌山区","value":"340303"},{"label":"禹会区","value":"340304"},{"label":"淮上区","value":"340311"},{"label":"怀远县","value":"340321"},{"label":"五河县","value":"340322"},{"label":"固镇县","value":"340323"},{"label":"蚌埠市高新技术开发区","value":"340371"},{"label":"蚌埠市经济开发区","value":"340372"}],[{"label":"大通区","value":"340402"},{"label":"田家庵区","value":"340403"},{"label":"谢家集区","value":"340404"},{"label":"八公山区","value":"340405"},{"label":"潘集区","value":"340406"},{"label":"凤台县","value":"340421"},{"label":"寿县","value":"340422"}],[{"label":"花山区","value":"340503"},{"label":"雨山区","value":"340504"},{"label":"博望区","value":"340506"},{"label":"当涂县","value":"340521"},{"label":"含山县","value":"340522"},{"label":"和县","value":"340523"}],[{"label":"杜集区","value":"340602"},{"label":"相山区","value":"340603"},{"label":"烈山区","value":"340604"},{"label":"濉溪县","value":"340621"}],[{"label":"铜官区","value":"340705"},{"label":"义安区","value":"340706"},{"label":"郊区","value":"340711"},{"label":"枞阳县","value":"340722"}],[{"label":"迎江区","value":"340802"},{"label":"大观区","value":"340803"},{"label":"宜秀区","value":"340811"},{"label":"怀宁县","value":"340822"},{"label":"潜山县","value":"340824"},{"label":"太湖县","value":"340825"},{"label":"宿松县","value":"340826"},{"label":"望江县","value":"340827"},{"label":"岳西县","value":"340828"},{"label":"安徽安庆经济开发区","value":"340871"},{"label":"桐城市","value":"340881"}],[{"label":"屯溪区","value":"341002"},{"label":"黄山区","value":"341003"},{"label":"徽州区","value":"341004"},{"label":"歙县","value":"341021"},{"label":"休宁县","value":"341022"},{"label":"黟县","value":"341023"},{"label":"祁门县","value":"341024"}],[{"label":"琅琊区","value":"341102"},{"label":"南谯区","value":"341103"},{"label":"来安县","value":"341122"},{"label":"全椒县","value":"341124"},{"label":"定远县","value":"341125"},{"label":"凤阳县","value":"341126"},{"label":"苏滁现代产业园","value":"341171"},{"label":"滁州经济技术开发区","value":"341172"},{"label":"天长市","value":"341181"},{"label":"明光市","value":"341182"}],[{"label":"颍州区","value":"341202"},{"label":"颍东区","value":"341203"},{"label":"颍泉区","value":"341204"},{"label":"临泉县","value":"341221"},{"label":"太和县","value":"341222"},{"label":"阜南县","value":"341225"},{"label":"颍上县","value":"341226"},{"label":"阜阳合肥现代产业园区","value":"341271"},{"label":"阜阳经济技术开发区","value":"341272"},{"label":"界首市","value":"341282"}],[{"label":"埇桥区","value":"341302"},{"label":"砀山县","value":"341321"},{"label":"萧县","value":"341322"},{"label":"灵璧县","value":"341323"},{"label":"泗县","value":"341324"},{"label":"宿州马鞍山现代产业园区","value":"341371"},{"label":"宿州经济技术开发区","value":"341372"}],[{"label":"金安区","value":"341502"},{"label":"裕安区","value":"341503"},{"label":"叶集区","value":"341504"},{"label":"霍邱县","value":"341522"},{"label":"舒城县","value":"341523"},{"label":"金寨县","value":"341524"},{"label":"霍山县","value":"341525"}],[{"label":"谯城区","value":"341602"},{"label":"涡阳县","value":"341621"},{"label":"蒙城县","value":"341622"},{"label":"利辛县","value":"341623"}],[{"label":"贵池区","value":"341702"},{"label":"东至县","value":"341721"},{"label":"石台县","value":"341722"},{"label":"青阳县","value":"341723"}],[{"label":"宣州区","value":"341802"},{"label":"郎溪县","value":"341821"},{"label":"广德县","value":"341822"},{"label":"泾县","value":"341823"},{"label":"绩溪县","value":"341824"},{"label":"旌德县","value":"341825"},{"label":"宣城市经济开发区","value":"341871"},{"label":"宁国市","value":"341881"}]],[[{"label":"鼓楼区","value":"350102"},{"label":"台江区","value":"350103"},{"label":"仓山区","value":"350104"},{"label":"马尾区","value":"350105"},{"label":"晋安区","value":"350111"},{"label":"闽侯县","value":"350121"},{"label":"连江县","value":"350122"},{"label":"罗源县","value":"350123"},{"label":"闽清县","value":"350124"},{"label":"永泰县","value":"350125"},{"label":"平潭县","value":"350128"},{"label":"福清市","value":"350181"},{"label":"长乐市","value":"350182"}],[{"label":"思明区","value":"350203"},{"label":"海沧区","value":"350205"},{"label":"湖里区","value":"350206"},{"label":"集美区","value":"350211"},{"label":"同安区","value":"350212"},{"label":"翔安区","value":"350213"}],[{"label":"城厢区","value":"350302"},{"label":"涵江区","value":"350303"},{"label":"荔城区","value":"350304"},{"label":"秀屿区","value":"350305"},{"label":"仙游县","value":"350322"}],[{"label":"梅列区","value":"350402"},{"label":"三元区","value":"350403"},{"label":"明溪县","value":"350421"},{"label":"清流县","value":"350423"},{"label":"宁化县","value":"350424"},{"label":"大田县","value":"350425"},{"label":"尤溪县","value":"350426"},{"label":"沙县","value":"350427"},{"label":"将乐县","value":"350428"},{"label":"泰宁县","value":"350429"},{"label":"建宁县","value":"350430"},{"label":"永安市","value":"350481"}],[{"label":"鲤城区","value":"350502"},{"label":"丰泽区","value":"350503"},{"label":"洛江区","value":"350504"},{"label":"泉港区","value":"350505"},{"label":"惠安县","value":"350521"},{"label":"安溪县","value":"350524"},{"label":"永春县","value":"350525"},{"label":"德化县","value":"350526"},{"label":"金门县","value":"350527"},{"label":"石狮市","value":"350581"},{"label":"晋江市","value":"350582"},{"label":"南安市","value":"350583"}],[{"label":"芗城区","value":"350602"},{"label":"龙文区","value":"350603"},{"label":"云霄县","value":"350622"},{"label":"漳浦县","value":"350623"},{"label":"诏安县","value":"350624"},{"label":"长泰县","value":"350625"},{"label":"东山县","value":"350626"},{"label":"南靖县","value":"350627"},{"label":"平和县","value":"350628"},{"label":"华安县","value":"350629"},{"label":"龙海市","value":"350681"}],[{"label":"延平区","value":"350702"},{"label":"建阳区","value":"350703"},{"label":"顺昌县","value":"350721"},{"label":"浦城县","value":"350722"},{"label":"光泽县","value":"350723"},{"label":"松溪县","value":"350724"},{"label":"政和县","value":"350725"},{"label":"邵武市","value":"350781"},{"label":"武夷山市","value":"350782"},{"label":"建瓯市","value":"350783"}],[{"label":"新罗区","value":"350802"},{"label":"永定区","value":"350803"},{"label":"长汀县","value":"350821"},{"label":"上杭县","value":"350823"},{"label":"武平县","value":"350824"},{"label":"连城县","value":"350825"},{"label":"漳平市","value":"350881"}],[{"label":"蕉城区","value":"350902"},{"label":"霞浦县","value":"350921"},{"label":"古田县","value":"350922"},{"label":"屏南县","value":"350923"},{"label":"寿宁县","value":"350924"},{"label":"周宁县","value":"350925"},{"label":"柘荣县","value":"350926"},{"label":"福安市","value":"350981"},{"label":"福鼎市","value":"350982"}]],[[{"label":"东湖区","value":"360102"},{"label":"西湖区","value":"360103"},{"label":"青云谱区","value":"360104"},{"label":"湾里区","value":"360105"},{"label":"青山湖区","value":"360111"},{"label":"新建区","value":"360112"},{"label":"南昌县","value":"360121"},{"label":"安义县","value":"360123"},{"label":"进贤县","value":"360124"}],[{"label":"昌江区","value":"360202"},{"label":"珠山区","value":"360203"},{"label":"浮梁县","value":"360222"},{"label":"乐平市","value":"360281"}],[{"label":"安源区","value":"360302"},{"label":"湘东区","value":"360313"},{"label":"莲花县","value":"360321"},{"label":"上栗县","value":"360322"},{"label":"芦溪县","value":"360323"}],[{"label":"濂溪区","value":"360402"},{"label":"浔阳区","value":"360403"},{"label":"柴桑区","value":"360404"},{"label":"武宁县","value":"360423"},{"label":"修水县","value":"360424"},{"label":"永修县","value":"360425"},{"label":"德安县","value":"360426"},{"label":"都昌县","value":"360428"},{"label":"湖口县","value":"360429"},{"label":"彭泽县","value":"360430"},{"label":"瑞昌市","value":"360481"},{"label":"共青城市","value":"360482"},{"label":"庐山市","value":"360483"}],[{"label":"渝水区","value":"360502"},{"label":"分宜县","value":"360521"}],[{"label":"月湖区","value":"360602"},{"label":"余江县","value":"360622"},{"label":"贵溪市","value":"360681"}],[{"label":"章贡区","value":"360702"},{"label":"南康区","value":"360703"},{"label":"赣县区","value":"360704"},{"label":"信丰县","value":"360722"},{"label":"大余县","value":"360723"},{"label":"上犹县","value":"360724"},{"label":"崇义县","value":"360725"},{"label":"安远县","value":"360726"},{"label":"龙南县","value":"360727"},{"label":"定南县","value":"360728"},{"label":"全南县","value":"360729"},{"label":"宁都县","value":"360730"},{"label":"于都县","value":"360731"},{"label":"兴国县","value":"360732"},{"label":"会昌县","value":"360733"},{"label":"寻乌县","value":"360734"},{"label":"石城县","value":"360735"},{"label":"瑞金市","value":"360781"}],[{"label":"吉州区","value":"360802"},{"label":"青原区","value":"360803"},{"label":"吉安县","value":"360821"},{"label":"吉水县","value":"360822"},{"label":"峡江县","value":"360823"},{"label":"新干县","value":"360824"},{"label":"永丰县","value":"360825"},{"label":"泰和县","value":"360826"},{"label":"遂川县","value":"360827"},{"label":"万安县","value":"360828"},{"label":"安福县","value":"360829"},{"label":"永新县","value":"360830"},{"label":"井冈山市","value":"360881"}],[{"label":"袁州区","value":"360902"},{"label":"奉新县","value":"360921"},{"label":"万载县","value":"360922"},{"label":"上高县","value":"360923"},{"label":"宜丰县","value":"360924"},{"label":"靖安县","value":"360925"},{"label":"铜鼓县","value":"360926"},{"label":"丰城市","value":"360981"},{"label":"樟树市","value":"360982"},{"label":"高安市","value":"360983"}],[{"label":"临川区","value":"361002"},{"label":"东乡区","value":"361003"},{"label":"南城县","value":"361021"},{"label":"黎川县","value":"361022"},{"label":"南丰县","value":"361023"},{"label":"崇仁县","value":"361024"},{"label":"乐安县","value":"361025"},{"label":"宜黄县","value":"361026"},{"label":"金溪县","value":"361027"},{"label":"资溪县","value":"361028"},{"label":"广昌县","value":"361030"}],[{"label":"信州区","value":"361102"},{"label":"广丰区","value":"361103"},{"label":"上饶县","value":"361121"},{"label":"玉山县","value":"361123"},{"label":"铅山县","value":"361124"},{"label":"横峰县","value":"361125"},{"label":"弋阳县","value":"361126"},{"label":"余干县","value":"361127"},{"label":"鄱阳县","value":"361128"},{"label":"万年县","value":"361129"},{"label":"婺源县","value":"361130"},{"label":"德兴市","value":"361181"}]],[[{"label":"历下区","value":"370102"},{"label":"市中区","value":"370103"},{"label":"槐荫区","value":"370104"},{"label":"天桥区","value":"370105"},{"label":"历城区","value":"370112"},{"label":"长清区","value":"370113"},{"label":"章丘区","value":"370114"},{"label":"平阴县","value":"370124"},{"label":"济阳县","value":"370125"},{"label":"商河县","value":"370126"},{"label":"济南高新技术产业开发区","value":"370171"}],[{"label":"市南区","value":"370202"},{"label":"市北区","value":"370203"},{"label":"黄岛区","value":"370211"},{"label":"崂山区","value":"370212"},{"label":"李沧区","value":"370213"},{"label":"城阳区","value":"370214"},{"label":"即墨区","value":"370215"},{"label":"青岛高新技术产业开发区","value":"370271"},{"label":"胶州市","value":"370281"},{"label":"平度市","value":"370283"},{"label":"莱西市","value":"370285"}],[{"label":"淄川区","value":"370302"},{"label":"张店区","value":"370303"},{"label":"博山区","value":"370304"},{"label":"临淄区","value":"370305"},{"label":"周村区","value":"370306"},{"label":"桓台县","value":"370321"},{"label":"高青县","value":"370322"},{"label":"沂源县","value":"370323"}],[{"label":"市中区","value":"370402"},{"label":"薛城区","value":"370403"},{"label":"峄城区","value":"370404"},{"label":"台儿庄区","value":"370405"},{"label":"山亭区","value":"370406"},{"label":"滕州市","value":"370481"}],[{"label":"东营区","value":"370502"},{"label":"河口区","value":"370503"},{"label":"垦利区","value":"370505"},{"label":"利津县","value":"370522"},{"label":"广饶县","value":"370523"},{"label":"东营经济技术开发区","value":"370571"},{"label":"东营港经济开发区","value":"370572"}],[{"label":"芝罘区","value":"370602"},{"label":"福山区","value":"370611"},{"label":"牟平区","value":"370612"},{"label":"莱山区","value":"370613"},{"label":"长岛县","value":"370634"},{"label":"烟台高新技术产业开发区","value":"370671"},{"label":"烟台经济技术开发区","value":"370672"},{"label":"龙口市","value":"370681"},{"label":"莱阳市","value":"370682"},{"label":"莱州市","value":"370683"},{"label":"蓬莱市","value":"370684"},{"label":"招远市","value":"370685"},{"label":"栖霞市","value":"370686"},{"label":"海阳市","value":"370687"}],[{"label":"潍城区","value":"370702"},{"label":"寒亭区","value":"370703"},{"label":"坊子区","value":"370704"},{"label":"奎文区","value":"370705"},{"label":"临朐县","value":"370724"},{"label":"昌乐县","value":"370725"},{"label":"潍坊滨海经济技术开发区","value":"370772"},{"label":"青州市","value":"370781"},{"label":"诸城市","value":"370782"},{"label":"寿光市","value":"370783"},{"label":"安丘市","value":"370784"},{"label":"高密市","value":"370785"},{"label":"昌邑市","value":"370786"}],[{"label":"任城区","value":"370811"},{"label":"兖州区","value":"370812"},{"label":"微山县","value":"370826"},{"label":"鱼台县","value":"370827"},{"label":"金乡县","value":"370828"},{"label":"嘉祥县","value":"370829"},{"label":"汶上县","value":"370830"},{"label":"泗水县","value":"370831"},{"label":"梁山县","value":"370832"},{"label":"济宁高新技术产业开发区","value":"370871"},{"label":"曲阜市","value":"370881"},{"label":"邹城市","value":"370883"}],[{"label":"泰山区","value":"370902"},{"label":"岱岳区","value":"370911"},{"label":"宁阳县","value":"370921"},{"label":"东平县","value":"370923"},{"label":"新泰市","value":"370982"},{"label":"肥城市","value":"370983"}],[{"label":"环翠区","value":"371002"},{"label":"文登区","value":"371003"},{"label":"威海火炬高技术产业开发区","value":"371071"},{"label":"威海经济技术开发区","value":"371072"},{"label":"威海临港经济技术开发区","value":"371073"},{"label":"荣成市","value":"371082"},{"label":"乳山市","value":"371083"}],[{"label":"东港区","value":"371102"},{"label":"岚山区","value":"371103"},{"label":"五莲县","value":"371121"},{"label":"莒县","value":"371122"},{"label":"日照经济技术开发区","value":"371171"},{"label":"日照国际海洋城","value":"371172"}],[{"label":"莱城区","value":"371202"},{"label":"钢城区","value":"371203"}],[{"label":"兰山区","value":"371302"},{"label":"罗庄区","value":"371311"},{"label":"河东区","value":"371312"},{"label":"沂南县","value":"371321"},{"label":"郯城县","value":"371322"},{"label":"沂水县","value":"371323"},{"label":"兰陵县","value":"371324"},{"label":"费县","value":"371325"},{"label":"平邑县","value":"371326"},{"label":"莒南县","value":"371327"},{"label":"蒙阴县","value":"371328"},{"label":"临沭县","value":"371329"},{"label":"临沂高新技术产业开发区","value":"371371"},{"label":"临沂经济技术开发区","value":"371372"},{"label":"临沂临港经济开发区","value":"371373"}],[{"label":"德城区","value":"371402"},{"label":"陵城区","value":"371403"},{"label":"宁津县","value":"371422"},{"label":"庆云县","value":"371423"},{"label":"临邑县","value":"371424"},{"label":"齐河县","value":"371425"},{"label":"平原县","value":"371426"},{"label":"夏津县","value":"371427"},{"label":"武城县","value":"371428"},{"label":"德州经济技术开发区","value":"371471"},{"label":"德州运河经济开发区","value":"371472"},{"label":"乐陵市","value":"371481"},{"label":"禹城市","value":"371482"}],[{"label":"东昌府区","value":"371502"},{"label":"阳谷县","value":"371521"},{"label":"莘县","value":"371522"},{"label":"茌平县","value":"371523"},{"label":"东阿县","value":"371524"},{"label":"冠县","value":"371525"},{"label":"高唐县","value":"371526"},{"label":"临清市","value":"371581"}],[{"label":"滨城区","value":"371602"},{"label":"沾化区","value":"371603"},{"label":"惠民县","value":"371621"},{"label":"阳信县","value":"371622"},{"label":"无棣县","value":"371623"},{"label":"博兴县","value":"371625"},{"label":"邹平县","value":"371626"}],[{"label":"牡丹区","value":"371702"},{"label":"定陶区","value":"371703"},{"label":"曹县","value":"371721"},{"label":"单县","value":"371722"},{"label":"成武县","value":"371723"},{"label":"巨野县","value":"371724"},{"label":"郓城县","value":"371725"},{"label":"鄄城县","value":"371726"},{"label":"东明县","value":"371728"},{"label":"菏泽经济技术开发区","value":"371771"},{"label":"菏泽高新技术开发区","value":"371772"}]],[[{"label":"中原区","value":"410102"},{"label":"二七区","value":"410103"},{"label":"管城回族区","value":"410104"},{"label":"金水区","value":"410105"},{"label":"上街区","value":"410106"},{"label":"惠济区","value":"410108"},{"label":"中牟县","value":"410122"},{"label":"郑州经济技术开发区","value":"410171"},{"label":"郑州高新技术产业开发区","value":"410172"},{"label":"郑州航空港经济综合实验区","value":"410173"},{"label":"巩义市","value":"410181"},{"label":"荥阳市","value":"410182"},{"label":"新密市","value":"410183"},{"label":"新郑市","value":"410184"},{"label":"登封市","value":"410185"}],[{"label":"龙亭区","value":"410202"},{"label":"顺河回族区","value":"410203"},{"label":"鼓楼区","value":"410204"},{"label":"禹王台区","value":"410205"},{"label":"祥符区","value":"410212"},{"label":"杞县","value":"410221"},{"label":"通许县","value":"410222"},{"label":"尉氏县","value":"410223"},{"label":"兰考县","value":"410225"}],[{"label":"老城区","value":"410302"},{"label":"西工区","value":"410303"},{"label":"瀍河回族区","value":"410304"},{"label":"涧西区","value":"410305"},{"label":"吉利区","value":"410306"},{"label":"洛龙区","value":"410311"},{"label":"孟津县","value":"410322"},{"label":"新安县","value":"410323"},{"label":"栾川县","value":"410324"},{"label":"嵩县","value":"410325"},{"label":"汝阳县","value":"410326"},{"label":"宜阳县","value":"410327"},{"label":"洛宁县","value":"410328"},{"label":"伊川县","value":"410329"},{"label":"洛阳高新技术产业开发区","value":"410371"},{"label":"偃师市","value":"410381"}],[{"label":"新华区","value":"410402"},{"label":"卫东区","value":"410403"},{"label":"石龙区","value":"410404"},{"label":"湛河区","value":"410411"},{"label":"宝丰县","value":"410421"},{"label":"叶县","value":"410422"},{"label":"鲁山县","value":"410423"},{"label":"郏县","value":"410425"},{"label":"平顶山高新技术产业开发区","value":"410471"},{"label":"平顶山市新城区","value":"410472"},{"label":"舞钢市","value":"410481"},{"label":"汝州市","value":"410482"}],[{"label":"文峰区","value":"410502"},{"label":"北关区","value":"410503"},{"label":"殷都区","value":"410505"},{"label":"龙安区","value":"410506"},{"label":"安阳县","value":"410522"},{"label":"汤阴县","value":"410523"},{"label":"滑县","value":"410526"},{"label":"内黄县","value":"410527"},{"label":"安阳高新技术产业开发区","value":"410571"},{"label":"林州市","value":"410581"}],[{"label":"鹤山区","value":"410602"},{"label":"山城区","value":"410603"},{"label":"淇滨区","value":"410611"},{"label":"浚县","value":"410621"},{"label":"淇县","value":"410622"},{"label":"鹤壁经济技术开发区","value":"410671"}],[{"label":"红旗区","value":"410702"},{"label":"卫滨区","value":"410703"},{"label":"凤泉区","value":"410704"},{"label":"牧野区","value":"410711"},{"label":"新乡县","value":"410721"},{"label":"获嘉县","value":"410724"},{"label":"原阳县","value":"410725"},{"label":"延津县","value":"410726"},{"label":"封丘县","value":"410727"},{"label":"长垣县","value":"410728"},{"label":"新乡高新技术产业开发区","value":"410771"},{"label":"新乡经济技术开发区","value":"410772"},{"label":"新乡市平原城乡一体化示范区","value":"410773"},{"label":"卫辉市","value":"410781"},{"label":"辉县市","value":"410782"}],[{"label":"解放区","value":"410802"},{"label":"中站区","value":"410803"},{"label":"马村区","value":"410804"},{"label":"山阳区","value":"410811"},{"label":"修武县","value":"410821"},{"label":"博爱县","value":"410822"},{"label":"武陟县","value":"410823"},{"label":"温县","value":"410825"},{"label":"焦作城乡一体化示范区","value":"410871"},{"label":"沁阳市","value":"410882"},{"label":"孟州市","value":"410883"}],[{"label":"华龙区","value":"410902"},{"label":"清丰县","value":"410922"},{"label":"南乐县","value":"410923"},{"label":"范县","value":"410926"},{"label":"台前县","value":"410927"},{"label":"濮阳县","value":"410928"},{"label":"河南濮阳工业园区","value":"410971"},{"label":"濮阳经济技术开发区","value":"410972"}],[{"label":"魏都区","value":"411002"},{"label":"建安区","value":"411003"},{"label":"鄢陵县","value":"411024"},{"label":"襄城县","value":"411025"},{"label":"许昌经济技术开发区","value":"411071"},{"label":"禹州市","value":"411081"},{"label":"长葛市","value":"411082"}],[{"label":"源汇区","value":"411102"},{"label":"郾城区","value":"411103"},{"label":"召陵区","value":"411104"},{"label":"舞阳县","value":"411121"},{"label":"临颍县","value":"411122"},{"label":"漯河经济技术开发区","value":"411171"}],[{"label":"湖滨区","value":"411202"},{"label":"陕州区","value":"411203"},{"label":"渑池县","value":"411221"},{"label":"卢氏县","value":"411224"},{"label":"河南三门峡经济开发区","value":"411271"},{"label":"义马市","value":"411281"},{"label":"灵宝市","value":"411282"}],[{"label":"宛城区","value":"411302"},{"label":"卧龙区","value":"411303"},{"label":"南召县","value":"411321"},{"label":"方城县","value":"411322"},{"label":"西峡县","value":"411323"},{"label":"镇平县","value":"411324"},{"label":"内乡县","value":"411325"},{"label":"淅川县","value":"411326"},{"label":"社旗县","value":"411327"},{"label":"唐河县","value":"411328"},{"label":"新野县","value":"411329"},{"label":"桐柏县","value":"411330"},{"label":"南阳高新技术产业开发区","value":"411371"},{"label":"南阳市城乡一体化示范区","value":"411372"},{"label":"邓州市","value":"411381"}],[{"label":"梁园区","value":"411402"},{"label":"睢阳区","value":"411403"},{"label":"民权县","value":"411421"},{"label":"睢县","value":"411422"},{"label":"宁陵县","value":"411423"},{"label":"柘城县","value":"411424"},{"label":"虞城县","value":"411425"},{"label":"夏邑县","value":"411426"},{"label":"豫东综合物流产业聚集区","value":"411471"},{"label":"河南商丘经济开发区","value":"411472"},{"label":"永城市","value":"411481"}],[{"label":"浉河区","value":"411502"},{"label":"平桥区","value":"411503"},{"label":"罗山县","value":"411521"},{"label":"光山县","value":"411522"},{"label":"新县","value":"411523"},{"label":"商城县","value":"411524"},{"label":"固始县","value":"411525"},{"label":"潢川县","value":"411526"},{"label":"淮滨县","value":"411527"},{"label":"息县","value":"411528"},{"label":"信阳高新技术产业开发区","value":"411571"}],[{"label":"川汇区","value":"411602"},{"label":"扶沟县","value":"411621"},{"label":"西华县","value":"411622"},{"label":"商水县","value":"411623"},{"label":"沈丘县","value":"411624"},{"label":"郸城县","value":"411625"},{"label":"淮阳县","value":"411626"},{"label":"太康县","value":"411627"},{"label":"鹿邑县","value":"411628"},{"label":"河南周口经济开发区","value":"411671"},{"label":"项城市","value":"411681"}],[{"label":"驿城区","value":"411702"},{"label":"西平县","value":"411721"},{"label":"上蔡县","value":"411722"},{"label":"平舆县","value":"411723"},{"label":"正阳县","value":"411724"},{"label":"确山县","value":"411725"},{"label":"泌阳县","value":"411726"},{"label":"汝南县","value":"411727"},{"label":"遂平县","value":"411728"},{"label":"新蔡县","value":"411729"},{"label":"河南驻马店经济开发区","value":"411771"}],[{"label":"济源市","value":"419001"}]],[[{"label":"江岸区","value":"420102"},{"label":"江汉区","value":"420103"},{"label":"硚口区","value":"420104"},{"label":"汉阳区","value":"420105"},{"label":"武昌区","value":"420106"},{"label":"青山区","value":"420107"},{"label":"洪山区","value":"420111"},{"label":"东西湖区","value":"420112"},{"label":"汉南区","value":"420113"},{"label":"蔡甸区","value":"420114"},{"label":"江夏区","value":"420115"},{"label":"黄陂区","value":"420116"},{"label":"新洲区","value":"420117"}],[{"label":"黄石港区","value":"420202"},{"label":"西塞山区","value":"420203"},{"label":"下陆区","value":"420204"},{"label":"铁山区","value":"420205"},{"label":"阳新县","value":"420222"},{"label":"大冶市","value":"420281"}],[{"label":"茅箭区","value":"420302"},{"label":"张湾区","value":"420303"},{"label":"郧阳区","value":"420304"},{"label":"郧西县","value":"420322"},{"label":"竹山县","value":"420323"},{"label":"竹溪县","value":"420324"},{"label":"房县","value":"420325"},{"label":"丹江口市","value":"420381"}],[{"label":"西陵区","value":"420502"},{"label":"伍家岗区","value":"420503"},{"label":"点军区","value":"420504"},{"label":"猇亭区","value":"420505"},{"label":"夷陵区","value":"420506"},{"label":"远安县","value":"420525"},{"label":"兴山县","value":"420526"},{"label":"秭归县","value":"420527"},{"label":"长阳土家族自治县","value":"420528"},{"label":"五峰土家族自治县","value":"420529"},{"label":"宜都市","value":"420581"},{"label":"当阳市","value":"420582"},{"label":"枝江市","value":"420583"}],[{"label":"襄城区","value":"420602"},{"label":"樊城区","value":"420606"},{"label":"襄州区","value":"420607"},{"label":"南漳县","value":"420624"},{"label":"谷城县","value":"420625"},{"label":"保康县","value":"420626"},{"label":"老河口市","value":"420682"},{"label":"枣阳市","value":"420683"},{"label":"宜城市","value":"420684"}],[{"label":"梁子湖区","value":"420702"},{"label":"华容区","value":"420703"},{"label":"鄂城区","value":"420704"}],[{"label":"东宝区","value":"420802"},{"label":"掇刀区","value":"420804"},{"label":"京山县","value":"420821"},{"label":"沙洋县","value":"420822"},{"label":"钟祥市","value":"420881"}],[{"label":"孝南区","value":"420902"},{"label":"孝昌县","value":"420921"},{"label":"大悟县","value":"420922"},{"label":"云梦县","value":"420923"},{"label":"应城市","value":"420981"},{"label":"安陆市","value":"420982"},{"label":"汉川市","value":"420984"}],[{"label":"沙市区","value":"421002"},{"label":"荆州区","value":"421003"},{"label":"公安县","value":"421022"},{"label":"监利县","value":"421023"},{"label":"江陵县","value":"421024"},{"label":"荆州经济技术开发区","value":"421071"},{"label":"石首市","value":"421081"},{"label":"洪湖市","value":"421083"},{"label":"松滋市","value":"421087"}],[{"label":"黄州区","value":"421102"},{"label":"团风县","value":"421121"},{"label":"红安县","value":"421122"},{"label":"罗田县","value":"421123"},{"label":"英山县","value":"421124"},{"label":"浠水县","value":"421125"},{"label":"蕲春县","value":"421126"},{"label":"黄梅县","value":"421127"},{"label":"龙感湖管理区","value":"421171"},{"label":"麻城市","value":"421181"},{"label":"武穴市","value":"421182"}],[{"label":"咸安区","value":"421202"},{"label":"嘉鱼县","value":"421221"},{"label":"通城县","value":"421222"},{"label":"崇阳县","value":"421223"},{"label":"通山县","value":"421224"},{"label":"赤壁市","value":"421281"}],[{"label":"曾都区","value":"421303"},{"label":"随县","value":"421321"},{"label":"广水市","value":"421381"}],[{"label":"恩施市","value":"422801"},{"label":"利川市","value":"422802"},{"label":"建始县","value":"422822"},{"label":"巴东县","value":"422823"},{"label":"宣恩县","value":"422825"},{"label":"咸丰县","value":"422826"},{"label":"来凤县","value":"422827"},{"label":"鹤峰县","value":"422828"}],[{"label":"仙桃市","value":"429004"},{"label":"潜江市","value":"429005"},{"label":"天门市","value":"429006"},{"label":"神农架林区","value":"429021"}]],[[{"label":"芙蓉区","value":"430102"},{"label":"天心区","value":"430103"},{"label":"岳麓区","value":"430104"},{"label":"开福区","value":"430105"},{"label":"雨花区","value":"430111"},{"label":"望城区","value":"430112"},{"label":"长沙县","value":"430121"},{"label":"浏阳市","value":"430181"},{"label":"宁乡市","value":"430182"}],[{"label":"荷塘区","value":"430202"},{"label":"芦淞区","value":"430203"},{"label":"石峰区","value":"430204"},{"label":"天元区","value":"430211"},{"label":"株洲县","value":"430221"},{"label":"攸县","value":"430223"},{"label":"茶陵县","value":"430224"},{"label":"炎陵县","value":"430225"},{"label":"云龙示范区","value":"430271"},{"label":"醴陵市","value":"430281"}],[{"label":"雨湖区","value":"430302"},{"label":"岳塘区","value":"430304"},{"label":"湘潭县","value":"430321"},{"label":"湖南湘潭高新技术产业园区","value":"430371"},{"label":"湘潭昭山示范区","value":"430372"},{"label":"湘潭九华示范区","value":"430373"},{"label":"湘乡市","value":"430381"},{"label":"韶山市","value":"430382"}],[{"label":"珠晖区","value":"430405"},{"label":"雁峰区","value":"430406"},{"label":"石鼓区","value":"430407"},{"label":"蒸湘区","value":"430408"},{"label":"南岳区","value":"430412"},{"label":"衡阳县","value":"430421"},{"label":"衡南县","value":"430422"},{"label":"衡山县","value":"430423"},{"label":"衡东县","value":"430424"},{"label":"祁东县","value":"430426"},{"label":"衡阳综合保税区","value":"430471"},{"label":"湖南衡阳高新技术产业园区","value":"430472"},{"label":"湖南衡阳松木经济开发区","value":"430473"},{"label":"耒阳市","value":"430481"},{"label":"常宁市","value":"430482"}],[{"label":"双清区","value":"430502"},{"label":"大祥区","value":"430503"},{"label":"北塔区","value":"430511"},{"label":"邵东县","value":"430521"},{"label":"新邵县","value":"430522"},{"label":"邵阳县","value":"430523"},{"label":"隆回县","value":"430524"},{"label":"洞口县","value":"430525"},{"label":"绥宁县","value":"430527"},{"label":"新宁县","value":"430528"},{"label":"城步苗族自治县","value":"430529"},{"label":"武冈市","value":"430581"}],[{"label":"岳阳楼区","value":"430602"},{"label":"云溪区","value":"430603"},{"label":"君山区","value":"430611"},{"label":"岳阳县","value":"430621"},{"label":"华容县","value":"430623"},{"label":"湘阴县","value":"430624"},{"label":"平江县","value":"430626"},{"label":"岳阳市屈原管理区","value":"430671"},{"label":"汨罗市","value":"430681"},{"label":"临湘市","value":"430682"}],[{"label":"武陵区","value":"430702"},{"label":"鼎城区","value":"430703"},{"label":"安乡县","value":"430721"},{"label":"汉寿县","value":"430722"},{"label":"澧县","value":"430723"},{"label":"临澧县","value":"430724"},{"label":"桃源县","value":"430725"},{"label":"石门县","value":"430726"},{"label":"常德市西洞庭管理区","value":"430771"},{"label":"津市市","value":"430781"}],[{"label":"永定区","value":"430802"},{"label":"武陵源区","value":"430811"},{"label":"慈利县","value":"430821"},{"label":"桑植县","value":"430822"}],[{"label":"资阳区","value":"430902"},{"label":"赫山区","value":"430903"},{"label":"南县","value":"430921"},{"label":"桃江县","value":"430922"},{"label":"安化县","value":"430923"},{"label":"益阳市大通湖管理区","value":"430971"},{"label":"湖南益阳高新技术产业园区","value":"430972"},{"label":"沅江市","value":"430981"}],[{"label":"北湖区","value":"431002"},{"label":"苏仙区","value":"431003"},{"label":"桂阳县","value":"431021"},{"label":"宜章县","value":"431022"},{"label":"永兴县","value":"431023"},{"label":"嘉禾县","value":"431024"},{"label":"临武县","value":"431025"},{"label":"汝城县","value":"431026"},{"label":"桂东县","value":"431027"},{"label":"安仁县","value":"431028"},{"label":"资兴市","value":"431081"}],[{"label":"零陵区","value":"431102"},{"label":"冷水滩区","value":"431103"},{"label":"祁阳县","value":"431121"},{"label":"东安县","value":"431122"},{"label":"双牌县","value":"431123"},{"label":"道县","value":"431124"},{"label":"江永县","value":"431125"},{"label":"宁远县","value":"431126"},{"label":"蓝山县","value":"431127"},{"label":"新田县","value":"431128"},{"label":"江华瑶族自治县","value":"431129"},{"label":"永州经济技术开发区","value":"431171"},{"label":"永州市金洞管理区","value":"431172"},{"label":"永州市回龙圩管理区","value":"431173"}],[{"label":"鹤城区","value":"431202"},{"label":"中方县","value":"431221"},{"label":"沅陵县","value":"431222"},{"label":"辰溪县","value":"431223"},{"label":"溆浦县","value":"431224"},{"label":"会同县","value":"431225"},{"label":"麻阳苗族自治县","value":"431226"},{"label":"新晃侗族自治县","value":"431227"},{"label":"芷江侗族自治县","value":"431228"},{"label":"靖州苗族侗族自治县","value":"431229"},{"label":"通道侗族自治县","value":"431230"},{"label":"怀化市洪江管理区","value":"431271"},{"label":"洪江市","value":"431281"}],[{"label":"娄星区","value":"431302"},{"label":"双峰县","value":"431321"},{"label":"新化县","value":"431322"},{"label":"冷水江市","value":"431381"},{"label":"涟源市","value":"431382"}],[{"label":"吉首市","value":"433101"},{"label":"泸溪县","value":"433122"},{"label":"凤凰县","value":"433123"},{"label":"花垣县","value":"433124"},{"label":"保靖县","value":"433125"},{"label":"古丈县","value":"433126"},{"label":"永顺县","value":"433127"},{"label":"龙山县","value":"433130"},{"label":"湖南吉首经济开发区","value":"433172"},{"label":"湖南永顺经济开发区","value":"433173"}]],[[{"label":"荔湾区","value":"440103"},{"label":"越秀区","value":"440104"},{"label":"海珠区","value":"440105"},{"label":"天河区","value":"440106"},{"label":"白云区","value":"440111"},{"label":"黄埔区","value":"440112"},{"label":"番禺区","value":"440113"},{"label":"花都区","value":"440114"},{"label":"南沙区","value":"440115"},{"label":"从化区","value":"440117"},{"label":"增城区","value":"440118"}],[{"label":"武江区","value":"440203"},{"label":"浈江区","value":"440204"},{"label":"曲江区","value":"440205"},{"label":"始兴县","value":"440222"},{"label":"仁化县","value":"440224"},{"label":"翁源县","value":"440229"},{"label":"乳源瑶族自治县","value":"440232"},{"label":"新丰县","value":"440233"},{"label":"乐昌市","value":"440281"},{"label":"南雄市","value":"440282"}],[{"label":"罗湖区","value":"440303"},{"label":"福田区","value":"440304"},{"label":"南山区","value":"440305"},{"label":"宝安区","value":"440306"},{"label":"龙岗区","value":"440307"},{"label":"盐田区","value":"440308"},{"label":"龙华区","value":"440309"},{"label":"坪山区","value":"440310"}],[{"label":"香洲区","value":"440402"},{"label":"斗门区","value":"440403"},{"label":"金湾区","value":"440404"}],[{"label":"龙湖区","value":"440507"},{"label":"金平区","value":"440511"},{"label":"濠江区","value":"440512"},{"label":"潮阳区","value":"440513"},{"label":"潮南区","value":"440514"},{"label":"澄海区","value":"440515"},{"label":"南澳县","value":"440523"}],[{"label":"禅城区","value":"440604"},{"label":"南海区","value":"440605"},{"label":"顺德区","value":"440606"},{"label":"三水区","value":"440607"},{"label":"高明区","value":"440608"}],[{"label":"蓬江区","value":"440703"},{"label":"江海区","value":"440704"},{"label":"新会区","value":"440705"},{"label":"台山市","value":"440781"},{"label":"开平市","value":"440783"},{"label":"鹤山市","value":"440784"},{"label":"恩平市","value":"440785"}],[{"label":"赤坎区","value":"440802"},{"label":"霞山区","value":"440803"},{"label":"坡头区","value":"440804"},{"label":"麻章区","value":"440811"},{"label":"遂溪县","value":"440823"},{"label":"徐闻县","value":"440825"},{"label":"廉江市","value":"440881"},{"label":"雷州市","value":"440882"},{"label":"吴川市","value":"440883"}],[{"label":"茂南区","value":"440902"},{"label":"电白区","value":"440904"},{"label":"高州市","value":"440981"},{"label":"化州市","value":"440982"},{"label":"信宜市","value":"440983"}],[{"label":"端州区","value":"441202"},{"label":"鼎湖区","value":"441203"},{"label":"高要区","value":"441204"},{"label":"广宁县","value":"441223"},{"label":"怀集县","value":"441224"},{"label":"封开县","value":"441225"},{"label":"德庆县","value":"441226"},{"label":"四会市","value":"441284"}],[{"label":"惠城区","value":"441302"},{"label":"惠阳区","value":"441303"},{"label":"博罗县","value":"441322"},{"label":"惠东县","value":"441323"},{"label":"龙门县","value":"441324"}],[{"label":"梅江区","value":"441402"},{"label":"梅县区","value":"441403"},{"label":"大埔县","value":"441422"},{"label":"丰顺县","value":"441423"},{"label":"五华县","value":"441424"},{"label":"平远县","value":"441426"},{"label":"蕉岭县","value":"441427"},{"label":"兴宁市","value":"441481"}],[{"label":"城区","value":"441502"},{"label":"海丰县","value":"441521"},{"label":"陆河县","value":"441523"},{"label":"陆丰市","value":"441581"}],[{"label":"源城区","value":"441602"},{"label":"紫金县","value":"441621"},{"label":"龙川县","value":"441622"},{"label":"连平县","value":"441623"},{"label":"和平县","value":"441624"},{"label":"东源县","value":"441625"}],[{"label":"江城区","value":"441702"},{"label":"阳东区","value":"441704"},{"label":"阳西县","value":"441721"},{"label":"阳春市","value":"441781"}],[{"label":"清城区","value":"441802"},{"label":"清新区","value":"441803"},{"label":"佛冈县","value":"441821"},{"label":"阳山县","value":"441823"},{"label":"连山壮族瑶族自治县","value":"441825"},{"label":"连南瑶族自治县","value":"441826"},{"label":"英德市","value":"441881"},{"label":"连州市","value":"441882"}],[{"label":"东莞市","value":"441900"}],[{"label":"中山市","value":"442000"}],[{"label":"湘桥区","value":"445102"},{"label":"潮安区","value":"445103"},{"label":"饶平县","value":"445122"}],[{"label":"榕城区","value":"445202"},{"label":"揭东区","value":"445203"},{"label":"揭西县","value":"445222"},{"label":"惠来县","value":"445224"},{"label":"普宁市","value":"445281"}],[{"label":"云城区","value":"445302"},{"label":"云安区","value":"445303"},{"label":"新兴县","value":"445321"},{"label":"郁南县","value":"445322"},{"label":"罗定市","value":"445381"}]],[[{"label":"兴宁区","value":"450102"},{"label":"青秀区","value":"450103"},{"label":"江南区","value":"450105"},{"label":"西乡塘区","value":"450107"},{"label":"良庆区","value":"450108"},{"label":"邕宁区","value":"450109"},{"label":"武鸣区","value":"450110"},{"label":"隆安县","value":"450123"},{"label":"马山县","value":"450124"},{"label":"上林县","value":"450125"},{"label":"宾阳县","value":"450126"},{"label":"横县","value":"450127"}],[{"label":"城中区","value":"450202"},{"label":"鱼峰区","value":"450203"},{"label":"柳南区","value":"450204"},{"label":"柳北区","value":"450205"},{"label":"柳江区","value":"450206"},{"label":"柳城县","value":"450222"},{"label":"鹿寨县","value":"450223"},{"label":"融安县","value":"450224"},{"label":"融水苗族自治县","value":"450225"},{"label":"三江侗族自治县","value":"450226"}],[{"label":"秀峰区","value":"450302"},{"label":"叠彩区","value":"450303"},{"label":"象山区","value":"450304"},{"label":"七星区","value":"450305"},{"label":"雁山区","value":"450311"},{"label":"临桂区","value":"450312"},{"label":"阳朔县","value":"450321"},{"label":"灵川县","value":"450323"},{"label":"全州县","value":"450324"},{"label":"兴安县","value":"450325"},{"label":"永福县","value":"450326"},{"label":"灌阳县","value":"450327"},{"label":"龙胜各族自治县","value":"450328"},{"label":"资源县","value":"450329"},{"label":"平乐县","value":"450330"},{"label":"荔浦县","value":"450331"},{"label":"恭城瑶族自治县","value":"450332"}],[{"label":"万秀区","value":"450403"},{"label":"长洲区","value":"450405"},{"label":"龙圩区","value":"450406"},{"label":"苍梧县","value":"450421"},{"label":"藤县","value":"450422"},{"label":"蒙山县","value":"450423"},{"label":"岑溪市","value":"450481"}],[{"label":"海城区","value":"450502"},{"label":"银海区","value":"450503"},{"label":"铁山港区","value":"450512"},{"label":"合浦县","value":"450521"}],[{"label":"港口区","value":"450602"},{"label":"防城区","value":"450603"},{"label":"上思县","value":"450621"},{"label":"东兴市","value":"450681"}],[{"label":"钦南区","value":"450702"},{"label":"钦北区","value":"450703"},{"label":"灵山县","value":"450721"},{"label":"浦北县","value":"450722"}],[{"label":"港北区","value":"450802"},{"label":"港南区","value":"450803"},{"label":"覃塘区","value":"450804"},{"label":"平南县","value":"450821"},{"label":"桂平市","value":"450881"}],[{"label":"玉州区","value":"450902"},{"label":"福绵区","value":"450903"},{"label":"容县","value":"450921"},{"label":"陆川县","value":"450922"},{"label":"博白县","value":"450923"},{"label":"兴业县","value":"450924"},{"label":"北流市","value":"450981"}],[{"label":"右江区","value":"451002"},{"label":"田阳县","value":"451021"},{"label":"田东县","value":"451022"},{"label":"平果县","value":"451023"},{"label":"德保县","value":"451024"},{"label":"那坡县","value":"451026"},{"label":"凌云县","value":"451027"},{"label":"乐业县","value":"451028"},{"label":"田林县","value":"451029"},{"label":"西林县","value":"451030"},{"label":"隆林各族自治县","value":"451031"},{"label":"靖西市","value":"451081"}],[{"label":"八步区","value":"451102"},{"label":"平桂区","value":"451103"},{"label":"昭平县","value":"451121"},{"label":"钟山县","value":"451122"},{"label":"富川瑶族自治县","value":"451123"}],[{"label":"金城江区","value":"451202"},{"label":"宜州区","value":"451203"},{"label":"南丹县","value":"451221"},{"label":"天峨县","value":"451222"},{"label":"凤山县","value":"451223"},{"label":"东兰县","value":"451224"},{"label":"罗城仫佬族自治县","value":"451225"},{"label":"环江毛南族自治县","value":"451226"},{"label":"巴马瑶族自治县","value":"451227"},{"label":"都安瑶族自治县","value":"451228"},{"label":"大化瑶族自治县","value":"451229"}],[{"label":"兴宾区","value":"451302"},{"label":"忻城县","value":"451321"},{"label":"象州县","value":"451322"},{"label":"武宣县","value":"451323"},{"label":"金秀瑶族自治县","value":"451324"},{"label":"合山市","value":"451381"}],[{"label":"江州区","value":"451402"},{"label":"扶绥县","value":"451421"},{"label":"宁明县","value":"451422"},{"label":"龙州县","value":"451423"},{"label":"大新县","value":"451424"},{"label":"天等县","value":"451425"},{"label":"凭祥市","value":"451481"}]],[[{"label":"秀英区","value":"460105"},{"label":"龙华区","value":"460106"},{"label":"琼山区","value":"460107"},{"label":"美兰区","value":"460108"}],[{"label":"海棠区","value":"460202"},{"label":"吉阳区","value":"460203"},{"label":"天涯区","value":"460204"},{"label":"崖州区","value":"460205"}],[{"label":"西沙群岛","value":"460321"},{"label":"南沙群岛","value":"460322"},{"label":"中沙群岛的岛礁及其海域","value":"460323"}],[{"label":"儋州市","value":"460400"}],[{"label":"五指山市","value":"469001"},{"label":"琼海市","value":"469002"},{"label":"文昌市","value":"469005"},{"label":"万宁市","value":"469006"},{"label":"东方市","value":"469007"},{"label":"定安县","value":"469021"},{"label":"屯昌县","value":"469022"},{"label":"澄迈县","value":"469023"},{"label":"临高县","value":"469024"},{"label":"白沙黎族自治县","value":"469025"},{"label":"昌江黎族自治县","value":"469026"},{"label":"乐东黎族自治县","value":"469027"},{"label":"陵水黎族自治县","value":"469028"},{"label":"保亭黎族苗族自治县","value":"469029"},{"label":"琼中黎族苗族自治县","value":"469030"}]],[[{"label":"万州区","value":"500101"},{"label":"涪陵区","value":"500102"},{"label":"渝中区","value":"500103"},{"label":"大渡口区","value":"500104"},{"label":"江北区","value":"500105"},{"label":"沙坪坝区","value":"500106"},{"label":"九龙坡区","value":"500107"},{"label":"南岸区","value":"500108"},{"label":"北碚区","value":"500109"},{"label":"綦江区","value":"500110"},{"label":"大足区","value":"500111"},{"label":"渝北区","value":"500112"},{"label":"巴南区","value":"500113"},{"label":"黔江区","value":"500114"},{"label":"长寿区","value":"500115"},{"label":"江津区","value":"500116"},{"label":"合川区","value":"500117"},{"label":"永川区","value":"500118"},{"label":"南川区","value":"500119"},{"label":"璧山区","value":"500120"},{"label":"铜梁区","value":"500151"},{"label":"潼南区","value":"500152"},{"label":"荣昌区","value":"500153"},{"label":"开州区","value":"500154"},{"label":"梁平区","value":"500155"},{"label":"武隆区","value":"500156"}],[{"label":"城口县","value":"500229"},{"label":"丰都县","value":"500230"},{"label":"垫江县","value":"500231"},{"label":"忠县","value":"500233"},{"label":"云阳县","value":"500235"},{"label":"奉节县","value":"500236"},{"label":"巫山县","value":"500237"},{"label":"巫溪县","value":"500238"},{"label":"石柱土家族自治县","value":"500240"},{"label":"秀山土家族苗族自治县","value":"500241"},{"label":"酉阳土家族苗族自治县","value":"500242"},{"label":"彭水苗族土家族自治县","value":"500243"}]],[[{"label":"锦江区","value":"510104"},{"label":"青羊区","value":"510105"},{"label":"金牛区","value":"510106"},{"label":"武侯区","value":"510107"},{"label":"成华区","value":"510108"},{"label":"龙泉驿区","value":"510112"},{"label":"青白江区","value":"510113"},{"label":"新都区","value":"510114"},{"label":"温江区","value":"510115"},{"label":"双流区","value":"510116"},{"label":"郫都区","value":"510117"},{"label":"金堂县","value":"510121"},{"label":"大邑县","value":"510129"},{"label":"蒲江县","value":"510131"},{"label":"新津县","value":"510132"},{"label":"都江堰市","value":"510181"},{"label":"彭州市","value":"510182"},{"label":"邛崃市","value":"510183"},{"label":"崇州市","value":"510184"},{"label":"简阳市","value":"510185"}],[{"label":"自流井区","value":"510302"},{"label":"贡井区","value":"510303"},{"label":"大安区","value":"510304"},{"label":"沿滩区","value":"510311"},{"label":"荣县","value":"510321"},{"label":"富顺县","value":"510322"}],[{"label":"东区","value":"510402"},{"label":"西区","value":"510403"},{"label":"仁和区","value":"510411"},{"label":"米易县","value":"510421"},{"label":"盐边县","value":"510422"}],[{"label":"江阳区","value":"510502"},{"label":"纳溪区","value":"510503"},{"label":"龙马潭区","value":"510504"},{"label":"泸县","value":"510521"},{"label":"合江县","value":"510522"},{"label":"叙永县","value":"510524"},{"label":"古蔺县","value":"510525"}],[{"label":"旌阳区","value":"510603"},{"label":"罗江区","value":"510604"},{"label":"中江县","value":"510623"},{"label":"广汉市","value":"510681"},{"label":"什邡市","value":"510682"},{"label":"绵竹市","value":"510683"}],[{"label":"涪城区","value":"510703"},{"label":"游仙区","value":"510704"},{"label":"安州区","value":"510705"},{"label":"三台县","value":"510722"},{"label":"盐亭县","value":"510723"},{"label":"梓潼县","value":"510725"},{"label":"北川羌族自治县","value":"510726"},{"label":"平武县","value":"510727"},{"label":"江油市","value":"510781"}],[{"label":"利州区","value":"510802"},{"label":"昭化区","value":"510811"},{"label":"朝天区","value":"510812"},{"label":"旺苍县","value":"510821"},{"label":"青川县","value":"510822"},{"label":"剑阁县","value":"510823"},{"label":"苍溪县","value":"510824"}],[{"label":"船山区","value":"510903"},{"label":"安居区","value":"510904"},{"label":"蓬溪县","value":"510921"},{"label":"射洪县","value":"510922"},{"label":"大英县","value":"510923"}],[{"label":"市中区","value":"511002"},{"label":"东兴区","value":"511011"},{"label":"威远县","value":"511024"},{"label":"资中县","value":"511025"},{"label":"内江经济开发区","value":"511071"},{"label":"隆昌市","value":"511083"}],[{"label":"市中区","value":"511102"},{"label":"沙湾区","value":"511111"},{"label":"五通桥区","value":"511112"},{"label":"金口河区","value":"511113"},{"label":"犍为县","value":"511123"},{"label":"井研县","value":"511124"},{"label":"夹江县","value":"511126"},{"label":"沐川县","value":"511129"},{"label":"峨边彝族自治县","value":"511132"},{"label":"马边彝族自治县","value":"511133"},{"label":"峨眉山市","value":"511181"}],[{"label":"顺庆区","value":"511302"},{"label":"高坪区","value":"511303"},{"label":"嘉陵区","value":"511304"},{"label":"南部县","value":"511321"},{"label":"营山县","value":"511322"},{"label":"蓬安县","value":"511323"},{"label":"仪陇县","value":"511324"},{"label":"西充县","value":"511325"},{"label":"阆中市","value":"511381"}],[{"label":"东坡区","value":"511402"},{"label":"彭山区","value":"511403"},{"label":"仁寿县","value":"511421"},{"label":"洪雅县","value":"511423"},{"label":"丹棱县","value":"511424"},{"label":"青神县","value":"511425"}],[{"label":"翠屏区","value":"511502"},{"label":"南溪区","value":"511503"},{"label":"宜宾县","value":"511521"},{"label":"江安县","value":"511523"},{"label":"长宁县","value":"511524"},{"label":"高县","value":"511525"},{"label":"珙县","value":"511526"},{"label":"筠连县","value":"511527"},{"label":"兴文县","value":"511528"},{"label":"屏山县","value":"511529"}],[{"label":"广安区","value":"511602"},{"label":"前锋区","value":"511603"},{"label":"岳池县","value":"511621"},{"label":"武胜县","value":"511622"},{"label":"邻水县","value":"511623"},{"label":"华蓥市","value":"511681"}],[{"label":"通川区","value":"511702"},{"label":"达川区","value":"511703"},{"label":"宣汉县","value":"511722"},{"label":"开江县","value":"511723"},{"label":"大竹县","value":"511724"},{"label":"渠县","value":"511725"},{"label":"达州经济开发区","value":"511771"},{"label":"万源市","value":"511781"}],[{"label":"雨城区","value":"511802"},{"label":"名山区","value":"511803"},{"label":"荥经县","value":"511822"},{"label":"汉源县","value":"511823"},{"label":"石棉县","value":"511824"},{"label":"天全县","value":"511825"},{"label":"芦山县","value":"511826"},{"label":"宝兴县","value":"511827"}],[{"label":"巴州区","value":"511902"},{"label":"恩阳区","value":"511903"},{"label":"通江县","value":"511921"},{"label":"南江县","value":"511922"},{"label":"平昌县","value":"511923"},{"label":"巴中经济开发区","value":"511971"}],[{"label":"雁江区","value":"512002"},{"label":"安岳县","value":"512021"},{"label":"乐至县","value":"512022"}],[{"label":"马尔康市","value":"513201"},{"label":"汶川县","value":"513221"},{"label":"理县","value":"513222"},{"label":"茂县","value":"513223"},{"label":"松潘县","value":"513224"},{"label":"九寨沟县","value":"513225"},{"label":"金川县","value":"513226"},{"label":"小金县","value":"513227"},{"label":"黑水县","value":"513228"},{"label":"壤塘县","value":"513230"},{"label":"阿坝县","value":"513231"},{"label":"若尔盖县","value":"513232"},{"label":"红原县","value":"513233"}],[{"label":"康定市","value":"513301"},{"label":"泸定县","value":"513322"},{"label":"丹巴县","value":"513323"},{"label":"九龙县","value":"513324"},{"label":"雅江县","value":"513325"},{"label":"道孚县","value":"513326"},{"label":"炉霍县","value":"513327"},{"label":"甘孜县","value":"513328"},{"label":"新龙县","value":"513329"},{"label":"德格县","value":"513330"},{"label":"白玉县","value":"513331"},{"label":"石渠县","value":"513332"},{"label":"色达县","value":"513333"},{"label":"理塘县","value":"513334"},{"label":"巴塘县","value":"513335"},{"label":"乡城县","value":"513336"},{"label":"稻城县","value":"513337"},{"label":"得荣县","value":"513338"}],[{"label":"西昌市","value":"513401"},{"label":"木里藏族自治县","value":"513422"},{"label":"盐源县","value":"513423"},{"label":"德昌县","value":"513424"},{"label":"会理县","value":"513425"},{"label":"会东县","value":"513426"},{"label":"宁南县","value":"513427"},{"label":"普格县","value":"513428"},{"label":"布拖县","value":"513429"},{"label":"金阳县","value":"513430"},{"label":"昭觉县","value":"513431"},{"label":"喜德县","value":"513432"},{"label":"冕宁县","value":"513433"},{"label":"越西县","value":"513434"},{"label":"甘洛县","value":"513435"},{"label":"美姑县","value":"513436"},{"label":"雷波县","value":"513437"}]],[[{"label":"南明区","value":"520102"},{"label":"云岩区","value":"520103"},{"label":"花溪区","value":"520111"},{"label":"乌当区","value":"520112"},{"label":"白云区","value":"520113"},{"label":"观山湖区","value":"520115"},{"label":"开阳县","value":"520121"},{"label":"息烽县","value":"520122"},{"label":"修文县","value":"520123"},{"label":"清镇市","value":"520181"}],[{"label":"钟山区","value":"520201"},{"label":"六枝特区","value":"520203"},{"label":"水城县","value":"520221"},{"label":"盘州市","value":"520281"}],[{"label":"红花岗区","value":"520302"},{"label":"汇川区","value":"520303"},{"label":"播州区","value":"520304"},{"label":"桐梓县","value":"520322"},{"label":"绥阳县","value":"520323"},{"label":"正安县","value":"520324"},{"label":"道真仡佬族苗族自治县","value":"520325"},{"label":"务川仡佬族苗族自治县","value":"520326"},{"label":"凤冈县","value":"520327"},{"label":"湄潭县","value":"520328"},{"label":"余庆县","value":"520329"},{"label":"习水县","value":"520330"},{"label":"赤水市","value":"520381"},{"label":"仁怀市","value":"520382"}],[{"label":"西秀区","value":"520402"},{"label":"平坝区","value":"520403"},{"label":"普定县","value":"520422"},{"label":"镇宁布依族苗族自治县","value":"520423"},{"label":"关岭布依族苗族自治县","value":"520424"},{"label":"紫云苗族布依族自治县","value":"520425"}],[{"label":"七星关区","value":"520502"},{"label":"大方县","value":"520521"},{"label":"黔西县","value":"520522"},{"label":"金沙县","value":"520523"},{"label":"织金县","value":"520524"},{"label":"纳雍县","value":"520525"},{"label":"威宁彝族回族苗族自治县","value":"520526"},{"label":"赫章县","value":"520527"}],[{"label":"碧江区","value":"520602"},{"label":"万山区","value":"520603"},{"label":"江口县","value":"520621"},{"label":"玉屏侗族自治县","value":"520622"},{"label":"石阡县","value":"520623"},{"label":"思南县","value":"520624"},{"label":"印江土家族苗族自治县","value":"520625"},{"label":"德江县","value":"520626"},{"label":"沿河土家族自治县","value":"520627"},{"label":"松桃苗族自治县","value":"520628"}],[{"label":"兴义市","value":"522301"},{"label":"兴仁县","value":"522322"},{"label":"普安县","value":"522323"},{"label":"晴隆县","value":"522324"},{"label":"贞丰县","value":"522325"},{"label":"望谟县","value":"522326"},{"label":"册亨县","value":"522327"},{"label":"安龙县","value":"522328"}],[{"label":"凯里市","value":"522601"},{"label":"黄平县","value":"522622"},{"label":"施秉县","value":"522623"},{"label":"三穗县","value":"522624"},{"label":"镇远县","value":"522625"},{"label":"岑巩县","value":"522626"},{"label":"天柱县","value":"522627"},{"label":"锦屏县","value":"522628"},{"label":"剑河县","value":"522629"},{"label":"台江县","value":"522630"},{"label":"黎平县","value":"522631"},{"label":"榕江县","value":"522632"},{"label":"从江县","value":"522633"},{"label":"雷山县","value":"522634"},{"label":"麻江县","value":"522635"},{"label":"丹寨县","value":"522636"}],[{"label":"都匀市","value":"522701"},{"label":"福泉市","value":"522702"},{"label":"荔波县","value":"522722"},{"label":"贵定县","value":"522723"},{"label":"瓮安县","value":"522725"},{"label":"独山县","value":"522726"},{"label":"平塘县","value":"522727"},{"label":"罗甸县","value":"522728"},{"label":"长顺县","value":"522729"},{"label":"龙里县","value":"522730"},{"label":"惠水县","value":"522731"},{"label":"三都水族自治县","value":"522732"}]],[[{"label":"五华区","value":"530102"},{"label":"盘龙区","value":"530103"},{"label":"官渡区","value":"530111"},{"label":"西山区","value":"530112"},{"label":"东川区","value":"530113"},{"label":"呈贡区","value":"530114"},{"label":"晋宁区","value":"530115"},{"label":"富民县","value":"530124"},{"label":"宜良县","value":"530125"},{"label":"石林彝族自治县","value":"530126"},{"label":"嵩明县","value":"530127"},{"label":"禄劝彝族苗族自治县","value":"530128"},{"label":"寻甸回族彝族自治县","value":"530129"},{"label":"安宁市","value":"530181"}],[{"label":"麒麟区","value":"530302"},{"label":"沾益区","value":"530303"},{"label":"马龙县","value":"530321"},{"label":"陆良县","value":"530322"},{"label":"师宗县","value":"530323"},{"label":"罗平县","value":"530324"},{"label":"富源县","value":"530325"},{"label":"会泽县","value":"530326"},{"label":"宣威市","value":"530381"}],[{"label":"红塔区","value":"530402"},{"label":"江川区","value":"530403"},{"label":"澄江县","value":"530422"},{"label":"通海县","value":"530423"},{"label":"华宁县","value":"530424"},{"label":"易门县","value":"530425"},{"label":"峨山彝族自治县","value":"530426"},{"label":"新平彝族傣族自治县","value":"530427"},{"label":"元江哈尼族彝族傣族自治县","value":"530428"}],[{"label":"隆阳区","value":"530502"},{"label":"施甸县","value":"530521"},{"label":"龙陵县","value":"530523"},{"label":"昌宁县","value":"530524"},{"label":"腾冲市","value":"530581"}],[{"label":"昭阳区","value":"530602"},{"label":"鲁甸县","value":"530621"},{"label":"巧家县","value":"530622"},{"label":"盐津县","value":"530623"},{"label":"大关县","value":"530624"},{"label":"永善县","value":"530625"},{"label":"绥江县","value":"530626"},{"label":"镇雄县","value":"530627"},{"label":"彝良县","value":"530628"},{"label":"威信县","value":"530629"},{"label":"水富县","value":"530630"}],[{"label":"古城区","value":"530702"},{"label":"玉龙纳西族自治县","value":"530721"},{"label":"永胜县","value":"530722"},{"label":"华坪县","value":"530723"},{"label":"宁蒗彝族自治县","value":"530724"}],[{"label":"思茅区","value":"530802"},{"label":"宁洱哈尼族彝族自治县","value":"530821"},{"label":"墨江哈尼族自治县","value":"530822"},{"label":"景东彝族自治县","value":"530823"},{"label":"景谷傣族彝族自治县","value":"530824"},{"label":"镇沅彝族哈尼族拉祜族自治县","value":"530825"},{"label":"江城哈尼族彝族自治县","value":"530826"},{"label":"孟连傣族拉祜族佤族自治县","value":"530827"},{"label":"澜沧拉祜族自治县","value":"530828"},{"label":"西盟佤族自治县","value":"530829"}],[{"label":"临翔区","value":"530902"},{"label":"凤庆县","value":"530921"},{"label":"云县","value":"530922"},{"label":"永德县","value":"530923"},{"label":"镇康县","value":"530924"},{"label":"双江拉祜族佤族布朗族傣族自治县","value":"530925"},{"label":"耿马傣族佤族自治县","value":"530926"},{"label":"沧源佤族自治县","value":"530927"}],[{"label":"楚雄市","value":"532301"},{"label":"双柏县","value":"532322"},{"label":"牟定县","value":"532323"},{"label":"南华县","value":"532324"},{"label":"姚安县","value":"532325"},{"label":"大姚县","value":"532326"},{"label":"永仁县","value":"532327"},{"label":"元谋县","value":"532328"},{"label":"武定县","value":"532329"},{"label":"禄丰县","value":"532331"}],[{"label":"个旧市","value":"532501"},{"label":"开远市","value":"532502"},{"label":"蒙自市","value":"532503"},{"label":"弥勒市","value":"532504"},{"label":"屏边苗族自治县","value":"532523"},{"label":"建水县","value":"532524"},{"label":"石屏县","value":"532525"},{"label":"泸西县","value":"532527"},{"label":"元阳县","value":"532528"},{"label":"红河县","value":"532529"},{"label":"金平苗族瑶族傣族自治县","value":"532530"},{"label":"绿春县","value":"532531"},{"label":"河口瑶族自治县","value":"532532"}],[{"label":"文山市","value":"532601"},{"label":"砚山县","value":"532622"},{"label":"西畴县","value":"532623"},{"label":"麻栗坡县","value":"532624"},{"label":"马关县","value":"532625"},{"label":"丘北县","value":"532626"},{"label":"广南县","value":"532627"},{"label":"富宁县","value":"532628"}],[{"label":"景洪市","value":"532801"},{"label":"勐海县","value":"532822"},{"label":"勐腊县","value":"532823"}],[{"label":"大理市","value":"532901"},{"label":"漾濞彝族自治县","value":"532922"},{"label":"祥云县","value":"532923"},{"label":"宾川县","value":"532924"},{"label":"弥渡县","value":"532925"},{"label":"南涧彝族自治县","value":"532926"},{"label":"巍山彝族回族自治县","value":"532927"},{"label":"永平县","value":"532928"},{"label":"云龙县","value":"532929"},{"label":"洱源县","value":"532930"},{"label":"剑川县","value":"532931"},{"label":"鹤庆县","value":"532932"}],[{"label":"瑞丽市","value":"533102"},{"label":"芒市","value":"533103"},{"label":"梁河县","value":"533122"},{"label":"盈江县","value":"533123"},{"label":"陇川县","value":"533124"}],[{"label":"泸水市","value":"533301"},{"label":"福贡县","value":"533323"},{"label":"贡山独龙族怒族自治县","value":"533324"},{"label":"兰坪白族普米族自治县","value":"533325"}],[{"label":"香格里拉市","value":"533401"},{"label":"德钦县","value":"533422"},{"label":"维西傈僳族自治县","value":"533423"}]],[[{"label":"城关区","value":"540102"},{"label":"堆龙德庆区","value":"540103"},{"label":"林周县","value":"540121"},{"label":"当雄县","value":"540122"},{"label":"尼木县","value":"540123"},{"label":"曲水县","value":"540124"},{"label":"达孜县","value":"540126"},{"label":"墨竹工卡县","value":"540127"},{"label":"格尔木藏青工业园区","value":"540171"},{"label":"拉萨经济技术开发区","value":"540172"},{"label":"西藏文化旅游创意园区","value":"540173"},{"label":"达孜工业园区","value":"540174"}],[{"label":"桑珠孜区","value":"540202"},{"label":"南木林县","value":"540221"},{"label":"江孜县","value":"540222"},{"label":"定日县","value":"540223"},{"label":"萨迦县","value":"540224"},{"label":"拉孜县","value":"540225"},{"label":"昂仁县","value":"540226"},{"label":"谢通门县","value":"540227"},{"label":"白朗县","value":"540228"},{"label":"仁布县","value":"540229"},{"label":"康马县","value":"540230"},{"label":"定结县","value":"540231"},{"label":"仲巴县","value":"540232"},{"label":"亚东县","value":"540233"},{"label":"吉隆县","value":"540234"},{"label":"聂拉木县","value":"540235"},{"label":"萨嘎县","value":"540236"},{"label":"岗巴县","value":"540237"}],[{"label":"卡若区","value":"540302"},{"label":"江达县","value":"540321"},{"label":"贡觉县","value":"540322"},{"label":"类乌齐县","value":"540323"},{"label":"丁青县","value":"540324"},{"label":"察雅县","value":"540325"},{"label":"八宿县","value":"540326"},{"label":"左贡县","value":"540327"},{"label":"芒康县","value":"540328"},{"label":"洛隆县","value":"540329"},{"label":"边坝县","value":"540330"}],[{"label":"巴宜区","value":"540402"},{"label":"工布江达县","value":"540421"},{"label":"米林县","value":"540422"},{"label":"墨脱县","value":"540423"},{"label":"波密县","value":"540424"},{"label":"察隅县","value":"540425"},{"label":"朗县","value":"540426"}],[{"label":"乃东区","value":"540502"},{"label":"扎囊县","value":"540521"},{"label":"贡嘎县","value":"540522"},{"label":"桑日县","value":"540523"},{"label":"琼结县","value":"540524"},{"label":"曲松县","value":"540525"},{"label":"措美县","value":"540526"},{"label":"洛扎县","value":"540527"},{"label":"加查县","value":"540528"},{"label":"隆子县","value":"540529"},{"label":"错那县","value":"540530"},{"label":"浪卡子县","value":"540531"}],[{"label":"那曲县","value":"542421"},{"label":"嘉黎县","value":"542422"},{"label":"比如县","value":"542423"},{"label":"聂荣县","value":"542424"},{"label":"安多县","value":"542425"},{"label":"申扎县","value":"542426"},{"label":"索县","value":"542427"},{"label":"班戈县","value":"542428"},{"label":"巴青县","value":"542429"},{"label":"尼玛县","value":"542430"},{"label":"双湖县","value":"542431"}],[{"label":"普兰县","value":"542521"},{"label":"札达县","value":"542522"},{"label":"噶尔县","value":"542523"},{"label":"日土县","value":"542524"},{"label":"革吉县","value":"542525"},{"label":"改则县","value":"542526"},{"label":"措勤县","value":"542527"}]],[[{"label":"新城区","value":"610102"},{"label":"碑林区","value":"610103"},{"label":"莲湖区","value":"610104"},{"label":"灞桥区","value":"610111"},{"label":"未央区","value":"610112"},{"label":"雁塔区","value":"610113"},{"label":"阎良区","value":"610114"},{"label":"临潼区","value":"610115"},{"label":"长安区","value":"610116"},{"label":"高陵区","value":"610117"},{"label":"鄠邑区","value":"610118"},{"label":"蓝田县","value":"610122"},{"label":"周至县","value":"610124"}],[{"label":"王益区","value":"610202"},{"label":"印台区","value":"610203"},{"label":"耀州区","value":"610204"},{"label":"宜君县","value":"610222"}],[{"label":"渭滨区","value":"610302"},{"label":"金台区","value":"610303"},{"label":"陈仓区","value":"610304"},{"label":"凤翔县","value":"610322"},{"label":"岐山县","value":"610323"},{"label":"扶风县","value":"610324"},{"label":"眉县","value":"610326"},{"label":"陇县","value":"610327"},{"label":"千阳县","value":"610328"},{"label":"麟游县","value":"610329"},{"label":"凤县","value":"610330"},{"label":"太白县","value":"610331"}],[{"label":"秦都区","value":"610402"},{"label":"杨陵区","value":"610403"},{"label":"渭城区","value":"610404"},{"label":"三原县","value":"610422"},{"label":"泾阳县","value":"610423"},{"label":"乾县","value":"610424"},{"label":"礼泉县","value":"610425"},{"label":"永寿县","value":"610426"},{"label":"彬县","value":"610427"},{"label":"长武县","value":"610428"},{"label":"旬邑县","value":"610429"},{"label":"淳化县","value":"610430"},{"label":"武功县","value":"610431"},{"label":"兴平市","value":"610481"}],[{"label":"临渭区","value":"610502"},{"label":"华州区","value":"610503"},{"label":"潼关县","value":"610522"},{"label":"大荔县","value":"610523"},{"label":"合阳县","value":"610524"},{"label":"澄城县","value":"610525"},{"label":"蒲城县","value":"610526"},{"label":"白水县","value":"610527"},{"label":"富平县","value":"610528"},{"label":"韩城市","value":"610581"},{"label":"华阴市","value":"610582"}],[{"label":"宝塔区","value":"610602"},{"label":"安塞区","value":"610603"},{"label":"延长县","value":"610621"},{"label":"延川县","value":"610622"},{"label":"子长县","value":"610623"},{"label":"志丹县","value":"610625"},{"label":"吴起县","value":"610626"},{"label":"甘泉县","value":"610627"},{"label":"富县","value":"610628"},{"label":"洛川县","value":"610629"},{"label":"宜川县","value":"610630"},{"label":"黄龙县","value":"610631"},{"label":"黄陵县","value":"610632"}],[{"label":"汉台区","value":"610702"},{"label":"南郑区","value":"610703"},{"label":"城固县","value":"610722"},{"label":"洋县","value":"610723"},{"label":"西乡县","value":"610724"},{"label":"勉县","value":"610725"},{"label":"宁强县","value":"610726"},{"label":"略阳县","value":"610727"},{"label":"镇巴县","value":"610728"},{"label":"留坝县","value":"610729"},{"label":"佛坪县","value":"610730"}],[{"label":"榆阳区","value":"610802"},{"label":"横山区","value":"610803"},{"label":"府谷县","value":"610822"},{"label":"靖边县","value":"610824"},{"label":"定边县","value":"610825"},{"label":"绥德县","value":"610826"},{"label":"米脂县","value":"610827"},{"label":"佳县","value":"610828"},{"label":"吴堡县","value":"610829"},{"label":"清涧县","value":"610830"},{"label":"子洲县","value":"610831"},{"label":"神木市","value":"610881"}],[{"label":"汉滨区","value":"610902"},{"label":"汉阴县","value":"610921"},{"label":"石泉县","value":"610922"},{"label":"宁陕县","value":"610923"},{"label":"紫阳县","value":"610924"},{"label":"岚皋县","value":"610925"},{"label":"平利县","value":"610926"},{"label":"镇坪县","value":"610927"},{"label":"旬阳县","value":"610928"},{"label":"白河县","value":"610929"}],[{"label":"商州区","value":"611002"},{"label":"洛南县","value":"611021"},{"label":"丹凤县","value":"611022"},{"label":"商南县","value":"611023"},{"label":"山阳县","value":"611024"},{"label":"镇安县","value":"611025"},{"label":"柞水县","value":"611026"}]],[[{"label":"城关区","value":"620102"},{"label":"七里河区","value":"620103"},{"label":"西固区","value":"620104"},{"label":"安宁区","value":"620105"},{"label":"红古区","value":"620111"},{"label":"永登县","value":"620121"},{"label":"皋兰县","value":"620122"},{"label":"榆中县","value":"620123"},{"label":"兰州新区","value":"620171"}],[{"label":"嘉峪关市","value":"620201"}],[{"label":"金川区","value":"620302"},{"label":"永昌县","value":"620321"}],[{"label":"白银区","value":"620402"},{"label":"平川区","value":"620403"},{"label":"靖远县","value":"620421"},{"label":"会宁县","value":"620422"},{"label":"景泰县","value":"620423"}],[{"label":"秦州区","value":"620502"},{"label":"麦积区","value":"620503"},{"label":"清水县","value":"620521"},{"label":"秦安县","value":"620522"},{"label":"甘谷县","value":"620523"},{"label":"武山县","value":"620524"},{"label":"张家川回族自治县","value":"620525"}],[{"label":"凉州区","value":"620602"},{"label":"民勤县","value":"620621"},{"label":"古浪县","value":"620622"},{"label":"天祝藏族自治县","value":"620623"}],[{"label":"甘州区","value":"620702"},{"label":"肃南裕固族自治县","value":"620721"},{"label":"民乐县","value":"620722"},{"label":"临泽县","value":"620723"},{"label":"高台县","value":"620724"},{"label":"山丹县","value":"620725"}],[{"label":"崆峒区","value":"620802"},{"label":"泾川县","value":"620821"},{"label":"灵台县","value":"620822"},{"label":"崇信县","value":"620823"},{"label":"华亭县","value":"620824"},{"label":"庄浪县","value":"620825"},{"label":"静宁县","value":"620826"},{"label":"平凉工业园区","value":"620871"}],[{"label":"肃州区","value":"620902"},{"label":"金塔县","value":"620921"},{"label":"瓜州县","value":"620922"},{"label":"肃北蒙古族自治县","value":"620923"},{"label":"阿克塞哈萨克族自治县","value":"620924"},{"label":"玉门市","value":"620981"},{"label":"敦煌市","value":"620982"}],[{"label":"西峰区","value":"621002"},{"label":"庆城县","value":"621021"},{"label":"环县","value":"621022"},{"label":"华池县","value":"621023"},{"label":"合水县","value":"621024"},{"label":"正宁县","value":"621025"},{"label":"宁县","value":"621026"},{"label":"镇原县","value":"621027"}],[{"label":"安定区","value":"621102"},{"label":"通渭县","value":"621121"},{"label":"陇西县","value":"621122"},{"label":"渭源县","value":"621123"},{"label":"临洮县","value":"621124"},{"label":"漳县","value":"621125"},{"label":"岷县","value":"621126"}],[{"label":"武都区","value":"621202"},{"label":"成县","value":"621221"},{"label":"文县","value":"621222"},{"label":"宕昌县","value":"621223"},{"label":"康县","value":"621224"},{"label":"西和县","value":"621225"},{"label":"礼县","value":"621226"},{"label":"徽县","value":"621227"},{"label":"两当县","value":"621228"}],[{"label":"临夏市","value":"622901"},{"label":"临夏县","value":"622921"},{"label":"康乐县","value":"622922"},{"label":"永靖县","value":"622923"},{"label":"广河县","value":"622924"},{"label":"和政县","value":"622925"},{"label":"东乡族自治县","value":"622926"},{"label":"积石山保安族东乡族撒拉族自治县","value":"622927"}],[{"label":"合作市","value":"623001"},{"label":"临潭县","value":"623021"},{"label":"卓尼县","value":"623022"},{"label":"舟曲县","value":"623023"},{"label":"迭部县","value":"623024"},{"label":"玛曲县","value":"623025"},{"label":"碌曲县","value":"623026"},{"label":"夏河县","value":"623027"}]],[[{"label":"城东区","value":"630102"},{"label":"城中区","value":"630103"},{"label":"城西区","value":"630104"},{"label":"城北区","value":"630105"},{"label":"大通回族土族自治县","value":"630121"},{"label":"湟中县","value":"630122"},{"label":"湟源县","value":"630123"}],[{"label":"乐都区","value":"630202"},{"label":"平安区","value":"630203"},{"label":"民和回族土族自治县","value":"630222"},{"label":"互助土族自治县","value":"630223"},{"label":"化隆回族自治县","value":"630224"},{"label":"循化撒拉族自治县","value":"630225"}],[{"label":"门源回族自治县","value":"632221"},{"label":"祁连县","value":"632222"},{"label":"海晏县","value":"632223"},{"label":"刚察县","value":"632224"}],[{"label":"同仁县","value":"632321"},{"label":"尖扎县","value":"632322"},{"label":"泽库县","value":"632323"},{"label":"河南蒙古族自治县","value":"632324"}],[{"label":"共和县","value":"632521"},{"label":"同德县","value":"632522"},{"label":"贵德县","value":"632523"},{"label":"兴海县","value":"632524"},{"label":"贵南县","value":"632525"}],[{"label":"玛沁县","value":"632621"},{"label":"班玛县","value":"632622"},{"label":"甘德县","value":"632623"},{"label":"达日县","value":"632624"},{"label":"久治县","value":"632625"},{"label":"玛多县","value":"632626"}],[{"label":"玉树市","value":"632701"},{"label":"杂多县","value":"632722"},{"label":"称多县","value":"632723"},{"label":"治多县","value":"632724"},{"label":"囊谦县","value":"632725"},{"label":"曲麻莱县","value":"632726"}],[{"label":"格尔木市","value":"632801"},{"label":"德令哈市","value":"632802"},{"label":"乌兰县","value":"632821"},{"label":"都兰县","value":"632822"},{"label":"天峻县","value":"632823"},{"label":"大柴旦行政委员会","value":"632857"},{"label":"冷湖行政委员会","value":"632858"},{"label":"茫崖行政委员会","value":"632859"}]],[[{"label":"兴庆区","value":"640104"},{"label":"西夏区","value":"640105"},{"label":"金凤区","value":"640106"},{"label":"永宁县","value":"640121"},{"label":"贺兰县","value":"640122"},{"label":"灵武市","value":"640181"}],[{"label":"大武口区","value":"640202"},{"label":"惠农区","value":"640205"},{"label":"平罗县","value":"640221"}],[{"label":"利通区","value":"640302"},{"label":"红寺堡区","value":"640303"},{"label":"盐池县","value":"640323"},{"label":"同心县","value":"640324"},{"label":"青铜峡市","value":"640381"}],[{"label":"原州区","value":"640402"},{"label":"西吉县","value":"640422"},{"label":"隆德县","value":"640423"},{"label":"泾源县","value":"640424"},{"label":"彭阳县","value":"640425"}],[{"label":"沙坡头区","value":"640502"},{"label":"中宁县","value":"640521"},{"label":"海原县","value":"640522"}]],[[{"label":"天山区","value":"650102"},{"label":"沙依巴克区","value":"650103"},{"label":"新市区","value":"650104"},{"label":"水磨沟区","value":"650105"},{"label":"头屯河区","value":"650106"},{"label":"达坂城区","value":"650107"},{"label":"米东区","value":"650109"},{"label":"乌鲁木齐县","value":"650121"},{"label":"乌鲁木齐经济技术开发区","value":"650171"},{"label":"乌鲁木齐高新技术产业开发区","value":"650172"}],[{"label":"独山子区","value":"650202"},{"label":"克拉玛依区","value":"650203"},{"label":"白碱滩区","value":"650204"},{"label":"乌尔禾区","value":"650205"}],[{"label":"高昌区","value":"650402"},{"label":"鄯善县","value":"650421"},{"label":"托克逊县","value":"650422"}],[{"label":"伊州区","value":"650502"},{"label":"巴里坤哈萨克自治县","value":"650521"},{"label":"伊吾县","value":"650522"}],[{"label":"昌吉市","value":"652301"},{"label":"阜康市","value":"652302"},{"label":"呼图壁县","value":"652323"},{"label":"玛纳斯县","value":"652324"},{"label":"奇台县","value":"652325"},{"label":"吉木萨尔县","value":"652327"},{"label":"木垒哈萨克自治县","value":"652328"}],[{"label":"博乐市","value":"652701"},{"label":"阿拉山口市","value":"652702"},{"label":"精河县","value":"652722"},{"label":"温泉县","value":"652723"}],[{"label":"库尔勒市","value":"652801"},{"label":"轮台县","value":"652822"},{"label":"尉犁县","value":"652823"},{"label":"若羌县","value":"652824"},{"label":"且末县","value":"652825"},{"label":"焉耆回族自治县","value":"652826"},{"label":"和静县","value":"652827"},{"label":"和硕县","value":"652828"},{"label":"博湖县","value":"652829"},{"label":"库尔勒经济技术开发区","value":"652871"}],[{"label":"阿克苏市","value":"652901"},{"label":"温宿县","value":"652922"},{"label":"库车县","value":"652923"},{"label":"沙雅县","value":"652924"},{"label":"新和县","value":"652925"},{"label":"拜城县","value":"652926"},{"label":"乌什县","value":"652927"},{"label":"阿瓦提县","value":"652928"},{"label":"柯坪县","value":"652929"}],[{"label":"阿图什市","value":"653001"},{"label":"阿克陶县","value":"653022"},{"label":"阿合奇县","value":"653023"},{"label":"乌恰县","value":"653024"}],[{"label":"喀什市","value":"653101"},{"label":"疏附县","value":"653121"},{"label":"疏勒县","value":"653122"},{"label":"英吉沙县","value":"653123"},{"label":"泽普县","value":"653124"},{"label":"莎车县","value":"653125"},{"label":"叶城县","value":"653126"},{"label":"麦盖提县","value":"653127"},{"label":"岳普湖县","value":"653128"},{"label":"伽师县","value":"653129"},{"label":"巴楚县","value":"653130"},{"label":"塔什库尔干塔吉克自治县","value":"653131"}],[{"label":"和田市","value":"653201"},{"label":"和田县","value":"653221"},{"label":"墨玉县","value":"653222"},{"label":"皮山县","value":"653223"},{"label":"洛浦县","value":"653224"},{"label":"策勒县","value":"653225"},{"label":"于田县","value":"653226"},{"label":"民丰县","value":"653227"}],[{"label":"伊宁市","value":"654002"},{"label":"奎屯市","value":"654003"},{"label":"霍尔果斯市","value":"654004"},{"label":"伊宁县","value":"654021"},{"label":"察布查尔锡伯自治县","value":"654022"},{"label":"霍城县","value":"654023"},{"label":"巩留县","value":"654024"},{"label":"新源县","value":"654025"},{"label":"昭苏县","value":"654026"},{"label":"特克斯县","value":"654027"},{"label":"尼勒克县","value":"654028"}],[{"label":"塔城市","value":"654201"},{"label":"乌苏市","value":"654202"},{"label":"额敏县","value":"654221"},{"label":"沙湾县","value":"654223"},{"label":"托里县","value":"654224"},{"label":"裕民县","value":"654225"},{"label":"和布克赛尔蒙古自治县","value":"654226"}],[{"label":"阿勒泰市","value":"654301"},{"label":"布尔津县","value":"654321"},{"label":"富蕴县","value":"654322"},{"label":"福海县","value":"654323"},{"label":"哈巴河县","value":"654324"},{"label":"青河县","value":"654325"},{"label":"吉木乃县","value":"654326"}],[{"label":"石河子市","value":"659001"},{"label":"阿拉尔市","value":"659002"},{"label":"图木舒克市","value":"659003"},{"label":"五家渠市","value":"659004"},{"label":"铁门关市","value":"659006"}]],[[{"label":"台北","value":"660101"}],[{"label":"高雄","value":"660201"}],[{"label":"基隆","value":"660301"}],[{"label":"台中","value":"660401"}],[{"label":"台南","value":"660501"}],[{"label":"新竹","value":"660601"}],[{"label":"嘉义","value":"660701"}],[{"label":"宜兰","value":"660801"}],[{"label":"桃园","value":"660901"}],[{"label":"苗栗","value":"661001"}],[{"label":"彰化","value":"661101"}],[{"label":"南投","value":"661201"}],[{"label":"云林","value":"661301"}],[{"label":"屏东","value":"661401"}],[{"label":"台东","value":"661501"}],[{"label":"花莲","value":"661601"}],[{"label":"澎湖","value":"661701"}]],[[{"label":"香港岛","value":"670101"}],[{"label":"九龙","value":"670201"}],[{"label":"新界","value":"670301"}]],[[{"label":"澳门半岛","value":"680101"}],[{"label":"氹仔岛","value":"680201"}],[{"label":"路环岛","value":"680301"}],[{"label":"路氹城","value":"680401"}]]];export default areaData;
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/async-validator.js b/tuniao-ui/libs/utils/async-validator.js
new file mode 100644
index 0000000..d7215b9
--- /dev/null
+++ b/tuniao-ui/libs/utils/async-validator.js
@@ -0,0 +1,1356 @@
+function _extends() {
+	_extends = Object.assign || function(target) {
+		for (var i = 1; i < arguments.length; i++) {
+			var source = arguments[i];
+
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					target[key] = source[key];
+				}
+			}
+		}
+
+		return target;
+	};
+
+	return _extends.apply(this, arguments);
+}
+
+/* eslint no-console:0 */
+var formatRegExp = /%[sdj%]/g;
+var warning = function warning() {}; // don't print warning message when in production env or node runtime
+
+if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production' && typeof window !==
+	'undefined' && typeof document !== 'undefined') {
+	warning = function warning(type, errors) {
+		if (typeof console !== 'undefined' && console.warn) {
+			if (errors.every(function(e) {
+					return typeof e === 'string';
+				})) {
+				console.warn(type, errors);
+			}
+		}
+	};
+}
+
+function convertFieldsError(errors) {
+	if (!errors || !errors.length) return null;
+	var fields = {};
+	errors.forEach(function(error) {
+		var field = error.field;
+		fields[field] = fields[field] || [];
+		fields[field].push(error);
+	});
+	return fields;
+}
+
+function format() {
+	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+		args[_key] = arguments[_key];
+	}
+
+	var i = 1;
+	var f = args[0];
+	var len = args.length;
+
+	if (typeof f === 'function') {
+		return f.apply(null, args.slice(1));
+	}
+
+	if (typeof f === 'string') {
+		var str = String(f).replace(formatRegExp, function(x) {
+			if (x === '%%') {
+				return '%';
+			}
+
+			if (i >= len) {
+				return x;
+			}
+
+			switch (x) {
+				case '%s':
+					return String(args[i++]);
+
+				case '%d':
+					return Number(args[i++]);
+
+				case '%j':
+					try {
+						return JSON.stringify(args[i++]);
+					} catch (_) {
+						return '[Circular]';
+					}
+
+					break;
+
+				default:
+					return x;
+			}
+		});
+
+		for (var arg = args[i]; i < len; arg = args[++i]) {
+			str += " " + arg;
+		}
+
+		return str;
+	}
+
+	return f;
+}
+
+function isNativeStringType(type) {
+	return type === 'string' || type === 'url' || type === 'hex' || type === 'email' || type === 'pattern';
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (type === 'array' && Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (isNativeStringType(type) && typeof value === 'string' && !value) {
+		return true;
+	}
+
+	return false;
+}
+
+function asyncParallelArray(arr, func, callback) {
+	var results = [];
+	var total = 0;
+	var arrLength = arr.length;
+
+	function count(errors) {
+		results.push.apply(results, errors);
+		total++;
+
+		if (total === arrLength) {
+			callback(results);
+		}
+	}
+
+	arr.forEach(function(a) {
+		func(a, count);
+	});
+}
+
+function asyncSerialArray(arr, func, callback) {
+	var index = 0;
+	var arrLength = arr.length;
+
+	function next(errors) {
+		if (errors && errors.length) {
+			callback(errors);
+			return;
+		}
+
+		var original = index;
+		index = index + 1;
+
+		if (original < arrLength) {
+			func(arr[original], next);
+		} else {
+			callback([]);
+		}
+	}
+
+	next([]);
+}
+
+function flattenObjArr(objArr) {
+	var ret = [];
+	Object.keys(objArr).forEach(function(k) {
+		ret.push.apply(ret, objArr[k]);
+	});
+	return ret;
+}
+
+function asyncMap(objArr, option, func, callback) {
+	if (option.first) {
+		var _pending = new Promise(function(resolve, reject) {
+			var next = function next(errors) {
+				callback(errors);
+				return errors.length ? reject({
+					errors: errors,
+					fields: convertFieldsError(errors)
+				}) : resolve();
+			};
+
+			var flattenArr = flattenObjArr(objArr);
+			asyncSerialArray(flattenArr, func, next);
+		});
+
+		_pending["catch"](function(e) {
+			return e;
+		});
+
+		return _pending;
+	}
+
+	var firstFields = option.firstFields || [];
+
+	if (firstFields === true) {
+		firstFields = Object.keys(objArr);
+	}
+
+	var objArrKeys = Object.keys(objArr);
+	var objArrLength = objArrKeys.length;
+	var total = 0;
+	var results = [];
+	var pending = new Promise(function(resolve, reject) {
+		var next = function next(errors) {
+			results.push.apply(results, errors);
+			total++;
+
+			if (total === objArrLength) {
+				callback(results);
+				return results.length ? reject({
+					errors: results,
+					fields: convertFieldsError(results)
+				}) : resolve();
+			}
+		};
+
+		if (!objArrKeys.length) {
+			callback(results);
+			resolve();
+		}
+
+		objArrKeys.forEach(function(key) {
+			var arr = objArr[key];
+
+			if (firstFields.indexOf(key) !== -1) {
+				asyncSerialArray(arr, func, next);
+			} else {
+				asyncParallelArray(arr, func, next);
+			}
+		});
+	});
+	pending["catch"](function(e) {
+		return e;
+	});
+	return pending;
+}
+
+function complementError(rule) {
+	return function(oe) {
+		if (oe && oe.message) {
+			oe.field = oe.field || rule.fullField;
+			return oe;
+		}
+
+		return {
+			message: typeof oe === 'function' ? oe() : oe,
+			field: oe.field || rule.fullField
+		};
+	};
+}
+
+function deepMerge(target, source) {
+	if (source) {
+		for (var s in source) {
+			if (source.hasOwnProperty(s)) {
+				var value = source[s];
+
+				if (typeof value === 'object' && typeof target[s] === 'object') {
+					target[s] = _extends({}, target[s], {}, value);
+				} else {
+					target[s] = value;
+				}
+			}
+		}
+	}
+
+	return target;
+}
+
+/**
+ *  Rule for validating required fields.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function required(rule, value, source, errors, options, type) {
+	if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type || rule.type))) {
+		errors.push(format(options.messages.required, rule.fullField));
+	}
+}
+
+/**
+ *  Rule for validating whitespace.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function whitespace(rule, value, source, errors, options) {
+	if (/^\s+$/.test(value) || value === '') {
+		errors.push(format(options.messages.whitespace, rule.fullField));
+	}
+}
+
+/* eslint max-len:0 */
+
+var pattern = {
+	// http://emailregex.com/
+	email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+	url: new RegExp(
+		"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
+		'i'),
+	hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
+};
+var types = {
+	integer: function integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	"float": function float(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array: function array(value) {
+		return Array.isArray(value);
+	},
+	regexp: function regexp(value) {
+		if (value instanceof RegExp) {
+			return true;
+		}
+
+		try {
+			return !!new RegExp(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	date: function date(value) {
+		return typeof value.getTime === 'function' && typeof value.getMonth === 'function' && typeof value.getYear ===
+			'function';
+	},
+	number: function number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+
+		// 修改源码，将字符串数值先转为数值
+		return typeof +value === 'number';
+	},
+	object: function object(value) {
+		return typeof value === 'object' && !types.array(value);
+	},
+	method: function method(value) {
+		return typeof value === 'function';
+	},
+	email: function email(value) {
+		return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+	},
+	url: function url(value) {
+		return typeof value === 'string' && !!value.match(pattern.url);
+	},
+	hex: function hex(value) {
+		return typeof value === 'string' && !!value.match(pattern.hex);
+	}
+};
+/**
+ *  Rule for validating the type of a value.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function type(rule, value, source, errors, options) {
+	if (rule.required && value === undefined) {
+		required(rule, value, source, errors, options);
+		return;
+	}
+
+	var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex'];
+	var ruleType = rule.type;
+
+	if (custom.indexOf(ruleType) > -1) {
+		if (!types[ruleType](value)) {
+			errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+		} // straight typeof check
+
+	} else if (ruleType && typeof value !== rule.type) {
+		errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+	}
+}
+
+/**
+ *  Rule for validating minimum and maximum allowed values.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function range(rule, value, source, errors, options) {
+	var len = typeof rule.len === 'number';
+	var min = typeof rule.min === 'number';
+	var max = typeof rule.max === 'number'; // 正则匹配码点范围从U+010000一直到U+10FFFF的文字（补充平面Supplementary Plane）
+
+	var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+	var val = value;
+	var key = null;
+	var num = typeof value === 'number';
+	var str = typeof value === 'string';
+	var arr = Array.isArray(value);
+
+	if (num) {
+		key = 'number';
+	} else if (str) {
+		key = 'string';
+	} else if (arr) {
+		key = 'array';
+	} // if the value is not of a supported type for range validation
+	// the validation rule rule should use the
+	// type property to also test for a particular type
+
+
+	if (!key) {
+		return false;
+	}
+
+	if (arr) {
+		val = value.length;
+	}
+
+	if (str) {
+		// 处理码点大于U+010000的文字length属性不准确的bug，如"𠮷𠮷𠮷".lenght !== 3
+		val = value.replace(spRegexp, '_').length;
+	}
+
+	if (len) {
+		if (val !== rule.len) {
+			errors.push(format(options.messages[key].len, rule.fullField, rule.len));
+		}
+	} else if (min && !max && val < rule.min) {
+		errors.push(format(options.messages[key].min, rule.fullField, rule.min));
+	} else if (max && !min && val > rule.max) {
+		errors.push(format(options.messages[key].max, rule.fullField, rule.max));
+	} else if (min && max && (val < rule.min || val > rule.max)) {
+		errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
+	}
+}
+
+var ENUM = 'enum';
+/**
+ *  Rule for validating a value exists in an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable(rule, value, source, errors, options) {
+	rule[ENUM] = Array.isArray(rule[ENUM]) ? rule[ENUM] : [];
+
+	if (rule[ENUM].indexOf(value) === -1) {
+		errors.push(format(options.messages[ENUM], rule.fullField, rule[ENUM].join(', ')));
+	}
+}
+
+/**
+ *  Rule for validating a regular expression pattern.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$1(rule, value, source, errors, options) {
+	if (rule.pattern) {
+		if (rule.pattern instanceof RegExp) {
+			// if a RegExp instance is passed, reset `lastIndex` in case its `global`
+			// flag is accidentally set to `true`, which in a validation scenario
+			// is not necessary and the result might be misleading
+			rule.pattern.lastIndex = 0;
+
+			if (!rule.pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		} else if (typeof rule.pattern === 'string') {
+			var _pattern = new RegExp(rule.pattern);
+
+			if (!_pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		}
+	}
+}
+
+var rules = {
+	required: required,
+	whitespace: whitespace,
+	type: type,
+	range: range,
+	"enum": enumerable,
+	pattern: pattern$1
+};
+
+/**
+ *  Performs validation for string types.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function string(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'string');
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+			rules.pattern(rule, value, source, errors, options);
+
+			if (rule.whitespace === true) {
+				rules.whitespace(rule, value, source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a function.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function method(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function number(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (value === '') {
+			value = undefined;
+		}
+
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a boolean.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function _boolean(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates the regular expression type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function regexp(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is an integer.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function integer(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is a floating point number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function floatFn(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an array.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function array(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'array') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'array');
+
+		if (!isEmptyValue(value, 'array')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an object.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function object(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+var ENUM$1 = 'enum';
+/**
+ *  Validates an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable$1(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules[ENUM$1](rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a regular expression pattern.
+ *
+ *  Performs validation when a rule only contains
+ *  a pattern property but is not declared as a string type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$2(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.pattern(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+function date(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); 
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			var dateObject;
+
+			if (typeof value === 'number') {
+				dateObject = new Date(value);
+			} else {
+				dateObject = value;
+			}
+
+			rules.type(rule, dateObject, source, errors, options);
+
+			if (dateObject) {
+				rules.range(rule, dateObject.getTime(), source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+function required$1(rule, value, callback, source, options) {
+	var errors = [];
+	var type = Array.isArray(value) ? 'array' : typeof value;
+	rules.required(rule, value, source, errors, options, type);
+	callback(errors);
+}
+
+function type$1(rule, value, callback, source, options) {
+	var ruleType = rule.type;
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, ruleType) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, ruleType);
+
+		if (!isEmptyValue(value, ruleType)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Performs validation for any type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function any(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+	}
+
+	callback(errors);
+}
+
+var validators = {
+	string: string,
+	method: method,
+	number: number,
+	"boolean": _boolean,
+	regexp: regexp,
+	integer: integer,
+	"float": floatFn,
+	array: array,
+	object: object,
+	"enum": enumerable$1,
+	pattern: pattern$2,
+	date: date,
+	url: type$1,
+	hex: type$1,
+	email: type$1,
+	required: required$1,
+	any: any
+};
+
+function newMessages() {
+	return {
+		"default": 'Validation error on field %s',
+		required: '%s is required',
+		"enum": '%s must be one of %s',
+		whitespace: '%s cannot be empty',
+		date: {
+			format: '%s date %s is invalid for format %s',
+			parse: '%s date could not be parsed, %s is invalid ',
+			invalid: '%s date %s is invalid'
+		},
+		types: {
+			string: '%s is not a %s',
+			method: '%s is not a %s (function)',
+			array: '%s is not an %s',
+			object: '%s is not an %s',
+			number: '%s is not a %s',
+			date: '%s is not a %s',
+			"boolean": '%s is not a %s',
+			integer: '%s is not an %s',
+			"float": '%s is not a %s',
+			regexp: '%s is not a valid %s',
+			email: '%s is not a valid %s',
+			url: '%s is not a valid %s',
+			hex: '%s is not a valid %s'
+		},
+		string: {
+			len: '%s must be exactly %s characters',
+			min: '%s must be at least %s characters',
+			max: '%s cannot be longer than %s characters',
+			range: '%s must be between %s and %s characters'
+		},
+		number: {
+			len: '%s must equal %s',
+			min: '%s cannot be less than %s',
+			max: '%s cannot be greater than %s',
+			range: '%s must be between %s and %s'
+		},
+		array: {
+			len: '%s must be exactly %s in length',
+			min: '%s cannot be less than %s in length',
+			max: '%s cannot be greater than %s in length',
+			range: '%s must be between %s and %s in length'
+		},
+		pattern: {
+			mismatch: '%s value %s does not match pattern %s'
+		},
+		clone: function clone() {
+			var cloned = JSON.parse(JSON.stringify(this));
+			cloned.clone = this.clone;
+			return cloned;
+		}
+	};
+}
+var messages = newMessages();
+
+/**
+ *  Encapsulates a validation schema.
+ *
+ *  @param descriptor An object declaring validation rules
+ *  for this schema.
+ */
+
+function Schema(descriptor) {
+	this.rules = null;
+	this._messages = messages;
+	this.define(descriptor);
+}
+
+Schema.prototype = {
+	messages: function messages(_messages) {
+		if (_messages) {
+			this._messages = deepMerge(newMessages(), _messages);
+		}
+
+		return this._messages;
+	},
+	define: function define(rules) {
+		if (!rules) {
+			throw new Error('Cannot configure a schema with no rules');
+		}
+
+		if (typeof rules !== 'object' || Array.isArray(rules)) {
+			throw new Error('Rules must be an object');
+		}
+
+		this.rules = {};
+		var z;
+		var item;
+
+		for (z in rules) {
+			if (rules.hasOwnProperty(z)) {
+				item = rules[z];
+				this.rules[z] = Array.isArray(item) ? item : [item];
+			}
+		}
+	},
+	validate: function validate(source_, o, oc) {
+		var _this = this;
+
+		if (o === void 0) {
+			o = {};
+		}
+
+		if (oc === void 0) {
+			oc = function oc() {};
+		}
+
+		var source = source_;
+		var options = o;
+		var callback = oc;
+
+		if (typeof options === 'function') {
+			callback = options;
+			options = {};
+		}
+
+		if (!this.rules || Object.keys(this.rules).length === 0) {
+			if (callback) {
+				callback();
+			}
+
+			return Promise.resolve();
+		}
+
+		function complete(results) {
+			var i;
+			var errors = [];
+			var fields = {};
+
+			function add(e) {
+				if (Array.isArray(e)) {
+					var _errors;
+
+					errors = (_errors = errors).concat.apply(_errors, e);
+				} else {
+					errors.push(e);
+				}
+			}
+
+			for (i = 0; i < results.length; i++) {
+				add(results[i]);
+			}
+
+			if (!errors.length) {
+				errors = null;
+				fields = null;
+			} else {
+				fields = convertFieldsError(errors);
+			}
+
+			callback(errors, fields);
+		}
+
+		if (options.messages) {
+			var messages$1 = this.messages();
+
+			if (messages$1 === messages) {
+				messages$1 = newMessages();
+			}
+
+			deepMerge(messages$1, options.messages);
+			options.messages = messages$1;
+		} else {
+			options.messages = this.messages();
+		}
+
+		var arr;
+		var value;
+		var series = {};
+		var keys = options.keys || Object.keys(this.rules);
+		keys.forEach(function(z) {
+			arr = _this.rules[z];
+			value = source[z];
+			arr.forEach(function(r) {
+				var rule = r;
+
+				if (typeof rule.transform === 'function') {
+					if (source === source_) {
+						source = _extends({}, source);
+					}
+
+					value = source[z] = rule.transform(value);
+				}
+
+				if (typeof rule === 'function') {
+					rule = {
+						validator: rule
+					};
+				} else {
+					rule = _extends({}, rule);
+				}
+
+				rule.validator = _this.getValidationMethod(rule);
+				rule.field = z;
+				rule.fullField = rule.fullField || z;
+				rule.type = _this.getType(rule);
+
+				if (!rule.validator) {
+					return;
+				}
+
+				series[z] = series[z] || [];
+				series[z].push({
+					rule: rule,
+					value: value,
+					source: source,
+					field: z
+				});
+			});
+		});
+		var errorFields = {};
+		return asyncMap(series, options, function(data, doIt) {
+			var rule = data.rule;
+			var deep = (rule.type === 'object' || rule.type === 'array') && (typeof rule.fields === 'object' || typeof rule.defaultField ===
+				'object');
+			deep = deep && (rule.required || !rule.required && data.value);
+			rule.field = data.field;
+
+			function addFullfield(key, schema) {
+				return _extends({}, schema, {
+					fullField: rule.fullField + "." + key
+				});
+			}
+
+			function cb(e) {
+				if (e === void 0) {
+					e = [];
+				}
+
+				var errors = e;
+
+				if (!Array.isArray(errors)) {
+					errors = [errors];
+				}
+
+				if (!options.suppressWarning && errors.length) {
+					Schema.warning('async-validator:', errors);
+				}
+
+				if (errors.length && rule.message) {
+					errors = [].concat(rule.message);
+				}
+
+				errors = errors.map(complementError(rule));
+
+				if (options.first && errors.length) {
+					errorFields[rule.field] = 1;
+					return doIt(errors);
+				}
+
+				if (!deep) {
+					doIt(errors);
+				} else {
+					// if rule is required but the target object
+					// does not exist fail at the rule level and don't
+					// go deeper
+					if (rule.required && !data.value) {
+						if (rule.message) {
+							errors = [].concat(rule.message).map(complementError(rule));
+						} else if (options.error) {
+							errors = [options.error(rule, format(options.messages.required, rule.field))];
+						} else {
+							errors = [];
+						}
+
+						return doIt(errors);
+					}
+
+					var fieldsSchema = {};
+
+					if (rule.defaultField) {
+						for (var k in data.value) {
+							if (data.value.hasOwnProperty(k)) {
+								fieldsSchema[k] = rule.defaultField;
+							}
+						}
+					}
+
+					fieldsSchema = _extends({}, fieldsSchema, {}, data.rule.fields);
+
+					for (var f in fieldsSchema) {
+						if (fieldsSchema.hasOwnProperty(f)) {
+							var fieldSchema = Array.isArray(fieldsSchema[f]) ? fieldsSchema[f] : [fieldsSchema[f]];
+							fieldsSchema[f] = fieldSchema.map(addFullfield.bind(null, f));
+						}
+					}
+
+					var schema = new Schema(fieldsSchema);
+					schema.messages(options.messages);
+
+					if (data.rule.options) {
+						data.rule.options.messages = options.messages;
+						data.rule.options.error = options.error;
+					}
+
+					schema.validate(data.value, data.rule.options || options, function(errs) {
+						var finalErrors = [];
+
+						if (errors && errors.length) {
+							finalErrors.push.apply(finalErrors, errors);
+						}
+
+						if (errs && errs.length) {
+							finalErrors.push.apply(finalErrors, errs);
+						}
+
+						doIt(finalErrors.length ? finalErrors : null);
+					});
+				}
+			}
+
+			var res;
+
+			if (rule.asyncValidator) {
+				res = rule.asyncValidator(rule, data.value, cb, data.source, options);
+			} else if (rule.validator) {
+				res = rule.validator(rule, data.value, cb, data.source, options);
+
+				if (res === true) {
+					cb();
+				} else if (res === false) {
+					cb(rule.message || rule.field + " fails");
+				} else if (res instanceof Array) {
+					cb(res);
+				} else if (res instanceof Error) {
+					cb(res.message);
+				}
+			}
+
+			if (res && res.then) {
+				res.then(function() {
+					return cb();
+				}, function(e) {
+					return cb(e);
+				});
+			}
+		}, function(results) {
+			complete(results);
+		});
+	},
+	getType: function getType(rule) {
+		if (rule.type === undefined && rule.pattern instanceof RegExp) {
+			rule.type = 'pattern';
+		}
+
+		if (typeof rule.validator !== 'function' && rule.type && !validators.hasOwnProperty(rule.type)) {
+			throw new Error(format('Unknown rule type %s', rule.type));
+		}
+
+		return rule.type || 'string';
+	},
+	getValidationMethod: function getValidationMethod(rule) {
+		if (typeof rule.validator === 'function') {
+			return rule.validator;
+		}
+
+		var keys = Object.keys(rule);
+		var messageIndex = keys.indexOf('message');
+
+		if (messageIndex !== -1) {
+			keys.splice(messageIndex, 1);
+		}
+
+		if (keys.length === 1 && keys[0] === 'required') {
+			return validators.required;
+		}
+
+		return validators[this.getType(rule)] || false;
+	}
+};
+
+Schema.register = function register(type, validator) {
+	if (typeof validator !== 'function') {
+		throw new Error('Cannot register a validator by type, validator is not a function');
+	}
+
+	validators[type] = validator;
+};
+
+Schema.warning = warning;
+Schema.messages = messages;
+
+export default Schema;
+//# sourceMappingURL=index.js.map
diff --git a/tuniao-ui/libs/utils/calendar.js b/tuniao-ui/libs/utils/calendar.js
new file mode 100644
index 0000000..da1456a
--- /dev/null
+++ b/tuniao-ui/libs/utils/calendar.js
@@ -0,0 +1,546 @@
+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @github  https://github.com/jjonline/calendar.js
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+/* eslint-disable */
+var calendar = {
+
+    /**
+        * 农历1900-2100的润大小信息表
+        * @Array Of Property
+        * @return Hex
+        */
+    lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
+        0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
+        0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
+        0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
+        0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
+        0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
+        0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
+        0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
+        0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
+        0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
+        0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
+        0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
+        0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
+        0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
+        0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
+        /** Add By JJonline@JJonline.Cn**/
+        0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
+        0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
+        0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
+        0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
+        0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
+        0x0d520], // 2100
+
+    /**
+        * 公历每个月份的天数普通表
+        * @Array Of Property
+        * @return Number
+        */
+    solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+
+    /**
+        * 天干地支之天干速查表
+        * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+        * @return Cn string
+        */
+    Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
+
+    /**
+        * 天干地支之地支速查表
+        * @Array Of Property
+        * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+        * @return Cn string
+        */
+    Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
+
+    /**
+        * 天干地支之地支速查表<=>生肖
+        * @Array Of Property
+        * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+        * @return Cn string
+        */
+    Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
+
+    /**
+        * 24节气速查表
+        * @Array Of Property
+        * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+        * @return Cn string
+        */
+    solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
+
+    /**
+        * 1900-2100各年的24节气日期速查表
+        * @Array Of Property
+        * @return 0x string For splice
+        */
+    sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+        '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+        'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+        '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+        '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+        '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+        '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+        '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+        '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+        '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+        '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+        '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+        '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+        '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
+
+    /**
+        * 数字转中文速查表
+        * @Array Of Property
+        * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+        * @return Cn string
+        */
+    nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
+
+    /**
+        * 日期转农历称呼速查表
+        * @Array Of Property
+        * @trans ['初','十','廿','卅']
+        * @return Cn string
+        */
+    nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
+
+    /**
+        * 月份转农历称呼速查表
+        * @Array Of Property
+        * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+        * @return Cn string
+        */
+    nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
+
+    /**
+        * 返回农历y年一整年的总天数
+        * @param lunar Year
+        * @return Number
+        * @eg:var count = calendar.lYearDays(1987) ;//count=387
+        */
+    lYearDays: function (y) {
+        var i; var sum = 348
+        for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
+        return (sum + this.leapDays(y))
+    },
+
+    /**
+        * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+        * @param lunar Year
+        * @return Number (0-12)
+        * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+        */
+    leapMonth: function (y) { // 闰字编码 \u95f0
+        return (this.lunarInfo[y - 1900] & 0xf)
+    },
+
+    /**
+        * 返回农历y年闰月的天数 若该年没有闰月则返回0
+        * @param lunar Year
+        * @return Number (0、29、30)
+        * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+        */
+    leapDays: function (y) {
+        if (this.leapMonth(y)) {
+            return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
+        }
+        return (0)
+    },
+
+    /**
+        * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+        * @param lunar Year
+        * @return Number (-1、29、30)
+        * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+        */
+    monthDays: function (y, m) {
+        if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
+        return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
+    },
+
+    /**
+        * 返回公历(!)y年m月的天数
+        * @param solar Year
+        * @return Number (-1、28、29、30、31)
+        * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+        */
+    solarDays: function (y, m) {
+        if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+        var ms = m - 1
+        if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
+            return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
+        } else {
+            return (this.solarMonth[ms])
+        }
+    },
+
+    /**
+       * 农历年份转换为干支纪年
+       * @param  lYear 农历年的年份数
+       * @return Cn string
+       */
+    toGanZhiYear: function (lYear) {
+        var ganKey = (lYear - 3) % 10
+        var zhiKey = (lYear - 3) % 12
+        if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
+        if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
+        return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
+    },
+
+    /**
+       * 公历月、日判断所属星座
+       * @param  cMonth [description]
+       * @param  cDay [description]
+       * @return Cn string
+       */
+    toAstro: function (cMonth, cDay) {
+        var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
+        var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
+        return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
+    },
+
+    /**
+        * 传入offset偏移量返回干支
+        * @param offset 相对甲子的偏移量
+        * @return Cn string
+        */
+    toGanZhi: function (offset) {
+        return this.Gan[offset % 10] + this.Zhi[offset % 12]
+    },
+
+    /**
+        * 传入公历(!)y年获得该年第n个节气的公历日期
+        * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+        * @return day Number
+        * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+        */
+    getTerm: function (y, n) {
+        if (y < 1900 || y > 2100) { return -1 }
+        if (n < 1 || n > 24) { return -1 }
+        var _table = this.sTermInfo[y - 1900]
+        var _info = [
+            parseInt('0x' + _table.substr(0, 5)).toString(),
+            parseInt('0x' + _table.substr(5, 5)).toString(),
+            parseInt('0x' + _table.substr(10, 5)).toString(),
+            parseInt('0x' + _table.substr(15, 5)).toString(),
+            parseInt('0x' + _table.substr(20, 5)).toString(),
+            parseInt('0x' + _table.substr(25, 5)).toString()
+        ]
+        var _calday = [
+            _info[0].substr(0, 1),
+            _info[0].substr(1, 2),
+            _info[0].substr(3, 1),
+            _info[0].substr(4, 2),
+
+            _info[1].substr(0, 1),
+            _info[1].substr(1, 2),
+            _info[1].substr(3, 1),
+            _info[1].substr(4, 2),
+
+            _info[2].substr(0, 1),
+            _info[2].substr(1, 2),
+            _info[2].substr(3, 1),
+            _info[2].substr(4, 2),
+
+            _info[3].substr(0, 1),
+            _info[3].substr(1, 2),
+            _info[3].substr(3, 1),
+            _info[3].substr(4, 2),
+
+            _info[4].substr(0, 1),
+            _info[4].substr(1, 2),
+            _info[4].substr(3, 1),
+            _info[4].substr(4, 2),
+
+            _info[5].substr(0, 1),
+            _info[5].substr(1, 2),
+            _info[5].substr(3, 1),
+            _info[5].substr(4, 2)
+        ]
+        return parseInt(_calday[n - 1])
+    },
+
+    /**
+        * 传入农历数字月份返回汉语通俗表示法
+        * @param lunar month
+        * @return Cn string
+        * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+        */
+    toChinaMonth: function (m) { // 月 => \u6708
+        if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+        var s = this.nStr3[m - 1]
+        s += '\u6708'// 加上月字
+        return s
+    },
+
+    /**
+        * 传入农历日期数字返回汉字表示法
+        * @param lunar day
+        * @return Cn string
+        * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+        */
+    toChinaDay: function (d) { // 日 => \u65e5
+        var s
+        switch (d) {
+            case 10:
+                s = '\u521d\u5341'; break
+            case 20:
+                s = '\u4e8c\u5341'; break
+                break
+            case 30:
+                s = '\u4e09\u5341'; break
+                break
+            default:
+                s = this.nStr2[Math.floor(d / 10)]
+                s += this.nStr1[d % 10]
+        }
+        return (s)
+    },
+
+    /**
+        * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+        * @param y year
+        * @return Cn string
+        * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+        */
+    getAnimal: function (y) {
+        return this.Animals[(y - 4) % 12]
+    },
+
+    /**
+        * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+        * @param y  solar year
+        * @param m  solar month
+        * @param d  solar day
+        * @return JSON object
+        * @eg:console.log(calendar.solar2lunar(1987,11,01));
+        */
+    solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
+        // 年份限定、上限
+        if (y < 1900 || y > 2100) {
+            return -1// undefined转换为数字变为NaN
+        }
+        // 公历传参最下限
+        if (y == 1900 && m == 1 && d < 31) {
+            return -1
+        }
+        // 未传参  获得当天
+        if (!y) {
+            var objDate = new Date()
+        } else {
+            var objDate = new Date(y, parseInt(m) - 1, d)
+        }
+        var i; var leap = 0; var temp = 0
+        // 修正ymd参数
+        var y = objDate.getFullYear()
+        var m = objDate.getMonth() + 1
+        var d = objDate.getDate()
+        var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
+        for (i = 1900; i < 2101 && offset > 0; i++) {
+            temp = this.lYearDays(i)
+            offset -= temp
+        }
+        if (offset < 0) {
+            offset += temp; i--
+        }
+
+        // 是否今天
+        var isTodayObj = new Date()
+        var isToday = false
+        if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+            isToday = true
+        }
+        // 星期几
+        var nWeek = objDate.getDay()
+        var cWeek = this.nStr1[nWeek]
+        // 数字表示周几顺应天朝周一开始的惯例
+        if (nWeek == 0) {
+            nWeek = 7
+        }
+        // 农历年
+        var year = i
+        var leap = this.leapMonth(i) // 闰哪个月
+        var isLeap = false
+
+        // 效验闰月
+        for (i = 1; i < 13 && offset > 0; i++) {
+            // 闰月
+            if (leap > 0 && i == (leap + 1) && isLeap == false) {
+                --i
+                isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
+            } else {
+                temp = this.monthDays(year, i)// 计算农历普通月天数
+            }
+            // 解除闰月
+            if (isLeap == true && i == (leap + 1)) { isLeap = false }
+            offset -= temp
+        }
+        // 闰月导致数组下标重叠取反
+        if (offset == 0 && leap > 0 && i == leap + 1) {
+            if (isLeap) {
+                isLeap = false
+            } else {
+                isLeap = true; --i
+            }
+        }
+        if (offset < 0) {
+            offset += temp; --i
+        }
+        // 农历月
+        var month = i
+        // 农历日
+        var day = offset + 1
+        // 天干地支处理
+        var sm = m - 1
+        var gzY = this.toGanZhiYear(year)
+
+        // 当月的两个节气
+        // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+        var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
+        var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
+
+        // 依据12节气修正干支月
+        var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
+        if (d >= firstNode) {
+            gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
+        }
+
+        // 传入的日期的节气与否
+        var isTerm = false
+        var Term = null
+        if (firstNode == d) {
+            isTerm = true
+            Term = this.solarTerm[m * 2 - 2]
+        }
+        if (secondNode == d) {
+            isTerm = true
+            Term = this.solarTerm[m * 2 - 1]
+        }
+        // 日柱 当月一日与 1900/1/1 相差天数
+        var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
+        var gzD = this.toGanZhi(dayCyclical + d - 1)
+        // 该日期所属的星座
+        var astro = this.toAstro(m, d)
+
+        return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
+    },
+
+    /**
+        * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+        * @param y  lunar year
+        * @param m  lunar month
+        * @param d  lunar day
+        * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+        * @return JSON object
+        * @eg:console.log(calendar.lunar2solar(1987,9,10));
+        */
+    lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
+        var isLeapMonth = !!isLeapMonth
+        var leapOffset = 0
+        var leapMonth = this.leapMonth(y)
+        var leapDay = this.leapDays(y)
+        if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+        if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
+        var day = this.monthDays(y, m)
+        var _day = day
+        // bugFix 2016-9-25
+        // if month is leap, _day use leapDays method
+        if (isLeapMonth) {
+            _day = this.leapDays(y, m)
+        }
+        if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
+
+        // 计算农历的时间差
+        var offset = 0
+        for (var i = 1900; i < y; i++) {
+            offset += this.lYearDays(i)
+        }
+        var leap = 0; var isAdd = false
+        for (var i = 1; i < m; i++) {
+            leap = this.leapMonth(y)
+            if (!isAdd) { // 处理闰月
+                if (leap <= i && leap > 0) {
+                    offset += this.leapDays(y); isAdd = true
+                }
+            }
+            offset += this.monthDays(y, i)
+        }
+        // 转换闰月农历 需补充该年闰月的前一个月的时差
+        if (isLeapMonth) { offset += day }
+        // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+        var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
+        var calObj = new Date((offset + d - 31) * 86400000 + stmap)
+        var cY = calObj.getUTCFullYear()
+        var cM = calObj.getUTCMonth() + 1
+        var cD = calObj.getUTCDate()
+
+        return this.solar2lunar(cY, cM, cD)
+    }
+}
+
+export default calendar
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/city.js b/tuniao-ui/libs/utils/city.js
new file mode 100644
index 0000000..94169eb
--- /dev/null
+++ b/tuniao-ui/libs/utils/city.js
@@ -0,0 +1 @@
+var cityData=[[{"label":"市辖区","value":"1101"}],[{"label":"市辖区","value":"1201"}],[{"label":"石家庄市","value":"1301"},{"label":"唐山市","value":"1302"},{"label":"秦皇岛市","value":"1303"},{"label":"邯郸市","value":"1304"},{"label":"邢台市","value":"1305"},{"label":"保定市","value":"1306"},{"label":"张家口市","value":"1307"},{"label":"承德市","value":"1308"},{"label":"沧州市","value":"1309"},{"label":"廊坊市","value":"1310"},{"label":"衡水市","value":"1311"}],[{"label":"太原市","value":"1401"},{"label":"大同市","value":"1402"},{"label":"阳泉市","value":"1403"},{"label":"长治市","value":"1404"},{"label":"晋城市","value":"1405"},{"label":"朔州市","value":"1406"},{"label":"晋中市","value":"1407"},{"label":"运城市","value":"1408"},{"label":"忻州市","value":"1409"},{"label":"临汾市","value":"1410"},{"label":"吕梁市","value":"1411"}],[{"label":"呼和浩特市","value":"1501"},{"label":"包头市","value":"1502"},{"label":"乌海市","value":"1503"},{"label":"赤峰市","value":"1504"},{"label":"通辽市","value":"1505"},{"label":"鄂尔多斯市","value":"1506"},{"label":"呼伦贝尔市","value":"1507"},{"label":"巴彦淖尔市","value":"1508"},{"label":"乌兰察布市","value":"1509"},{"label":"兴安盟","value":"1522"},{"label":"锡林郭勒盟","value":"1525"},{"label":"阿拉善盟","value":"1529"}],[{"label":"沈阳市","value":"2101"},{"label":"大连市","value":"2102"},{"label":"鞍山市","value":"2103"},{"label":"抚顺市","value":"2104"},{"label":"本溪市","value":"2105"},{"label":"丹东市","value":"2106"},{"label":"锦州市","value":"2107"},{"label":"营口市","value":"2108"},{"label":"阜新市","value":"2109"},{"label":"辽阳市","value":"2110"},{"label":"盘锦市","value":"2111"},{"label":"铁岭市","value":"2112"},{"label":"朝阳市","value":"2113"},{"label":"葫芦岛市","value":"2114"}],[{"label":"长春市","value":"2201"},{"label":"吉林市","value":"2202"},{"label":"四平市","value":"2203"},{"label":"辽源市","value":"2204"},{"label":"通化市","value":"2205"},{"label":"白山市","value":"2206"},{"label":"松原市","value":"2207"},{"label":"白城市","value":"2208"},{"label":"延边朝鲜族自治州","value":"2224"}],[{"label":"哈尔滨市","value":"2301"},{"label":"齐齐哈尔市","value":"2302"},{"label":"鸡西市","value":"2303"},{"label":"鹤岗市","value":"2304"},{"label":"双鸭山市","value":"2305"},{"label":"大庆市","value":"2306"},{"label":"伊春市","value":"2307"},{"label":"佳木斯市","value":"2308"},{"label":"七台河市","value":"2309"},{"label":"牡丹江市","value":"2310"},{"label":"黑河市","value":"2311"},{"label":"绥化市","value":"2312"},{"label":"大兴安岭地区","value":"2327"}],[{"label":"市辖区","value":"3101"}],[{"label":"南京市","value":"3201"},{"label":"无锡市","value":"3202"},{"label":"徐州市","value":"3203"},{"label":"常州市","value":"3204"},{"label":"苏州市","value":"3205"},{"label":"南通市","value":"3206"},{"label":"连云港市","value":"3207"},{"label":"淮安市","value":"3208"},{"label":"盐城市","value":"3209"},{"label":"扬州市","value":"3210"},{"label":"镇江市","value":"3211"},{"label":"泰州市","value":"3212"},{"label":"宿迁市","value":"3213"}],[{"label":"杭州市","value":"3301"},{"label":"宁波市","value":"3302"},{"label":"温州市","value":"3303"},{"label":"嘉兴市","value":"3304"},{"label":"湖州市","value":"3305"},{"label":"绍兴市","value":"3306"},{"label":"金华市","value":"3307"},{"label":"衢州市","value":"3308"},{"label":"舟山市","value":"3309"},{"label":"台州市","value":"3310"},{"label":"丽水市","value":"3311"}],[{"label":"合肥市","value":"3401"},{"label":"芜湖市","value":"3402"},{"label":"蚌埠市","value":"3403"},{"label":"淮南市","value":"3404"},{"label":"马鞍山市","value":"3405"},{"label":"淮北市","value":"3406"},{"label":"铜陵市","value":"3407"},{"label":"安庆市","value":"3408"},{"label":"黄山市","value":"3410"},{"label":"滁州市","value":"3411"},{"label":"阜阳市","value":"3412"},{"label":"宿州市","value":"3413"},{"label":"六安市","value":"3415"},{"label":"亳州市","value":"3416"},{"label":"池州市","value":"3417"},{"label":"宣城市","value":"3418"}],[{"label":"福州市","value":"3501"},{"label":"厦门市","value":"3502"},{"label":"莆田市","value":"3503"},{"label":"三明市","value":"3504"},{"label":"泉州市","value":"3505"},{"label":"漳州市","value":"3506"},{"label":"南平市","value":"3507"},{"label":"龙岩市","value":"3508"},{"label":"宁德市","value":"3509"}],[{"label":"南昌市","value":"3601"},{"label":"景德镇市","value":"3602"},{"label":"萍乡市","value":"3603"},{"label":"九江市","value":"3604"},{"label":"新余市","value":"3605"},{"label":"鹰潭市","value":"3606"},{"label":"赣州市","value":"3607"},{"label":"吉安市","value":"3608"},{"label":"宜春市","value":"3609"},{"label":"抚州市","value":"3610"},{"label":"上饶市","value":"3611"}],[{"label":"济南市","value":"3701"},{"label":"青岛市","value":"3702"},{"label":"淄博市","value":"3703"},{"label":"枣庄市","value":"3704"},{"label":"东营市","value":"3705"},{"label":"烟台市","value":"3706"},{"label":"潍坊市","value":"3707"},{"label":"济宁市","value":"3708"},{"label":"泰安市","value":"3709"},{"label":"威海市","value":"3710"},{"label":"日照市","value":"3711"},{"label":"莱芜市","value":"3712"},{"label":"临沂市","value":"3713"},{"label":"德州市","value":"3714"},{"label":"聊城市","value":"3715"},{"label":"滨州市","value":"3716"},{"label":"菏泽市","value":"3717"}],[{"label":"郑州市","value":"4101"},{"label":"开封市","value":"4102"},{"label":"洛阳市","value":"4103"},{"label":"平顶山市","value":"4104"},{"label":"安阳市","value":"4105"},{"label":"鹤壁市","value":"4106"},{"label":"新乡市","value":"4107"},{"label":"焦作市","value":"4108"},{"label":"濮阳市","value":"4109"},{"label":"许昌市","value":"4110"},{"label":"漯河市","value":"4111"},{"label":"三门峡市","value":"4112"},{"label":"南阳市","value":"4113"},{"label":"商丘市","value":"4114"},{"label":"信阳市","value":"4115"},{"label":"周口市","value":"4116"},{"label":"驻马店市","value":"4117"},{"label":"省直辖县级行政区划","value":"4190"}],[{"label":"武汉市","value":"4201"},{"label":"黄石市","value":"4202"},{"label":"十堰市","value":"4203"},{"label":"宜昌市","value":"4205"},{"label":"襄阳市","value":"4206"},{"label":"鄂州市","value":"4207"},{"label":"荆门市","value":"4208"},{"label":"孝感市","value":"4209"},{"label":"荆州市","value":"4210"},{"label":"黄冈市","value":"4211"},{"label":"咸宁市","value":"4212"},{"label":"随州市","value":"4213"},{"label":"恩施土家族苗族自治州","value":"4228"},{"label":"省直辖县级行政区划","value":"4290"}],[{"label":"长沙市","value":"4301"},{"label":"株洲市","value":"4302"},{"label":"湘潭市","value":"4303"},{"label":"衡阳市","value":"4304"},{"label":"邵阳市","value":"4305"},{"label":"岳阳市","value":"4306"},{"label":"常德市","value":"4307"},{"label":"张家界市","value":"4308"},{"label":"益阳市","value":"4309"},{"label":"郴州市","value":"4310"},{"label":"永州市","value":"4311"},{"label":"怀化市","value":"4312"},{"label":"娄底市","value":"4313"},{"label":"湘西土家族苗族自治州","value":"4331"}],[{"label":"广州市","value":"4401"},{"label":"韶关市","value":"4402"},{"label":"深圳市","value":"4403"},{"label":"珠海市","value":"4404"},{"label":"汕头市","value":"4405"},{"label":"佛山市","value":"4406"},{"label":"江门市","value":"4407"},{"label":"湛江市","value":"4408"},{"label":"茂名市","value":"4409"},{"label":"肇庆市","value":"4412"},{"label":"惠州市","value":"4413"},{"label":"梅州市","value":"4414"},{"label":"汕尾市","value":"4415"},{"label":"河源市","value":"4416"},{"label":"阳江市","value":"4417"},{"label":"清远市","value":"4418"},{"label":"东莞市","value":"4419"},{"label":"中山市","value":"4420"},{"label":"潮州市","value":"4451"},{"label":"揭阳市","value":"4452"},{"label":"云浮市","value":"4453"}],[{"label":"南宁市","value":"4501"},{"label":"柳州市","value":"4502"},{"label":"桂林市","value":"4503"},{"label":"梧州市","value":"4504"},{"label":"北海市","value":"4505"},{"label":"防城港市","value":"4506"},{"label":"钦州市","value":"4507"},{"label":"贵港市","value":"4508"},{"label":"玉林市","value":"4509"},{"label":"百色市","value":"4510"},{"label":"贺州市","value":"4511"},{"label":"河池市","value":"4512"},{"label":"来宾市","value":"4513"},{"label":"崇左市","value":"4514"}],[{"label":"海口市","value":"4601"},{"label":"三亚市","value":"4602"},{"label":"三沙市","value":"4603"},{"label":"儋州市","value":"4604"},{"label":"省直辖县级行政区划","value":"4690"}],[{"label":"市辖区","value":"5001"},{"label":"县","value":"5002"}],[{"label":"成都市","value":"5101"},{"label":"自贡市","value":"5103"},{"label":"攀枝花市","value":"5104"},{"label":"泸州市","value":"5105"},{"label":"德阳市","value":"5106"},{"label":"绵阳市","value":"5107"},{"label":"广元市","value":"5108"},{"label":"遂宁市","value":"5109"},{"label":"内江市","value":"5110"},{"label":"乐山市","value":"5111"},{"label":"南充市","value":"5113"},{"label":"眉山市","value":"5114"},{"label":"宜宾市","value":"5115"},{"label":"广安市","value":"5116"},{"label":"达州市","value":"5117"},{"label":"雅安市","value":"5118"},{"label":"巴中市","value":"5119"},{"label":"资阳市","value":"5120"},{"label":"阿坝藏族羌族自治州","value":"5132"},{"label":"甘孜藏族自治州","value":"5133"},{"label":"凉山彝族自治州","value":"5134"}],[{"label":"贵阳市","value":"5201"},{"label":"六盘水市","value":"5202"},{"label":"遵义市","value":"5203"},{"label":"安顺市","value":"5204"},{"label":"毕节市","value":"5205"},{"label":"铜仁市","value":"5206"},{"label":"黔西南布依族苗族自治州","value":"5223"},{"label":"黔东南苗族侗族自治州","value":"5226"},{"label":"黔南布依族苗族自治州","value":"5227"}],[{"label":"昆明市","value":"5301"},{"label":"曲靖市","value":"5303"},{"label":"玉溪市","value":"5304"},{"label":"保山市","value":"5305"},{"label":"昭通市","value":"5306"},{"label":"丽江市","value":"5307"},{"label":"普洱市","value":"5308"},{"label":"临沧市","value":"5309"},{"label":"楚雄彝族自治州","value":"5323"},{"label":"红河哈尼族彝族自治州","value":"5325"},{"label":"文山壮族苗族自治州","value":"5326"},{"label":"西双版纳傣族自治州","value":"5328"},{"label":"大理白族自治州","value":"5329"},{"label":"德宏傣族景颇族自治州","value":"5331"},{"label":"怒江傈僳族自治州","value":"5333"},{"label":"迪庆藏族自治州","value":"5334"}],[{"label":"拉萨市","value":"5401"},{"label":"日喀则市","value":"5402"},{"label":"昌都市","value":"5403"},{"label":"林芝市","value":"5404"},{"label":"山南市","value":"5405"},{"label":"那曲地区","value":"5424"},{"label":"阿里地区","value":"5425"}],[{"label":"西安市","value":"6101"},{"label":"铜川市","value":"6102"},{"label":"宝鸡市","value":"6103"},{"label":"咸阳市","value":"6104"},{"label":"渭南市","value":"6105"},{"label":"延安市","value":"6106"},{"label":"汉中市","value":"6107"},{"label":"榆林市","value":"6108"},{"label":"安康市","value":"6109"},{"label":"商洛市","value":"6110"}],[{"label":"兰州市","value":"6201"},{"label":"嘉峪关市","value":"6202"},{"label":"金昌市","value":"6203"},{"label":"白银市","value":"6204"},{"label":"天水市","value":"6205"},{"label":"武威市","value":"6206"},{"label":"张掖市","value":"6207"},{"label":"平凉市","value":"6208"},{"label":"酒泉市","value":"6209"},{"label":"庆阳市","value":"6210"},{"label":"定西市","value":"6211"},{"label":"陇南市","value":"6212"},{"label":"临夏回族自治州","value":"6229"},{"label":"甘南藏族自治州","value":"6230"}],[{"label":"西宁市","value":"6301"},{"label":"海东市","value":"6302"},{"label":"海北藏族自治州","value":"6322"},{"label":"黄南藏族自治州","value":"6323"},{"label":"海南藏族自治州","value":"6325"},{"label":"果洛藏族自治州","value":"6326"},{"label":"玉树藏族自治州","value":"6327"},{"label":"海西蒙古族藏族自治州","value":"6328"}],[{"label":"银川市","value":"6401"},{"label":"石嘴山市","value":"6402"},{"label":"吴忠市","value":"6403"},{"label":"固原市","value":"6404"},{"label":"中卫市","value":"6405"}],[{"label":"乌鲁木齐市","value":"6501"},{"label":"克拉玛依市","value":"6502"},{"label":"吐鲁番市","value":"6504"},{"label":"哈密市","value":"6505"},{"label":"昌吉回族自治州","value":"6523"},{"label":"博尔塔拉蒙古自治州","value":"6527"},{"label":"巴音郭楞蒙古自治州","value":"6528"},{"label":"阿克苏地区","value":"6529"},{"label":"克孜勒苏柯尔克孜自治州","value":"6530"},{"label":"喀什地区","value":"6531"},{"label":"和田地区","value":"6532"},{"label":"伊犁哈萨克自治州","value":"6540"},{"label":"塔城地区","value":"6542"},{"label":"阿勒泰地区","value":"6543"},{"label":"自治区直辖县级行政区划","value":"6590"}],[{"label":"台北","value":"6601"},{"label":"高雄","value":"6602"},{"label":"基隆","value":"6603"},{"label":"台中","value":"6604"},{"label":"台南","value":"6605"},{"label":"新竹","value":"6606"},{"label":"嘉义","value":"6607"},{"label":"宜兰","value":"6608"},{"label":"桃园","value":"6609"},{"label":"苗栗","value":"6610"},{"label":"彰化","value":"6611"},{"label":"南投","value":"6612"},{"label":"云林","value":"6613"},{"label":"屏东","value":"6614"},{"label":"台东","value":"6615"},{"label":"花莲","value":"6616"},{"label":"澎湖","value":"6617"}],[{"label":"香港岛","value":"6701"},{"label":"九龙","value":"6702"},{"label":"新界","value":"6703"}],[{"label":"澳门半岛","value":"6801"},{"label":"氹仔岛","value":"6802"},{"label":"路环岛","value":"6803"},{"label":"路氹城","value":"6804"}]];export default cityData;
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/emitter.js b/tuniao-ui/libs/utils/emitter.js
new file mode 100644
index 0000000..7af43d2
--- /dev/null
+++ b/tuniao-ui/libs/utils/emitter.js
@@ -0,0 +1,55 @@
+/**
+ * 递归使用call方式 this指向
+ * 
+ * @param {String} componentName 需要查找的组件的名称
+ * @param {String} eventName 事件名称
+ * @param {Object} params 需要传递的参数
+ */
+function broadcast(componentName, eventName, params) {
+  // 循环子节点找到需要的节点，没有查找到就递归进行查找
+  this.$children.map(child => {
+    if (componentName === child.$options.name) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat(params))
+    }
+  })
+}
+
+export default {
+  methods: {
+    /**
+     * 派发 向上查找一个
+     * @param {Object} componentName 需要查找的组件的名称
+     * @param {Object} eventName 事件名称
+     * @param {Object} params 需要传递的参数
+     */
+    dispatch(componentName, eventName, params) {
+      // 找到最近父节点 $root 根节点
+      let parent = this.$parent || this.$root
+      // 获取当前实例的名称
+      let name = parent.$options.name
+      
+      // 当前存在节点并且当前节点没有名称或者名称不等于我们要查找的节点名称，则继续遍历
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+        if (parent) {
+          name = parent.$options.name
+        }
+      }
+      // 如果有节点则表示找到
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    /**
+     * 广播 向下查找多个
+     * @param {Object} componentName 需要查找的组件的名称
+     * @param {Object} eventName 事件名称
+     * @param {Object} params 需要传递的参数
+     */
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params)
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/province.js b/tuniao-ui/libs/utils/province.js
new file mode 100644
index 0000000..436b190
--- /dev/null
+++ b/tuniao-ui/libs/utils/province.js
@@ -0,0 +1 @@
+var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData;
\ No newline at end of file
diff --git a/tuniao-ui/theme.scss b/tuniao-ui/theme.scss
new file mode 100644
index 0000000..136a6ec
--- /dev/null
+++ b/tuniao-ui/theme.scss
@@ -0,0 +1,183 @@
+// 此文件为TuniaoUI的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
+// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
+// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
+
+// 组件配置
+$tn-form-item-height: 70rpx;
+
+
+// 主颜色
+$tn-main-color: #01BEFF;
+$tn-main-orange: #FBBD12;
+$tn-embellished-green: #00FFC6;
+$tn-embellished-yellow: #FFF00D;
+$tn-auxiliary-powder: #FF71D2;
+$tn-auxiliary-blue: #82B2FF;
+$tn-bg-color: #FFFFFF;
+$tn-bg-gray-color: #F4F4F4;
+$tn-space-color: #F8F7F8;
+
+// 边框颜色
+$tn-border-solid-color: rgba(0, 0, 0, 0.1);
+$tn-border-solids-color: #eee;
+$tn-border-dashed-color: #ddd;
+
+// 阴影颜色
+$tn-shadow-color: rgba(0, 0, 0, 0.1);
+$tn-box-shadow-color: rgba(0, 0, 0, 0.2);
+
+// 字体颜色
+$tn-font-color: #080808;
+$tn-font-sub-color: #AAAAAA;
+$tn-content-color: #838383;
+$tn-font-holder-color: #E6E6E6;
+
+$tn-mask-bg-color: rgba(0, 0, 0, 0.4);
+
+$tn-progress-bg-color: #f0f0f0;
+
+
+$tn-color-red: #E83A30;
+$tn-color-red-dark: #BA2E26;
+$tn-color-red-disabled: #F39C97;
+$tn-color-red-light: #FAD8D6;
+
+$tn-color-purplered: #E72F8C;
+$tn-color-purplered-dark: #B9266F;
+$tn-color-purplered-disabled: #F397C5;
+$tn-color-purplered-light: #FAD5E8;
+
+$tn-color-purple: #892FE8;
+$tn-color-purple-dark: #6E26BA;
+$tn-color-purple-disabled: #C497F3;
+$tn-color-purple-light: #E7D5FA;
+
+$tn-color-bluepurple: #5F4FD9;
+$tn-color-bluepurple-dark: #4C3FAE;
+$tn-color-bluepurple-disabled: #AFA7EC;
+$tn-color-bluepurple-light: #DFDCF7;
+
+$tn-color-aquablue: #3646FF;
+$tn-color-aquablue-dark: #2B38CC;
+$tn-color-aquablue-disabled: #9AA2FF;
+$tn-color-aquablue-light: #D7DAFF;
+
+$tn-color-blue: #3D7EFF;
+$tn-color-blue-dark: #3165CC;
+$tn-color-blue-disabled: #9EBEFF;
+$tn-color-blue-light: #D8E5FF;
+
+$tn-color-indigo: #31C9E8;
+$tn-color-indigo-dark: #27A1BA;
+$tn-color-indigo-disabled: #98E4F3;
+$tn-color-indigo-light: #D6F4FA;
+
+$tn-color-cyan: #2DE8BD;
+$tn-color-cyan-dark: #24BA97;
+$tn-color-cyan-disabled: #96F3DE;
+$tn-color-cyan-light: #D5FAF2;
+
+$tn-color-teal: #24F083;
+$tn-color-teal-dark: #1DC069;
+$tn-color-teal-disabled: #91F7C1;
+$tn-color-teal-light: #D3FCE6;
+
+$tn-color-green: #31E749;
+$tn-color-green-dark: #27B93A;
+$tn-color-green-disabled: #98F3A4;
+$tn-color-green-light: #D6FADB;
+
+$tn-color-yellowgreen: #A4E82F;
+$tn-color-yellowgreen-dark: #82BA26;
+$tn-color-yellowgreen-disabled: #D1F397;
+$tn-color-yellowgreen-light: #EDFAD5;
+
+$tn-color-lime: #D5EB00;
+$tn-color-lime-dark: #AABC00;
+$tn-color-lime-disabled: #E9F57F;
+$tn-color-lime-light: #F7FBCC;
+
+$tn-color-yellow: #FFF420;
+$tn-color-yellow-dark: #CCC21A;
+$tn-color-yellow-disabled: #FFF88F;
+$tn-color-yellow-light: #FFFDD2;
+
+$tn-color-orangeyellow: #FFCA28;
+$tn-color-orangeyellow-dark: #CCA220;
+$tn-color-orangeyellow-disabled: #FFE493;
+$tn-color-orangeyellow-light: #FFF4D4;
+
+$tn-color-orange: #FFA726;
+$tn-color-orange-dark: #CC851E;
+$tn-color-orange-disabled: #FFD392;
+$tn-color-orange-light: #FFEDD4 ;
+
+$tn-color-orangered: #FF7043;
+$tn-color-orangered-dark: #CC5A36;
+$tn-color-orangered-disabled: #FFB7A1;
+$tn-color-orangered-light: #FFE2D9;
+
+$tn-color-brown: #914F2C;
+$tn-color-brown-dark: #743F23;
+$tn-color-brown-disabled: #C8A795;
+$tn-color-brown-light: #E9DCD5;
+
+$tn-color-grey: #78909C;
+$tn-color-grey-dark: #5F7E8B;
+$tn-color-grey-disabled: #C6D1D8;
+$tn-color-grey-light: #E4E9EC;
+
+$tn-color-gray: #AAAAAA;
+$tn-color-gray-dark: #838383;
+$tn-color-gray-disabled: #E6E6E6;
+$tn-color-gray-light: #F8F7F8;
+
+$tn-cool-bg-color-1-start: #F5317F;
+$tn-cool-bg-color-1-end: #FF7C6E;
+
+$tn-cool-bg-color-2-start: #CA26FF;
+$tn-cool-bg-color-2-end: #F360A7;
+
+$tn-cool-bg-color-3-start: #A26FFC;
+$tn-cool-bg-color-3-end: #9D12FF;
+
+$tn-cool-bg-color-4-start: #AA77F0;
+$tn-cool-bg-color-4-end: #E871E5;
+
+$tn-cool-bg-color-5-start: #40A0F7;
+$tn-cool-bg-color-5-end: #4866E6;
+
+$tn-cool-bg-color-6-start: #209CFF;
+$tn-cool-bg-color-6-end: #68E0CF;
+
+$tn-cool-bg-color-7-start: #00C3FF;
+$tn-cool-bg-color-7-end: #58FFF5;
+
+$tn-cool-bg-color-8-start: #00d1FF;
+$tn-cool-bg-color-8-end: #69FF97;
+
+$tn-cool-bg-color-9-start: #0FD893;
+$tn-cool-bg-color-9-end: #29ECBF;
+
+$tn-cool-bg-color-10-start: #0FD850;
+$tn-cool-bg-color-10-end: #F9F047;
+
+$tn-cool-bg-color-11-start: #24FE41;
+$tn-cool-bg-color-11-end: #F7FD47;
+
+$tn-cool-bg-color-12-start: #D6FF7F;
+$tn-cool-bg-color-12-end: #00F657;
+
+$tn-cool-bg-color-13-start: #FA709A;
+$tn-cool-bg-color-13-end: #FEE140;
+
+$tn-cool-bg-color-14-start: #FE5E9C;
+$tn-cool-bg-color-14-end: #F1AA76;
+
+$tn-cool-bg-color-15-start: #FF3181;
+$tn-cool-bg-color-15-end: #FF8331;
+
+$tn-cool-bg-color-16-start: #ED1C24;
+$tn-cool-bg-color-16-end: #FECE12;
+
+
diff --git a/uni.scss b/uni.scss
new file mode 100644
index 0000000..3ceda17
--- /dev/null
+++ b/uni.scss
@@ -0,0 +1,7 @@
+/**
+ * 下方引入的为Tuniao UI的集成样式文件，为scss预处理器，其中包含了一些"tn-"开头的自定义变量
+ * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
+ * Tuniao UI自定义的css类名和scss变量，均以"tn-"开头，不会造成冲突，请放心使用 
+ */
+
+@import 'tuniao-ui/theme.scss'
diff --git a/util/request/index.js b/util/request/index.js
new file mode 100644
index 0000000..b4c3682
--- /dev/null
+++ b/util/request/index.js
@@ -0,0 +1,13 @@
+// 引入配置
+import config from '@/common/config'
+// 初始化请求配置
+uni.$tn.http.setConfig((defaultConfig) => {
+  // defaultConfig 为默认全局配置
+  defaultConfig.baseURL = config.baseUrl // 根域名
+  return defaultConfig
+})
+
+module.exports = (vm) => {
+  require('./requestInterceptors')(vm)
+  require('./responseInterceptors')(vm)
+}
\ No newline at end of file
diff --git a/util/request/requestInterceptors.js b/util/request/requestInterceptors.js
new file mode 100644
index 0000000..95b9e3b
--- /dev/null
+++ b/util/request/requestInterceptors.js
@@ -0,0 +1,15 @@
+/**
+ * 请求拦截
+ * @param {Object} http 
+ */
+module.exports = (vm) => {
+  uni.$tn.http.interceptors.request.use((config) => { // 可以使用async await 做异步操作
+    // 初始化请求拦截器时，会执行此方法，此时data为undefined，默认赋予{}
+    config.data = config.data || {}
+    // 可以在此通过vm引用vuex中的变量，具体值在vm.vuex_[name]中
+    // console.log(vm.vuex_user);
+    return config
+  }, (config) => { // 可以使用async await 做异步操作
+    Promise.reject(config)
+  })
+}
\ No newline at end of file
diff --git a/util/request/responseInterceptors.js b/util/request/responseInterceptors.js
new file mode 100644
index 0000000..f1605be
--- /dev/null
+++ b/util/request/responseInterceptors.js
@@ -0,0 +1,28 @@
+/**
+ * 相应拦截
+ * @param {Object} http 
+ */
+module.exports = (vm) => {
+  uni.$tn.http.interceptors.response.use((response) => { // 可以使用async await 做异步操作
+    const data = response.data
+    // 自定义参数
+    const custom = response.config?.custom
+    // 服务端返回的状态码不等于200，则reject()
+    if (data.code !== 200) {
+      // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
+      if (custom.toast !== false) {
+        uni.$tn.message.toast(data.message)
+      }
+      // 如果需要catch返回，则进行reject
+      if (custom?.catch) {
+        return Promise.reject(data)
+      } else {
+        // 返回pending中的promise
+        return new Promise(() => {})
+      }
+    }
+    return data.data || {}
+  }, (response) => { // 对响应错误做点什么 （statusCode !== 200）
+    return Promise.reject(response)
+  })
+}
\ No newline at end of file