diff --git a/Colorui-UniApp/App.vue b/Colorui-UniApp/App.vue index 3469497..763e269 100644 --- a/Colorui-UniApp/App.vue +++ b/Colorui-UniApp/App.vue @@ -116,8 +116,8 @@ diff --git a/Colorui-UniApp/README-GitHub.md b/Colorui-UniApp/README-GitHub.md deleted file mode 100644 index 4a70085..0000000 --- a/Colorui-UniApp/README-GitHub.md +++ /dev/null @@ -1,158 +0,0 @@ -

ColorUI简介

- -## 前言 -ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。 -## 交流 -微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。 -

- -## 素材 -ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！ -[语雀-ColorUI群资源](https://www.yuque.com/colorui) - -## 使用UniApp开发 -### 开始 -下载源码解压获得`/Colorui-UniApp`文件夹，复制目录下的 `/colorui` 文件夹到你的项目根目录 - -`App.vue` 引入关键Css `main.css` `icon.css` -``` - -``` - -### 使用自定义导航栏 -导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。 - -`App.vue` 获得系统信息 -``` -onLaunch: function() { - uni.getSystemInfo({ - success: function(e) { - // #ifndef MP - Vue.prototype.StatusBar = e.statusBarHeight; - if (e.platform == 'android') { - Vue.prototype.CustomBar = e.statusBarHeight + 50; - } else { - Vue.prototype.CustomBar = e.statusBarHeight + 45; - }; - // #endif - // #ifdef MP-WEIXIN - Vue.prototype.StatusBar = e.statusBarHeight; - let custom = wx.getMenuButtonBoundingClientRect(); - Vue.prototype.Custom = custom; - Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight; - // #endif - // #ifdef MP-ALIPAY - Vue.prototype.StatusBar = e.statusBarHeight; - Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight; - // #endif - } - }) -}, -``` - -`pages.json` 配置取消系统导航栏 -``` -"globalStyle": { - "navigationStyle": "custom" -}, -``` -复制代码结构可以直接使用，注意全局变量的获取。 - -使用封装,在`main.js` 引入 `cu-custom` 组件。 -``` -import cuCustom from './colorui/components/cu-custom.vue' -Vue.component('cu-custom',cuCustom) -``` - -`page.vue` 页面可以直接调用了 -``` - - 返回 - 导航栏 - -``` -| 参数 | 作用 |类型 | 默认值 | -| -------- | -----: |-----: | :----: | -| bgColor | 背景颜色类名 |String | '' | -| isBack | 是否开启返回 | Boolean | false | -| bgImage | 背景图片路径 | String | '' | - -| slot块 | 作用 | -| -------- | -----: | -| backText | 返回时的文字 | -| content | 中间区域 | -| right | 右侧区域(小程序端可使用范围很窄！) | - -## 使用原生小程序开发 -### 从现有项目开始 -下载源码解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录 - -`App.wxss` 引入关键Css `main.wxss` `icon.wxss` -``` -@import "colorui/main.wxss"; -@import "colorui/icon.wxss"; -@import "app.css"; /* 你的项目css */ - .... -``` - -### 使用自定义导航栏 -导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。 - -`App.js` 获得系统信息 -``` - onLaunch: function() { - wx.getSystemInfo({ - success: e => { - this.globalData.StatusBar = e.statusBarHeight; - let custom = wx.getMenuButtonBoundingClientRect(); - this.globalData.Custom = custom; - this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; - } - }) -}, -``` - -`App.json` 配置取消系统导航栏,并全局引入组件 -``` -"window": { - "navigationStyle": "custom" -}, -"usingComponents": { - "cu-custom":"/colorui/components/cu-custom" -} -``` - -`page.wxml` 页面可以直接调用了 -``` - - 返回 - 导航栏 - - -``` -| 参数 | 作用 |类型 | 默认值 | -| -------- | -----: |-----: | :----: | -| bgColor | 背景颜色类名 |String | '' | -| isBack | 是否开启返回 | Boolean | false | -| isCustom | 是否开启左侧胶囊 | Boolean | false | -| bgImage | 背景图片路径 | String | '' | - -| slot块 | 作用 | -| -------- | -----: | -| backText | 返回时的文字 | -| content | 中间区域 | -| right | 右侧区域(小程序端可使用范围很窄！) | - -### 从新项目开始 -下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了 - -## 赞赏 -

- - - diff --git a/Colorui-UniApp/Readme.md b/Colorui-UniApp/Readme.md index 7569db8..7bc510f 100644 --- a/Colorui-UniApp/Readme.md +++ b/Colorui-UniApp/Readme.md @@ -103,6 +103,14 @@ Vue.component('cu-custom',cuCustom) ## 更新日志 + * 2019年4月25日 v2.1.5 + * 优化图片上传 + * 优化一些点击区域过小 + * 优化图标旋转 + * 优化demo显示 + * 优化阴影 + * 修复支付宝小程序编译出错 + * 2019年4月14日 v2.1.4 * 新增多种阴影 * 修复一些var属性的错误 diff --git a/Colorui-UniApp/colorui/icon.css b/Colorui-UniApp/colorui/icon.css index 791d354..e19a7bb 100644 --- a/Colorui-UniApp/colorui/icon.css +++ b/Colorui-UniApp/colorui/icon.css @@ -1,4 +1,4 @@ -@keyframes icon-spin { +@keyframes cuIcon-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); @@ -11,14 +11,14 @@ } .iconfont-spin { - -webkit-animation: icon-spin 2s infinite linear; - animation: icon-spin 2s infinite linear; + -webkit-animation: cuIcon-spin 2s infinite linear; + animation: cuIcon-spin 2s infinite linear; display: inline-block; } .iconfont-pulse { - -webkit-animation: icon-spin 1s infinite steps(8); - animation: icon-spin 1s infinite steps(8); + -webkit-animation: cuIcon-spin 1s infinite steps(8); + animation: cuIcon-spin 1s infinite steps(8); display: inline-block; } diff --git a/Colorui-UniApp/colorui/main.css b/Colorui-UniApp/colorui/main.css index bc7f6d1..041a72f 100644 --- a/Colorui-UniApp/colorui/main.css +++ b/Colorui-UniApp/colorui/main.css @@ -1,7 +1,8 @@ /* - ColorUi for uniApp v2.1.4 | by 文晓港 2019年04月14日04:16:13 - 仅供学习交流，如作它用所承受的法律责任一概与作者无关 - 使用ColorUi开发扩展与插件时，请注明基于ColorUi开发 + ColorUi for uniApp v2.1.5 | by 文晓港 2019年4月25日18:57:19 + 仅供学习交流，如作它用所承受的法律责任一概与作者无关 + + *使用ColorUi开发扩展与插件时，请注明基于ColorUi开发 （QQ交流群：240787041） */ @@ -602,7 +603,7 @@ switch.gray.checked .uni-switch-input, checkbox.gray.checked .uni-checkbox-input, radio.gray.checked .uni-radio-input { background-color: #f0f0f0 !important; - color: var(--) !important; + color: var(--black) !important; } switch.black[checked] .wx-switch-input, @@ -622,7 +623,7 @@ switch.white.checked .uni-switch-input, checkbox.white.checked .uni-checkbox-input, radio.white.checked .uni-radio-input { background-color: var(--white) !important; - color: var(--) !important; + color: var(--black) !important; } /* ================== @@ -741,7 +742,7 @@ radio.white.checked .uni-radio-input { /* -- 阴影 -- */ -.shadow { +.shadow[class*='white'] { --ShadowSize: 0 1upx 6upx; } @@ -1152,7 +1153,7 @@ button.icon.lg { align-items: center; display: flex; font-size: 20upx; - color: var(--); + color: var(--black); text-indent: 10upx; } @@ -1805,7 +1806,7 @@ button.icon.lg { line-height: 64upx; height: 64upx; font-size: 24upx; - color: var(--); + color: var(--black); flex: 1; display: flex; align-items: center; @@ -2216,7 +2217,7 @@ button.icon.lg { .cu-timeline>.cu-item>.content:not([class*="bg-"]) { background-color: var(--ghostWhite); - color: var(--); + color: var(--black); } .cu-timeline>.cu-item>.content+.content { @@ -2269,7 +2270,7 @@ button.icon.lg { .cu-chat .cu-item>.main .content:not([class*="bg-"]) { background-color: var(--white); - color: var(--); + color: var(--black); } .cu-chat .cu-item .date { @@ -2675,7 +2676,11 @@ button.icon.lg { .cu-modal.drawer-modal.show .cu-dialog { transform: translateX(0%); } - +.cu-modal .cu-dialog>.cu-bar:first-child .action{ + min-width: 100rpx; + margin-right: 0; + min-height: 100rpx; +} /* ================== 轮播 ==================== */ @@ -3105,7 +3110,11 @@ scroll-view.cu-steps .cu-item { position: relative; overflow: hidden; } - +.grid.grid-square>view.bg-img image { + width: 100%; + height: 100%; + position: absolute; +} .grid.col-1.grid-square>view { padding-bottom: 100%; height: 0; @@ -3118,36 +3127,31 @@ scroll-view.cu-steps .cu-item { width: calc((100% - 20upx)/2); } -.grid.col-2.grid-square>view:nth-child(2n) { - margin-right: 0; -} - .grid.col-3.grid-square>view { padding-bottom: calc((100% - 40upx)/3); height: 0; width: calc((100% - 40upx)/3); } -.grid.col-3.grid-square>view:nth-child(3n) { - margin-right: 0; -} - .grid.col-4.grid-square>view { padding-bottom: calc((100% - 60upx)/4); height: 0; width: calc((100% - 60upx)/4); } -.grid.col-4.grid-square>view:nth-child(4n) { - margin-right: 0; -} - .grid.col-5.grid-square>view { padding-bottom: calc((100% - 80upx)/5); height: 0; width: calc((100% - 80upx)/5); } +.grid.col-2.grid-square>view:nth-child(2n), +.grid.col-3.grid-square>view:nth-child(3n), +.grid.col-4.grid-square>view:nth-child(4n), +.grid.col-5.grid-square>view:nth-child(5n) { + margin-right: 0; +} + .grid.col-1>view { width: 100%; } @@ -3639,7 +3643,7 @@ scroll-view.cu-steps .cu-item { .bg-gray { background-color: #f0f0f0; - color: var(--); + color: var(--black); } .bg-black { diff --git a/Colorui-UniApp/pages.json b/Colorui-UniApp/pages.json index f482cfd..d2b78e7 100644 --- a/Colorui-UniApp/pages.json +++ b/Colorui-UniApp/pages.json @@ -13,12 +13,6 @@ "navigationBarTitleText": "" } }, - { - "path": "pages/basics/home", - "style": { - "navigationBarTitleText": "" - } - }, { "path": "pages/basics/background", "style": { diff --git a/Colorui-UniApp/pages/basics/button.vue b/Colorui-UniApp/pages/basics/button.vue index 6ed0741..58b4a34 100644 --- a/Colorui-UniApp/pages/basics/button.vue +++ b/Colorui-UniApp/pages/basics/button.vue @@ -61,7 +61,7 @@ - + diff --git a/Colorui-UniApp/pages/basics/design.vue b/Colorui-UniApp/pages/basics/design.vue index 818b01a..870c697 100644 --- a/Colorui-UniApp/pages/basics/design.vue +++ b/Colorui-UniApp/pages/basics/design.vue @@ -6,13 +6,12 @@ - class="cu-btn {{' '}} {{border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color}} - {{round?'round':''}} {{size}} {{shadow?'shadow':''}}" + class="cu-btn {{' '}} {{border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}}" 选择颜色 - + 是否圆角 @@ -65,7 +64,7 @@ - + {{item.title}} @@ -82,7 +81,7 @@ modalName: '', round: false, size: '', - color: '', + color: 'red', shadow: false, border: false, bordersize: '' diff --git a/Colorui-UniApp/pages/basics/home.vue b/Colorui-UniApp/pages/basics/home.vue index 70308a3..89b954d 100644 --- a/Colorui-UniApp/pages/basics/home.vue +++ b/Colorui-UniApp/pages/basics/home.vue @@ -18,6 +18,7 @@