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

Colorui-UniApp

Browse Source
This commit is contained in:
Weilanwl
2019-03-24 19:22:45 +08:00
parent 6ed1c0522f
commit d7e8448185
53 changed files with 10470 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
Colorui-UniApp/pages/component/bar.vue Normal file
View File

@@ -0,0 +1,449 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">操作条</custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-green"></text>
<text>底部操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar tabbar bg-white">
<view class="action">
<view class="icon-cu-image">
<image src="/static/tabbar/basics_cur.png"></image>
</view>
<view class="text-green">元素</view>
</view>
<view class="action">
<view class="icon-cu-image">
<image src="/static/tabbar/component.png"></image>
</view>
<view class="text-gray">组件</view>
</view>
<view class="action">
<view class="icon-cu-image">
<image src="/static/tabbar/plugin.png"></image>
<view class="cu-tag badge">99</view>
</view>
<view class="text-gray">扩展</view>
</view>
<view class="action">
<view class="icon-cu-image">
<image src="/static/tabbar/about.png"></image>
<view class="cu-tag badge"></view>
</view>
<view class="text-gray">关于</view>
</view>
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-black">
<view class="action text-orange">
<view class="icon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
</view>
<view class="action text-gray">
<view class="icon-recharge"></view>
积分
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-white">
<view class="action text-green">
<view class="icon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
</view>
<view class="action text-gray add-action">
<button class="cu-btn icon-add bg-green shadow"></button>
发布
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
<view class="cu-bar tabbar bg-black">
<view class="action text-green">
<view class="icon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
</view>
<view class="action text-gray add-action">
<button class="cu-btn icon-add bg-green shadow"></button>
发布
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action text-orange">
<view class="icon-favorfill"></view> 已收藏
</view>
<view class="action">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-red submit">立即订购</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-orange submit">加入购物车</view>
<view class="bg-red submit">立即订购</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class=" icon-shop"></view> 店铺
</view>
<view class="action">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cu-tag badge"></view>
</view> 客服
</button>
<view class="action">
<view class="icon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text>标题操作条</text>
</view>
</view>
<view class="box" v-if="false">
<view class="cu-bar justify-center bg-white">
<view class="action border-title">
<text class="text-xl text-bold">关于我们</text>
<text class="bg-grey" style="width:2rem"></text>
<!-- 底部样式 last-child选择器-->
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class="action border-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="bg-gradual-blue" style="width:3rem"></text>
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-green">关于我们</text>
<text class="bg-green" style="width:2rem"></text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="text-ABC text-blue">about</text>
<!-- last-child选择器-->
</view>
</view>
</view>
<view class="box">
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold">关于我们</text>
<text class="bg-grey" style="width:2rem"></text>
<!-- 底部样式 last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="bg-gradual-blue" style="width:3rem"></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-green">关于我们</text>
<text class="bg-green"></text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="text-ABC text-blue">about</text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class="action title-style-3">
<text class="text-xl text-bold">关于我们</text>
<text class="text-Abc text-gray self-end margin-left-sm">about</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-titles text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text>顶部操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-back text-gray"></text> 返回
</view>
<view class="content text-bold">
操作条
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-homefill text-gray"></text> 首页
</view>
<view class="content text-bold">
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class="action">
<text class="icon-cardboardfill text-grey"></text>
<text class="icon-recordfill text-red"></text>
</view>
</view>
<view class="cu-bar bg-blue">
<view class="action">
<text class="icon-close"></text> 关闭
</view>
<view class="content text-bold">
海蓝
</view>
</view>
<view class="cu-bar bg-black search">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
<view class="content">
ColorUI
</view>
<view class="action">
<text class="icon-more"></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text>搜索操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="icon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur round">搜索</button>
</view>
</view>
<view class="cu-bar search bg-white">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
<view class="search-form round">
<text class="icon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar bg-red search">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
<view class="search-form radius">
<text class="icon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar bg-cyan search">
<view class="search-form radius">
<text class="icon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text class="icon-close"></text>
<text>取消</text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text>操作条按钮组</text>
</view>
</view>
<view class="box">
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round lg">保存</button>
</view>
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur">保存</button>
<button class="cu-btn text-green line-green shadow">上传</button>
</view>
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round">保存</button>
<button class="cu-btn bg-blue shadow-blur round">提交</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text>输入操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar input">
<view class="action">
<text class="icon-sound text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<view class="cu-bar input">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
<view class="action">
<text class="icon-roundaddfill text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
InputBottom: 0
};
},
methods: {
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
}
}
</script>
<style>
.box {
margin: 20rpx 0;
}
.box view.cu-bar {
margin-top: 20rpx;
}
</style>

167
Colorui-UniApp/pages/component/card.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">卡片</custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-titles text-orange"></text> 案例类卡片
</view>
<view class="action">
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
</view>
</view>
<view class="cu-card case" :class="isCard?'no-card':''">
<view class="cu-item shadow">
<view class="image">
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
mode="widthFix"></image>
<view class="cu-tag bg-blue">史诗</view>
<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view>
</view>
<view class="cu-list menu 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/big10006.jpg);"></view>
<view class="content flex-sub">
<view class="text-grey">正义天使 凯尔</view>
<view class="text-gray text-sm flex justify-between">
十天前
<view class="text-gray text-sm">
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
<view class="action">
<text class="icon-titles text-orange "></text> 动态类卡片
</view>
<view class="action">
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
</view>
</view>
<view class="cu-card dynamic" :class="isCard?'no-card':''">
<view class="cu-item shadow">
<view class="cu-list menu 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/big10006.jpg);"></view>
<view class="content flex-sub">
<view>凯尔</view>
<view class="text-gray text-sm flex justify-between">
2019年12月3日
</view>
</view>
</view>
</view>
<view class="text-content">
折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
</view>
<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
<view class="bg-img" :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
v-for="(item,index) in isCard?9:1" :key="index">
</view>
</view>
<view class="text-gray text-sm text-right padding">
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
<view class="cu-list menu menu-avatar comment solids-top">
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-grey">莫甘娜</view>
<view class="text-gray text-content text-df">
凯尔，你被自己的光芒变的盲目。
</view>
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
<view class="flex">
<view>凯尔：</view>
<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
</view>
</view>
<view class="margin-top-sm flex justify-between">
<view class="text-gray text-df">2018年12月4日</view>
<view>
<text class="icon-appreciatefill text-red"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-content text-df">
妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
</view>
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
<view class="flex">
<view>莫甘娜：</view>
<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
</view>
</view>
<view class="margin-top-sm flex justify-between">
<view class="text-gray text-df">2018年12月4日</view>
<view>
<text class="icon-appreciate text-gray"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-titles text-orange "></text> 文章类卡片
</view>
<view class="action">
<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
</view>
</view>
<view class="cu-card article" :class="isCard?'no-card':''">
<view class="cu-item shadow">
<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
<view class="content">
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
mode="aspectFill"></image>
<view class="desc">
<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
<view>
<view class="cu-tag bg-red light sm round">正义天使</view>
<view class="cu-tag bg-green light sm round">史诗</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isCard: false
};
},
methods: {
IsCard(e) {
this.isCard = e.detail.value
},
}
}
</script>
<style>
</style>

114
Colorui-UniApp/pages/component/chat.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">聊天</custom>
<view class="cu-chat">
<view class="cu-item self">
<view class="main">
<view class="content bg-green shadow">
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">2018年3月23日 13:23</view>
</view>
<view class="cu-info round">对方撤回一条消息!</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class="content shadow">
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class="date "> 13:23</view>
</view>
<view class="cu-info">
<text class="icon-roundclosefill text-red "></text> 对方拒绝了你的消息
</view>
<view class="cu-info">
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class="text-blue">发送好友验证</text>
</view>
<view class="cu-item self">
<view class="main">
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date"> 13:23</view>
</view>
<view class="cu-item self">
<view class="main">
<view class="action text-bold text-grey">
3"
</view>
<view class="content shadow">
<text class="icon-sound text-xxl padding-right-xl"> </text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<view class="cu-item self">
<view class="main">
<view class="action">
<text class="icon-locationfill text-orange text-xxl"></text>
</view>
<view class="content shadow">
喵星球，喵喵市
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class="content shadow">
@#$^&**
</view>
<view class="action text-grey">
<text class="icon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
</view>
</view>
<view class="date">13:23</view>
</view>
</view>
<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
<view class="action">
<text class="icon-sound text-grey"></text>
</view>
<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
@focus="InputFocus" @blur="InputBlur"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow">发送</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
InputBottom: 0
};
},
methods: {
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
}
}
</script>
<style>
page{
padding-bottom: 100upx;
}
</style>

400
Colorui-UniApp/pages/component/form.vue Normal file
View File

@@ -0,0 +1,400 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">表单</custom>
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
<input placeholder="两字短标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="输入框带个图标" name="input"></input>
<text class='icon-locationfill text-orange'></text>
</view>
<view class="cu-form-group">
<view class="title">验证码</view>
<input placeholder="输入框带个按钮" name="input"></input>
<button class='cu-btn bg-green shadow'>验证码</button>
</view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="输入框带标签" name="input"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">普通选择</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">多列选择</view>
<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">时间选择</view>
<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">日期选择</view>
<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<!-- #ifndef H5 || APP-PLUS -->
<view class="cu-form-group">
<view class="title">地址选择</view>
<picker mode="region" @change="RegionChange" :value="region">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
<!-- #endif -->
<view class="cu-form-group margin-top">
<view class="title">开关选择</view>
<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
</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>
<view class="cu-form-group">
<view class="title">方形开关</view>
<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
</view>
<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>
<view class="cu-form-group">
<view class="title">定义样式</view>
<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<view>
<radio class='blue radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio>
<radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
</view>
</view>
</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>
<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>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<checkbox class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
value="C"></checkbox>
</view>
</checkbox-group>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="padding-xs bg-img" :style="'background-image:url(' + imgList[index] +')'" v-for="(item,index) in imgList"
:key="index" @tap="ViewImage" :data-url="imgList[index]">
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='icon-close'></text>
</view>
</view>
<view class="padding-xs solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='icon-cameraadd'></text>
</view>
</view>
</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>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
index: -1,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
objectMultiArray: [
[{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
],
[{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
],
[{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
time: '12:01',
date: '2018-12-25',
region: ['广东省', '广州市', '海珠区'],
switchA: false,
switchB: true,
switchC: false,
switchD: false,
radio: 'A',
checkbox: [{
value: 'A',
checked: true
}, {
value: 'B',
checked: true
}, {
value: 'C',
checked: false
}],
imgList: [],
modalName:null,
textareaAValue: '',
textareaBValue: ''
};
},
methods: {
PickerChange(e) {
this.index = e.detail.value
},
MultiChange(e) {
this.multiIndex = e.detail.value
},
MultiColumnChange(e) {
let data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
this.multiArray = data.multiArray;
this.multiIndex = data.multiIndex;
},
TimeChange(e) {
this.time = e.detail.value
},
DateChange(e) {
this.date = e.detail.value
},
RegionChange(e) {
this.region = e.detail.value
},
SwitchA(e) {
this.switchA = e.detail.value
},
SwitchB(e) {
this.switchB = e.detail.value
},
SwitchC(e) {
this.switchC = e.detail.value
},
SwitchD(e) {
this.switchD = e.detail.value
},
RadioChange(e) {
this.radio = e.detail.value
},
CheckboxChange(e) {
var items = this.checkbox,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value == values[j]) {
items[i].checked = true;
break
}
}
}
},
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
console.log(e)
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '召唤师',
content: '确定要删除这段回忆吗？',
cancelText: '再看看',
confirmText: '再见',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
textareaAInput(e) {
this.textareaAValue = e.detail.value
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
}
}
}
</script>
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>

87
Colorui-UniApp/pages/component/home.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<view>
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
<view class="nav-list">
<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text :class="'icon-' + item.icon"></text>
</navigator>
</view>
</view>
</template>
<script>
export default {
data() {
return {
elements: [{
title: '操作条',
name: 'bar',
color: 'purple',
icon: 'vipcard'
},
{
title: '导航栏 ',
name: 'nav',
color: 'mauve',
icon: 'formfill'
},
{
title: '列表',
name: 'list',
color: 'pink',
icon: 'list'
},
{
title: '卡片',
name: 'card',
color: 'brown',
icon: 'newsfill'
},
{
title: '表单',
name: 'form',
color: 'red',
icon: 'formfill'
},
{
title: '时间轴',
name: 'timeline',
color: 'orange',
icon: 'timefill'
},
{
title: '聊天',
name: 'chat',
color: 'green',
icon: 'messagefill'
},
{
title: '轮播',
name: 'swiper',
color: 'olive',
icon: 'album'
},
{
title: '模态框',
name: 'modal',
color: 'grey',
icon: 'squarecheckfill'
},
{
title: '步骤条',
name: 'steps',
color: 'cyan',
icon: 'roundcheckfill'
}
],
};
}
}
</script>
<style>
</style>

416
Colorui-UniApp/pages/component/list.vue Normal file
View File

@@ -0,0 +1,416 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">列表</custom>
<view class="cu-bar bg-white solid-bottom margin-top">
<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 class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop>
<radio-group class="block" @change="Gridchange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(item,index) in 3" :key="index">
<label class="flex justify-between align-center flex-sub">
<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>
</radio-group>
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">边框</text>
</view>
<view class="action">
<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
</view>
</view>
</view>
</view>
</view>
<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="['icon-' + item.icon,'text-' + item.color]">
<view class="cu-tag badge" v-if="item.badge!=0">
<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
</view>
</view>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<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="menuModal">设置</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop>
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">短边框</text>
</view>
<view class="action">
<switch @change="MenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch>
</view>
</view>
<view class="cu-item">
<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 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 class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-circlefill text-grey"></text>
<text class="text-grey">图标 + 标题</text>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<image src="/static/logo.png" class="png" mode="aspectFit"></image>
<text class="text-grey">图片 + 标题</text>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<button class="cu-btn content" open-type="contact">
<text class="icon-btn text-olive"></text>
<text class="text-grey">Open-type 按钮</text>
</button>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
<text class="icon-discoverfill text-orange"></text>
<text class="text-grey">Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="icon-emojiflashfill text-pink"></text>
<text class="text-grey">头像组</text>
</view>
<view class="action">
<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/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/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>
</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">
<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="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">
<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="icon-notice_forbid_fill text-gray"></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>莫甘娜</view>
<view class="text-gray text-sm">
凯尔，你被自己的光芒变的盲目！</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">
等我回来一个打十个</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">
伊泽瑞尔：
<text class="icon-locationfill text-orange margin-right-xs"></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 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>
</template>
<script>
export default {
data() {
return {
iconList: [{
icon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
icon: 'recordfill',
color: 'orange',
badge: 1,
name: '录像'
}, {
icon: 'picfill',
color: 'yellow',
badge: 0,
name: '图像'
}, {
icon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
icon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
icon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮肤'
}, {
icon: 'discoverfill',
color: 'purple',
badge: 0,
name: '发现'
}, {
icon: 'questionfill',
color: 'mauve',
badge: 0,
name: '帮助'
}, {
icon: 'commandfill',
color: 'purple',
badge: 0,
name: '问答'
}, {
icon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版权'
}],
modalName: null,
gridCol: 3,
gridBorder: false,
menuBorder: false,
menuArrow: false,
menuCard: false,
skin: false,
listTouchStart: 0,
listTouchDirection: null,
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
Gridchange(e) {
this.gridCol = e.detail.value
},
Gridswitch(e) {
this.gridBorder = e.detail.value
},
MenuBorder(e) {
this.menuBorder = e.detail.value
},
MenuArrow(e) {
this.menuArrow = e.detail.value
},
MenuCard(e) {
this.menuCard = e.detail.value
},
SwitchSex(e) {
this.skin = e.detail.value
},
// ListTouch触摸开始
ListTouchStart(e) {
this.listTouchStart = e.touches[0].pageX
},
// ListTouch计算方向
ListTouchMove(e) {
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
},
// ListTouch计算滚动
ListTouchEnd(e) {
if (this.listTouchDirection == 'left') {
this.modalName = e.currentTarget.dataset.target
} else {
this.modalName = null
}
this.listTouchDirection = null
}
}
}
</script>
<style>
.page {
background: #f1f1f1;
}
.switch-sex::after {
content: "\e716";
}
.switch-sex::before {
content: "\e7a9";
}
.switch-music::after {
content: "\e66a";
}
.switch-music::before {
content: "\e6db";
}
</style>

276
Colorui-UniApp/pages/component/modal.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">模态窗口</custom>
<view class="cu-bar bg-white margin-top">
<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="Modal">Modal</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="bottomModal">Bottom</button>
</view>
</view>
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class="action text-green">确定</view>
<view class="action text-blue" @tap="hideModal">取消</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="DialogModal1">Dialog</button>
<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
</view>
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-green " @tap="hideModal">
<text class="icon-moneybag"></text>微信支付</view>
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">确定</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="Image">Image</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Image'?'show':''">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class="action" @tap="hideModal">
<text class="icon-close "></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">我知道了</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<radio-group class="block" @change="RadioChange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(item,index) in 5" :key="index">
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">Item {{index +1}}</view>
<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
:value="'radio' + index"></radio>
</label>
</view>
</view>
</radio-group>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<view class="cu-bar bg-white">
<view class="action text-blue" @tap="hideModal">取消</view>
<view class="action text-green" @tap="hideModal">确定</view>
</view>
<view class="grid col-3 padding-sm">
<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
:data-value="item.value"> {{item.name}}
<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
</button>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<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="DrawerModalL">Left</button>
<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
CustomBar: this.CustomBar,
modalName: null,
radio: 'radio1',
checkbox: [{
value: 0,
name: '10元',
checked: false,
hot: false,
}, {
value: 1,
name: '20元',
checked: true,
hot: false,
}, {
value: 2,
name: '30元',
checked: true,
hot: true,
}, {
value: 3,
name: '60元',
checked: false,
hot: true,
}, {
value: 4,
name: '80元',
checked: false,
hot: false,
}, {
value: 5,
name: '100元',
checked: false,
hot: false,
}]
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
RadioChange(e) {
this.radio = e.detail.value
},
ChooseCheckbox(e) {
var items = this.checkbox,
values = e.currentTarget.dataset.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
}
}
}
</script>
<style>
button .cu-tag {
position: absolute;
top: 8upx;
right: 8upx;
}
</style>

90
Colorui-UniApp/pages/component/nav.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">导航栏</custom>
<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
Tab{{index}}
</view>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 默认
</view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 居中
</view>
</view>
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 平分
</view>
</view>
<scroll-view scroll-x class="bg-white nav">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 背景
</view>
</view>
<scroll-view scroll-x class="bg-red nav text-center">
<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 图标
</view>
</view>
<scroll-view scroll-x class="bg-green nav text-center">
<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
<text class="icon-camerafill"></text> 数码
</view>
<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
<text class="icon-upstagefill"></text> 排行榜
</view>
<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
<text class="icon-clothesfill"></text> 皮肤
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
TabCur: 0,
scrollLeft: 0
};
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
}
}
</script>
<style>
</style>

114
Colorui-UniApp/pages/component/steps.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">步骤条</custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 基本用法
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="BasicsSteps">下一步</button>
</view>
</view>
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
<text :class="'icon-' + item.icon"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps">
<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
<text :class="index>basics?'icon-title':'icon-' + item.icon"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps steps-arrow">
<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
<text :class="'icon-' + item.icon"></text> {{item.name}}
</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 class="action">
<button class="cu-btn bg-green shadow" @tap="NumSteps">下一步</button>
</view>
</view>
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
</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 class="action">
<button class="cu-btn bg-green shadow" @tap="ScrollSteps">下一步</button>
</view>
</view>
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
scroll-with-animation>
<view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
basicsList: [{
icon: 'usefullfill',
name: '开始'
}, {
icon: 'radioboxfill',
name: '等待'
}, {
icon: 'roundclosefill',
name: '错误'
}, {
icon: 'roundcheckfill',
name: '完成'
}, ],
basics: 0,
numList: [{
name: '开始'
}, {
name: '等待'
}, {
name: '错误'
}, {
name: '完成'
}, ],
num: 0,
scroll: 0
};
},
methods: {
BasicsSteps() {
this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
},
NumSteps() {
this.num= this.num == this.numList.length - 1 ? 0 : this.num + 1
},
ScrollSteps() {
this.scroll= this.scroll == 9 ? 0 : this.scroll + 1
}
}
}
</script>
<style>
</style>

169
Colorui-UniApp/pages/component/swiper.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">聊天</custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-pink"></text> 全屏限高轮播
</view>
<view class="action">
<switch @change="DotStyle" :class="dotStyle?'checked':''" :checked="dotStyle?true:false"></switch>
</view>
</view>
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</swiper-item>
</swiper>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 卡片式轮播
</view>
</view>
<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
indicator-active-color="#0081ff">
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
<view class="swiper-item">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</view>
</swiper-item>
</swiper>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 堆叠式轮播
</view>
</view>
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
<!-- #ifdef H5 -->
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'upx',zIndex:item.zIndex}]">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'rpx',zIndex:item.zIndex}]">
<!-- #endif -->
<view class="swiper-item">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
// #ifdef MP-WEIXIN
type: 'video',
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
// #endif
// #ifndef MP-WEIXIN
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
// #endif
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}, {
id: 4,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
}, {
id: 5,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
}, {
id: 6,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
dotStyle: false,
towerStart:0,
direction: ''
};
},
onLoad() {
this.TowerSwiper('swiperList');
// 初始化towerSwiper 传已有的数组名即可
},
methods: {
DotStyle(e) {
this.dotStyle = e.detail.value
},
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
// towerSwiper
// 初始化towerSwiper
TowerSwiper(name) {
let list = this[name];
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2)
}
this.swiperList = list
},
// towerSwiper触摸开始
TowerStart(e) {
this.towerStart = e.touches[0].pageX
},
// towerSwiper计算方向
TowerMove(e) {
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
},
// towerSwiper计算滚动
TowerEnd(e) {
let direction = this.direction;
let list = this.swiperList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < list.length; i++) {
list[i - 1].mLeft = list[i].mLeft
list[i - 1].zIndex = list[i].zIndex
}
list[list.length - 1].mLeft = mLeft;
list[list.length - 1].zIndex = zIndex;
this.swiperList = list
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = list.length - 1; i > 0; i--) {
list[i].mLeft = list[i - 1].mLeft
list[i].zIndex = list[i - 1].zIndex
}
list[0].mLeft = mLeft;
list[0].zIndex = zIndex;
this.swiperList = list
}
},
}
}
</script>
<style>
</style>

101
Colorui-UniApp/pages/component/timeline.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">时间轴</custom>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class="cu-item cur icon-noticefill">
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</view>
<view class="cu-item text-red icon-attentionforbidfill">
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</view>
<view class="cu-item text-grey icon-evaluate_fill">
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
</view>
<view class="cu-item text-blue">
<view class="bg-blue content">
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
</view>
<view class="bg-cyan content">
<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
</view>
</view>
</view>
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
</view>
</view>
</view>
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<view class="cu-capsule radius">
<view class="cu-tag bg-cyan">上午</view>
<view class="cu-tag line-cyan">10:00</view>
</view>
<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
</view>
</view>
<view class="cu-item text-blue">
<view class="bg-blue shadow-blur content">
<view class="cu-list menu menu-avatar radius">
<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="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red"></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>
<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 class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">文晓港
<view class="cu-tag round orange sm">SVIP</view>
</view>
<view class="text-gray text-sm">
<text class="icon-redpacket_fill text-red"></text> 收到红包</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<text class="icon-notice_forbid_fill text-gray"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>