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

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:54:51 +08:00
parent d4c5eec751
commit 2e6fa65afa
16 changed files with 403 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Colorui-UniApp/Readme.md
View File

@@ -12,7 +12,6 @@
.... ....
</style> </style>
``` ```
#### 元素
------ ------
@@ -45,7 +44,12 @@ onLaunch: function() {
} }
}) })
}, },
```
`pages.json` 配置取消系统导航栏
```
"globalStyle": {
"navigationStyle": "custom"
},
``` ```
`page.vue` 页面可以直接调用了 `page.vue` 页面可以直接调用了
``` ```
@@ -74,11 +78,17 @@ onLaunch: function() {
------ ------
## 更新日志 ## 更新日志
* 2019年3月28日 v2.1.2
* 修复列表组件样式
* 优化主样式代码
* 2019年3月27日 v2.1.1 * 2019年3月27日 v2.1.1
* 新增多种扩展 * 新增多种扩展
* 优化堆叠轮播图 * 优化堆叠轮播图
* 优化消息列表 * 优化消息列表
* 优化导航栏的封装 * 优化导航栏的封装
* 修复卡片评论错位(3月27日16:32:17)
* 2019年3月25日 v2.1.0 * 2019年3月25日 v2.1.0
* 完成元素，组件移植 * 完成元素，组件移植

4
Colorui-UniApp/colorui/components/cu-custom.vue
View File

@@ -2,8 +2,8 @@
<view> <view>
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]"> <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"> <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
<view class='action' @tap="BackPage" v-if="isBack"> <view class="action" @tap="BackPage" v-if="isBack">
<text class='icon-back'></text> <text class="icon-back"></text>
<slot name="backText"></slot> <slot name="backText"></slot>
</view> </view>
<view class="content" :style="[{top:StatusBar + 'px'}]"> <view class="content" :style="[{top:StatusBar + 'px'}]">

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

@@ -1,5 +1,5 @@
/* /*
ColorUi for uniApp v2.1.0 | by 文晓港 2019年3月24日18:23:51 ColorUi for uniApp v2.1.2 | by 文晓港 2019年3月27日18:23:51
仅供学习交流，如作它用所承受的法律责任一概与作者无关 仅供学习交流，如作它用所承受的法律责任一概与作者无关
使用ColorUi开发扩展与插件时，请注明基于ColorUi开发 使用ColorUi开发扩展与插件时，请注明基于ColorUi开发
@@ -13,7 +13,7 @@
body { body {
background-color: #f1f1f1; background-color: #f1f1f1;
font-size: 28upx; font-size: 28upx;
color: 333; color: #333;
font-family: Helvetica Neue, Helvetica, sans-serif; font-family: Helvetica Neue, Helvetica, sans-serif;
/* Color 可以自定义相关配色 */ /* Color 可以自定义相关配色 */
--red: #e54d42; --red: #e54d42;
@@ -28,9 +28,9 @@ body {
--pink: #e03997; --pink: #e03997;
--brown: #a5673f; --brown: #a5673f;
--grey: #8799a3; --grey: #8799a3;
--gray: #aaa; --gray: #aaaaaa;
--black: #333; --black: #333333;
--white: #fff; --white: #ffffff;
--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c); --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24); --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f); --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
@@ -119,7 +119,7 @@ switch::before {
font-family: "cuIcon"; font-family: "cuIcon";
content: "\e645"; content: "\e645";
position: absolute; position: absolute;
color: #fff !important; color: var(--white) !important;
top: 0%; top: 0%;
left: 0upx; left: 0upx;
font-size: 26upx; font-size: 26upx;
@@ -154,7 +154,7 @@ checkbox::before {
font-family: "cuIcon"; font-family: "cuIcon";
content: "\e645"; content: "\e645";
position: absolute; position: absolute;
color: #fff !important; color: var(--white) !important;
top: 50%; top: 50%;
margin-top: -8px; margin-top: -8px;
right: 5px; right: 5px;
@@ -261,11 +261,11 @@ radio.radio .uni-radio-input-checked::after {
margin: auto; margin: auto;
border-radius: 200upx; border-radius: 200upx;
/* #ifndef MP */ /* #ifndef MP */
border: 7px solid #fff !important; border: 7px solid var(--white) !important;
/* #endif */ /* #endif */
/* #ifdef MP */ /* #ifdef MP */
border: 8px solid #fff !important; border: 8px solid var(--white) !important;
/* #endif */ /* #endif */
} }
@@ -424,7 +424,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input, switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input, checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input { radio.white.checked .uni-radio-input {
border-color: #fff !important; border-color: var(--white) !important;
} }
switch.red[checked] .wx-switch-input.wx-switch-input-checked, switch.red[checked] .wx-switch-input.wx-switch-input-checked,
@@ -434,7 +434,7 @@ switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input, checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input { radio.red.checked .uni-radio-input {
background-color: var(--red) !important; background-color: var(--red) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.orange[checked] .wx-switch-input, switch.orange[checked] .wx-switch-input,
@@ -444,7 +444,7 @@ switch.orange.checked .uni-switch-input,
checkbox.orange.checked .uni-checkbox-input, checkbox.orange.checked .uni-checkbox-input,
radio.orange.checked .uni-radio-input { radio.orange.checked .uni-radio-input {
background-color: var(--orange) !important; background-color: var(--orange) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.yellow[checked] .wx-switch-input, switch.yellow[checked] .wx-switch-input,
@@ -464,7 +464,7 @@ switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input, checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input { radio.olive.checked .uni-radio-input {
background-color: var(--olive) !important; background-color: var(--olive) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.green[checked] .wx-switch-input, switch.green[checked] .wx-switch-input,
@@ -480,7 +480,7 @@ checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input, radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input { radio.checked .uni-radio-input {
background-color: var(--green) !important; background-color: var(--green) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.cyan[checked] .wx-switch-input, switch.cyan[checked] .wx-switch-input,
@@ -490,7 +490,7 @@ switch.cyan.checked .uni-switch-input,
checkbox.cyan.checked .uni-checkbox-input, checkbox.cyan.checked .uni-checkbox-input,
radio.cyan.checked .uni-radio-input { radio.cyan.checked .uni-radio-input {
background-color: var(--cyan) !important; background-color: var(--cyan) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.blue[checked] .wx-switch-input, switch.blue[checked] .wx-switch-input,
@@ -500,7 +500,7 @@ switch.blue.checked .uni-switch-input,
checkbox.blue.checked .uni-checkbox-input, checkbox.blue.checked .uni-checkbox-input,
radio.blue.checked .uni-radio-input { radio.blue.checked .uni-radio-input {
background-color: var(--blue) !important; background-color: var(--blue) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.purple[checked] .wx-switch-input, switch.purple[checked] .wx-switch-input,
@@ -510,7 +510,7 @@ switch.purple.checked .uni-switch-input,
checkbox.purple.checked .uni-checkbox-input, checkbox.purple.checked .uni-checkbox-input,
radio.purple.checked .uni-radio-input { radio.purple.checked .uni-radio-input {
background-color: var(--purple) !important; background-color: var(--purple) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.mauve[checked] .wx-switch-input, switch.mauve[checked] .wx-switch-input,
@@ -520,7 +520,7 @@ switch.mauve.checked .uni-switch-input,
checkbox.mauve.checked .uni-checkbox-input, checkbox.mauve.checked .uni-checkbox-input,
radio.mauve.checked .uni-radio-input { radio.mauve.checked .uni-radio-input {
background-color: var(--mauve) !important; background-color: var(--mauve) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.pink[checked] .wx-switch-input, switch.pink[checked] .wx-switch-input,
@@ -530,7 +530,7 @@ switch.pink.checked .uni-switch-input,
checkbox.pink.checked .uni-checkbox-input, checkbox.pink.checked .uni-checkbox-input,
radio.pink.checked .uni-radio-input { radio.pink.checked .uni-radio-input {
background-color: var(--pink) !important; background-color: var(--pink) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.brown[checked] .wx-switch-input, switch.brown[checked] .wx-switch-input,
@@ -540,7 +540,7 @@ switch.brown.checked .uni-switch-input,
checkbox.brown.checked .uni-checkbox-input, checkbox.brown.checked .uni-checkbox-input,
radio.brown.checked .uni-radio-input { radio.brown.checked .uni-radio-input {
background-color: var(--brown) !important; background-color: var(--brown) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.grey[checked] .wx-switch-input, switch.grey[checked] .wx-switch-input,
@@ -550,7 +550,7 @@ switch.grey.checked .uni-switch-input,
checkbox.grey.checked .uni-checkbox-input, checkbox.grey.checked .uni-checkbox-input,
radio.grey.checked .uni-radio-input { radio.grey.checked .uni-radio-input {
background-color: var(--grey) !important; background-color: var(--grey) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.gray[checked] .wx-switch-input, switch.gray[checked] .wx-switch-input,
@@ -570,7 +570,7 @@ switch.black.checked .uni-switch-input,
checkbox.black.checked .uni-checkbox-input, checkbox.black.checked .uni-checkbox-input,
radio.black.checked .uni-radio-input { radio.black.checked .uni-radio-input {
background-color: var(--black) !important; background-color: var(--black) !important;
color: #fff !important; color: var(--white) !important;
} }
switch.white[checked] .wx-switch-input, switch.white[checked] .wx-switch-input,
@@ -579,7 +579,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input, switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input, checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input { radio.white.checked .uni-radio-input {
background-color: #fff !important; background-color: var(--white) !important;
color: #666 !important; color: #666 !important;
} }
@@ -865,7 +865,7 @@ button.icon.lg {
.cu-btn[disabled] { .cu-btn[disabled] {
opacity: 0.6; opacity: 0.6;
color: #fff; color: var(--white);
} }
/* ================== /* ==================
@@ -981,7 +981,7 @@ button.icon.lg {
font-size: 20upx; font-size: 20upx;
padding: 0upx 10upx; padding: 0upx 10upx;
height: 28upx; height: 28upx;
color: #fff; color: var(--white);
} }
.cu-tag.badge:not([class*="bg-"]) { .cu-tag.badge:not([class*="bg-"]) {
@@ -1016,7 +1016,7 @@ button.icon.lg {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #ccc; background-color: #ccc;
color: #fff; color: var(--white);
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
width: 64upx; width: 64upx;
@@ -1101,7 +1101,7 @@ button.icon.lg {
justify-items: flex-end; justify-items: flex-end;
justify-content: space-around; justify-content: space-around;
font-size: 20upx; font-size: 20upx;
color: #fff; color: var(--white);
transition: width 0.6s ease; transition: width 0.6s ease;
} }
@@ -1198,7 +1198,7 @@ button.icon.lg {
margin: auto; margin: auto;
width: 260upx; width: 260upx;
height: 260upx; height: 260upx;
background-color: #fff; background-color: var(--white);
border-radius: 10upx; border-radius: 10upx;
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5); box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
display: flex; display: flex;
@@ -1222,7 +1222,7 @@ button.icon.lg {
.cu-load.load-modal::after { .cu-load.load-modal::after {
content: ""; content: "";
position: absolute; position: absolute;
background-color: #fff; background-color: var(--white);
border-radius: 50%; border-radius: 50%;
width: 200upx; width: 200upx;
height: 200upx; height: 200upx;
@@ -1339,12 +1339,16 @@ button.icon.lg {
align-items: center align-items: center
} }
.cu-list.menu-avatar {
overflow: hidden;
}
.cu-list.menu-avatar>.cu-item { .cu-list.menu-avatar>.cu-item {
position: relative; position: relative;
display: flex; display: flex;
padding-right: 30upx; padding-right: 10upx;
height: 140upx; height: 140upx;
background-color: #fff; background-color: var(--white);
justify-content: flex-end; justify-content: flex-end;
align-items: center align-items: center
} }
@@ -1365,6 +1369,10 @@ button.icon.lg {
line-height: 1.6em; line-height: 1.6em;
} }
.cu-list.menu-avatar>.cu-item .content.flex-sub {
width: calc(100% - 96upx - 60upx - 20upx);
}
.cu-list.menu-avatar>.cu-item .content>view:first-child { .cu-list.menu-avatar>.cu-item .content>view:first-child {
font-size: 30upx; font-size: 30upx;
display: flex; display: flex;
@@ -1388,16 +1396,15 @@ button.icon.lg {
margin-top: 10upx margin-top: 10upx
} }
.cu-list.menu-avatar.comment>.cu-item .content{ .cu-list.menu-avatar.comment>.cu-item .content {
position: relative; position: relative;
left: 0; left: 0;
width: auto; width: auto;
flex: 1; flex: 1;
} }
.cu-list.menu-avatar.comment>.cu-item { .cu-list.menu-avatar.comment>.cu-item {
padding-top: 30upx; padding: 30upx 30upx 30upx 120upx;
padding-bottom: 30upx;
padding-left: 120upx;
height: auto height: auto
} }
@@ -1410,7 +1417,7 @@ button.icon.lg {
display: flex; display: flex;
padding: 0 30upx; padding: 0 30upx;
min-height: 100upx; min-height: 100upx;
background-color: #fff; background-color: var(--white);
justify-content: space-between; justify-content: space-between;
align-items: center align-items: center
} }
@@ -1474,7 +1481,7 @@ button.icon.lg {
} }
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar { .cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
border-color: #fff border-color: var(--white)
} }
.cu-list.menu>.cu-item .content>view:first-child { .cu-list.menu>.cu-item .content>view:first-child {
@@ -1572,7 +1579,7 @@ button.icon.lg {
} }
.cu-list.grid { .cu-list.grid {
background-color: #fff; background-color: var(--white);
text-align: center text-align: center
} }
@@ -1801,13 +1808,13 @@ button.icon.lg {
.cu-bar.tabbar { .cu-bar.tabbar {
padding: 0; padding: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2); height: calc(100upx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2);
} }
.cu-tabbar-height { .cu-tabbar-height {
min-height: 100rpx; min-height: 100upx;
height: calc(100rpx + env(safe-area-inset-bottom) / 2); height: calc(100upx + env(safe-area-inset-bottom) / 2);
} }
.cu-bar.tabbar.shadow { .cu-bar.tabbar.shadow {
@@ -1951,7 +1958,7 @@ button.icon.lg {
.cu-bar.input { .cu-bar.input {
padding-right: 20upx; padding-right: 20upx;
background-color: #fff; background-color: var(--white);
} }
.cu-bar.input input { .cu-bar.input input {
@@ -1990,6 +1997,11 @@ button.icon.lg {
width: calc(100% - 440upx); width: calc(100% - 440upx);
} }
.cu-custom .cu-bar .content image {
height: 60upx;
width: 240upx;
}
.cu-custom .cu-bar { .cu-custom .cu-bar {
min-height: 0px; min-height: 0px;
/* #ifdef MP */ /* #ifdef MP */
@@ -2018,7 +2030,7 @@ button.icon.lg {
transform-origin: 0 0; transform-origin: 0 0;
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;
border: 1upx solid #fff; border: 1upx solid var(--white);
opacity: 0.5; opacity: 0.5;
} }
@@ -2036,7 +2048,7 @@ button.icon.lg {
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;
opacity: 0.6; opacity: 0.6;
background-color: #fff; background-color: var(--white);
} }
.cu-custom .cu-bar .border-custom text { .cu-custom .cu-bar .border-custom text {
@@ -2077,7 +2089,7 @@ button.icon.lg {
.cu-timeline { .cu-timeline {
display: block; display: block;
background-color: #fff; background-color: var(--white);
} }
.cu-timeline .cu-time { .cu-timeline .cu-time {
@@ -2118,7 +2130,7 @@ button.icon.lg {
position: absolute; position: absolute;
top: 36upx; top: 36upx;
z-index: 9; z-index: 9;
background-color: #fff; background-color: var(--white);
width: 50upx; width: 50upx;
height: 50upx; height: 50upx;
text-align: center; text-align: center;
@@ -2132,7 +2144,7 @@ button.icon.lg {
} }
.cu-timeline>.cu-item[class*="icon"]::before { .cu-timeline>.cu-item[class*="icon"]::before {
background-color: #fff; background-color: var(--white);
width: 50upx; width: 50upx;
height: 50upx; height: 50upx;
text-align: center; text-align: center;
@@ -2202,7 +2214,7 @@ button.icon.lg {
} }
.cu-chat .cu-item>.main .content:not([class*="bg-"]) { .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
background-color: #fff; background-color: var(--white);
color: #666; color: #666;
} }
@@ -2280,7 +2292,7 @@ button.icon.lg {
padding: 8upx 12upx; padding: 8upx 12upx;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 6upx; border-radius: 6upx;
color: #fff; color: var(--white);
max-width: 400upx; max-width: 400upx;
line-height: 1.4; line-height: 1.4;
} }
@@ -2296,7 +2308,7 @@ button.icon.lg {
.cu-card>.cu-item { .cu-card>.cu-item {
display: block; display: block;
background-color: #fff; background-color: var(--white);
overflow: hidden; overflow: hidden;
border-radius: 10upx; border-radius: 10upx;
margin: 30upx; margin: 30upx;
@@ -2349,7 +2361,7 @@ button.icon.lg {
.cu-card.dynamic>.cu-item { .cu-card.dynamic>.cu-item {
display: block; display: block;
background-color: #fff; background-color: var(--white);
overflow: hidden; overflow: hidden;
} }
@@ -2427,7 +2439,7 @@ button.icon.lg {
==================== */ ==================== */
.cu-form-group { .cu-form-group {
background-color: #fff; background-color: var(--white);
padding: 1upx 30upx; padding: 1upx 30upx;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -2639,7 +2651,7 @@ button.icon.lg {
swiper.square-dot .wx-swiper-dot, swiper.square-dot .wx-swiper-dot,
swiper.square-dot .uni-swiper-dot { swiper.square-dot .uni-swiper-dot {
background-color: #fff; background-color: var(--white);
opacity: 0.4; opacity: 0.4;
width: 10upx; width: 10upx;
height: 10upx; height: 10upx;
@@ -2673,7 +2685,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
background-color: #fff; background-color: var(--white);
border-radius: 20upx; border-radius: 20upx;
} }
@@ -2873,19 +2885,19 @@ scroll-view.cu-steps .cu-item {
.cu-steps .cu-item[class*="text-"] .num::before { .cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40upx); transform: translateY(-40upx);
color: #fff; color: var(--white);
} }
.cu-steps .cu-item .num::after { .cu-steps .cu-item .num::after {
transform: translateY(40upx); transform: translateY(40upx);
color: #fff; color: var(--white);
transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
} }
.cu-steps .cu-item[class*="text-"] .num::after { .cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645"; content: "\e645";
font-family: 'cuIcon'; font-family: 'cuIcon';
color: #fff; color: var(--white);
transform: translateY(0upx); transform: translateY(0upx);
} }
@@ -3015,7 +3027,7 @@ scroll-view.cu-steps .cu-item {
right: 0; right: 0;
top: 0; top: 0;
border-bottom-left-radius: 6upx; border-bottom-left-radius: 6upx;
padding: 6rpx 12rpx; padding: 6upx 12upx;
height: auto; height: auto;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
@@ -3511,17 +3523,17 @@ scroll-view.cu-steps .cu-item {
.line-white::after, .line-white::after,
.lines-white::after { .lines-white::after {
border-color: #fff; border-color: var(--white);
} }
.bg-red { .bg-red {
background-color: var(--red); background-color: var(--red);
color: #fff; color: var(--white);
} }
.bg-orange { .bg-orange {
background-color: var(--orange); background-color: var(--orange);
color: #fff; color: var(--white);
} }
.bg-yellow { .bg-yellow {
@@ -3531,47 +3543,47 @@ scroll-view.cu-steps .cu-item {
.bg-olive { .bg-olive {
background-color: var(--olive); background-color: var(--olive);
color: #fff; color: var(--white);
} }
.bg-green { .bg-green {
background-color: var(--green); background-color: var(--green);
color: #fff; color: var(--white);
} }
.bg-cyan { .bg-cyan {
background-color: var(--cyan); background-color: var(--cyan);
color: #fff; color: var(--white);
} }
.bg-blue { .bg-blue {
background-color: var(--blue); background-color: var(--blue);
color: #fff; color: var(--white);
} }
.bg-purple { .bg-purple {
background-color: var(--purple); background-color: var(--purple);
color: #fff; color: var(--white);
} }
.bg-mauve { .bg-mauve {
background-color: var(--mauve); background-color: var(--mauve);
color: #fff; color: var(--white);
} }
.bg-pink { .bg-pink {
background-color: var(--pink); background-color: var(--pink);
color: #fff; color: var(--white);
} }
.bg-brown { .bg-brown {
background-color: var(--brown); background-color: var(--brown);
color: #fff; color: var(--white);
} }
.bg-grey { .bg-grey {
background-color: var(--grey); background-color: var(--grey);
color: #fff; color: var(--white);
} }
.bg-gray { .bg-gray {
@@ -3581,22 +3593,22 @@ scroll-view.cu-steps .cu-item {
.bg-black { .bg-black {
background-color: var(--black); background-color: var(--black);
color: #fff; color: var(--white);
} }
.bg-white { .bg-white {
background-color: #fff; background-color: var(--white);
color: #666; color: #666;
} }
.bg-shadeTop { .bg-shadeTop {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
color: #fff; color: var(--white);
} }
.bg-shadeBottom { .bg-shadeBottom {
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
color: #fff; color: var(--white);
} }
.bg-red.light { .bg-red.light {
@@ -3671,32 +3683,32 @@ scroll-view.cu-steps .cu-item {
.bg-gradual-red { .bg-gradual-red {
background-image: var(--gradualRed); background-image: var(--gradualRed);
color: #fff; color: var(--white);
} }
.bg-gradual-orange { .bg-gradual-orange {
background-image: var(--gradualOrange); background-image: var(--gradualOrange);
color: #fff; color: var(--white);
} }
.bg-gradual-green { .bg-gradual-green {
background-image: var(--gradualGreen); background-image: var(--gradualGreen);
color: #fff; color: var(--white);
} }
.bg-gradual-purple { .bg-gradual-purple {
background-image: var(--gradualPurple); background-image: var(--gradualPurple);
color: #fff; color: var(--white);
} }
.bg-gradual-pink { .bg-gradual-pink {
background-image: var(--gradualPink); background-image: var(--gradualPink);
color: #fff; color: var(--white);
} }
.bg-gradual-blue { .bg-gradual-blue {
background-image: var(--gradualBlue); background-image: var(--gradualBlue);
color: #fff; color: var(--white);
} }
.shadow[class*="-red"] { .shadow[class*="-red"] {
@@ -3969,9 +3981,9 @@ scroll-view.cu-steps .cu-item {
.text-white, .text-white,
.line-white, .line-white,
.lines-white { .lines-white {
color: #fff; color: var(--white);
} }
.text-shadow { .text-shadow {
text-shadow: 2rpx 4rpx 6rpx rgba(0, 0, 0, 0.4); text-shadow: 2upx 4upx 6upx rgba(0, 0, 0, 0.4);
} }

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

@@ -1,6 +1,9 @@
<template> <template>
<view> <view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">背景</block></cu-custom> <cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">背景</block>
</cu-custom>
<view class="cu-bar bg-white solid-bottom"> <view class="cu-bar bg-white solid-bottom">
<view class="action"> <view class="action">
<text class='icon-title text-blue'></text>深色背景 <text class='icon-title text-blue'></text>深色背景
@@ -75,7 +78,7 @@
<text class="icon-title text-blue"></text>图片背景 <text class="icon-title text-blue"></text>图片背景
</view> </view>
</view> </view>
<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414rpx;"> <view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
<view class="padding-xl text-white"> <view class="padding-xl text-white">
<view class="padding-xs text-xxl text-bold"> <view class="padding-xs text-xxl text-bold">
钢铁之翼 钢铁之翼
@@ -91,7 +94,7 @@
<text class="icon-title text-blue"></text>视频背景 <text class="icon-title text-blue"></text>视频背景
</view> </view>
</view> </view>
<view class="bg-video bg-mask flex align-center" style="height: 422rpx;"> <view class="bg-video bg-mask flex align-center" style="height: 422upx;">
<video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" autoplay loop muted :show-play-btn="false" <video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" autoplay loop muted :show-play-btn="false"
:controls="false" objectFit="cover"></video> :controls="false" objectFit="cover"></video>
<cover-view class="padding-xl text-white "> <cover-view class="padding-xl text-white ">
@@ -110,16 +113,16 @@
</view> </view>
</view> </view>
<view class="grid col-2"> <view class="grid col-2">
<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207rpx;"> <view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
<view class="bg-shadeTop padding padding-bottom-xl"> <view class="bg-shadeTop padding padding-bottom-xl">
上面开始 上面开始
</view>
</view> </view>
<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207rpx;"> </view>
<view class="bg-shadeBottom padding padding-top-xl flex-sub"> <view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
下面开始 <view class="bg-shadeBottom padding padding-top-xl flex-sub">
</view> 下面开始
</view> </view>
</view>
</view> </view>
</view> </view>
</template> </template>

4
Colorui-UniApp/pages/component/bar.vue
View File

@@ -439,10 +439,10 @@
<style> <style>
.box { .box {
margin: 20rpx 0; margin: 20upx 0;
} }
.box view.cu-bar { .box view.cu-bar {
margin-top: 20rpx; margin-top: 20upx;
} }
</style> </style>

4
Colorui-UniApp/pages/component/card.vue
View File

@@ -17,7 +17,7 @@
<view class="cu-tag bg-blue">史诗</view> <view class="cu-tag bg-blue">史诗</view>
<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view>
</view> </view>
<view class="cu-list menu menu-avatar"> <view class="cu-list menu-avatar">
<view class="cu-item"> <view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content flex-sub"> <view class="content flex-sub">
@@ -45,7 +45,7 @@
</view> </view>
<view class="cu-card dynamic" :class="isCard?'no-card':''"> <view class="cu-card dynamic" :class="isCard?'no-card':''">
<view class="cu-item shadow"> <view class="cu-item shadow">
<view class="cu-list menu menu-avatar"> <view class="cu-list menu-avatar">
<view class="cu-item"> <view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content flex-sub"> <view class="content flex-sub">

1
Colorui-UniApp/pages/component/chat.vue
View File

@@ -98,7 +98,6 @@
methods: { methods: {
InputFocus(e) { InputFocus(e) {
this.InputBottom = e.detail.height this.InputBottom = e.detail.height
}, },
InputBlur(e) { InputBlur(e) {
this.InputBottom = 0 this.InputBottom = 0

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

@@ -36,8 +36,6 @@
</view> </view>
</view> </view>
</view> </view>
<view class="cu-form-group margin-top"> <view class="cu-form-group margin-top">
<view class="title">普通选择</view> <view class="title">普通选择</view>
<picker @change="PickerChange" :value="index" :range="picker"> <picker @change="PickerChange" :value="index" :range="picker">
@@ -80,7 +78,6 @@
</picker> </picker>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view class="cu-form-group margin-top"> <view class="cu-form-group margin-top">
<view class="title">开关选择</view> <view class="title">开关选择</view>
<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch> <switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
@@ -129,7 +126,6 @@
value="C"></checkbox> value="C"></checkbox>
</view> </view>
</checkbox-group> </checkbox-group>
<view class="cu-bar bg-white margin-top"> <view class="cu-bar bg-white margin-top">
<view class="action"> <view class="action">
图片上传 图片上传
@@ -153,13 +149,12 @@
</view> </view>
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 --> <!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group margin-top"> <view class="cu-form-group margin-top">
<textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class='placeholder' <textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class="placeholder"
:class="textareaAValue?'value':''" @input="textareaAInput"></textarea> :class="textareaAValue?'value':''" @input="textareaAInput"></textarea>
</view> </view>
<view class="cu-form-group top"> <view class="cu-form-group top">
<view class="title">点文本框</view> <view class="title">点文本框</view>
<textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class='placeholder' <textarea data-placeholder="多行文本输入框" maxlength="-1" :disabled="modalName!=null" placeholder-class="placeholder"
:class="textareaBValue?'value':''" @input="textareaBInput"></textarea> :class="textareaBValue?'value':''" @input="textareaBInput"></textarea>
</view> </view>
</form> </form>
@@ -364,7 +359,6 @@
}); });
}, },
ViewImage(e) { ViewImage(e) {
console.log(e)
uni.previewImage({ uni.previewImage({
urls: this.imgList, urls: this.imgList,
current: e.currentTarget.dataset.url current: e.currentTarget.dataset.url

495
Colorui-UniApp/pages/component/list.vue
View File

@@ -1,282 +1,284 @@
<template> <template>
<view> <view>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"> <scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<block slot="backText">返回</block> <cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="content">列表</block> <block slot="backText">返回</block>
</cu-custom> <block slot="content">列表</block>
<view class="cu-bar bg-white solid-bottom margin-top"> </cu-custom>
<view class="action"> <view class="cu-bar bg-white solid-bottom margin-top">
<text class="icon-title text-orange "></text> 宫格列表 <view class="action">
<text class="icon-title text-orange "></text> 宫格列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
</view>
</view> </view>
<view class="action"> <view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button> <view class="cu-dialog" @tap.stop>
</view> <radio-group class="block" @change="Gridchange">
</view> <view class="cu-list menu text-left">
<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal"> <view class="cu-item" v-for="(item,index) in 3" :key="index">
<view class="cu-dialog" @tap.stop> <label class="flex justify-between align-center flex-sub">
<radio-group class="block" @change="Gridchange"> <view class="flex-sub">{{index +3}} 列</view>
<view class="cu-list menu text-left"> <radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
<view class="cu-item" v-for="(item,index) in 3" :key="index"> </label>
<label class="flex justify-between align-center flex-sub"> </view>
<view class="flex-sub">{{index +3}} 列</view>
<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
</label>
</view> </view>
</view> </radio-group>
</radio-group> <view class="cu-list menu text-left solid-top">
<view class="cu-list menu text-left solid-top"> <view class="cu-item">
<view class="cu-item"> <view class="content">
<view class="content"> <text class="text-grey">边框</text>
<text class="text-grey">边框</text> </view>
</view> <view class="action">
<view class="action"> <switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']"> <view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<gridCol*2">
<view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<gridCol*2"> <view :class="['icon-' + item.icon,'text-' + item.color]">
<view :class="['icon-' + item.icon,'text-' + item.color]"> <view class="cu-tag badge" v-if="item.badge!=0">
<view class="cu-tag badge" v-if="item.badge!=0"> <block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block> </view>
</view> </view>
<text>{{item.name}}</text>
</view> </view>
<text>{{item.name}}</text>
</view> </view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top"> <view class="cu-bar bg-white solid-bottom margin-top">
<view class="action"> <view class="action">
<text class="icon-title text-orange"></text> 菜单列表 <text class="icon-title text-orange"></text> 菜单列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button>
</view>
</view> </view>
<view class="action"> <view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button> <view class="cu-dialog" @tap.stop>
</view> <view class="cu-list menu text-left solid-top">
</view> <view class="cu-item">
<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal"> <view class="content">
<view class="cu-dialog" @tap.stop> <text class="text-grey">短边框</text>
<view class="cu-list menu text-left solid-top"> </view>
<view class="cu-item"> <view class="action">
<view class="content"> <switch @change="MenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch>
<text class="text-grey">短边框</text> </view>
</view> </view>
<view class="action"> <view class="cu-item">
<switch @change="MenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch> <view class="content">
<text class="text-grey">箭头</text>
</view>
<view class="action">
<switch @change="MenuArrow" :class="menuArrow?'checked':''" :checked="menuArrow?true:false"></switch>
</view>
</view> </view>
</view> <view class="cu-item">
<view class="cu-item"> <view class="content">
<view class="content"> <text class="text-grey">卡片</text>
<text class="text-grey">箭头</text> </view>
</view> <view class="action">
<view class="action"> <switch @change="MenuCard" :class="menuCard?'checked':''" :checked="menuCard?true:false"></switch>
<switch @change="MenuArrow" :class="menuArrow?'checked':''" :checked="menuArrow?true:false"></switch> </view>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">卡片</text>
</view>
<view class="action">
<switch @change="MenuCard" :class="menuCard?'checked':''" :checked="menuCard?true:false"></switch>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']"> <view class="cu-item" :class="menuArrow?'arrow':''">
<view class="cu-item" :class="menuArrow?'arrow':''"> <view class="content">
<view class="content"> <text class="icon-circlefill text-grey"></text>
<text class="icon-circlefill text-grey"></text> <text class="text-grey">图标 + 标题</text>
<text class="text-grey">图标 + 标题</text> </view>
</view> </view>
</view> <view class="cu-item" :class="menuArrow?'arrow':''">
<view class="cu-item" :class="menuArrow?'arrow':''"> <view class="content">
<view class="content"> <image src="/static/logo.png" class="png" mode="aspectFit"></image>
<image src="/static/logo.png" class="png" mode="aspectFit"></image> <text class="text-grey">图片 + 标题</text>
<text class="text-grey">图片 + 标题</text> </view>
</view> </view>
</view> <view class="cu-item" :class="menuArrow?'arrow':''">
<view class="cu-item" :class="menuArrow?'arrow':''"> <button class="cu-btn content" open-type="contact">
<button class="cu-btn content" open-type="contact"> <text class="icon-btn text-olive"></text>
<text class="icon-btn text-olive"></text> <text class="text-grey">Open-type 按钮</text>
<text class="text-grey">Open-type 按钮</text> </button>
</button> </view>
</view> <view class="cu-item" :class="menuArrow?'arrow':''">
<view class="cu-item" :class="menuArrow?'arrow':''"> <navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
<navigator class="content" hover-class="none" url="../list/list" open-type="redirect"> <text class="icon-discoverfill text-orange"></text>
<text class="icon-discoverfill text-orange"></text> <text class="text-grey">Navigator 跳转</text>
<text class="text-grey">Navigator 跳转</text> </navigator>
</navigator> </view>
</view> <view class="cu-item" :class="menuArrow?'arrow':''">
<view class="cu-item" :class="menuArrow?'arrow':''"> <view class="content">
<view class="content"> <text class="icon-emojiflashfill text-pink"></text>
<text class="icon-emojiflashfill text-pink"></text> <text class="text-grey">头像组</text>
<text class="text-grey">头像组</text> </view>
</view> <view class="action">
<view class="action"> <view class="cu-avatar-group">
<view class="cu-avatar-group"> <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view> <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view> </view>
<text class="text-grey text-sm">4 人</text>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-btn text-green"></text>
<text class="text-grey">按钮</text>
</view>
<view class="action">
<button class="cu-btn round bg-green shadow">
<text class="icon-upload"></text> 上传</button>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-tagfill text-red margin-right-xs"></text>
<text class="text-grey">标签</text>
</view>
<view class="action">
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-warn text-green"></text>
<text class="text-grey">文本</text>
</view>
<view class="action">
<text class="text-grey text-sm">小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class="content padding-tb-sm">
<view>
<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
<view class="text-gray text-sm">
<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
</view>
<view class="action">
<switch class="switch-sex" @change="SwitchSex" :class="skin?'checked':''" :checked="skin?true:false"></switch>
</view> </view>
<text class="text-grey text-sm">4 人</text>
</view> </view>
</view> </view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-btn text-green"></text>
<text class="text-grey">按钮</text>
</view>
<view class="action">
<button class="cu-btn round bg-green shadow">
<text class="icon-upload"></text> 上传</button>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-tagfill text-red margin-right-xs"></text>
<text class="text-grey">标签</text>
</view>
<view class="action">
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-warn text-green"></text>
<text class="text-grey">文本</text>
</view>
<view class="action">
<text class="text-grey text-sm">小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class="content padding-tb-sm">
<view>
<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
<view class="text-gray text-sm">
<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
</view>
<view class="action">
<switch class="switch-sex" @change="SwitchSex" :class="skin?'checked':''" :checked="skin?true:false"></switch>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top"> <view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 消息列表
</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text> </view>
</view>
<view class="action"> <view class="action">
<view class="text-grey text-xs">22:20</view> <text class="icon-title text-orange "></text> 消息列表
<view class="cu-tag round bg-grey sm">5</view>
</view> </view>
</view> </view>
<view class="cu-item"> <view class="cu-list menu-avatar">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"> <view class="cu-item">
<view class="cu-tag badge">99+</view> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
</view> <view class="content">
<view class="content"> <view class="text-grey">凯尔</view>
<view class="text-grey"> <view class="text-gray text-sm flex">
<text class="text-cut">瓦洛兰之盾-塔里克</text> <text class="text-cut">
<view class="cu-tag round bg-orange sm">战士</view> <text class="icon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text> </view>
</view> </view>
<view class="text-gray text-sm flex"> <view class="action">
<text class="text-cut"> <view class="text-grey text-xs">22:20</view>
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。 <view class="cu-tag round bg-grey sm">5</view>
</text>
</view> </view>
</view> </view>
<view class="action"> <view class="cu-item">
<view class="text-grey text-xs">22:20</view> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="icon-notice_forbid_fill text-gray"></view> <view class="cu-tag badge">99+</view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view><text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view> </view>
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view> <view class="content">
</view> <view class="text-grey">
<view class="action"> <text class="text-cut">瓦洛兰之盾-塔里克</text>
<view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-orange sm">战士</view>
<view class="cu-tag round bg-red sm">5</view> </view>
</view> <view class="text-gray text-sm flex">
</view> <text class="text-cut">
<view class="cu-item cur"> 塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);"> </text>
<view class="cu-tag badge"></view> </view>
</view> </view>
<view class="content"> <view class="action">
<view> <view class="text-grey text-xs">22:20</view>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text> <view class="icon-notice_forbid_fill text-gray"></view>
<view class="cu-tag round bg-orange sm">6人</view>
</view> </view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
</view> </view>
<view class="action"> <view class="cu-item ">
<view class="text-grey text-xs">22:20</view> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="icon-notice_forbid_fill text-gray"></view> <view class="content">
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view><text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class="content">
<view>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 列表左滑
</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4" :key="index"
@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red margin-right-xs"></text> 消息未送达</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class="move">
<view class="bg-grey">置顶</view>
<view class="bg-red">删除</view>
</view>
</view> </view>
</view> </view>
</view>
</scroll-view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 列表左滑
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4" :key="index"
@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red margin-right-xs"></text> 消息未送达</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class="move">
<view class="bg-grey">置顶</view>
<view class="bg-red">删除</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
@@ -397,7 +399,12 @@
<style> <style>
.page { .page {
background: #f1f1f1; height: 100Vh;
width: 100vw;
}
.page.show {
overflow: hidden;
} }
.switch-sex::after { .switch-sex::after {

11
Colorui-UniApp/pages/component/modal.vue
View File

@@ -1,6 +1,9 @@
<template> <template>
<view> <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>
<view class="cu-bar bg-white margin-top"> <view class="cu-bar bg-white margin-top">
<view class="action"> <view class="action">
<text class="icon-title text-orange "></text> 普通窗口 <text class="icon-title text-orange "></text> 普通窗口
@@ -254,9 +257,9 @@
this.radio = e.detail.value this.radio = e.detail.value
}, },
ChooseCheckbox(e) { ChooseCheckbox(e) {
var items = this.checkbox, let items = this.checkbox;
values = e.currentTarget.dataset.value; let values = e.currentTarget.dataset.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) { for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) { if (items[i].value == values) {
items[i].checked = !items[i].checked; items[i].checked = !items[i].checked;
break break

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

@@ -50,7 +50,7 @@
</view> </view>
<view class="cu-item text-blue"> <view class="cu-item text-blue">
<view class="bg-blue shadow-blur content"> <view class="bg-blue shadow-blur content">
<view class="cu-list menu menu-avatar radius"> <view class="cu-list menu-avatar radius">
<view class="cu-item"> <view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content"> <view class="content">

14
Colorui-UniApp/pages/plugin/animation.vue
View File

@@ -47,30 +47,30 @@
</view> </view>
</view> </view>
<view class="margin radius bg-gradual-green shadow-blur"> <view class="margin radius bg-gradual-green shadow-blur">
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image> <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></image>
</view> </view>
<view class="margin flex"> <view class="margin flex">
<view class="bg-black flex-sub margin-right radius shadow-lg"> <view class="bg-black flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view> </view>
<view class="bg-white flex-sub radius shadow-lg"> <view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view> </view>
</view> </view>
<view class="margin flex"> <view class="margin flex">
<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg"> <view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view> </view>
<view class="bg-white flex-sub radius shadow-lg"> <view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view> </view>
</view> </view>
<view class="margin flex"> <view class="margin flex">
<view class="bg-white flex-sub margin-right radius shadow-lg"> <view class="bg-white flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view> </view>
<view class="bg-black flex-sub radius shadow-lg"> <view class="bg-black flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image> <image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view> </view>
</view> </view>
</view> </view>

10
Colorui-UniApp/pages/plugin/drawer.vue
View File

@@ -65,17 +65,17 @@
<style> <style>
page { page {
background-image: var(--gradualBlue); background-image: var(--gradualBlue);
width: 750upx; width: 100vw;
overflow: hidden; overflow: hidden;
} }
.DrawerPage { .DrawerPage {
position: absolute; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
left: 0vw; left: 0vw;
background-color: #f1f1f1; background-color: #f1f1f1;
transition: all 0.6s; transition: all 0.4s;
} }
.DrawerPage.show { .DrawerPage.show {
@@ -94,7 +94,7 @@
transform: scale(0.9, 0.9) translateX(-100%); transform: scale(0.9, 0.9) translateX(-100%);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: all 0.6s; transition: all 0.4s;
padding: 100upx 0; padding: 100upx 0;
} }
@@ -120,7 +120,7 @@
font-size: 50upx; font-size: 50upx;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: all 0.6s; transition: all 0.4s;
} }
.DrawerClose.show { .DrawerClose.show {

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

@@ -63,11 +63,6 @@
height: 100vh; height: 100vh;
} }
.cu-bar .content image {
height: 60upx;
width: 240upx;
}
.cardTitle { .cardTitle {
color: #fff; color: #fff;
padding: 90upx 60upx; padding: 90upx 60upx;

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

@@ -17,7 +17,7 @@
<block v-for="(item,index) in list" :key="index"> <block v-for="(item,index) in list" :key="index">
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name"> <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
<view class="padding">{{item.name}}</view> <view class="padding">{{item.name}}</view>
<view class="cu-list menu menu-avatar no-padding"> <view class="cu-list menu-avatar no-padding">
<view class="cu-item" v-for="(items,sub) in 2" :key="sub"> <view class="cu-item" v-for="(items,sub) in 2" :key="sub">
<view class="cu-avatar round lg">{{item.name}}</view> <view class="cu-avatar round lg">{{item.name}}</view>
<view class="content"> <view class="content">
@@ -147,7 +147,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1); box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 10upx;
} }
.indexBar-item { .indexBar-item {

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

@@ -20,7 +20,7 @@
Tab-{{item.name}} Tab-{{item.name}}
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain"> :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index"> <view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
<view class="cu-bar solid-bottom bg-white"> <view class="cu-bar solid-bottom bg-white">