mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
uniapp for 2.1.4
This commit is contained in:
Weilanwl
@@ -3,7 +3,7 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue"></text>头像形状
|
||||
<text class="cuIcon-title text-blue"></text>头像形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding">
|
||||
@@ -12,7 +12,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">
|
||||
@@ -39,12 +39,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>
|
||||
@@ -53,7 +53,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">
|
||||
@@ -63,7 +63,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">
|
||||
@@ -74,12 +74,12 @@
|
||||
|
||||
<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" 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 class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -6,7 +6,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">
|
||||
@@ -19,7 +19,7 @@
|
||||
</view>
|
||||
<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">
|
||||
@@ -32,7 +32,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">
|
||||
@@ -75,7 +75,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 flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
|
||||
@@ -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="bg-video bg-mask flex align-center" style="height: 422upx;">
|
||||
@@ -108,7 +108,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="grid col-2">
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue"></text>按钮形状
|
||||
<text class="cuIcon-title text-blue"></text>按钮形状
|
||||
</view>
|
||||
<view class="action">
|
||||
<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>
|
||||
@@ -16,12 +16,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">
|
||||
@@ -31,7 +31,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>
|
||||
@@ -45,7 +45,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 @change="SetBorderSize">
|
||||
@@ -67,7 +67,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 flex flex-direction">
|
||||
@@ -76,7 +76,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">
|
||||
@@ -85,14 +85,14 @@
|
||||
</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>
|
||||
</view>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" @tap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
: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>
|
||||
<text :class="'cuIcon-' + item.icon"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-tabbar-height"></view>
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">图标</block></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" @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 class="lg text-gray" :class="'cuIcon-' + item.name"></text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<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>固定尺寸
|
||||
<text class="cuIcon-title text-blue"></text>固定尺寸
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -26,7 +26,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">
|
||||
@@ -46,7 +46,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">
|
||||
@@ -73,7 +73,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">
|
||||
@@ -94,7 +94,7 @@
|
||||
<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>等分列
|
||||
<text class="cuIcon-title text-blue"></text>等分列
|
||||
</view>
|
||||
<view class="action"></view>
|
||||
</view>
|
||||
@@ -105,7 +105,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>
|
||||
@@ -118,7 +118,7 @@
|
||||
<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>浮动
|
||||
<text class="cuIcon-title text-blue"></text>浮动
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white padding">
|
||||
@@ -129,7 +129,7 @@
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom 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">
|
||||
|
||||
@@ -9,13 +9,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" :class="!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 @change="isLoading" :class="isLoad?'checked':''"></switch>
|
||||
@@ -24,14 +24,14 @@
|
||||
<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>加载错误
|
||||
<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" @tap="LoadModal">
|
||||
@@ -40,13 +40,13 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-load load-modal" v-if="loadModal">
|
||||
<!-- <view class="icon-emojifill text-orange"></view> -->
|
||||
<!-- <view class="cuIcon-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>进度条加载
|
||||
<text class="cuIcon-title text-blue"></text>进度条加载
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" @tap="LoadProgress">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue"></text>进度条形状
|
||||
<text class="cuIcon-title text-blue"></text>进度条形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white">
|
||||
@@ -19,7 +19,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">
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
<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>进度条颜色
|
||||
<text class="cuIcon-title text-blue"></text>进度条颜色
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="padding-sm solid radius shadow-blur" :class="'bg-' + color"></view>
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<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="margin-right-sm" :class="active?'checked':''" @change="SetActive"></switch>
|
||||
</view>
|
||||
@@ -65,7 +65,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">
|
||||
@@ -77,7 +77,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 ">
|
||||
@@ -85,7 +85,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">
|
||||
@@ -100,7 +100,7 @@
|
||||
<view class="cu-bar justify-end solid-bottom">
|
||||
<view class="content">选择颜色</view>
|
||||
<view class="action" @tap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid col-5 padding">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue"></text>边框
|
||||
<text class="cuIcon-title text-blue"></text>边框
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch class="sm" @change="SetSize" :class="size?'checked':''"></switch>
|
||||
@@ -18,16 +18,17 @@
|
||||
</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://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
|
||||
<view>根据背景颜色而改变的阴影</view>
|
||||
<view>根据背景图而改变的阴影</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue'></text>标签形状
|
||||
<text class='cuIcon-title text-blue'></text>标签形状
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white solid-bottom">
|
||||
@@ -14,7 +14,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 bg-white">
|
||||
@@ -23,7 +23,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'>
|
||||
@@ -36,7 +36,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'>
|
||||
@@ -46,13 +46,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
|
||||
@@ -60,7 +60,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
|
||||
@@ -76,7 +76,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
|
||||
@@ -84,7 +84,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
|
||||
@@ -93,7 +93,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">
|
||||
@@ -106,7 +106,7 @@
|
||||
</view>
|
||||
<view class='cu-avatar xl radius'>
|
||||
<view class='cu-tag badge'>99</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>
|
||||
|
||||
@@ -2,141 +2,153 @@
|
||||
<view>
|
||||
<cu-custom bgColor="bg-gradual-blue" :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-blue'></text>文字大小
|
||||
<view class="action">
|
||||
<text class="cuIcon-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 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=" cuIcon-roundcheckfill text-green"></text>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等特大显示</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 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=" cuIcon-roundcheckfill text-green"></text>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等较大显示</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 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 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 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 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 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 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 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 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 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 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 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 class="action">
|
||||
<text class="cuIcon-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">
|
||||
<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 class="action">
|
||||
<text class="cuIcon-title text-blue"></text>文字阴影
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding bg-white'>
|
||||
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
<view class="grid col-5 padding-sm">
|
||||
<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
|
||||
<view class="text-center text-shadow" :class="'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>文字对齐
|
||||
<view class="action">
|
||||
<text class="cuIcon-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 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 class="action">
|
||||
<text class="cuIcon-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 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="cuIcon-title text-blue"></text>特殊文字
|
||||
</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 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 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 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 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 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 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>
|
||||
|
||||
Reference in New Issue
Block a user