diff --git a/.DS_Store b/.DS_Store index 9575a79..87b135d 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 29f81d8..0000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/README.md b/README.md deleted file mode 100644 index c560b2e..0000000 --- a/README.md +++ /dev/null @@ -1,192 +0,0 @@ -

- 图鸟UI -

- - -

Tuniao UI

-

提供丰富组件和炫酷页面的UI框架

- -

- - - - - - - -

- - - -## 说明 - -**图鸟UI**，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持`H5`和`微信小程序`，包含常用表单组件、信息展示组件等，并提供`丰富的酷炫页面模板`。 - - - -### 开源版本中所使用到的图片均做了防盗链，只能在调试中使用，不保证在生产环境中可以使用。 - -### 图片资源以上传到[图鸟社区](https://www.yuque.com/tuniao)。 - - - -## 特点 - -- 包含基础常用的布局元素，flex、grid、浮动 -- 完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色 -- 300+风格统一的图标icon，后续可继续增加 -- 30+精选组件，让开发者可以快速进行开发 -- 酷炫常用的页面模板，更有让你眼前一亮的界面效果 -- 图片素材语雀便捷下载，图鸟社区共同成长 -- 使用文档详尽说明，让你一文读懂图鸟UI - - - -## 链接 - -- [图鸟社区](https://www.yuque.com/tuniao) -- [使用手册](https://tuniaoui.tuniaokj.com/components/introduce.html) - - - -## 安装 - -下载地址 ------> [图鸟UI - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=7088) - - - -## 快速上手 - -#### 1.复制文件到项目的根目录 - - - ##### 必要文件夹 - - - 复制tuniao-ui文件夹 - - 复制store文件夹 - -- ##### 如果使用了模板页面则需要复制以下文件夹 - - - 复制libs文件夹 - - 复制static文件夹 - - - -#### 2.引入TuniaoUI主JS库 - -在项目根目录中的`main.js`中，引入并使用TuniaoUI的JS库，注意这两行配置代码要放在import Vue之后。 - -```javascript -// 引入全局TuniaoUI -import TuniaoUI from 'tuniao-ui' -Vue.use(TuniaoUI) -``` - - - -#### 3.引入TuniaoUI提供的vuex -在项目根目录的`main.js`中引入store -```js -// 引入store -import store from './store' -... -const app = new Vue({ - store, - ...App -}) -``` - -在项目根目录中的`main.js`中，引入并使用TuniaoUI的vuex，注意这两行配置代码要放在import Vue之后。 - -```js -// 引入TuniaoUI提供的vuex简写方法 -let vuexStore = require('@/store/$t.mixin.js') -Vue.mixin(vuexStore) -``` - - - -#### 4.引入TuniaoUI的全局SCSS主题文件 - -在项目根目录的`uni.scss`中引入此文件。 - -```scss -@import 'tuniao-ui/theme.scss'; -``` - - - -#### 5.引入TuniaoUI基础样式和图标文件 - -::: danger 注意 -在`App.vue`中`style标签`首行的位置引入，注意给style标签加入lang="scss"属性 -::: - -```scss - -``` - - - -#### 6.配置easycom组件模式 - -此配置需要在根目录的`page.json`中进行。 - -::: tip 温馨提示 - - 1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HBuilderX或者重新编译项目才能正常使用TuniaoUI的功能。 - 2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。 - ::: - -``` -// pages.json -{ - "easycom": { - "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue" - }, - "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages - { - // ...... - } - ] - // ...... -} -``` - - - -## UI截图 - -

- 图鸟UI - 图鸟UI - 图鸟UI - 图鸟UI - 图鸟UI - 图鸟UI -

- - - -## 联系作者 - -

- 图鸟UI -

- - -### 微信群聊二维码 - -

- 图鸟UI -

- - - - -## 版权信息 - -`TuniaoUI开源版`遵循`Apache`协议，意味着您无需支付任何费用，也无需授权，即可将TuniaoUI开源版应用到您的产品中，但是需要保留TuniaoUI的信息。 diff --git a/basicPage/icon/icon.vue b/basicPage/icon/icon.vue index b85e665..d2a898a 100644 --- a/basicPage/icon/icon.vue +++ b/basicPage/icon/icon.vue @@ -1,169 +1,231 @@ + .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 */ + diff --git a/basicPage/icon/iconfont.js b/basicPage/icon/iconfont.js index 21f3b60..2d31fdf 100644 --- a/basicPage/icon/iconfont.js +++ b/basicPage/icon/iconfont.js @@ -1,3 +1,3 @@ export default { - data: [{name: "font"}, {name: "chemistry"}, {name: "biology"}, {name: "level"}, {name: "level-fill"}, {name: "deploy"}, {name: "deploy-fill"}, {name: "server"}, {name: "server-fill"}, {name: "cube"}, {name: "cube-fill"}, {name: "organizatio"}, {name: "organizatio-fill"}, {name: "company"}, {name: "company-fill"}, {name: "pharmacy"}, {name: "medical"}, {name: "wheelchair"}, {name: "my-add"}, {name: "my"}, {name: "my-fill"}, {name: "trust"}, {name: "trust-fill"}, {name: "moon"}, {name: "moon-fill"}, {name: "funds"}, {name: "funds-fill"}, {name: "signpost"}, {name: "signpost-fill"}, {name: "vip-text"}, {name: "vip"}, {name: "vip-fill"}, {name: "hardware"}, {name: "hardware-fill"}, {name: "honor"}, {name: "honor-fill"}, {name: "count"}, {name: "count-fill"}, {name: "discover-planet"}, {name: "discover-planet-fill"}, {name: "discover"}, {name: "discover-fill"}, {name: "home"}, {name: "home-fill"}, {name: "home-vertical"}, {name: "home-vertical-fill"}, {name: "home-smile"}, {name: "home-smile-fill"}, {name: "home-capsule"}, {name: "home-capsule-fill"}, {name: "cross-fill"}, {name: "focus"}, {name: "all"}, {name: "expand"}, {name: "assort"}, {name: "assort-fill"}, {name: "menu-list"}, {name: "menu-list-fill"}, {name: "menu-sorts"}, {name: "menu-sorts-fill"}, {name: "menu-sort"}, {name: "menu-sort-fill"}, {name: "menu-more"}, {name: "menu-more-fill"}, {name: "menu"}, {name: "menu-fill"}, {name: "menu-circle"}, {name: "menu-circle-fill"}, {name: "search-menu"}, {name: "search-menu-fill"}, {name: "search-list"}, {name: "search-list-fill"}, {name: "search"}, {name: "brand"}, {name: "link"}, {name: "bug"}, {name: "bug-fill"}, {name: "code"}, {name: "mouse"}, {name: "notebook"}, {name: "notebook-fill"}, {name: "platform"}, {name: "platform-fill"}, {name: "computer"}, {name: "computer-fill"}, {name: "ipad"}, {name: "ipad-fill"}, {name: "phone"}, {name: "phone-fill"}, {name: "tel"}, {name: "tel-circle"}, {name: "tel-circle-fill"}, {name: "bluetooth"}, {name: "headset"}, {name: "shears"}, {name: "watercup"}, {name: "gloves"}, {name: "gloves-fill"}, {name: "covid-19"}, {name: "clip"}, {name: "science"}, {name: "science-fill"}, {name: "sport-jog"}, {name: "sport-run"}, {name: "sport-swim"}, {name: "sport-cycle"}, {name: "airplane"}, {name: "train"}, {name: "steamship"}, {name: "bus"}, {name: "balancecar"}, {name: "electromobile"}, {name: "constellation"}, {name: "con-aquarius"}, {name: "con-pisces"}, {name: "con-aries"}, {name: "con-taurus"}, {name: "con-gemini"}, {name: "con-cancer"}, {name: "con-leo"}, {name: "con-virgo"}, {name: "con-libra"}, {name: "con-scorpio"}, {name: "con-sagittarius"}, {name: "con-apricorn"}, {name: "zodiac-shu"}, {name: "zodiac-niu"}, {name: "zodiac-hu"}, {name: "zodiac-tu"}, {name: "zodiac-long"}, {name: "zodiac-she"}, {name: "zodiac-ma"}, {name: "zodiac-yang"}, {name: "zodiac-hou"}, {name: "zodiac-ji"}, {name: "zodiac-gou"}, {name: "zodiac-zhu"}, {name: "panda"}, {name: "lucky-money"}, {name: "lucky-money-fill"}, {name: "prize"}, {name: "gift"}, {name: "pay"}, {name: "refund"}, {name: "money"}, {name: "power"}, {name: "battery-empty"}, {name: "battery-low"}, {name: "battery-mid"}, {name: "battery-high"}, {name: "battery-full"}, {name: "fingerprint"}, {name: "qr-beibei"}, {name: "qr-code"}, {name: "qr-barcode"}, {name: "scan"}, {name: "revoke"}, {name: "filter"}, {name: "upload"}, {name: "download"}, {name: "fork"}, {name: "relation"}, {name: "master"}, {name: "facebook"}, {name: "google"}, {name: "linkedin"}, {name: "twitter"}, {name: "logo-tuniao"}, {name: "logo-shangpu"}, {name: "sina"}, {name: "taobao"}, {name: "gitee"}, {name: "github"}, {name: "dingtalk"}, {name: "alipay"}, {name: "qq"}, {name: "moments"}, {name: "wechat"}, {name: "wechat-fill"}, {name: "service"}, {name: "service-fill"}, {name: "team"}, {name: "team-fill"}, {name: "emoji-sad"}, {name: "emoji-sad-fill"}, {name: "emoji-general"}, {name: "emoji-general-fill"}, {name: "emoji-good"}, {name: "emoji-good-fill"}, {name: "clock"}, {name: "clock-fill"}, {name: "time"}, {name: "time-fill"}, {name: "footprint"}, {name: "delete"}, {name: "delete-fill"}, {name: "clear"}, {name: "set"}, {name: "set-fill"}, {name: "keyboard-circle"}, {name: "keyboard"}, {name: "wifi-no"}, {name: "wifi"}, {name: "creative-stop"}, {name: "creative-stop-fill"}, {name: "creative"}, {name: "creative-fill"}, {name: "trophy"}, {name: "trophy-fill"}, {name: "game"}, {name: "game-fill"}, {name: "tag"}, {name: "tag-fill"}, {name: "logistics"}, {name: "taxi"}, {name: "taxi-fill"}, {name: "delivery"}, {name: "delivery-fill"}, {name: "errands"}, {name: "errands-fill"}, {name: "flag"}, {name: "flag-fill"}, {name: "baby"}, {name: "baby-fill"}, {name: "shop"}, {name: "shop-fill"}, {name: "commissary"}, {name: "coupon"}, {name: "coupon-fill"}, {name: "shopbag"}, {name: "shopbag-fill"}, {name: "basket"}, {name: "basket-fill"}, {name: "cart"}, {name: "cart-fill"}, {name: "ticket"}, {name: "ticket-fill"}, {name: "receipt"}, {name: "receipt-fill"}, {name: "cardbag"}, {name: "cardbag-fill"}, {name: "bankcard"}, {name: "bankcard-fill"}, {name: "identity"}, {name: "identity-fill"}, {name: "calendar"}, {name: "calendar-fill"}, {name: "order"}, {name: "order-fill"}, {name: "image"}, {name: "image-fill"}, {name: "image-text"}, {name: "image-text-fill"}, {name: "data"}, {name: "data-fill"}, {name: "statistics"}, {name: "statistics-fill"}, {name: "trusty"}, {name: "trusty-fill"}, {name: "safe"}, {name: "safe-fill"}, {name: "edit"}, {name: "edit-form"}, {name: "edit-write"}, {name: "edit-write-fill"}, {name: "write"}, {name: "write-fill"}, {name: "eye-hide"}, {name: "eye-close"}, {name: "eye"}, {name: "eye-fill"}, {name: "unlock"}, {name: "lock"}, {name: "sex"}, {name: "sex-female"}, {name: "sex-male"}, {name: "circle-lack"}, {name: "circle-arrow"}, {name: "circle"}, {name: "circle-fill"}, {name: "copy"}, {name: "copy-fill"}, {name: "square"}, {name: "open"}, {name: "group-double"}, {name: "group-square"}, {name: "group-triangle"}, {name: "group-circle"}, {name: "group-null"}, {name: "share-triangle"}, {name: "share-square"}, {name: "share-circle"}, {name: "share"}, {name: "send"}, {name: "send-fill"}, {name: "light"}, {name: "light-fill"}, {name: "praise"}, {name: "praise-fill"}, {name: "star"}, {name: "star-fill"}, {name: "caring"}, {name: "caring-fill"}, {name: "fire"}, {name: "fire-fill"}, {name: "topic"}, {name: "topics"}, {name: "topics-fill"}, {name: "like-break"}, {name: "like-lack"}, {name: "like"}, {name: "like-fill"}, {name: "reply"}, {name: "reply-fill"}, {name: "notice-no"}, {name: "notice"}, {name: "notice-fill"}, {name: "comment"}, {name: "comment-fill"}, {name: "message"}, {name: "message-fill"}, {name: "flower"}, {name: "flower-fill"}, {name: "location"}, {name: "location-fill"}, {name: "map"}, {name: "map-fill"}, {name: "camera"}, {name: "camera-fill"}, {name: "live-stream"}, {name: "live-stream-fill"}, {name: "sing"}, {name: "music-fill"}, {name: "music-stop"}, {name: "video"}, {name: "video-fill"}, {name: "voice"}, {name: "voice-fill"}, {name: "previous-fill"}, {name: "next-fill"}, {name: "play-fill"}, {name: "stop"}, {name: "backspace"}, {name: "backspace-fill"}, {name: "sound-close"}, {name: "sound-close-fill"}, {name: "sound"}, {name: "sound-fill"}, {name: "sound-reduce"}, {name: "sound-reduce-fill"}, {name: "sound-add"}, {name: "sound-add-fill"}, {name: "sequence-vertical"}, {name: "sequence"}, {name: "align-center"}, {name: "align-right"}, {name: "align-left"}, {name: "align"}, {name: "title"}, {name: "sort"}, {name: "more-vertical"}, {name: "more-horizontal"}, {name: "more-circle"}, {name: "more-circle-fill"}, {name: "warning"}, {name: "warning-fill"}, {name: "zoom-out"}, {name: "zoom-out-fill"}, {name: "zoom-in"}, {name: "zoom-in-fill"}, {name: "success-square"}, {name: "success-square-fill"}, {name: "success-circle"}, {name: "success-circle-fill"}, {name: "success"}, {name: "close"}, {name: "close-circle"}, {name: "close-fill"}, {name: "help"}, {name: "help-fill"}, {name: "tips"}, {name: "tip-fill"}, {name: "left"}, {name: "left-triangle"}, {name: "left-double"}, {name: "left-circle"}, {name: "left-fill"}, {name: "left-arrow"}, {name: "down"}, {name: "down-arrow"}, {name: "down-double"}, {name: "down-circle"}, {name: "down-fill"}, {name: "down-triangle"}, {name: "right"}, {name: "right-triangle"}, {name: "right-arrow"}, {name: "right-double"}, {name: "right-circle"}, {name: "right-fill"}, {name: "up"}, {name: "up-arrow"}, {name: "up-double"}, {name: "up-triangle"}, {name: "up-circle"}, {name: "up-fill"}, {name: "add"}, {name: "add-circle"}, {name: "add-fill"}, {name: "reduce"}, {name: "reduce-square"}, {name: "reduce-square-fill"}, {name: "reduce-circle"}, {name: "reduce-circle-fill"}, {name: "job"}, {name: "rocket"}, {name: "sword"}, {name: "empty-comment"}, {name: "empty-data"}, {name: "empty-list"}, {name: "empty-message"}, {name: "empty-history"}, {name: "empty-permission"}, {name: "empty-favor"}, {name: "empty-coupon"}, {name: "empty-search"}, {name: "empty-address"}, {name: "empty-cart"}, {name: "empty-page"}, {name: "empty-network"}, {name: "empty-order"}, {name: "wea-cloud"}, {name: "wea-cloud-more"}, {name: "wea-cloud-sun"}, {name: "wea-rain"}, {name: "wea-rain-middle"}, {name: "wea-rain-heavy"}, {name: "wea-snow"}, {name: "wea-sun"}, {name: "wea-wind"}] -} \ No newline at end of file + 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":709,"icon":"totop-simple","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":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":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":619,"icon":"inventory","name":"库存清单"},{"id":616,"icon":"inventory-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":541,"icon":"birthday","name":"生日蛋糕"},{"id":194,"icon":"prize","name":"奖品礼品礼盒"},{"id":195,"icon":"gift","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":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":420,"icon":"tips","name":"提示提醒"},{"id":421,"icon":"tip-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":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":327,"icon":"group-double","name":"更多组"},{"id":328,"icon":"group-square","name":"更多组"},{"id":329,"icon":"group-triangle","name":"更多组"},{"id":401,"icon":"more-horizontal","name":"更多组"},{"id":400,"icon":"more-vertical","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":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":112,"icon":"trust","name":"合作伙伴"},{"id":123,"icon":"hardware-fill","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":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":695,"icon":"fish","name":"鱼"},{"id":40,"icon":"panda","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":479,"icon":"alien","name":"外星人"},{"id":491,"icon":"orange","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":141,"icon":"focus","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":600,"icon":"spiral","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":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":641,"icon":"dice-two","name":"色子二"},{"id":637,"icon":"dice-one","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":186,"icon":"zodiac-she","name":"生肖蛇"},{"id":187,"icon":"zodiac-long","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":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/componentsPage/keyboard/keyboard.vue b/componentsPage/keyboard/keyboard.vue index 3ea1a60..0affb93 100644 --- a/componentsPage/keyboard/keyboard.vue +++ b/componentsPage/keyboard/keyboard.vue @@ -1,324 +1,317 @@ + .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; + } + } + } + \ No newline at end of file diff --git a/componentsPage/select/select.vue b/componentsPage/select/select.vue index ee3c4e8..c78512c 100644 --- a/componentsPage/select/select.vue +++ b/componentsPage/select/select.vue @@ -64,7 +64,11 @@ { value: 5, label: '胖虎' - } + }, + { + value: 6, + label: '大星' + }, ], maskCloseable: true, diff --git a/main.js b/main.js index b236a7b..ded007a 100644 --- a/main.js +++ b/main.js @@ -22,4 +22,7 @@ const app = new Vue({ ...App }) +// 引入请求封装 +require('./util/request/index')(app) + app.$mount() \ No newline at end of file diff --git a/manifest.json b/manifest.json index 904676f..3fbd98c 100644 --- a/manifest.json +++ b/manifest.json @@ -85,7 +85,7 @@ "quickapp" : {}, /* 小程序特有相关 */ "mp-weixin" : { - "appid" : "wx97458d91caa76a6a", + "appid" : "wxf3d81a452b88ff4b", "setting" : { "urlCheck" : false, "es6" : true, @@ -119,7 +119,8 @@ "title" : "Tuniao UI", "template" : "template.h5.html", "router" : { - "mode" : "hash" + "mode" : "hash", + "base" : "./" }, "sdkConfigs" : { "maps" : { diff --git a/mock/template_page.js b/mock/template_page.js index d4f1c43..b0292be 100644 --- a/mock/template_page.js +++ b/mock/template_page.js @@ -237,9 +237,9 @@ export default { }, { icon: 'rocket', - title: '期待你的加入', - author: '期待你的加入', - url: '/templatePage/life/candle/candle' + title: '微信红包封面', + author: '微信红包封面', + url: '/templatePage/life/cover/cover' } ] } diff --git a/mock/vip_page.js b/mock/vip_page.js new file mode 100644 index 0000000..2c5849a --- /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 index 40d1a99..f08bb52 100644 --- a/pages.json +++ b/pages.json @@ -7,6 +7,7 @@ "path": "pages/index/index", "style": { "mp-weixin": { + "disableScroll": true }, "app-plus": { "bounce": "none" @@ -510,7 +511,8 @@ }, { "path": "life/share/share", "style": { - "navigationBarTitleText": "会员分享", + "navigationBarTitleText": "", + // 图鸟公众号 "enablePullDownRefresh": false } }, { @@ -519,6 +521,12 @@ "navigationBarTitleText": "敬请期待", "enablePullDownRefresh": false } + }, { + "path": "life/cover/cover", + "style": { + "navigationBarTitleText": "红包封面", + "enablePullDownRefresh": false + } }, { "path": "time/clock/clock", "style": { @@ -616,6 +624,15 @@ "enablePullDownRefresh": false } }] + }, { + "root": "vipPage", + "pages": [] + }, { + "root": "thirdPage", + "pages": [] + },{ + "root":"takeOutPage", + "pages": [] }], "preloadRule": { "pages/index/index": { diff --git a/pages/index/index.vue b/pages/index/index.vue index 133bd51..938f8d8 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,9 +1,31 @@ + + + + diff --git a/takeOutPage/static/images/location.png b/takeOutPage/static/images/location.png new file mode 100644 index 0000000..338d999 Binary files /dev/null and b/takeOutPage/static/images/location.png differ diff --git a/takeOutPage/static/images/take_out_car.png b/takeOutPage/static/images/take_out_car.png new file mode 100644 index 0000000..5ffde39 Binary files /dev/null and b/takeOutPage/static/images/take_out_car.png differ diff --git a/takeOutPage/walking-route/walking-route.vue b/takeOutPage/walking-route/walking-route.vue new file mode 100644 index 0000000..d147311 --- /dev/null +++ b/takeOutPage/walking-route/walking-route.vue @@ -0,0 +1,226 @@ + + + + + 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 @@ + + + + + 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..042e06f --- /dev/null +++ b/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue @@ -0,0 +1,654 @@ + + + + + diff --git a/tuniao-ui/components/tn-cropper/index.wxs b/tuniao-ui/components/tn-cropper/index.wxs new file mode 100644 index 0000000..1b73222 --- /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..7dba709 --- /dev/null +++ b/tuniao-ui/components/tn-cropper/tn-cropper.vue @@ -0,0 +1,574 @@ + + + + + + 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..ecbf07d --- /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..88a3451 --- /dev/null +++ b/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue @@ -0,0 +1,277 @@ + + + + + + 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..9efd934 --- /dev/null +++ b/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue @@ -0,0 +1,535 @@ + + + + + diff --git a/tuniao-ui/components/tn-drag/index.wxs b/tuniao-ui/components/tn-drag/index.wxs new file mode 100644 index 0000000..8b3d233 --- /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..359de75 --- /dev/null +++ b/tuniao-ui/components/tn-drag/tn-drag.vue @@ -0,0 +1,278 @@ + + + + + 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..3a530a4 --- /dev/null +++ b/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue @@ -0,0 +1,995 @@ + + + + + diff --git a/tuniao-ui/components/tn-image-upload/tn-image-upload.vue b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue index 7a9e9d3..a05cc5a 100644 --- a/tuniao-ui/components/tn-image-upload/tn-image-upload.vue +++ b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue @@ -1,5 +1,5 @@