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

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/basics/background/background.js
+2 -7
View File
@@ -1,11 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
ColorList: app.globalData.ColorList
}
})
demo/pages/basics/background/background.wxml
+65 -73
View File
@@ -1,130 +1,122 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 背景颜色
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">背景颜色</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
<view class="action">
<text class="icon-title text-blue"></text>深色背景
</view>
</view>
<view class='grid col-3 padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key>
<view class='bg-{{item.name}} padding radius text-center shadow-blur'>
<view class="grid col-3 padding-sm">
<view class="padding-sm" wx:for="{{ColorList}}" wx:key>
<view class="bg-{{item.name}} padding radius text-center shadow-blur">
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</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 class="action">
<text class="icon-title text-blue"></text>淡色背景
</view>
</view>
<view class='grid col-3 bg-white padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='bg-{{item.name}} padding radius text-center light'>
<view class="grid col-3 bg-white padding-sm">
<view class="padding-sm" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class="bg-{{item.name}} padding radius text-center light">
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</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 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="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 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="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 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="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 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="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 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="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 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="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 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 class="action">
<text class="icon-title text-blue"></text>图片背景
</view>
</view>
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
<view class='padding-xl text-white'>
<view class='padding-xs text-xl'>
我和春天有个约会
<view class="bg-img bg-mask padding-tb-xl" 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-xl">
钢铁之翼
</view>
<view class='padding-xs'>
I Have a Date with Spring
<view class="padding-xs">
Only the guilty need fear me.
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>视频背景
<!-- <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">
<video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' 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-xl'>
开源是创新的动力之源
<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'>
Open Source is the Power Source of Innovation
<cover-view class="padding-xs">
我必须连同希望一起毁坏……
</cover-view>
</cover-view>
</view>
</view> -->
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>透明背景(文字层)
<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-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeTop padding padding-bottom-xl'>
上面开始
</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='padding-sm'>
<view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeBottom padding padding-top-xl '>
下面开始
</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>