mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
v2.1.2
This commit is contained in:
Weilanwl
@@ -8,5 +8,8 @@
|
||||
"navigationBarTitleText": "ColorUI",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
},
|
||||
"usingComponents": {
|
||||
"cu-custom": "/colorui/components/cu-custom"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,131 +1,2 @@
|
||||
@import "icon.wxss";
|
||||
@import "colorui.wxss";
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 40rpx 0px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
padding: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 45%;
|
||||
margin: 0 2.5% 40rpx;
|
||||
background-image: url(https://image.weilanwl.com/color2.0/cardBg.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: 10rpx;
|
||||
opacity: 0.2;
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
|
||||
.nav-li.cur {
|
||||
color: #fff;
|
||||
background: rgb(94, 185, 94);
|
||||
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.nav-title::first-letter {
|
||||
font-size: 40rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
font-size: 28rpx;
|
||||
text-transform: Capitalize;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-name::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-name::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
right: 40rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.nav-name::first-letter {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.nav-li text {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
font-size: 52rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show {
|
||||
0% {
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@import "colorui/main.wxss";
|
||||
@import "colorui/icon.wxss";
|
||||
|
||||
184
template/colorui/animation.wxss
Normal file
184
template/colorui/animation.wxss
Normal file
@@ -0,0 +1,184 @@
|
||||
/*
|
||||
Animation 微动画
|
||||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
||||
*/
|
||||
|
||||
/* css 滤镜 控制黑白底色gif的 */
|
||||
.gif-black{
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.gif-white{
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
|
||||
/* Animation css */
|
||||
[class*=animation-] {
|
||||
animation-duration: .5s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: both
|
||||
}
|
||||
|
||||
.animation-fade {
|
||||
animation-name: fade;
|
||||
animation-duration: .8s;
|
||||
animation-timing-function: linear
|
||||
}
|
||||
|
||||
.animation-scale-up {
|
||||
animation-name: scale-up
|
||||
}
|
||||
|
||||
.animation-scale-down {
|
||||
animation-name: scale-down
|
||||
}
|
||||
|
||||
.animation-slide-top {
|
||||
animation-name: slide-top
|
||||
}
|
||||
|
||||
.animation-slide-bottom {
|
||||
animation-name: slide-bottom
|
||||
}
|
||||
|
||||
.animation-slide-left {
|
||||
animation-name: slide-left
|
||||
}
|
||||
|
||||
.animation-slide-right {
|
||||
animation-name: slide-right
|
||||
}
|
||||
|
||||
.animation-shake {
|
||||
animation-name: shake
|
||||
}
|
||||
|
||||
.animation-reverse {
|
||||
animation-direction: reverse
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.2)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.8)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(-9px)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(8px)
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(-7px)
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(6px)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5px)
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(4px)
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-3px)
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(2px)
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(-1px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
54
template/colorui/components/cu-custom.js
Normal file
54
template/colorui/components/cu-custom.js
Normal file
@@ -0,0 +1,54 @@
|
||||
const app = getApp();
|
||||
Component({
|
||||
/**
|
||||
* 组件的一些选项
|
||||
*/
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true
|
||||
},
|
||||
/**
|
||||
* 组件的对外属性
|
||||
*/
|
||||
properties: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isCustom: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
isBack: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
bgImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
Custom: app.globalData.Custom
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
BackPage() {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
toHome(){
|
||||
wx.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
4
template/colorui/components/cu-custom.json
Normal file
4
template/colorui/components/cu-custom.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
16
template/colorui/components/cu-custom.wxml
Normal file
16
template/colorui/components/cu-custom.wxml
Normal file
@@ -0,0 +1,16 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px">
|
||||
<view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
|
||||
<view class="action" bindtap="BackPage" wx:if="{{isBack}}">
|
||||
<text class="icon-back"></text>
|
||||
<slot name="backText"></slot>
|
||||
</view>
|
||||
<view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
|
||||
<text class="icon-back" bindtap="BackPage"></text>
|
||||
<text class="icon-homefill" bindtap="toHome"></text>
|
||||
</view>
|
||||
<view class="content" style="top:{{StatusBar}}px">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
1
template/colorui/components/cu-custom.wxss
Normal file
1
template/colorui/components/cu-custom.wxss
Normal file
@@ -0,0 +1 @@
|
||||
/* colorui/components/cu-custom.wxss */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,6 @@
|
||||
<view class='cu-custom' style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<view class='content' style='top:{{StatusBar}}px;'>ColorUI 空白模板</view>
|
||||
</view>
|
||||
</view>
|
||||
<cu-custom bgColor="bg-gradual-blue">
|
||||
<view slot="content">ColorUI 空白模板</view>
|
||||
</cu-custom>
|
||||
<view class="margin-xl padding-xl bg-white radius shadow-lg">
|
||||
<view class="flex justify-center">
|
||||
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='cu-btn round bg-green shadow'> 获取头像昵称 </button>
|
||||
@@ -14,7 +12,6 @@
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-center margin-top">
|
||||
<text class="text-grey text-xl">{{motto}}</text>
|
||||
</view>
|
||||
Reference in New Issue
Block a user