mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-06-08 15:23:17 +08:00
v2.1.3
This commit is contained in:
Weilanwl
@@ -1,7 +1,7 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">头像</view></cu-custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像形状
|
||||
<text class="cuIcon-title text-blue"></text>头像形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
@@ -10,7 +10,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像尺寸
|
||||
<text class="cuIcon-title text-blue"></text>头像尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
@@ -37,12 +37,12 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>内嵌文字(图标)
|
||||
<text class="cuIcon-title text-blue"></text>内嵌文字(图标)
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar radius">
|
||||
<text class="icon-people"></text>
|
||||
<text class="cuIcon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar radius margin-left">
|
||||
<text>港</text>
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像颜色
|
||||
<text class="cuIcon-title text-blue"></text>头像颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm">
|
||||
@@ -61,7 +61,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像组
|
||||
<text class="cuIcon-title text-blue"></text>头像组
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
@@ -72,11 +72,11 @@
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>头像标签
|
||||
<text class="cuIcon-title text-blue"></text>头像标签
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);">
|
||||
<view class="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
|
||||
<view class="cu-tag badge {{index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -4,7 +4,7 @@
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>深色背景
|
||||
<text class="cuIcon-title text-blue"></text>深色背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-3 padding-sm">
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>淡色背景
|
||||
<text class="cuIcon-title text-blue"></text>淡色背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-3 bg-white padding-sm">
|
||||
@@ -31,7 +31,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>渐变背景
|
||||
<text class="cuIcon-title text-blue"></text>渐变背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-2 padding-sm">
|
||||
@@ -74,7 +74,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>图片背景
|
||||
<text class="cuIcon-title text-blue"></text>图片背景
|
||||
</view>
|
||||
</view>
|
||||
<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;">
|
||||
@@ -89,7 +89,7 @@
|
||||
</view>
|
||||
<!-- <view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>视频背景
|
||||
<text class="cuIcon-title text-blue"></text>视频背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-video bg-mask flex align-center" style="height: 422rpx;">
|
||||
@@ -105,7 +105,7 @@
|
||||
</view> -->
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>透明背景(文字层)
|
||||
<text class="cuIcon-title text-blue"></text>透明背景(文字层)
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-2">
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮形状
|
||||
<text class="cuIcon-title text-blue"></text>按钮形状
|
||||
</view>
|
||||
<navigator class="action" url="design" hover-class="none">
|
||||
<text class="icon-skinfill"></text>
|
||||
<text class="cuIcon-skinfill"></text>
|
||||
<text class="text-df">设计</text>
|
||||
</navigator>
|
||||
</view>
|
||||
@@ -15,12 +15,12 @@
|
||||
<button class="cu-btn">默认</button>
|
||||
<button class="cu-btn round">圆角</button>
|
||||
<button class="cu-btn icon">
|
||||
<text class="icon-emojifill"></text>
|
||||
<text class="cuIcon-emojifill"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮尺寸
|
||||
<text class="cuIcon-title text-blue"></text>按钮尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex flex-wrap justify-between align-center bg-white">
|
||||
@@ -30,7 +30,7 @@
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮颜色
|
||||
<text class="cuIcon-title text-blue"></text>按钮颜色
|
||||
</view>
|
||||
<view class="action">
|
||||
<text class="text-df margin-right-sm">阴影</text>
|
||||
@@ -44,7 +44,7 @@
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>镂空按钮
|
||||
<text class="cuIcon-title text-blue"></text>镂空按钮
|
||||
</view>
|
||||
<view class="action">
|
||||
<radio-group bindchange="SetBorderSize">
|
||||
@@ -60,13 +60,13 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
|
||||
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key wx:if="{{item.name!='white'}}">
|
||||
<button class="cu-btn round line{{bordersize?bordersize:''}}-{{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>块状按钮
|
||||
<text class="cuIcon-title text-blue"></text>块状按钮
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex flex-direction">
|
||||
@@ -75,7 +75,7 @@
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>无效状态
|
||||
<text class="cuIcon-title text-blue"></text>无效状态
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
@@ -84,13 +84,13 @@
|
||||
</view>
|
||||
<view class="cu-bar margin-top bg-white">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>按钮加图标
|
||||
<text class="cuIcon-title text-blue"></text>按钮加图标
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-xl">
|
||||
<button class="cu-btn block line-orange lg">
|
||||
<text class="icon-upload"></text> 图标</button>
|
||||
<text class="cuIcon-upload"></text> 图标</button>
|
||||
<button class="cu-btn block bg-blue margin-tb-sm lg">
|
||||
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
|
||||
<text class="cuIcon-loading2 iconfont-spin"></text> 加载</button>
|
||||
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
|
||||
</view>
|
||||
@@ -2,6 +2,7 @@ const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
ColorList: app.globalData.ColorList,
|
||||
color:'red'
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</view>
|
||||
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">
|
||||
<view class="title">选择颜色</view>
|
||||
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
|
||||
<view class="padding bg-{{color}} solid radius shadow-blur"></view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">是否圆角</view>
|
||||
@@ -56,11 +56,11 @@
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}">
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}" wx:if="{{item.name!='white'}}">
|
||||
<view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -64,37 +64,5 @@ Component({
|
||||
icon: 'loading2'
|
||||
},
|
||||
],
|
||||
},
|
||||
methods: {
|
||||
onLoad() {
|
||||
let that = this;
|
||||
// 获取用户信息
|
||||
wx.getSetting({
|
||||
success: res => {
|
||||
if (!res.authSetting['scope.userInfo']) {
|
||||
wx.redirectTo({
|
||||
url: '/pages/auth/auth'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'ColorUI-高颜值的小程序UI组件库',
|
||||
imageUrl: 'https://image.weilanwl.com/color2.0/share2215.jpg',
|
||||
path: '/pages/basics/home/home'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
@@ -4,7 +4,7 @@
|
||||
<navigator open-type="navigate" hover-class='none' url="/pages/basics/{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<text class='icon-{{item.icon}}'></text>
|
||||
<text class='cuIcon-{{item.icon}}'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class='cu-tabbar-height'></view>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">图标</view></cu-custom>
|
||||
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px">
|
||||
<view class="search-form round">
|
||||
<text class="icon-search"></text>
|
||||
<text class="cuIcon-search"></text>
|
||||
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput="searchIcon"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list grid col-3">
|
||||
<view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
|
||||
<text class="icon-{{item.name}} lg text-gray"></text>
|
||||
<text class="cuIcon-{{item.name}} lg text-gray"></text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -7,7 +7,7 @@
|
||||
<block wx:if="{{TabCur==0}}">
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>固定尺寸
|
||||
<text class="cuIcon-title text-blue"></text>固定尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -23,7 +23,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>比例布局
|
||||
<text class="cuIcon-title text-blue"></text>比例布局
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -43,7 +43,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>水平对齐(justify)
|
||||
<text class="cuIcon-title text-blue"></text>水平对齐(justify)
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
@@ -70,7 +70,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>垂直对齐(align)
|
||||
<text class="cuIcon-title text-blue"></text>垂直对齐(align)
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
@@ -91,7 +91,7 @@
|
||||
<block wx:if="{{TabCur==1}}">
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>等分列
|
||||
<text class="cuIcon-title text-blue"></text>等分列
|
||||
</view>
|
||||
<view class="action"></view>
|
||||
</view>
|
||||
@@ -102,7 +102,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>等高
|
||||
<text class="cuIcon-title text-blue"></text>等高
|
||||
</view>
|
||||
<view class="action"></view>
|
||||
</view>
|
||||
@@ -115,7 +115,7 @@
|
||||
<block wx:if="{{TabCur==2}}">
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>浮动
|
||||
<text class="cuIcon-title text-blue"></text>浮动
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white padding">
|
||||
@@ -126,7 +126,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>内外边距
|
||||
<text class="cuIcon-title text-blue"></text>内外边距
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>背景
|
||||
<text class='cuIcon-title text-blue'></text>背景
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>加载状态
|
||||
<text class='cuIcon-title text-blue'></text>加载状态
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='sm' bindchange='isLoading'></switch>
|
||||
@@ -22,14 +22,14 @@
|
||||
<view class="cu-load bg-grey {{!isLoad?'loading':'over'}}"></view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>加载错误
|
||||
<text class='cuIcon-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>弹框加载
|
||||
<text class='cuIcon-title text-blue'></text>弹框加载
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='loadModal'>
|
||||
@@ -38,13 +38,13 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-load load-modal' wx:if="{{loadModal}}">
|
||||
<!-- <view class='icon-emojifill text-orange'></view> -->
|
||||
<!-- <view class='cuIcon-emojifill text-orange'></view> -->
|
||||
<image src='/images/logo.png' class='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>进度条加载
|
||||
<text class='cuIcon-title text-blue'></text>进度条加载
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='loadProgress'>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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>进度条形状
|
||||
<text class="cuIcon-title text-blue"></text>进度条形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -17,7 +17,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条尺寸
|
||||
<text class="cuIcon-title text-blue"></text>进度条尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -33,10 +33,10 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条颜色
|
||||
<text class="cuIcon-title text-blue"></text>进度条颜色
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
|
||||
<view class="padding bg-{{color}} solid radius shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
|
||||
@@ -46,7 +46,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条条纹
|
||||
<text class="cuIcon-title text-blue"></text>进度条条纹
|
||||
</view>
|
||||
<switch class="sm margin-right-sm" bindchange="SetActive"></switch>
|
||||
</view>
|
||||
@@ -60,7 +60,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条比例
|
||||
<text class="cuIcon-title text-blue"></text>进度条比例
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -72,7 +72,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>进度条布局
|
||||
<text class="cuIcon-title text-blue"></text>进度条布局
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white ">
|
||||
@@ -80,7 +80,7 @@
|
||||
<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>
|
||||
<text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
|
||||
</view>
|
||||
<view class="flex margin-top">
|
||||
<view class="cu-progress round">
|
||||
@@ -94,11 +94,11 @@
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}" wx:if="{{item.name!='gray'}}">
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}" wx:if="{{item.name!='gray' && item.name!='white'}}">
|
||||
<view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">边框阴影</view></cu-custom>
|
||||
<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>
|
||||
<text class="cuIcon-title text-blue"></text>边框
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch class="sm" bindchange="SetSize"></switch>
|
||||
</view>
|
||||
<switch class="sm" bindchange="SetSize"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white text-center">
|
||||
<view class="padding solid{{size?'s':''}}">四周</view>
|
||||
@@ -16,13 +19,16 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>阴影
|
||||
<text class="cuIcon-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 bg-white">默认阴影</view>
|
||||
<view class="padding-xl radius shadow bg-blue margin-top">根据背景颜色而改变的阴影</view>
|
||||
<view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
|
||||
<view class="padding-xl radius shadow shadow-lg bg-blue 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://image.weilanwl.com/img/square-3.jpg);"><view>根据背景颜色而改变的阴影</view></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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<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>标签形状
|
||||
<text class="cuIcon-title text-blue"></text>标签形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white solid-bottom">
|
||||
@@ -11,7 +11,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>标签尺寸
|
||||
<text class="cuIcon-title text-blue"></text>标签尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>标签颜色
|
||||
<text class="cuIcon-title text-blue"></text>标签颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm flex flex-wrap">
|
||||
@@ -33,7 +33,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>镂空标签
|
||||
<text class="cuIcon-title text-blue"></text>镂空标签
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-sm flex flex-wrap">
|
||||
@@ -43,13 +43,13 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>胶囊样式
|
||||
<text class="cuIcon-title text-blue"></text>胶囊样式
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
<view class="cu-capsule">
|
||||
<view class="cu-tag bg-red">
|
||||
<text class="icon-likefill"></text>
|
||||
<text class="cuIcon-likefill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-red">
|
||||
12
|
||||
@@ -57,7 +57,7 @@
|
||||
</view>
|
||||
<view class="cu-capsule round">
|
||||
<view class="cu-tag bg-blue ">
|
||||
<text class="icon-likefill"></text>
|
||||
<text class="cuIcon-likefill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
23
|
||||
@@ -73,7 +73,7 @@
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class="cu-tag bg-grey ">
|
||||
<text class="icon-likefill"></text>
|
||||
<text class="cuIcon-likefill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-grey">
|
||||
23
|
||||
@@ -81,7 +81,7 @@
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class="cu-tag bg-brown sm">
|
||||
<text class="icon-likefill"></text>
|
||||
<text class="cuIcon-likefill"></text>
|
||||
</view>
|
||||
<view class="cu-tag line-brown sm">
|
||||
23
|
||||
@@ -90,7 +90,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>数字标签
|
||||
<text class="cuIcon-title text-blue"></text>数字标签
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding flex justify-between align-center">
|
||||
@@ -103,7 +103,7 @@
|
||||
</view>
|
||||
<view class="cu-avatar xl radius">
|
||||
<view class="cu-tag badge"></view>
|
||||
<text class="icon-people"></text>
|
||||
<text class="cuIcon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar xl radius">
|
||||
<view class="cu-tag badge">99+</view>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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>文字大小
|
||||
<text class="cuIcon-title text-blue"></text>文字大小
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white padding-lr">
|
||||
@@ -9,7 +9,7 @@
|
||||
<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>
|
||||
<text class=" cuIcon-roundcheckfill text-green"></text>
|
||||
</view>
|
||||
<view class="padding">用于图标、数字等特大显示</view>
|
||||
</view>
|
||||
@@ -18,7 +18,7 @@
|
||||
<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>
|
||||
<text class=" cuIcon-roundcheckfill text-green"></text>
|
||||
</view>
|
||||
<view class="padding">用于图标、数字等较大显示</view>
|
||||
</view>
|
||||
@@ -78,19 +78,31 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>文字颜色
|
||||
<text class="cuIcon-title text-blue"></text>文字颜色
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="padding-sm" wx:for="{{list}}" wx:key>
|
||||
<view class="padding-sm" wx:for="{{list}}" wx:key wx:if="{{item.name!='white'}}">
|
||||
<view class="text-{{item.name}} text-center">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="cuIcon-title text-blue"></text>文字阴影
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="padding-sm" wx:for="{{list}}" wx:key wx:if="{{item.name!='white'}}">
|
||||
<view class="text-center text-shadow text-{{item.name}}">
|
||||
<view class="cuIcon-ellipse text-xxl"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>文字截断
|
||||
<text class="cuIcon-title text-blue"></text>文字截断
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -98,7 +110,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>文字对齐
|
||||
<text class="cuIcon-title text-blue"></text>文字对齐
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -108,7 +120,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-blue"></text>特殊文字
|
||||
<text class="cuIcon-title text-blue"></text>特殊文字
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding text-center">
|
||||
|
||||
Reference in New Issue
Block a user