molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-07 14:34:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.3

Browse Source
This commit is contained in:
Weilanwl
2019-04-01 23:03:08 +08:00
parent 5429b98a38
commit 8fd0906450
31 changed files with 115010 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
Colorui-UniApp/App.vue
View File

@@ -13,91 +13,97 @@
};
// #endif
// #ifdef MP
// #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
// #endif
Vue.prototype.ColorList = [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
},
{
title: '明黄',
name: 'yellow',
color: '#fbbd08'
},
{
title: '橄榄',
name: 'olive',
color: '#8dc63f'
},
{
title: '森绿',
name: 'green',
color: '#39b54a'
},
{
title: '天青',
name: 'cyan',
color: '#1cbbb4'
},
{
title: '海蓝',
name: 'blue',
color: '#0081ff'
},
{
title: '姹紫',
name: 'purple',
color: '#6739b6'
},
{
title: '木槿',
name: 'mauve',
color: '#9c26b0'
},
{
title: '桃粉',
name: 'pink',
color: '#e03997'
},
{
title: '棕褐',
name: 'brown',
color: '#a5673f'
},
{
title: '玄灰',
name: 'grey',
color: '#8799a3'
},
{
title: '草灰',
name: 'gray',
color: '#aaaaaa'
},
{
title: '墨黑',
name: 'black',
color: '#333333'
},
{
title: '雅白',
name: 'white',
color: '#ffffff'
},
]
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
Vue.prototype.ColorList = [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
},
{
title: '明黄',
name: 'yellow',
color: '#fbbd08'
},
{
title: '橄榄',
name: 'olive',
color: '#8dc63f'
},
{
title: '森绿',
name: 'green',
color: '#39b54a'
},
{
title: '天青',
name: 'cyan',
color: '#1cbbb4'
},
{
title: '海蓝',
name: 'blue',
color: '#0081ff'
},
{
title: '姹紫',
name: 'purple',
color: '#6739b6'
},
{
title: '木槿',
name: 'mauve',
color: '#9c26b0'
},
{
title: '桃粉',
name: 'pink',
color: '#e03997'
},
{
title: '棕褐',
name: 'brown',
color: '#a5673f'
},
{
title: '玄灰',
name: 'grey',
color: '#8799a3'
},
{
title: '草灰',
name: 'gray',
color: '#aaaaaa'
},
{
title: '墨黑',
name: 'black',
color: '#333333'
},
{
title: '雅白',
name: 'white',
color: '#ffffff'
},
]
},
onShow: function() {
console.log('App Show')

44
Colorui-UniApp/Readme.md
View File

@@ -1,26 +1,33 @@
<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" title="ColorUI简介"></img></p>
<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" alt="ColorUI简介"></img></p>
## 前言
ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。插件市场版本如果和更新日志不一样，请移步Github下载。有组件需求或者Bug提交也可以移步到issues。
## 交流
微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。
## 素材
ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！
[语雀-ColorUI群资源](https://www.yuque.com/colorui)
## 开始使用
下载源码解压，复制根目录的 `/colorui` 文件夹到你的根目录
`App.vue` 引入关键Css `main.css` `icon.css`
```
<style>
@import "colorui/main.css";
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>
```
------
## 使用自定义导航栏
`main.js` 引入 `cu-custom` 组件
```
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
`App.vue` 获得系统信息
```
onLaunch: function() {
@@ -34,7 +41,7 @@ onLaunch: function() {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
@@ -45,12 +52,21 @@ onLaunch: function() {
})
},
```
`pages.json` 配置取消系统导航栏
```
"globalStyle": {
"navigationStyle": "custom"
},
```
复制代码结构可以直接使用，注意全局变量的获取。
使用封装,在`main.js` 引入 `cu-custom` 组件。
```
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
`page.vue` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
@@ -70,19 +86,27 @@ onLaunch: function() {
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
------
## 使用自定义Tabbar
这部分暂时没有封装，思路可以参考下我的源码，原理是一个主页面引入多个页面，在主页面进行切换显示。这样可以解决切换时闪烁的问题。
------
## 更新日志
* 2019年4月01日 v2.1.3
* 优化代码,支持支付宝小程序
* textarea 样式还原
* 2019年3月28日 v2.1.2
* 修复列表组件样式
* 优化主样式代码
* 2019年3月27日 v2.1.1
* 新增多种扩展
* 优化堆叠轮播图

274
Colorui-UniApp/colorui/main.css
View File

@@ -1,11 +1,14 @@
/*
ColorUi for uniApp v2.1.2 | by 文晓港 2019年3月28日23:58:47
ColorUi for uniApp v2.1.3 | by 文晓港 2019年4月1日22:58:47
仅供学习交流，如作它用所承受的法律责任一概与作者无关
使用ColorUi开发扩展与插件时，请注明基于ColorUi开发
（QQ交流群：240787041）
文档：http://www.color-ui.com/
*/
html {
max-width: 750px;
}
/* ==================
初始化
@@ -30,7 +33,19 @@ body {
--grey: #8799a3;
--gray: #aaaaaa;
--black: #333333;
--white: #ffffff;
--white: #ffffff;
--redLight: #fadbd9;
--orangeLight: #fde6d2;
--yellowLight: #fef2ce;
--oliveLight: #e8f4d9;
--greenLight: #d7f0db;
--cyanLight: #d2f1f0;
--blueLight: #cce6ff;
--purpleLight: #e1d7f0;
--mauveLight: #ebd4ef;
--pinkLight: #f9d7ea;
--brownLight: #ede1d9;
--greyLight: #e7ebed;
--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
@@ -119,17 +134,20 @@ switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: var(--white) !important;
color: var(--white) !important;
top: 0%;
left: 0upx;
font-size: 26upx;
line-height: 26px;
width: 26px;
width: 50%;
text-align: center;
pointer-events: none;
transform: scale(0, 0);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
bottom: 0;
height: 26px;
margin: auto;
}
switch::before {
@@ -149,12 +167,13 @@ switch.checked::before {
transform: scale(0, 0);
}
/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: var(--white) !important;
color: var(--white) !important;
top: 50%;
margin-top: -8px;
right: 5px;
@@ -166,6 +185,22 @@ checkbox::before {
z-index: 9;
}
radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
margin: 0;
width: 24px;
height: 24px;
}
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}
/* #endif */
switch[checked]::before {
transform: scale(0, 0);
}
@@ -211,19 +246,7 @@ radio-group {
display: inline-block;
}
radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
margin: 0;
width: 24px;
height: 24px;
}
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}
switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
@@ -261,11 +284,11 @@ radio.radio .uni-radio-input-checked::after {
margin: auto;
border-radius: 200upx;
/* #ifndef MP */
border: 7px solid var(--white) !important;
border: 7px solid var(--white) !important;
/* #endif */
/* #ifdef MP */
border: 8px solid var(--white) !important;
border: 8px solid var(--white) !important;
/* #endif */
}
@@ -424,7 +447,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
border-color: var(--white) !important;
border-color: var(--white) !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
@@ -434,7 +457,7 @@ switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input {
background-color: var(--red) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.orange[checked] .wx-switch-input,
@@ -444,7 +467,7 @@ switch.orange.checked .uni-switch-input,
checkbox.orange.checked .uni-checkbox-input,
radio.orange.checked .uni-radio-input {
background-color: var(--orange) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.yellow[checked] .wx-switch-input,
@@ -464,7 +487,7 @@ switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input {
background-color: var(--olive) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.green[checked] .wx-switch-input,
@@ -480,7 +503,7 @@ checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input {
background-color: var(--green) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.cyan[checked] .wx-switch-input,
@@ -490,7 +513,7 @@ switch.cyan.checked .uni-switch-input,
checkbox.cyan.checked .uni-checkbox-input,
radio.cyan.checked .uni-radio-input {
background-color: var(--cyan) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.blue[checked] .wx-switch-input,
@@ -500,7 +523,7 @@ switch.blue.checked .uni-switch-input,
checkbox.blue.checked .uni-checkbox-input,
radio.blue.checked .uni-radio-input {
background-color: var(--blue) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.purple[checked] .wx-switch-input,
@@ -510,7 +533,7 @@ switch.purple.checked .uni-switch-input,
checkbox.purple.checked .uni-checkbox-input,
radio.purple.checked .uni-radio-input {
background-color: var(--purple) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.mauve[checked] .wx-switch-input,
@@ -520,7 +543,7 @@ switch.mauve.checked .uni-switch-input,
checkbox.mauve.checked .uni-checkbox-input,
radio.mauve.checked .uni-radio-input {
background-color: var(--mauve) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.pink[checked] .wx-switch-input,
@@ -530,7 +553,7 @@ switch.pink.checked .uni-switch-input,
checkbox.pink.checked .uni-checkbox-input,
radio.pink.checked .uni-radio-input {
background-color: var(--pink) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.brown[checked] .wx-switch-input,
@@ -540,7 +563,7 @@ switch.brown.checked .uni-switch-input,
checkbox.brown.checked .uni-checkbox-input,
radio.brown.checked .uni-radio-input {
background-color: var(--brown) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.grey[checked] .wx-switch-input,
@@ -550,7 +573,7 @@ switch.grey.checked .uni-switch-input,
checkbox.grey.checked .uni-checkbox-input,
radio.grey.checked .uni-radio-input {
background-color: var(--grey) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.gray[checked] .wx-switch-input,
@@ -570,7 +593,7 @@ switch.black.checked .uni-switch-input,
checkbox.black.checked .uni-checkbox-input,
radio.black.checked .uni-radio-input {
background-color: var(--black) !important;
color: var(--white) !important;
color: var(--white) !important;
}
switch.white[checked] .wx-switch-input,
@@ -579,7 +602,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
background-color: var(--white) !important;
background-color: var(--white) !important;
color: #666 !important;
}
@@ -758,6 +781,7 @@ radio.white.checked .uni-radio-input {
.cu-btn {
position: relative;
border: 0upx;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -865,7 +889,7 @@ button.icon.lg {
.cu-btn[disabled] {
opacity: 0.6;
color: var(--white);
color: var(--white);
}
/* ==================
@@ -981,7 +1005,7 @@ button.icon.lg {
font-size: 20upx;
padding: 0upx 10upx;
height: 28upx;
color: var(--white);
color: var(--white);
}
.cu-tag.badge:not([class*="bg-"]) {
@@ -1016,7 +1040,7 @@ button.icon.lg {
justify-content: center;
align-items: center;
background-color: #ccc;
color: var(--white);
color: var(--white);
white-space: nowrap;
position: relative;
width: 64upx;
@@ -1101,7 +1125,7 @@ button.icon.lg {
justify-items: flex-end;
justify-content: space-around;
font-size: 20upx;
color: var(--white);
color: var(--white);
transition: width 0.6s ease;
}
@@ -1198,7 +1222,7 @@ button.icon.lg {
margin: auto;
width: 260upx;
height: 260upx;
background-color: var(--white);
background-color: var(--white);
border-radius: 10upx;
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
display: flex;
@@ -1222,7 +1246,7 @@ button.icon.lg {
.cu-load.load-modal::after {
content: "";
position: absolute;
background-color: var(--white);
background-color: var(--white);
border-radius: 50%;
width: 200upx;
height: 200upx;
@@ -1348,7 +1372,7 @@ button.icon.lg {
display: flex;
padding-right: 10upx;
height: 140upx;
background-color: var(--white);
background-color: var(--white);
justify-content: flex-end;
align-items: center
}
@@ -1417,7 +1441,7 @@ button.icon.lg {
display: flex;
padding: 0 30upx;
min-height: 100upx;
background-color: var(--white);
background-color: var(--white);
justify-content: space-between;
align-items: center
}
@@ -1481,7 +1505,7 @@ button.icon.lg {
}
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
border-color: var(--white)
border-color: var(--white)
}
.cu-list.menu>.cu-item .content>view:first-child {
@@ -1579,7 +1603,7 @@ button.icon.lg {
}
.cu-list.grid {
background-color: var(--white);
background-color: var(--white);
text-align: center
}
@@ -1779,6 +1803,7 @@ button.icon.lg {
height: 64upx;
line-height: 64upx;
font-size: 26upx;
background-color: transparent;
}
.cu-bar .search-form [class*="icon"] {
@@ -1958,7 +1983,7 @@ button.icon.lg {
.cu-bar.input {
padding-right: 20upx;
background-color: var(--white);
background-color: var(--white);
}
.cu-bar.input input {
@@ -1997,6 +2022,13 @@ button.icon.lg {
width: calc(100% - 440upx);
}
/* #ifdef MP-ALIPAY */
.cu-custom .cu-bar .action .icon-back {
opacity: 0;
}
/* #endif */
.cu-custom .cu-bar .content image {
height: 60upx;
width: 240upx;
@@ -2004,9 +2036,12 @@ button.icon.lg {
.cu-custom .cu-bar {
min-height: 0px;
/* #ifdef MP */
/* #ifdef MP-WEIXIN */
padding-right: 220upx;
/* #endif */
/* #ifdef MP-ALIPAY */
padding-right: 150upx;
/* #endif */
box-shadow: 0upx 0upx 0upx;
z-index: 9999;
}
@@ -2030,7 +2065,7 @@ button.icon.lg {
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 1upx solid var(--white);
border: 1upx solid var(--white);
opacity: 0.5;
}
@@ -2048,7 +2083,7 @@ button.icon.lg {
pointer-events: none;
box-sizing: border-box;
opacity: 0.6;
background-color: var(--white);
background-color: var(--white);
}
.cu-custom .cu-bar .border-custom text {
@@ -2089,7 +2124,7 @@ button.icon.lg {
.cu-timeline {
display: block;
background-color: var(--white);
background-color: var(--white);
}
.cu-timeline .cu-time {
@@ -2130,7 +2165,7 @@ button.icon.lg {
position: absolute;
top: 36upx;
z-index: 9;
background-color: var(--white);
background-color: var(--white);
width: 50upx;
height: 50upx;
text-align: center;
@@ -2144,7 +2179,7 @@ button.icon.lg {
}
.cu-timeline>.cu-item[class*="icon"]::before {
background-color: var(--white);
background-color: var(--white);
width: 50upx;
height: 50upx;
text-align: center;
@@ -2214,7 +2249,7 @@ button.icon.lg {
}
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
background-color: var(--white);
background-color: var(--white);
color: #666;
}
@@ -2292,7 +2327,7 @@ button.icon.lg {
padding: 8upx 12upx;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6upx;
color: var(--white);
color: var(--white);
max-width: 400upx;
line-height: 1.4;
}
@@ -2308,7 +2343,7 @@ button.icon.lg {
.cu-card>.cu-item {
display: block;
background-color: var(--white);
background-color: var(--white);
overflow: hidden;
border-radius: 10upx;
margin: 30upx;
@@ -2361,7 +2396,7 @@ button.icon.lg {
.cu-card.dynamic>.cu-item {
display: block;
background-color: var(--white);
background-color: var(--white);
overflow: hidden;
}
@@ -2439,7 +2474,7 @@ button.icon.lg {
==================== */
.cu-form-group {
background-color: var(--white);
background-color: var(--white);
padding: 1upx 30upx;
display: flex;
align-items: center;
@@ -2473,13 +2508,6 @@ button.icon.lg {
box-sizing: border-box;
}
.cu-form-group.top .title {
height: 1em;
line-height: 1;
align-self: flex-start;
margin-top: 16px;
}
.cu-form-group textarea {
margin: 32upx 0 30upx;
height: 4.6em;
@@ -2488,28 +2516,12 @@ button.icon.lg {
flex: 1;
font-size: 28upx;
padding: 0;
box-sizing: content-box;
display: inline-block;
vertical-align: top;
}
.cu-form-group textarea .placeholder {
color: transparent;
}
.cu-form-group textarea::after {
content: attr(data-placeholder);
color: gray;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
transition: 0.2s;
opacity: 1;
}
.cu-form-group textarea.value::after {
opacity: 0;
.cu-form-group.align-start .title {
height: 1em;
margin-top: 32upx;
line-height: 1em;
}
.cu-form-group picker {
@@ -2648,33 +2660,53 @@ button.icon.lg {
/* ==================
轮播
==================== */
swiper .a-swiper-dot {
display: inline-block;
width: 16upx;
height: 16upx;
background: rgba(0, 0, 0, .3);
border-radius: 50%;
vertical-align: middle;
}
swiper .wx-swiper-dots,
swiper .a-swiper-dots,
swiper .uni-swiper-dots {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
swiper.square-dot .wx-swiper-dot,
swiper.square-dot .a-swiper-dot,
swiper.square-dot .uni-swiper-dot {
background-color: var(--white);
background-color: var(--white);
opacity: 0.4;
width: 10upx;
height: 10upx;
border-radius: 20upx;
transition: all 0.3s ease-in-out 0s;
margin: 0 8upx !important;
}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
opacity: 1;
width: 30upx;
}
swiper.round-dot .wx-swiper-dot,
swiper.round-dot .a-swiper-dot,
swiper.round-dot .uni-swiper-dot {
width: 10upx;
height: 10upx;
top: -4upx;
transition: all 0.3s ease-in-out 0s;
position: relative;
margin: 4upx 8upx !important;
}
swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
content: "";
position: absolute;
@@ -2685,15 +2717,15 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
right: 0;
bottom: 0;
margin: auto;
background-color: var(--white);
background-color: var(--white);
border-radius: 20upx;
}
swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
width: 18upx;
height: 18upx;
top: 0upx;
}
.screen-swiper {
@@ -2712,7 +2744,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
}
.card-swiper {
height: 420upx;
height: 420upx !important;
}
.card-swiper swiper-item {
@@ -2885,19 +2917,19 @@ scroll-view.cu-steps .cu-item {
.cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40upx);
color: var(--white);
color: var(--white);
}
.cu-steps .cu-item .num::after {
transform: translateY(40upx);
color: var(--white);
color: var(--white);
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645";
font-family: 'cuIcon';
color: var(--white);
color: var(--white);
transform: translateY(0upx);
}
@@ -3513,7 +3545,7 @@ scroll-view.cu-steps .cu-item {
.line-gray::after,
.lines-gray::after {
border-color: var(--grey);
border-color: var(--gray);
}
.line-black::after,
@@ -3523,17 +3555,17 @@ scroll-view.cu-steps .cu-item {
.line-white::after,
.lines-white::after {
border-color: var(--white);
border-color: var(--white);
}
.bg-red {
background-color: var(--red);
color: var(--white);
color: var(--white);
}
.bg-orange {
background-color: var(--orange);
color: var(--white);
color: var(--white);
}
.bg-yellow {
@@ -3543,47 +3575,47 @@ scroll-view.cu-steps .cu-item {
.bg-olive {
background-color: var(--olive);
color: var(--white);
color: var(--white);
}
.bg-green {
background-color: var(--green);
color: var(--white);
color: var(--white);
}
.bg-cyan {
background-color: var(--cyan);
color: var(--white);
color: var(--white);
}
.bg-blue {
background-color: var(--blue);
color: var(--white);
color: var(--white);
}
.bg-purple {
background-color: var(--purple);
color: var(--white);
color: var(--white);
}
.bg-mauve {
background-color: var(--mauve);
color: var(--white);
color: var(--white);
}
.bg-pink {
background-color: var(--pink);
color: var(--white);
color: var(--white);
}
.bg-brown {
background-color: var(--brown);
color: var(--white);
color: var(--white);
}
.bg-grey {
background-color: var(--grey);
color: var(--white);
color: var(--white);
}
.bg-gray {
@@ -3593,22 +3625,22 @@ scroll-view.cu-steps .cu-item {
.bg-black {
background-color: var(--black);
color: var(--white);
color: var(--white);
}
.bg-white {
background-color: var(--white);
background-color: var(--white);
color: #666;
}
.bg-shadeTop {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
color: var(--white);
color: var(--white);
}
.bg-shadeBottom {
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
color: var(--white);
color: var(--white);
}
.bg-red.light {
@@ -3671,44 +3703,34 @@ scroll-view.cu-steps .cu-item {
background-color: #e7ebed;
}
.bg-gray.light {
color: #666;
background-color: #fadbd9;
}
.bg-gray.light {
color: #888;
background-color: #f1f1f1;
}
.bg-gradual-red {
background-image: var(--gradualRed);
color: var(--white);
color: var(--white);
}
.bg-gradual-orange {
background-image: var(--gradualOrange);
color: var(--white);
color: var(--white);
}
.bg-gradual-green {
background-image: var(--gradualGreen);
color: var(--white);
color: var(--white);
}
.bg-gradual-purple {
background-image: var(--gradualPurple);
color: var(--white);
color: var(--white);
}
.bg-gradual-pink {
background-image: var(--gradualPink);
color: var(--white);
color: var(--white);
}
.bg-gradual-blue {
background-image: var(--gradualBlue);
color: var(--white);
color: var(--white);
}
.shadow[class*="-red"] {
@@ -3981,7 +4003,7 @@ scroll-view.cu-steps .cu-item {
.text-white,
.line-white,
.lines-white {
color: var(--white);
color: var(--white);
}
.text-shadow {

5
Colorui-UniApp/manifest.json
View File

@@ -3,7 +3,7 @@
"appid" : "__UNI__239DC72",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"versionCode" : 213,
"transformPx" : false,
"app-plus" : {
/* 5+App特有相关 */
@@ -50,7 +50,8 @@
/* 小程序特有相关 */
"appid" : "",
"setting" : {
"urlCheck" : true
"urlCheck" : false,
"es6" : true
}
},
"h5" : {

15
Colorui-UniApp/node_modules/.bin/prettier generated vendored Normal file
View File

@@ -0,0 +1,15 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../prettier/bin-prettier.js" "$@"
ret=$?
else
node "$basedir/../prettier/bin-prettier.js" "$@"
ret=$?
fi
exit $ret

7
Colorui-UniApp/node_modules/.bin/prettier.cmd generated vendored Normal file
View File

@@ -0,0 +1,7 @@
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\prettier\bin-prettier.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\prettier\bin-prettier.js" %*
)

96
Colorui-UniApp/node_modules/prettier/README.md generated vendored Normal file
View File

@@ -0,0 +1,96 @@
![Prettier Banner](https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-banner-light.png)
<h2 align="center">Opinionated Code Formatter</h2>
<p align="center">
<em>
JavaScript
· Flow
· TypeScript
· CSS
· SCSS
· Less
· JSX
· Vue
· GraphQL
· JSON
· Markdown
· <a href="https://prettier.io/docs/en/plugins.html">
Your favorite language?
</a>
</em>
</p>
<p align="center">
<a href="https://gitter.im/jlongster/prettier">
<img alt="Gitter" src="https://img.shields.io/gitter/room/jlongster/prettier.svg?style=flat-square">
</a>
<a href="https://travis-ci.org/prettier/prettier">
<img alt="Travis" src="https://img.shields.io/travis/prettier/prettier/master.svg?style=flat-square">
</a>
<a href="https://codecov.io/gh/prettier/prettier">
<img alt="Codecov" src="https://img.shields.io/codecov/c/github/prettier/prettier.svg?style=flat-square">
</a>
<a href="https://www.npmjs.com/package/prettier">
<img alt="npm version" src="https://img.shields.io/npm/v/prettier.svg?style=flat-square">
</a>
<a href="https://www.npmjs.com/package/prettier">
<img alt="monthly downloads" src="https://img.shields.io/npm/dm/prettier.svg?style=flat-square">
</a>
<a href="#badge">
<img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
</a>
<a href="https://twitter.com/PrettierCode">
<img alt="Follow+Prettier+on+Twitter" src="https://img.shields.io/twitter/follow/prettiercode.svg?label=follow+prettier&style=flat-square">
</a>
</p>
## Intro
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
### Input
<!-- prettier-ignore -->
```js
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
```
### Output
```js
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
```
Prettier can be run [in your editor](http://prettier.io/docs/en/editors.html) on-save, in a [pre-commit hook](https://prettier.io/docs/en/precommit.html), or in [CI environments](https://prettier.io/docs/en/cli.html#list-different) to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!
---
**[Documentation](https://prettier.io/docs/en/)**
<!-- prettier-ignore -->
[Install](https://prettier.io/docs/en/install.html) ·
[Options](https://prettier.io/docs/en/options.html) ·
[CLI](https://prettier.io/docs/en/cli.html) ·
[API](https://prettier.io/docs/en/api.html)
**[Playground](https://prettier.io/playground/)**
---
## Badge
Show the world you're using _Prettier_ → [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
```md
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
```
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).

36684
Colorui-UniApp/node_modules/prettier/bin-prettier.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

29708
Colorui-UniApp/node_modules/prettier/index.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

86
Colorui-UniApp/node_modules/prettier/package.json generated vendored Normal file
View File

@@ -0,0 +1,86 @@
{
"_from": "prettier@~1.12.0",
"_id": "prettier@1.12.1",
"_inBundle": false,
"_integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU=",
"_location": "/prettier",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "prettier@~1.12.0",
"name": "prettier",
"escapedName": "prettier",
"rawSpec": "~1.12.0",
"saveSpec": null,
"fetchSpec": "~1.12.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.12.1.tgz",
"_shasum": "c1ad20e803e7749faf905a409d2367e06bbe7325",
"_spec": "prettier@~1.12.0",
"_where": "E:\\weilanwlSVN\\colorui\\github\\ColorUI\\Colorui-UniApp",
"author": {
"name": "James Long"
},
"bin": {
"prettier": "./bin-prettier.js"
},
"bugs": {
"url": "https://github.com/prettier/prettier/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Prettier is an opinionated code formatter",
"devDependencies": {
"babel-cli": "6.24.1",
"babel-preset-es2015": "6.24.1",
"codecov": "2.2.0",
"cross-env": "5.0.5",
"eslint": "4.18.2",
"eslint-config-prettier": "2.9.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-prettier": "2.6.0",
"eslint-plugin-react": "7.7.0",
"jest": "21.1.0",
"mkdirp": "0.5.1",
"prettier": "1.12.0",
"prettylint": "1.0.0",
"rimraf": "2.6.2",
"rollup": "0.47.6",
"rollup-plugin-commonjs": "8.2.6",
"rollup-plugin-json": "2.1.1",
"rollup-plugin-node-builtins": "2.0.0",
"rollup-plugin-node-globals": "1.1.0",
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-replace": "1.2.1",
"shelljs": "0.8.1",
"snapshot-diff": "0.2.2",
"strip-ansi": "4.0.0",
"tempy": "0.2.1",
"uglify-es": "3.3.9",
"webpack": "2.6.1"
},
"engines": {
"node": ">=4"
},
"files": [
"*.js"
],
"homepage": "https://prettier.io",
"license": "MIT",
"main": "./index.js",
"name": "prettier",
"repository": {
"type": "git",
"url": "git+https://github.com/prettier/prettier.git"
},
"scripts": {
"prepublishOnly": "node -e \"assert.equal(require('.').version, require('..').version)\""
},
"version": "1.12.1"
}

1
Colorui-UniApp/node_modules/prettier/parser-babylon.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-flow.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1946
Colorui-UniApp/node_modules/prettier/parser-glimmer.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-graphql.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-markdown.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-parse5.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

40612
Colorui-UniApp/node_modules/prettier/parser-postcss.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-typescript.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
Colorui-UniApp/node_modules/prettier/parser-vue.js generated vendored Normal file
View File

@@ -0,0 +1 @@
"use strict";function makeMap(e,t){const n=Object.create(null),a=e.split(",");for(let e=0;e<a.length;e++)n[a[e]]=!0;return t?e=>n[e.toLowerCase()]:e=>n[e]}const no=()=>!1,isNonPhrasingTag=makeMap("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),attribute=/^\s*([^\s"'<>/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,ncname="[a-zA-Z_][\\w\\-\\.]*",qnameCapture=`((?:${ncname}\\:)?${ncname})`,startTagOpen=new RegExp(`^<${qnameCapture}`),startTagClose=/^\s*(\/?)>/,endTag=new RegExp(`^<\\/${qnameCapture}[^>]*>`),doctype=/^<!DOCTYPE [^>]+>/i,comment=/^<!--/,conditionalComment=/^<!\[/;let IS_REGEX_CAPTURING_BROKEN=!1;"x".replace(/x(.)?/g,(e,t)=>{IS_REGEX_CAPTURING_BROKEN=""===t});const isPlainTextElement=makeMap("script,style,textarea",!0),reCache={},decodingMap={"&lt;":"<","&gt;":">","&quot;":'"',"&amp;":"&","&#10;":"\n","&#9;":"\t"},encodedAttr=/&(?:lt|gt|quot|amp);/g,encodedAttrWithNewLines=/&(?:lt|gt|quot|amp|#10|#9);/g,isIgnoreNewlineTag=makeMap("pre,textarea",!0),shouldIgnoreFirstNewline=(e,t)=>e&&isIgnoreNewlineTag(e)&&"\n"===t[0];function decodeAttr(e,t){const n=t?encodedAttrWithNewLines:encodedAttr;return e.replace(n,e=>decodingMap[e])}function parseHTML(e,t){const n=[],a=t.expectHTML,r=t.isUnaryTag||no,o=t.canBeLeftOpenTag||no;let s,c,i=0;for(;e;){if(s=e,c&&isPlainTextElement(c)){let n=0;const a=c.toLowerCase(),r=reCache[a]||(reCache[a]=new RegExp("([\\s\\S]*?)(</"+a+"[^>]*>)","i")),o=e.replace(r,(e,r,o)=>(n=o.length,isPlainTextElement(a)||"noscript"===a||(r=r.replace(/<!--([\s\S]*?)-->/g,"$1").replace(/<!\[CDATA\[([\s\S]*?)]]>/g,"$1")),shouldIgnoreFirstNewline(a,r)&&(r=r.slice(1)),t.chars&&t.chars(r),""));i+=e.length-o.length,e=o,h(a,i-n,i)}else{let n,a,r,o=e.indexOf("<");if(0===o){if(comment.test(e)){const n=e.indexOf("--\x3e");if(n>=0){t.shouldKeepComment&&t.comment(e.substring(4,n)),l(n+3);continue}}if(conditionalComment.test(e)){const t=e.indexOf("]>");if(t>=0){l(t+2);continue}}const n=e.match(doctype);if(n){l(n[0].length);continue}const a=e.match(endTag);if(a){const e=i;l(a[0].length),h(a[1],e,i);continue}const r=d();if(r){g(r),shouldIgnoreFirstNewline(c,e)&&l(1);continue}}if(o>=0){for(a=e.slice(o);!(endTag.test(a)||startTagOpen.test(a)||comment.test(a)||conditionalComment.test(a)||(r=a.indexOf("<",1))<0);)o+=r,a=e.slice(o);n=e.substring(0,o),l(o)}o<0&&(n=e,e=""),t.chars&&n&&t.chars(n)}if(e===s){t.chars&&t.chars(e),"production"!==process.env.NODE_ENV&&!n.length&&t.warn&&t.warn(`Mal-formatted tag at end of template: "${e}"`);break}}function l(t){i+=t,e=e.substring(t)}function d(){const t=e.match(startTagOpen);if(t){const n={tagName:t[1],attrs:[],start:i};let a,r;for(l(t[0].length);!(a=e.match(startTagClose))&&(r=e.match(attribute));)l(r[0].length),n.attrs.push(r);if(a)return n.unarySlash=a[1],l(a[0].length),n.end=i,n}}function g(e){const s=e.tagName,i=e.unarySlash;a&&("p"===c&&isNonPhrasingTag(s)&&h(c),o(s)&&c===s&&h(s));const l=r(s)||!!i,d=e.attrs.length,g=new Array(d);for(let n=0;n<d;n++){const a=e.attrs[n];IS_REGEX_CAPTURING_BROKEN&&-1===a[0].indexOf('""')&&(""===a[3]&&delete a[3],""===a[4]&&delete a[4],""===a[5]&&delete a[5]);const r=a[3]||a[4]||a[5]||"",o="a"===s&&"href"===a[1]?t.shouldDecodeNewlinesForHref:t.shouldDecodeNewlines;g[n]={name:a[1],value:decodeAttr(r,o)}}l||(n.push({tag:s,lowerCasedTag:s.toLowerCase(),attrs:g}),c=s),t.start&&t.start(s,g,l,e.start,e.end)}function h(e,a,r){let o,s;if(null==a&&(a=i),null==r&&(r=i),e&&(s=e.toLowerCase()),e)for(o=n.length-1;o>=0&&n[o].lowerCasedTag!==s;o--);else o=0;if(o>=0){for(let s=n.length-1;s>=o;s--)"production"!==process.env.NODE_ENV&&(s>o||!e)&&t.warn&&t.warn(`tag <${n[s].tag}> has no matching end tag.`),t.end&&t.end(n[s].tag,a,r);n.length=o,c=o&&n[o-1].tag}else"br"===s?t.start&&t.start(e,[],!0,a,r):"p"===s&&(t.start&&t.start(e,[],!1,a,r),t.end&&t.end(e,a,r))}h()}function parse(e){const t={tag:"root",attrs:[],unary:!1,start:0,contentStart:0,contentEnd:e.length,end:e.length,children:[],comments:[]},n=[t];let a=t;return parseHTML(e,{start:function(e,t,r,o,s){const c={tag:e,attrs:t,unary:r,start:o,children:[]};a.children.push(c),r?c.end=s:(c.contentStart=s,n.push(c),a=c)},end:function(e,t,r){n.pop(),a.contentEnd=t,a.end=r,a=n[n.length-1]}}),t}var parserVue=parse;module.exports=parserVue;

5495
Colorui-UniApp/node_modules/prettier/third-party.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
Colorui-UniApp/package-lock.json generated Normal file
View File

@@ -0,0 +1,11 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"prettier": {
"version": "1.12.1",
"resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.12.1.tgz",
"integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU="
}
}
}

78
Colorui-UniApp/pages.json
View File

@@ -4,178 +4,166 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页面"
}
},
{
"path": "pages/basics/home",
"style": {
"navigationBarTitleText": "基础元素"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/layout",
"style": {
"navigationBarTitleText": "布局"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/background",
"style": {
"navigationBarTitleText": "背景"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/text",
"style": {
"navigationBarTitleText": "文本"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/icon",
"style": {
"navigationBarTitleText": "图标"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/button",
"style": {
"navigationBarTitleText": "按钮"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/design",
"style": {
"navigationBarTitleText": "按钮/设计"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/tag",
"style": {
"navigationBarTitleText": "标签"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/avatar",
"style": {
"navigationBarTitleText": "头像"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/progress",
"style": {
"navigationBarTitleText": "进度条"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/shadow",
"style": {
"navigationBarTitleText": "边框阴影"
"navigationBarTitleText": ""
}
},
{
"path": "pages/basics/loading",
"style": {
"navigationBarTitleText": "加载"
}
},
{
"path": "pages/component/home",
"style": {
"navigationBarTitleText": "交互组件"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/bar",
"style": {
"navigationBarTitleText": "操作条"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/nav",
"style": {
"navigationBarTitleText": "导航栏"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/list",
"style": {
"navigationBarTitleText": "列表"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/card",
"style": {
"navigationBarTitleText": "卡片"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/form",
"style": {
"navigationBarTitleText": "表单"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/timeline",
"style": {
"navigationBarTitleText": "时间轴"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/chat",
"style": {
"navigationBarTitleText": "聊天"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/swiper",
"style": {
"navigationBarTitleText": "轮播"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/modal",
"style": {
"navigationBarTitleText": "模态框"
"navigationBarTitleText": ""
}
},
{
"path": "pages/component/steps",
"style": {
"navigationBarTitleText": "步骤条"
}
}, {
"path": "pages/plugin/home",
"style": {
"navigationBarTitleText": "插件扩展"
"navigationBarTitleText": ""
}
}, {
"path": "pages/plugin/indexes",
"style": {
"navigationBarTitleText": "索引列表"
"navigationBarTitleText": ""
}
}, {
"path": "pages/plugin/animation",
"style": {
"navigationBarTitleText": "微动画"
"navigationBarTitleText": ""
}
}, {
"path": "pages/plugin/drawer",
"style": {
"navigationBarTitleText": "全屏抽屉"
"navigationBarTitleText": ""
}
}, {
"path": "pages/plugin/verticalnav",
"style": {
"navigationBarTitleText": "垂直导航"
"navigationBarTitleText": ""
}
}
],
"globalStyle": {
"navigationBarBackgroundColor": "#39b54a",
"mp-alipay": {
/* 支付宝小程序特有相关 */
"transparentTitle": "always",
"allowsBounceVertical": "NO"
},
"navigationBarBackgroundColor": "#0081ff",
"navigationBarTitleText": "ColorUi for UniApp",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"usingComponts":true
"usingComponts": true
}

9
Colorui-UniApp/pages/basics/background.vue
View File

@@ -23,7 +23,7 @@
</view>
</view>
<view class="grid col-3 bg-white padding-sm">
<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v:if="index<12">
<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
<view class="padding radius text-center light" :class="'bg-' + item.name">
<view class="text-lg">{{item.title}}</view>
<view class="margin-top-sm text-Abc">{{item.name}}</view>
@@ -88,8 +88,7 @@
</view>
</view>
</view>
<!-- #ifdef MP -->
<view class="cu-bar bg-white margin-top">
<!-- <view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-blue"></text>视频背景
</view>
@@ -105,8 +104,8 @@
我必须连同希望一起毁坏……
</cover-view>
</cover-view>
</view>
<!-- #endif -->
</view> -->
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-blue"></text>透明背景(文字层)

4
Colorui-UniApp/pages/basics/button.vue
View File

@@ -35,7 +35,7 @@
</view>
<view class="action">
<text class="text-df margin-right-sm">阴影</text>
<switch @change="SetShadow" :class="shadow?'checked':''"></switch>
<switch @change="SetShadow" :class="shadow?'checked':''" color="#39B54A"></switch>
</view>
</view>
<view class="grid col-5 padding-sm">
@@ -93,7 +93,7 @@
<text class="icon-upload"></text> 图标</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
</view>
</view>
</template>

2
Colorui-UniApp/pages/basics/home.vue
View File

@@ -1,4 +1,4 @@
<template>
<template name="basics">
<view>
<scroll-view scroll-y class="page">
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"

35
Colorui-UniApp/pages/component/form.vue
View File

@@ -1,6 +1,9 @@
<template>
<view>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">表单</block></cu-custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">表单</block>
</cu-custom>
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
@@ -44,6 +47,7 @@
</view>
</picker>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">多列选择</view>
<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
@@ -52,6 +56,7 @@
</view>
</picker>
</view>
<!-- #endif -->
<view class="cu-form-group">
<view class="title">时间选择</view>
<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
@@ -68,7 +73,7 @@
</view>
</picker>
</view>
<!-- #ifndef H5 || APP-PLUS -->
<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">地址选择</view>
<picker mode="region" @change="RegionChange" :value="region">
@@ -84,21 +89,30 @@
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<!-- #ifdef MP-ALIPAY -->
<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false" color="#e54d42"></switch>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
<!-- #endif -->
</view>
<view class="cu-form-group">
<view class="title">定义图标</view>
<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">方形开关</view>
<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
</view>
<!-- #endif -->
<radio-group class="block" @change="RadioChange">
<view class="cu-form-group margin-top">
<view class="title">单选操作(radio)</view>
<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">定义样式</view>
<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
@@ -110,12 +124,14 @@
<radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
</view>
</view>
<!-- #endif -->
</radio-group>
<checkbox-group class="block" @change="CheckboxChange">
<view class="cu-form-group margin-top">
<view class="title">复选选操作(checkbox)</view>
<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">定义形状</view>
<checkbox class='round' :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox>
@@ -125,6 +141,7 @@
<checkbox class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
value="C"></checkbox>
</view>
<!-- #endif -->
</checkbox-group>
<view class="cu-bar bg-white margin-top">
<view class="action">
@@ -149,13 +166,11 @@
</view>
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group margin-top">
<textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class="placeholder"
:class="textareaAValue?'value':''" @input="textareaAInput"></textarea>
</view>
<view class="cu-form-group top">
<view class="title">点文本框</view>
<textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class="placeholder"
:class="textareaBValue?'value':''" @input="textareaBInput"></textarea>
<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">文本框</view>
<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
</view>
</form>
</view>
@@ -233,7 +248,7 @@
checked: false
}],
imgList: [],
modalName:null,
modalName: null,
textareaAValue: '',
textareaBValue: ''
};

2
Colorui-UniApp/pages/component/home.vue
View File

@@ -1,4 +1,4 @@
<template>
<template name="components">
<view>
<scroll-view scroll-y class="page">
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>

10
Colorui-UniApp/pages/component/swiper.vue
View File

@@ -18,6 +18,7 @@
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</swiper-item>
</swiper>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 卡片式轮播
@@ -46,6 +47,7 @@
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
@@ -60,16 +62,8 @@
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
// #ifdef MP
type: 'video',
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
// #endif
// #ifndef MP
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
// #endif
}, {
id: 2,
type: 'image',

2
Colorui-UniApp/pages/plugin/home.vue
View File

@@ -3,7 +3,7 @@
<scroll-view scroll-y class="page">
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
<block slot="content">
<image src="/static/cjkz.png" mode="widthFix"></image>
<image src="/static/cjkz.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
</block>
</cu-custom>
<view class="cu-card">

2
Colorui-UniApp/pages/plugin/indexes.vue
View File

@@ -13,7 +13,7 @@
</view>
</view>
<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
:scroll-with-animation="true" :enable-back-to-top="true" @scroll="scroll">
:scroll-with-animation="true" :enable-back-to-top="true">
<block v-for="(item,index) in list" :key="index">
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
<view class="padding">{{item.name}}</view>

4
Colorui-UniApp/pages/plugin/verticalnav.vue
View File

@@ -146,6 +146,9 @@
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
VerticalMain(e) {
// #ifdef MP-ALIPAY
return false //支付宝小程序暂时不支持双向联动
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
@@ -219,5 +222,6 @@
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>