mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-07 14:34:02 +08:00
ColorUi for UniApp V2.1.0
This commit is contained in:
Weilanwl
245
Colorui-UniApp/App.vue
Normal file
245
Colorui-UniApp/App.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
uni.getSystemInfo({
|
||||
success: function(e) {
|
||||
|
||||
// #ifdef H5
|
||||
Vue.prototype.StatusBar = e.statusbarHeight;
|
||||
if (e.platform == 'android') {
|
||||
Vue.prototype.CustomBar = e.statusbarHeight + 50;
|
||||
} else {
|
||||
Vue.prototype.CustomBar = e.statusbarHeight + 45;
|
||||
};
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
Vue.prototype.StatusBar = e.statusBarHeight;
|
||||
let custom = wx.getMenuButtonBoundingClientRect();
|
||||
Vue.prototype.Custom = custom;
|
||||
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
|
||||
// #endif
|
||||
|
||||
Vue.prototype.ColorList = [{
|
||||
title: '嫣红',
|
||||
name: 'red',
|
||||
color: '#e54d42'
|
||||
},
|
||||
{
|
||||
title: '桔橙',
|
||||
name: 'orange',
|
||||
color: '#f37b1d'
|
||||
},
|
||||
{
|
||||
title: '明黄',
|
||||
name: 'yellow',
|
||||
color: '#fbbd08'
|
||||
},
|
||||
{
|
||||
title: '橄榄',
|
||||
name: 'olive',
|
||||
color: '#8dc63f'
|
||||
},
|
||||
{
|
||||
title: '森绿',
|
||||
name: 'green',
|
||||
color: '#39b54a'
|
||||
},
|
||||
{
|
||||
title: '天青',
|
||||
name: 'cyan',
|
||||
color: '#1cbbb4'
|
||||
},
|
||||
{
|
||||
title: '海蓝',
|
||||
name: 'blue',
|
||||
color: '#0081ff'
|
||||
},
|
||||
{
|
||||
title: '姹紫',
|
||||
name: 'purple',
|
||||
color: '#6739b6'
|
||||
},
|
||||
{
|
||||
title: '木槿',
|
||||
name: 'mauve',
|
||||
color: '#9c26b0'
|
||||
},
|
||||
{
|
||||
title: '桃粉',
|
||||
name: 'pink',
|
||||
color: '#e03997'
|
||||
},
|
||||
{
|
||||
title: '棕褐',
|
||||
name: 'brown',
|
||||
color: '#a5673f'
|
||||
},
|
||||
{
|
||||
title: '玄灰',
|
||||
name: 'grey',
|
||||
color: '#8799a3'
|
||||
},
|
||||
{
|
||||
title: '草灰',
|
||||
name: 'gray',
|
||||
color: '#aaaaaa'
|
||||
},
|
||||
{
|
||||
title: '墨黑',
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
},
|
||||
{
|
||||
title: '雅白',
|
||||
name: 'white',
|
||||
color: '#ffffff'
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "icon.css";
|
||||
@import "colorui.css";
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 40upx 0px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
padding: 30upx;
|
||||
border-radius: 12upx;
|
||||
width: 45%;
|
||||
margin: 0 2.5% 40upx;
|
||||
background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-li::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: -10%;
|
||||
border-radius: 10upx;
|
||||
opacity: 0.2;
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
|
||||
.nav-li.cur {
|
||||
color: #fff;
|
||||
background: rgb(94, 185, 94);
|
||||
box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32upx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.nav-title::first-letter {
|
||||
font-size: 40upx;
|
||||
margin-right: 4upx;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
font-size: 28upx;
|
||||
text-transform: Capitalize;
|
||||
margin-top: 20upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-name::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 40upx;
|
||||
height: 6upx;
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-name::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100upx;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
right: 40upx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.nav-name::first-letter {
|
||||
font-weight: bold;
|
||||
font-size: 36upx;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.nav-li text {
|
||||
position: absolute;
|
||||
right: 30upx;
|
||||
top: 30upx;
|
||||
font-size: 52upx;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(40upx);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show {
|
||||
0% {
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(40upx);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3958
Colorui-UniApp/colorui.css
Normal file
3958
Colorui-UniApp/colorui.css
Normal file
File diff suppressed because it is too large
Load Diff
1228
Colorui-UniApp/icon.css
Normal file
1228
Colorui-UniApp/icon.css
Normal file
File diff suppressed because one or more lines are too long
BIN
Colorui-UniApp/images/BasicsBg.png
Normal file
BIN
Colorui-UniApp/images/BasicsBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
Colorui-UniApp/images/componentBg.png
Normal file
BIN
Colorui-UniApp/images/componentBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
Colorui-UniApp/images/logo.png
Normal file
BIN
Colorui-UniApp/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Colorui-UniApp/images/tabbar/about.png
Normal file
BIN
Colorui-UniApp/images/tabbar/about.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
Colorui-UniApp/images/tabbar/about_cur.png
Normal file
BIN
Colorui-UniApp/images/tabbar/about_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Colorui-UniApp/images/tabbar/basics.png
Normal file
BIN
Colorui-UniApp/images/tabbar/basics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Colorui-UniApp/images/tabbar/basics_cur.png
Normal file
BIN
Colorui-UniApp/images/tabbar/basics_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
Colorui-UniApp/images/tabbar/component.png
Normal file
BIN
Colorui-UniApp/images/tabbar/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
Colorui-UniApp/images/tabbar/component_cur.png
Normal file
BIN
Colorui-UniApp/images/tabbar/component_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
Colorui-UniApp/images/tabbar/plugin.png
Normal file
BIN
Colorui-UniApp/images/tabbar/plugin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
Colorui-UniApp/images/tabbar/plugin_cur.png
Normal file
BIN
Colorui-UniApp/images/tabbar/plugin_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
20
Colorui-UniApp/main.js
Normal file
20
Colorui-UniApp/main.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
import basics from './pages/basics/home.vue'
|
||||
Vue.component('basics',basics)
|
||||
|
||||
import components from './pages/component/home.vue'
|
||||
Vue.component('components',components)
|
||||
|
||||
import custom from './pages/custom/custom.vue'
|
||||
Vue.component('custom',custom)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
56
Colorui-UniApp/manifest.json
Normal file
56
Colorui-UniApp/manifest.json
Normal file
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"name" : "colorui",
|
||||
"appid" : "__UNI__239DC72",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
/* 5+App特有相关 */
|
||||
"modules" : {},
|
||||
/* 模块配置 */
|
||||
"distribute" : {
|
||||
/* 应用发布信息 */
|
||||
"android" : {
|
||||
/* android打包配置 */
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {},
|
||||
/* ios打包配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"quickapp" : {},
|
||||
/* 快应用特有相关 */
|
||||
"mp-weixin" : {
|
||||
/* 小程序特有相关 */
|
||||
"appid" : "wxfd5241d66a07713f",
|
||||
"setting" : {
|
||||
"urlCheck" : true
|
||||
}
|
||||
}
|
||||
}
|
||||
161
Colorui-UniApp/pages.json
Normal file
161
Colorui-UniApp/pages.json
Normal file
@@ -0,0 +1,161 @@
|
||||
{
|
||||
"pages" : [
|
||||
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path" : "pages/index/index",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "主页面"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/home",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "基础元素"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/layout",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "布局"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/background",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "背景"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/text",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "文本"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/icon",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "图标"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/button",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "按钮"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/design",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "按钮/设计"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/tag",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "标签"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/avatar",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "头像"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/progress",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "进度条"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/shadow",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "边框阴影"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/basics/loading",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "加载"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/home",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "交互组件"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/bar",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "操作条"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/custom/custom",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/nav",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "导航栏"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/list",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/card",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "卡片"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/form",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "表单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/timeline",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "时间轴"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/chat",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "聊天"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/swiper",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "轮播"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/modal",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "模态框"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/component/steps",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "步骤条"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle" : {
|
||||
"navigationBarBackgroundColor" : "#39b54a",
|
||||
"navigationBarTitleText" : "Color UI",
|
||||
"navigationStyle" : "custom",
|
||||
"navigationBarTextStyle" : "white"
|
||||
}
|
||||
}
|
||||
108
Colorui-UniApp/pages/basics/avatar.vue
Normal file
108
Colorui-UniApp/pages/basics/avatar.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>头像</custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
|
||||
<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
|
||||
<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
|
||||
<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
|
||||
<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar sm round margin-left bg-red"> A</view>
|
||||
<view class="cu-avatar round margin-left bg-red">B</view>
|
||||
<view class="cu-avatar lg round margin-left bg-red">C</view>
|
||||
<view class="cu-avatar xl round margin-left bg-red">D</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
|
||||
<view class="cu-avatar round margin-left bg-red">蓝</view>
|
||||
<view class="cu-avatar lg round margin-left bg-red">
|
||||
<text>wl</text>
|
||||
</view>
|
||||
<view class="cu-avatar xl round margin-left bg-red">
|
||||
<text class="avatar-text">网络</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>内嵌文字(图标)
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar radius">
|
||||
<text class="icon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar radius margin-left">
|
||||
<text>港</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="cu-avatar round lg margin-xs" :class="'bg-' + item.name" v-for="(item,index) in ColorList" :key="index">
|
||||
<text class="avatar-text">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像组
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar-group">
|
||||
<view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像标签
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar round lg margin-left" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]">
|
||||
<view class="cu-tag badge" :class="index%2==0?'icon-female bg-pink':'icon-male bg-blue'"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
avatar: [
|
||||
'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
|
||||
'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
|
||||
'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
|
||||
'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
|
||||
],
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
139
Colorui-UniApp/pages/basics/background.vue
Normal file
139
Colorui-UniApp/pages/basics/background.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>背景</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class='icon-title text-blue'></text>深色背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-3 padding-sm">
|
||||
<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
|
||||
<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
|
||||
<view class="text-lg">{{item.title}}</view>
|
||||
<view class="margin-top-sm text-Abc">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>淡色背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-3 bg-white padding-sm">
|
||||
<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v:if="index<12">
|
||||
<view class="padding radius text-center light" :class="'bg-' + item.name">
|
||||
<view class="text-lg">{{item.title}}</view>
|
||||
<view class="margin-top-sm text-Abc">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>渐变背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-2 padding-sm">
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-red padding radius text-center shadow-blur">
|
||||
<view class="text-lg">魅红</view>
|
||||
<view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-orange padding radius text-center shadow-blur">
|
||||
<view class="text-lg">鎏金</view>
|
||||
<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-green padding radius text-center shadow-blur">
|
||||
<view class="text-lg">翠柳</view>
|
||||
<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-blue padding radius text-center shadow-blur">
|
||||
<view class="text-lg">靛青</view>
|
||||
<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-purple padding radius text-center shadow-blur">
|
||||
<view class="text-lg">惑紫</view>
|
||||
<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
<view class="bg-gradual-pink padding radius text-center shadow-blur">
|
||||
<view class="text-lg">霞彩</view>
|
||||
<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>图片背景
|
||||
</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="padding-xl text-white">
|
||||
<view class="padding-xs text-xxl text-bold">
|
||||
钢铁之翼
|
||||
</view>
|
||||
<view class="padding-xs text-lg">
|
||||
Only the guilty need fear me.
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>视频背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-video bg-mask flex align-center" style="height: 422rpx;">
|
||||
<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>
|
||||
<cover-view class="padding-xl text-white ">
|
||||
<cover-view class="padding-xs text-xxl text-bold">
|
||||
暗裔剑魔
|
||||
</cover-view>
|
||||
<cover-view class="padding-xs">
|
||||
我必须连同希望一起毁坏……
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>透明背景(文字层)
|
||||
</view>
|
||||
</view>
|
||||
<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-shadeTop padding padding-bottom-xl">
|
||||
上面开始
|
||||
</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 class="bg-shadeBottom padding padding-top-xl flex-sub">
|
||||
下面开始
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
124
Colorui-UniApp/pages/basics/button.vue
Normal file
124
Colorui-UniApp/pages/basics/button.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>按钮
|
||||
<block slot="right">
|
||||
<navigator class="action" url="design" hover-class="none">
|
||||
<text class="icon-skinfill"></text>
|
||||
<text class="text-df">设计</text>
|
||||
</navigator>
|
||||
</block>
|
||||
</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex flex-wrap justify-between align-center bg-white">
|
||||
<button class="cu-btn">默认</button>
|
||||
<button class="cu-btn round">圆角</button>
|
||||
<button class="cu-btn icon">
|
||||
<text class="icon-emojifill"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex flex-wrap justify-between align-center bg-white">
|
||||
<button class="cu-btn round sm">小尺寸</button>
|
||||
<button class="cu-btn round">默认</button>
|
||||
<button class="cu-btn round lg">大尺寸</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮颜色
|
||||
</view>
|
||||
<view class="action">
|
||||
<text class="text-df margin-right-sm">阴影</text>
|
||||
<switch @change="SetShadow" :class="shadow?'checked':''"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
|
||||
<button class="cu-btn round" :class="['bg-' + item.name , shadow?'shadow':'']">{{item.title}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>镂空按钮
|
||||
</view>
|
||||
<view class="action">
|
||||
<radio-group @change="SetBorderSize">
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="" checked></radio>
|
||||
<text class="margin-left-sm">小</text>
|
||||
</label>
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="s"></radio>
|
||||
<text class="margin-left-sm">大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
|
||||
<button class="cu-btn round" :class="[bordersize?'lines-' + item.name:'line-' + item.name, shadow?'shadow':'']">{{item.title}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>块状按钮
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex flex-direction">
|
||||
<button class="cu-btn bg-grey lg">玄灰</button>
|
||||
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>无效状态
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
|
||||
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮加图标
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-xl">
|
||||
<button class="cu-btn block line-orange lg">
|
||||
<text class="icon-upload"></text> 图标</button>
|
||||
<button class="cu-btn block bg-blue margin-tb-sm lg">
|
||||
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
|
||||
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
shadow: false,
|
||||
bordersize: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
SetShadow(e) {
|
||||
this.shadow = e.detail.value
|
||||
},
|
||||
SetBorderSize(e) {
|
||||
this.bordersize = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
131
Colorui-UniApp/pages/basics/design.vue
Normal file
131
Colorui-UniApp/pages/basics/design.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom> 按钮 / 设计</custom>
|
||||
<view class="padding-xl">
|
||||
<view class="box bg-white text-center radius">
|
||||
<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>
|
||||
</view>
|
||||
<view class="padding text-center">
|
||||
class="cu-btn <text v-if="color">{{' '}} {{border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color}}
|
||||
{{round?'round':''}} {{size}} {{shadow?'shadow':''}}</text>"
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group margin-top" @tap="showModal" data-target="ColorModal">
|
||||
<view class="title">选择颜色</view>
|
||||
<view class="padding-sm solid radius shadow-blur" :class="'bg-'+color"></view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">是否圆角</view>
|
||||
<switch @change="SetRound" class="blue" :class="round?'checked':''"></switch>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">选择尺寸</view>
|
||||
<radio-group @change="SetSize">
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="sm"></radio>
|
||||
<text class="margin-left-sm"> 小</text>
|
||||
</label>
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="" checked></radio>
|
||||
<text class="margin-left-sm"> 中</text>
|
||||
</label>
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="lg"></radio>
|
||||
<text class="margin-left-sm"> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">是否添加阴影</view>
|
||||
<switch @change="SetShadow" :class="shadow?'checked':''"></switch>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">是否镂空</view>
|
||||
<switch @change="SetBorder" :class="border?'checked':''"></switch>
|
||||
</view>
|
||||
<view class="cu-form-group" v-if="border">
|
||||
<view class="title">边框大小</view>
|
||||
<radio-group @change="SetBorderSize">
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value"" checked></radio>
|
||||
<text class="margin-left-sm"> 小</text>
|
||||
</label>
|
||||
<label class="margin-left-sm">
|
||||
<radio class="blue radio" value="s"></radio>
|
||||
<text class="margin-left-sm"> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" @tap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name">
|
||||
<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
modalName: '',
|
||||
round: false,
|
||||
size: '',
|
||||
color: '',
|
||||
shadow: false,
|
||||
border: false,
|
||||
bordersize: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showModal(e) {
|
||||
this.modalName = e.currentTarget.dataset.target
|
||||
},
|
||||
hideModal(e) {
|
||||
this.modalName = null
|
||||
},
|
||||
SetRound(e) {
|
||||
this.round = e.detail.value
|
||||
},
|
||||
SetSize(e) {
|
||||
this.size = e.detail.value
|
||||
},
|
||||
SetColor(e) {
|
||||
this.color = e.currentTarget.dataset.color;
|
||||
this.modalName = null
|
||||
},
|
||||
SetShadow(e) {
|
||||
this.shadow = e.detail.value
|
||||
},
|
||||
SetBorder(e) {
|
||||
this.border = e.detail.value
|
||||
if (!e.detail.value) {
|
||||
this.bordersize = false
|
||||
}
|
||||
},
|
||||
SetBorderSize(e) {
|
||||
this.bordersize = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
87
Colorui-UniApp/pages/basics/home.vue
Normal file
87
Colorui-UniApp/pages/basics/home.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view>
|
||||
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png" mode="widthFix" class="response"></image>
|
||||
<view class="nav-list">
|
||||
<navigator hover-class="none" :url="'/pages/basics/' + 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: 'layout',
|
||||
color: 'cyan',
|
||||
icon: 'newsfill'
|
||||
},
|
||||
{
|
||||
title: '背景',
|
||||
name: 'background',
|
||||
color: 'blue',
|
||||
icon: 'colorlens'
|
||||
},
|
||||
{
|
||||
title: '文本',
|
||||
name: 'text',
|
||||
color: 'purple',
|
||||
icon: 'font'
|
||||
},
|
||||
{
|
||||
title: '图标 ',
|
||||
name: 'icon',
|
||||
color: 'mauve',
|
||||
icon: 'icon'
|
||||
},
|
||||
{
|
||||
title: '按钮',
|
||||
name: 'button',
|
||||
color: 'pink',
|
||||
icon: 'btn'
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
name: 'tag',
|
||||
color: 'brown',
|
||||
icon: 'tagfill'
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
name: 'avatar',
|
||||
color: 'red',
|
||||
icon: 'myfill'
|
||||
},
|
||||
{
|
||||
title: '进度条',
|
||||
name: 'progress',
|
||||
color: 'orange',
|
||||
icon: 'icloading'
|
||||
},
|
||||
{
|
||||
title: '边框阴影',
|
||||
name: 'shadow',
|
||||
color: 'olive',
|
||||
icon: 'copy'
|
||||
},
|
||||
{
|
||||
title: '加载',
|
||||
name: 'loading',
|
||||
color: 'green',
|
||||
icon: 'loading2'
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
939
Colorui-UniApp/pages/basics/icon.vue
Normal file
939
Colorui-UniApp/pages/basics/icon.vue
Normal file
@@ -0,0 +1,939 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>图标</custom>
|
||||
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
|
||||
<view class="search-form round">
|
||||
<text class="icon-search"></text>
|
||||
<input type="text" placeholder="搜索icon" confirm-type="search" @input="searchIcon"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list grid col-3">
|
||||
<view class="cu-item" v-for="(item,index) in icon" :key="index" v-if="item.isShow">
|
||||
<text class="lg text-gray" :class="'icon-' + item.name"></text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
icon: [{
|
||||
name: 'appreciate',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'check',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'close',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'edit',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'emoji',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'favorfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'favor',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'loading',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'locationfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'location',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'phone',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundcheckfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundcheck',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundclosefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundclose',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundrightfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundright',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'search',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'taxi',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'timefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'time',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'unfold',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'warnfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'warn',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'camerafill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'camera',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'commentfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'comment',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'likefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'like',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'notificationfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'notification',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'order',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'samefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'same',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'deliver',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'evaluate',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pay',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'send',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'shop',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'ticket',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'back',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cascades',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'discover',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'list',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'more',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'scan',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'settings',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'questionfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'question',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'shopfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'form',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pic',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'filter',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'footprint',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'top',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pulldown',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pullup',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'right',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'refresh',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'moreandroid',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'deletefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'refund',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cart',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'qrcode',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'remind',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'delete',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'profile',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'home',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cartfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'discoverfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'homefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'message',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'addressbook',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'link',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'lock',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'unlock',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'vip',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'weibo',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'activity',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friendaddfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friendadd',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friendfamous',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friend',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'goods',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'selection',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'explore',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'present',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'squarecheckfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'square',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'squarecheck',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'round',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundaddfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundadd',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'add',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'notificationforbidfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'explorefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'fold',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'game',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'redpacket',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'selectionfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'similar',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'appreciatefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'infofill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'info',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'forwardfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'forward',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'rechargefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'recharge',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'vipcard',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'voice',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'voicefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friendfavor',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'wifi',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'share',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'wefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'we',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'lightauto',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'lightforbid',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'lightfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'camerarotate',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'light',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'barcode',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'flashlightclose',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'flashlightopen',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'searchlist',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'service',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'sort',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'down',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'mobile',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'mobilefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'copy',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'countdownfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'countdown',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'noticefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'notice',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'upstagefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'upstage',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'babyfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'baby',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'brandfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'brand',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'choicenessfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'choiceness',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'clothesfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'clothes',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'creativefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'creative',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'female',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'keyboard',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'male',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'newfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'new',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pullleft',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pullright',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'rankfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'rank',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'bad',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cameraadd',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'focus',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'friendfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cameraaddfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'apps',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'paintfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'paint',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'picfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'refresharrow',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'colorlens',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'markfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'mark',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'presentfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'repeal',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'album',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'peoplefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'people',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'servicefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'repair',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'file',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'repairfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'taoxiaopu',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'weixin',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attentionfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attention',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'commandfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'command',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'communityfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'community',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'read',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'calendar',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cut',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'magic',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'backwardfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'playfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'stop',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'tagfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'tag',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'group',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'all',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'backdelete',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'hotfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'hot',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'post',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'radiobox',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'rounddown',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'upload',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'writefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'write',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'radioboxfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'punch',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'shake',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'move',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'safe',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'activityfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'crownfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'crown',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'goodsfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'messagefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'profilefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'sound',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'sponsorfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'sponsor',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'upblock',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'weblock',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'weunblock',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'my',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'myfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'emojifill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'emojiflashfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'flashbuyfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'text',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'goodsfavor',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'musicfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'musicforbidfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'card',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'triangledownfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'triangleupfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'roundleftfill-copy',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'font',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'title',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'recordfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'record',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cardboardfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cardboard',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'formfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'coin',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'cardboardforbid',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'circlefill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'circle',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attentionforbid',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attentionforbidfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attentionfavorfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'attentionfavor',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'titles',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'icloading',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'full',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'mail',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'peoplelist',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'goodsnewfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'goodsnew',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'medalfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'medal',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'newsfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'newshotfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'newshot',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'news',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'videofill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'video',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'exit',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'skinfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'skin',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'moneybagfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'usefullfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'usefull',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'moneybag',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'redpacket_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'subscription',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'loading1',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'github',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'global',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'settingsfill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'back_android',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'expressman',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'evaluate_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'group_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'play_forward_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'deliver_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'notice_forbid_fill',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'fork',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'pick',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'wenzi',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'ellipse',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'qr_code',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'dianhua',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'icon',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'loading2',
|
||||
isShow: true
|
||||
}, {
|
||||
name: 'btn',
|
||||
isShow: true
|
||||
}]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
searchIcon(e) {
|
||||
let key = e.detail.value.toLowerCase();
|
||||
let list = this.icon;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let a = key;
|
||||
let b = list[i].name.toLowerCase();
|
||||
if (b.search(a) != -1) {
|
||||
list[i].isShow = true
|
||||
} else {
|
||||
list[i].isShow = false
|
||||
}
|
||||
}
|
||||
this.icon = list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
padding-top: 50px;
|
||||
}
|
||||
</style>
|
||||
207
Colorui-UniApp/pages/basics/layout.vue
Normal file
207
Colorui-UniApp/pages/basics/layout.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>布局</custom>
|
||||
<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
|
||||
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
|
||||
:data-id="index">
|
||||
{{tabNav[index]}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<block v-if="TabCur==0">
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>固定尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="flex flex-wrap">
|
||||
<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
|
||||
<view class="basis-df"></view>
|
||||
<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
|
||||
<view class="basis-df"></view>
|
||||
<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
|
||||
<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
|
||||
<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>比例布局
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="flex">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
</view>
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
|
||||
</view>
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
|
||||
<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>水平对齐(justify)
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
<view class="flex solid-bottom padding justify-start">
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-end">
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-center">
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-between">
|
||||
<view class="bg-grey padding-sm margin-xs radius">between</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">between</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-around">
|
||||
<view class="bg-grey padding-sm margin-xs radius">around</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">around</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>垂直对齐(align)
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
<view class="flex solid-bottom padding align-start">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-end">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-center">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="TabCur==1">
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>等分列
|
||||
</view>
|
||||
<view class="action"></view>
|
||||
</view>
|
||||
<view class="bg-white padding">
|
||||
<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
|
||||
<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>等高
|
||||
</view>
|
||||
<view class="action"></view>
|
||||
</view>
|
||||
<view class="bg-white padding">
|
||||
<view class="grid col-4 grid-square">
|
||||
<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="TabCur==2">
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>浮动
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white padding">
|
||||
<view class=" cf padding-sm">
|
||||
<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
|
||||
<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>内外边距
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">内边距</view>
|
||||
<view class="basis-df">.margin-{size}</view>
|
||||
<view class="basis-df">.padding-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
|
||||
<view class="basis-df">.margin-lr-{size}</view>
|
||||
<view class="basis-df">.padding-lr-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
|
||||
<view class="basis-df">.margin-tb-{size}</view>
|
||||
<view class="basis-df">.padding-tb-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">上外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">上内边距</view>
|
||||
<view class="basis-df">.margin-top-{size}</view>
|
||||
<view class="basis-df">.padding-top-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">右外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">右内边距</view>
|
||||
<view class="basis-df">.margin-right-{size}</view>
|
||||
<view class="basis-df">.padding-right-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">下外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">下内边距</view>
|
||||
<view class="basis-df">margin-bottom-{size}</view>
|
||||
<view class="basis-df">.padding-bottom-{size}</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap padding solid-top">
|
||||
<view class="basis-df padding-bottom-xs">左外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">左内边距</view>
|
||||
<view class="basis-df">.margin-left-{size}</view>
|
||||
<view class="basis-df">.padding-left-{size}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
TabCur: 0,
|
||||
avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
|
||||
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabSelect(e) {
|
||||
this.TabCur = e.currentTarget.dataset.id;
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
padding-top: 45px;
|
||||
}
|
||||
</style>
|
||||
101
Colorui-UniApp/pages/basics/loading.vue
Normal file
101
Colorui-UniApp/pages/basics/loading.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>加载
|
||||
<block slot="right">
|
||||
<view class="action">
|
||||
<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
|
||||
</view>
|
||||
</block>
|
||||
</custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load bg-blue" :class="!isLoad?'loading':'over'"></view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>加载状态
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch @change="isLoading" :class="isLoad?'checked':''"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>加载错误
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load bg-red erro"></view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>弹框加载
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" @tap="LoadModal">
|
||||
点我
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load load-modal" v-if="loadModal">
|
||||
<!-- <view class="icon-emojifill text-orange"></view> -->
|
||||
<image src="/static/logo.png" mode="aspectFit"></image>
|
||||
<view class="gray-text">加载中...</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条加载
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" @tap="LoadProgress">
|
||||
点我
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
|
||||
<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
|
||||
<view class="load-progress-spinner text-green"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
isLoad:false,
|
||||
loadModal: false,
|
||||
loadProgress: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isLoading(e) {
|
||||
this.isLoad = e.detail.value;
|
||||
},
|
||||
LoadModal(e) {
|
||||
this.loadModal = true;
|
||||
setTimeout(() => {
|
||||
this.loadModal = false;
|
||||
}, 2000)
|
||||
},
|
||||
LoadProgress(e) {
|
||||
this.loadProgress = this.loadProgress + 3;
|
||||
if (this.loadProgress < 100) {
|
||||
setTimeout(() => {
|
||||
this.LoadProgress();
|
||||
}, 100)
|
||||
} else {
|
||||
this.loadProgress = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
154
Colorui-UniApp/pages/basics/progress.vue
Normal file
154
Colorui-UniApp/pages/basics/progress.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>进度条</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="cu-progress">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
|
||||
</view>
|
||||
<view class="cu-progress radius margin-top">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
|
||||
</view>
|
||||
<view class="cu-progress round margin-top">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="cu-progress round">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
|
||||
</view>
|
||||
<view class="cu-progress round margin-top sm">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
|
||||
</view>
|
||||
<view class="cu-progress round margin-top xs">
|
||||
<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top" @tap="showModal" data-target="ColorModal">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条颜色
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="padding-sm solid radius shadow-blur" :class="'bg-' + color"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding" :class="color=='white'?'bg-grey':'bg-white'">
|
||||
<view class="cu-progress round">
|
||||
<view :class="'bg-' + color" :style="[{ width:loading?'61.8%':''}]"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条条纹
|
||||
</view>
|
||||
<switch class="margin-right-sm" :class="active?'checked':''" @change="SetActive"></switch>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="cu-progress round sm striped" :class="active?'active':''">
|
||||
<view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
|
||||
</view>
|
||||
<view class="cu-progress round sm margin-top-sm striped" :class="active?'active':''">
|
||||
<view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条比例
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class="cu-progress radius striped active">
|
||||
<view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
|
||||
<view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
|
||||
<view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条布局
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white ">
|
||||
<view class="flex">
|
||||
<view class="cu-progress round">
|
||||
<view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
|
||||
</view>
|
||||
<text class="icon-roundcheckfill text-green margin-left-sm"></text>
|
||||
</view>
|
||||
<view class="flex margin-top">
|
||||
<view class="cu-progress round">
|
||||
<view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
|
||||
</view>
|
||||
<text class="margin-left">80%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" @tap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name"
|
||||
v-if="item.name!='gray'">
|
||||
<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
color: 'red',
|
||||
loading: false,
|
||||
modalName: '',
|
||||
active: false
|
||||
};
|
||||
},
|
||||
onLoad: function() {
|
||||
let that = this;
|
||||
setTimeout(function() {
|
||||
that.loading = true
|
||||
}, 500)
|
||||
},
|
||||
methods: {
|
||||
showModal(e) {
|
||||
this.modalName = e.currentTarget.dataset.target
|
||||
},
|
||||
hideModal(e) {
|
||||
this.modalName = null
|
||||
},
|
||||
SetColor(e) {
|
||||
this.color = e.currentTarget.dataset.color;
|
||||
this.modalName = null
|
||||
},
|
||||
SetActive(e) {
|
||||
this.active = e.detail.value
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
53
Colorui-UniApp/pages/basics/shadow.vue
Normal file
53
Colorui-UniApp/pages/basics/shadow.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>边框阴影</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>边框
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch class="sm" @change="SetSize" :class="size?'checked':''"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white text-center">
|
||||
<view class="padding" :class="size?'solids':'solid'">四周</view>
|
||||
<view class="padding margin-top" :class="size?'solids-top':'solid-top'">上</view>
|
||||
<view class="padding margin-top" :class="size?'solids-right':'solid-right'">右</view>
|
||||
<view class="padding margin-top" :class="size?'solids-bottom':'solid-bottom'">下</view>
|
||||
<view class="padding margin-top" :class="size?'solids-left':'solid-left'">左</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>阴影
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding text-center">
|
||||
<view class="padding-xl radius shadow bg-white"> 默认阴影</view>
|
||||
<view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>
|
||||
<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
|
||||
<view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
|
||||
<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
|
||||
<view>根据背景颜色而改变的阴影</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
SetSize(e) {
|
||||
this.size = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
130
Colorui-UniApp/pages/basics/tag.vue
Normal file
130
Colorui-UniApp/pages/basics/tag.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>标签</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>标签形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white solid-bottom">
|
||||
<view class='cu-tag'>默认</view>
|
||||
<view class='cu-tag round'>椭圆</view>
|
||||
<view class='cu-tag radius'>圆角</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>标签尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
<view class='cu-tag radius sm'>小尺寸</view>
|
||||
<view class='cu-tag radius'>普通尺寸</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>标签颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm flex flex-wrap'>
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
|
||||
<view class='cu-tag' :class="'bg-' + item.name">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
|
||||
<view class='cu-tag light' :class="'bg-' + item.name">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>镂空标签
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm flex flex-wrap'>
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
|
||||
<view class='cu-tag' :class="'line-' + item.name">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>胶囊样式
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-capsule">
|
||||
<view class='cu-tag bg-red'>
|
||||
<text class='icon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-red">
|
||||
12
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule round">
|
||||
<view class='cu-tag bg-blue '>
|
||||
<text class='icon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule round">
|
||||
<view class='cu-tag bg-blue '>
|
||||
说明
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
123
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class='cu-tag bg-grey '>
|
||||
<text class='icon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-grey">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class='cu-tag bg-brown sm'>
|
||||
<text class='icon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-brown sm">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>数字标签
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex justify-between align-center">
|
||||
<view class='cu-avatar xl radius'>
|
||||
港
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
|
||||
<view class='cu-tag badge'>9</view>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<text class='icon-people'></text>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius'>
|
||||
<view class='cu-tag badge'>99+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
157
Colorui-UniApp/pages/basics/text.vue
Normal file
157
Colorui-UniApp/pages/basics/text.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view>
|
||||
<custom>文本</custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>文字大小
|
||||
</view>
|
||||
</view>
|
||||
<view class='bg-white padding-lr'>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>60</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xsl padding'>
|
||||
<text class=' icon-roundcheckfill text-green'></text>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等特大显示</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>40</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-sl padding'>
|
||||
<text class=' icon-roundcheckfill text-green'></text>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等较大显示</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>22</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xxl padding'>
|
||||
<text class='text-price text-red'>80.00</text>
|
||||
</view>
|
||||
<view class='padding'>用于金额数字等信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>18</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xl padding'>
|
||||
<text class='text-black text-bold'>您的订单已提交成功！</text>
|
||||
</view>
|
||||
<view class='padding'>页面大标题，用于结果页等单一信息页</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>16</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-lg padding'>
|
||||
<text class='text-black'>ColorUI组件库</text>
|
||||
</view>
|
||||
<view class='padding'>页面小标题，首要层级显示内容</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>14</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
|
||||
<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>12</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-sm padding'>
|
||||
<text class='text-grey'>衬衫的价格是9磅15便士</text>
|
||||
</view>
|
||||
<view class='padding'>页面辅助信息，次级内容等</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-xs flex align-center'>
|
||||
<view class='padding'>10</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xs padding'>
|
||||
<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
|
||||
</view>
|
||||
<view class='padding'>说明文本，标签文字等关注度低的文字</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>文字颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class='grid col-5 padding-sm'>
|
||||
<view class='padding-sm' v-for="(item,index) in ColorList" :key="index">
|
||||
<view class='text-center' :class="'text-' + item.name">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>文字截断
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding bg-white'>
|
||||
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>文字对齐
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding bg-white'>
|
||||
<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>特殊文字
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding text-center'>
|
||||
<view class='padding-lr bg-white'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-price'>80.00</text>
|
||||
</view>
|
||||
<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-Abc'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>英文单词首字母大写</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-ABC'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>全部字母大写</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-abc'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>全部字母小写</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ColorList: this.ColorList,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
449
Colorui-UniApp/pages/component/bar.vue
Normal file
449
Colorui-UniApp/pages/component/bar.vue
Normal 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
167
Colorui-UniApp/pages/component/card.vue
Normal 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
114
Colorui-UniApp/pages/component/chat.vue
Normal 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
400
Colorui-UniApp/pages/component/form.vue
Normal 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
87
Colorui-UniApp/pages/component/home.vue
Normal 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
416
Colorui-UniApp/pages/component/list.vue
Normal 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
276
Colorui-UniApp/pages/component/modal.vue
Normal 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
90
Colorui-UniApp/pages/component/nav.vue
Normal 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
114
Colorui-UniApp/pages/component/steps.vue
Normal 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
169
Colorui-UniApp/pages/component/swiper.vue
Normal 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
101
Colorui-UniApp/pages/component/timeline.vue
Normal 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>
|
||||
49
Colorui-UniApp/pages/custom/custom.vue
Normal file
49
Colorui-UniApp/pages/custom/custom.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
|
||||
<view class="cu-bar fixed" :style="[{height:CustomBar + 'px',paddingTop:StatusBar + 'px'}]" :class="bgColor">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<navigator class='action' open-type="navigateBack" :delta="1" hover-class="none">
|
||||
<text class='icon-back'></text>
|
||||
<slot></slot>
|
||||
</navigator>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='action' @tap="BackPage">
|
||||
<text class='icon-back'></text>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
StatusBar: this.StatusBar,
|
||||
CustomBar: this.CustomBar
|
||||
};
|
||||
},
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'bg-gradual-blue'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
BackPage() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
40
Colorui-UniApp/pages/index/index.vue
Normal file
40
Colorui-UniApp/pages/index/index.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view>
|
||||
<basics v-if="PageCur=='basics'"></basics>
|
||||
<components v-if="PageCur=='component'"></components>
|
||||
<view class="cu-tabbar-height"></view>
|
||||
<view class="cu-bar tabbar bg-white shadow foot">
|
||||
<view class="action" @click="NavChange" data-cur="basics">
|
||||
<view class='icon-cu-image'>
|
||||
<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
|
||||
</view>
|
||||
<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
|
||||
</view>
|
||||
<view class="action" @click="NavChange" data-cur="component">
|
||||
<view class='icon-cu-image'>
|
||||
<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
|
||||
</view>
|
||||
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PageCur: 'basics'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
NavChange: function(e) {
|
||||
this.PageCur = e.currentTarget.dataset.cur
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
BIN
Colorui-UniApp/static/BasicsBg.png
Normal file
BIN
Colorui-UniApp/static/BasicsBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
Colorui-UniApp/static/componentBg.png
Normal file
BIN
Colorui-UniApp/static/componentBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
Colorui-UniApp/static/logo.png
Normal file
BIN
Colorui-UniApp/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Colorui-UniApp/static/tabbar/about.png
Normal file
BIN
Colorui-UniApp/static/tabbar/about.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
Colorui-UniApp/static/tabbar/about_cur.png
Normal file
BIN
Colorui-UniApp/static/tabbar/about_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Colorui-UniApp/static/tabbar/basics.png
Normal file
BIN
Colorui-UniApp/static/tabbar/basics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Colorui-UniApp/static/tabbar/basics_cur.png
Normal file
BIN
Colorui-UniApp/static/tabbar/basics_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
Colorui-UniApp/static/tabbar/component.png
Normal file
BIN
Colorui-UniApp/static/tabbar/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
Colorui-UniApp/static/tabbar/component_cur.png
Normal file
BIN
Colorui-UniApp/static/tabbar/component_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
Colorui-UniApp/static/tabbar/plugin.png
Normal file
BIN
Colorui-UniApp/static/tabbar/plugin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
Colorui-UniApp/static/tabbar/plugin_cur.png
Normal file
BIN
Colorui-UniApp/static/tabbar/plugin_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Reference in New Issue
Block a user