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

2.1.1

Browse Source
This commit is contained in:
Weilanwl
2019-03-27 00:56:15 +08:00
parent 5742a427fe
commit 2ab09927bc
48 changed files with 1629 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">操作条</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">操作条</block></cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-green"></text>

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">卡片</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-titles text-orange"></text> 案例类卡片
@@ -70,7 +70,7 @@
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
<view class="cu-list menu menu-avatar comment solids-top">
<view class="cu-list 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">

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">聊天</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
<view class="cu-chat">
<view class="cu-item self">
<view class="main">

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">表单</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">表单</block></cu-custom>
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>

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

@@ -1,14 +1,17 @@
<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>
<scroll-view scroll-y class="page">
<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 class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
@@ -83,5 +86,7 @@
</script>
<style>
.page {
height: 100vh;
}
</style>

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

@@ -1,6 +1,9 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">列表</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">列表</block>
</cu-custom>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 宫格列表
@@ -171,14 +174,14 @@
<text class="icon-title text-orange "></text> 消息列表
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text> </view>
</view>
<view class="action">
@@ -209,9 +212,8 @@
<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 class="text-pink"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
@@ -221,9 +223,10 @@
<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><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>
@@ -239,9 +242,8 @@
<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 class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">模态窗口</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">模态窗口</block></cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 普通窗口

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">导航栏</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom>
<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
Tab{{index}}
</view>

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">步骤条</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">步骤条</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 基本用法

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

@@ -1,6 +1,8 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">轮播图</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
<block slot="content">轮播图</block>
</cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-pink"></text> 全屏限高轮播
@@ -33,23 +35,17 @@
</swiper>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 堆叠式轮播
<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="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
<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>
@@ -64,13 +60,12 @@
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
// #ifdef MP-WEIXIN
// #ifdef MP
type: 'video',
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
// #endif
// #ifndef MP-WEIXIN
// #ifndef MP
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
// #endif
@@ -97,7 +92,7 @@
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
dotStyle: false,
towerStart:0,
towerStart: 0,
direction: ''
};
},
@@ -141,27 +136,33 @@
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < list.length; i++) {
for (let i = 1; i < this.swiperList.length; i++) {
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
console.log('end')
}
this.swiperList[list.length - 1].mLeft = mLeft;
this.swiperList[list.length - 1].zIndex = zIndex;
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = list.length - 1; i > 0; i--) {
for (let i = this.swiperList.length - 1; i > 0; i--) {
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
}
this.swiperList[0].mLeft = mLeft;
this.swiperList[0].zIndex = zIndex;
}
this.direction = ""
this.swiperList = this.swiperList
},
}
}
</script>
<style>
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100upx - 150upx);
z-index: var(--index);
}
</style>

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

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">时间轴</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">时间轴</block></cu-custom>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class="cu-item cur icon-noticefill">