update

pages.json

@@ -48,50 +48,6 @@
 			"path": "pages/index/index",
 			"style": {}
 		},
-		{
-			"path": "pages/basics/layout",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/background",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/text",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/icon",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/button",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/design",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/tag",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/avatar",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/progress",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/shadow",
-			"style": {}
-		},
-		{
-			"path": "pages/basics/loading",
-			"style": {}
-		},
 		{
 			"path": "pages/component/bar",
 			"style": {}
@@ -124,6 +80,7 @@
 			"path": "pages/component/swiper",
 			"style": {}
 		},
+
 		{
 			"path": "pages/component/modal",
 			"style": {}

pages/basics/avatar.vue

@@ -1,108 +0,0 @@
-<template>
-	<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">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>头像形状
-			</view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
-			<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>头像尺寸
-			</view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
-			<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
-			<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
-			<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar sm round margin-left bg-red"> A</view>
-			<view class="cu-avatar round margin-left bg-red">B</view>
-			<view class="cu-avatar lg round margin-left bg-red">C</view>
-			<view class="cu-avatar xl round margin-left bg-red">D</view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
-			<view class="cu-avatar round margin-left bg-red">蓝</view>
-			<view class="cu-avatar lg round margin-left bg-red">
-				<text>wl</text>
-			</view>
-			<view class="cu-avatar xl round margin-left bg-red">
-				<text class="avatar-text">网络</text>
-			</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>内嵌文字(图标)
-			</view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar radius">
-				<text class="cuIcon-people"></text>
-			</view>
-			<view class="cu-avatar radius margin-left">
-				<text>港</text>
-			</view>
-		</view>
-
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>头像颜色
-			</view>
-		</view>
-		<view class="padding-sm">
-			<view class="cu-avatar round lg margin-xs" :class="'bg-' + item.name" v-for="(item,index) in ColorList" :key="index">
-				<text class="avatar-text">{{item.name}}</text>
-			</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>头像组
-			</view>
-		</view>
-		<view class="padding">
-			<view class="cu-avatar-group">
-				<view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
-			</view>
-		</view>
-
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<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?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-				avatar: [
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
-				],
-
-			};
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/background.vue

@@ -1,144 +0,0 @@
-<template>
-	<view>
-		<cu-custom bgColor="bg-luohu" :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='cuIcon-title text-blue'></text>深色背景
-			</view>
-		</view>
-		<view class="grid col-3 padding-sm">
-			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
-				<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
-					<view class="text-lg">{{item.title}}</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="cuIcon-title text-blue"></text>淡色背景
-			</view>
-		</view>
-		<view class="grid col-3 bg-white padding-sm">
-			<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
-				<view class="padding radius text-center light" :class="'bg-' + item.name">
-					<view class="text-lg">{{item.title}}</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="cuIcon-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="text-lg">魅红</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="text-lg">鎏金</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="text-lg">翠柳</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="text-lg">靛青</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="text-lg">惑紫</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="text-lg">霞彩</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="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;">
-			<view class="padding-xl text-white">
-				<view class="padding-xs text-xxl text-bold">
-					钢铁之翼
-				</view>
-				<view class="padding-xs text-lg">
-					Only the guilty need fear me.
-				</view>
-			</view>
-		</view>
-		<!-- 		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>视频背景
-			</view>
-		</view>
-		<view class="bg-video bg-mask flex align-center" style="height: 422upx;">
-			<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">
-					我必须连同希望一起毁坏……
-				</cover-view>
-			</cover-view>
-		</view> -->
-
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>透明背景(文字层)
-			</view>
-		</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: 207upx;">
-				<view class="bg-shadeTop padding padding-bottom-xl">
-					上面开始
-				</view>
-			</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: 207upx;">
-				<view class="bg-shadeBottom padding padding-top-xl flex-sub">
-					下面开始
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-			};
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/button.vue

@@ -1,123 +0,0 @@
-<template>
-	<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="cuIcon-title text-blue"></text>按钮形状
-			</view>
-			<view class="action">
-				<navigator class="action" url="design" hover-class="none">
-					<text class="cuIcon-skinfill"></text>
-					<text class="text-df">设计</text>
-				</navigator>
-			</view>
-		</view>
-		<view class="padding flex flex-wrap justify-between align-center bg-white">
-			<button class="cu-btn">默认</button>
-			<button class="cu-btn round">圆角</button>
-			<button class="cu-btn cuIcon">
-				<text class="cuIcon-emojifill"></text>
-			</button>
-		</view>
-		<view class="cu-bar margin-top bg-white solid-bottom">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>按钮尺寸
-			</view>
-		</view>
-		<view class="padding flex flex-wrap justify-between align-center bg-white">
-			<button class="cu-btn round sm">小尺寸</button>
-			<button class="cu-btn round">默认</button>
-			<button class="cu-btn round lg">大尺寸</button>
-		</view>
-		<view class="cu-bar margin-top bg-white">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>按钮颜色
-			</view>
-			<view class="action">
-				<text class="text-df margin-right-sm">阴影</text>
-				<switch @change="SetShadow" :class="shadow?'checked':''" color="#39B54A"></switch>
-			</view>
-		</view>
-		<view class="grid col-5 padding-sm">
-			<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
-				<button class="cu-btn round" :class="['bg-' + item.name , shadow?'shadow':'']">{{item.title}}</button>
-			</view>
-		</view>
-		<view class="cu-bar margin-top bg-white">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>镂空按钮
-			</view>
-			<view class="action">
-				<radio-group @change="SetBorderSize">
-					<label class="margin-left-sm">
-						<radio class="blue radio" value="" checked></radio>
-						<text class="margin-left-sm">小</text>
-					</label>
-					<label class="margin-left-sm">
-						<radio class="blue radio" value="s"></radio>
-						<text class="margin-left-sm">大</text>
-					</label>
-				</radio-group>
-			</view>
-		</view>
-		<view class="grid col-5 padding-sm">
-			<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
-				<button class="cu-btn round" :class="[bordersize?'lines-' + item.name:'line-' + item.name, shadow?'shadow':'']">{{item.title}}</button>
-			</view>
-		</view>
-		<view class="cu-bar margin-top bg-white">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>块状按钮
-			</view>
-		</view>
-		<view class="padding flex flex-direction">
-			<button class="cu-btn bg-grey lg">玄灰</button>
-			<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
-		</view>
-		<view class="cu-bar margin-top bg-white">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>无效状态
-			</view>
-		</view>
-		<view class="padding">
-			<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
-			<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
-		</view>
-		<view class="cu-bar margin-top bg-white">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>按钮加图标
-			</view>
-		</view>
-		<view class="padding-xl">
-			<button class="cu-btn block line-orange lg">
-				<text class="cuIcon-upload"></text> 图标</button>
-			<button class="cu-btn block bg-blue margin-tb-sm lg">
-				<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载</button>
-			<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-				shadow: false,
-				bordersize: ''
-			};
-		},
-		methods: {
-			SetShadow(e) {
-				this.shadow = e.detail.value
-			},
-			SetBorderSize(e) {
-				this.bordersize = e.detail.value
-			}
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/design.vue

@@ -1,130 +0,0 @@
-<template>
-	<view>
-		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content"> 按钮 / 设计</block></cu-custom>
-		<view class="padding-xl">
-			<view class="box bg-white text-center radius">
-				<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>
-			</view>
-			<view class="padding text-center">
-				class="cu-btn <text v-if="color">{{' '}} {{border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}}</text>"
-			</view>
-		</view>
-		<view class="cu-form-group margin-top" @tap="showModal" data-target="ColorModal">
-			<view class="title">选择颜色</view>
-			<view class="padding solid radius shadow-blur" :class="'bg-'+color"></view>
-		</view>
-		<view class="cu-form-group">
-			<view class="title">是否圆角</view>
-			<switch @change="SetRound" class="blue" :class="round?'checked':''"></switch>
-		</view>
-		<view class="cu-form-group">
-			<view class="title">选择尺寸</view>
-			<radio-group @change="SetSize">
-				<label class="margin-left-sm">
-					<radio class="blue radio" value="sm"></radio>
-					<text class="margin-left-sm"> 小</text>
-				</label>
-				<label class="margin-left-sm">
-					<radio class="blue radio" value="" checked></radio>
-					<text class="margin-left-sm"> 中</text>
-				</label>
-				<label class="margin-left-sm">
-					<radio class="blue radio" value="lg"></radio>
-					<text class="margin-left-sm"> 大</text>
-				</label>
-			</radio-group>
-		</view>
-		<view class="cu-form-group">
-			<view class="title">是否添加阴影</view>
-			<switch @change="SetShadow" :class="shadow?'checked':''"></switch>
-		</view>
-		<view class="cu-form-group">
-			<view class="title">是否镂空</view>
-			<switch @change="SetBorder" :class="border?'checked':''"></switch>
-		</view>
-		<view class="cu-form-group" v-if="border">
-			<view class="title">边框大小</view>
-			<radio-group @change="SetBorderSize">
-				<label class="margin-left-sm">
-					<radio class="blue radio" value="" checked></radio>
-					<text class="margin-left-sm"> 小</text>
-				</label>
-				<label class="margin-left-sm">
-					<radio class="blue radio" value="s"></radio>
-					<text class="margin-left-sm"> 大</text>
-				</label>
-			</radio-group>
-		</view>
-		<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
-			<view class="cu-dialog">
-				<view class="cu-bar justify-end solid-bottom">
-					<view class="content">选择颜色</view>
-					<view class="action" @tap="hideModal">
-						<text class="cuIcon-close text-red"></text>
-					</view>
-				</view>
-				<view class="grid col-5 padding">
-					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name" v-if="item.name!='white'">
-						<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-				modalName: '',
-				round: false,
-				size: '',
-				color: 'red',
-				shadow: false,
-				border: false,
-				bordersize: ''
-			};
-		},
-		methods: {
-			showModal(e) {
-				this.modalName = e.currentTarget.dataset.target
-			},
-			hideModal(e) {
-				this.modalName = null
-			},
-			SetRound(e) {
-				this.round = e.detail.value
-			},
-			SetSize(e) {
-				this.size = e.detail.value
-			},
-			SetColor(e) {
-				this.color = e.currentTarget.dataset.color;
-				this.modalName = null
-			},
-			SetShadow(e) {
-				this.shadow = e.detail.value
-			},
-			SetBorder(e) {
-				this.border = e.detail.value
-				if (!e.detail.value) {
-					this.bordersize = false
-				}
-			},
-			SetBorderSize(e) {
-				this.bordersize = e.detail.value
-			}
-		}
-	}
-</script>
-
-<style>
-	.box {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100px;
-	}
-</style>

pages/basics/icon.vue

@@ -1,939 +0,0 @@
-<template>
-	<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 search fixed" :style="[{top:CustomBar + 'px'}]">
-			<view class="search-form round">
-				<text class="cuIcon-search"></text>
-				<input type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon"></input>
-			</view>
-		</view>
-		<view class="cu-list grid col-3">
-			<view class="cu-item" v-for="(item,index) in cuIcon" :key="index" v-if="item.isShow">
-				<text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
-				<text>{{item.name}}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				CustomBar: this.CustomBar,
-				cuIcon: [{
-					name: 'appreciate',
-					isShow: true
-				}, {
-					name: 'check',
-					isShow: true
-				}, {
-					name: 'close',
-					isShow: true
-				}, {
-					name: 'edit',
-					isShow: true
-				}, {
-					name: 'emoji',
-					isShow: true
-				}, {
-					name: 'favorfill',
-					isShow: true
-				}, {
-					name: 'favor',
-					isShow: true
-				}, {
-					name: 'loading',
-					isShow: true
-				}, {
-					name: 'locationfill',
-					isShow: true
-				}, {
-					name: 'location',
-					isShow: true
-				}, {
-					name: 'phone',
-					isShow: true
-				}, {
-					name: 'roundcheckfill',
-					isShow: true
-				}, {
-					name: 'roundcheck',
-					isShow: true
-				}, {
-					name: 'roundclosefill',
-					isShow: true
-				}, {
-					name: 'roundclose',
-					isShow: true
-				}, {
-					name: 'roundrightfill',
-					isShow: true
-				}, {
-					name: 'roundright',
-					isShow: true
-				}, {
-					name: 'search',
-					isShow: true
-				}, {
-					name: 'taxi',
-					isShow: true
-				}, {
-					name: 'timefill',
-					isShow: true
-				}, {
-					name: 'time',
-					isShow: true
-				}, {
-					name: 'unfold',
-					isShow: true
-				}, {
-					name: 'warnfill',
-					isShow: true
-				}, {
-					name: 'warn',
-					isShow: true
-				}, {
-					name: 'camerafill',
-					isShow: true
-				}, {
-					name: 'camera',
-					isShow: true
-				}, {
-					name: 'commentfill',
-					isShow: true
-				}, {
-					name: 'comment',
-					isShow: true
-				}, {
-					name: 'likefill',
-					isShow: true
-				}, {
-					name: 'like',
-					isShow: true
-				}, {
-					name: 'notificationfill',
-					isShow: true
-				}, {
-					name: 'notification',
-					isShow: true
-				}, {
-					name: 'order',
-					isShow: true
-				}, {
-					name: 'samefill',
-					isShow: true
-				}, {
-					name: 'same',
-					isShow: true
-				}, {
-					name: 'deliver',
-					isShow: true
-				}, {
-					name: 'evaluate',
-					isShow: true
-				}, {
-					name: 'pay',
-					isShow: true
-				}, {
-					name: 'send',
-					isShow: true
-				}, {
-					name: 'shop',
-					isShow: true
-				}, {
-					name: 'ticket',
-					isShow: true
-				}, {
-					name: 'back',
-					isShow: true
-				}, {
-					name: 'cascades',
-					isShow: true
-				}, {
-					name: 'discover',
-					isShow: true
-				}, {
-					name: 'list',
-					isShow: true
-				}, {
-					name: 'more',
-					isShow: true
-				}, {
-					name: 'scan',
-					isShow: true
-				}, {
-					name: 'settings',
-					isShow: true
-				}, {
-					name: 'questionfill',
-					isShow: true
-				}, {
-					name: 'question',
-					isShow: true
-				}, {
-					name: 'shopfill',
-					isShow: true
-				}, {
-					name: 'form',
-					isShow: true
-				}, {
-					name: 'pic',
-					isShow: true
-				}, {
-					name: 'filter',
-					isShow: true
-				}, {
-					name: 'footprint',
-					isShow: true
-				}, {
-					name: 'top',
-					isShow: true
-				}, {
-					name: 'pulldown',
-					isShow: true
-				}, {
-					name: 'pullup',
-					isShow: true
-				}, {
-					name: 'right',
-					isShow: true
-				}, {
-					name: 'refresh',
-					isShow: true
-				}, {
-					name: 'moreandroid',
-					isShow: true
-				}, {
-					name: 'deletefill',
-					isShow: true
-				}, {
-					name: 'refund',
-					isShow: true
-				}, {
-					name: 'cart',
-					isShow: true
-				}, {
-					name: 'qrcode',
-					isShow: true
-				}, {
-					name: 'remind',
-					isShow: true
-				}, {
-					name: 'delete',
-					isShow: true
-				}, {
-					name: 'profile',
-					isShow: true
-				}, {
-					name: 'home',
-					isShow: true
-				}, {
-					name: 'cartfill',
-					isShow: true
-				}, {
-					name: 'discoverfill',
-					isShow: true
-				}, {
-					name: 'homefill',
-					isShow: true
-				}, {
-					name: 'message',
-					isShow: true
-				}, {
-					name: 'addressbook',
-					isShow: true
-				}, {
-					name: 'link',
-					isShow: true
-				}, {
-					name: 'lock',
-					isShow: true
-				}, {
-					name: 'unlock',
-					isShow: true
-				}, {
-					name: 'vip',
-					isShow: true
-				}, {
-					name: 'weibo',
-					isShow: true
-				}, {
-					name: 'activity',
-					isShow: true
-				}, {
-					name: 'friendaddfill',
-					isShow: true
-				}, {
-					name: 'friendadd',
-					isShow: true
-				}, {
-					name: 'friendfamous',
-					isShow: true
-				}, {
-					name: 'friend',
-					isShow: true
-				}, {
-					name: 'goods',
-					isShow: true
-				}, {
-					name: 'selection',
-					isShow: true
-				}, {
-					name: 'explore',
-					isShow: true
-				}, {
-					name: 'present',
-					isShow: true
-				}, {
-					name: 'squarecheckfill',
-					isShow: true
-				}, {
-					name: 'square',
-					isShow: true
-				}, {
-					name: 'squarecheck',
-					isShow: true
-				}, {
-					name: 'round',
-					isShow: true
-				}, {
-					name: 'roundaddfill',
-					isShow: true
-				}, {
-					name: 'roundadd',
-					isShow: true
-				}, {
-					name: 'add',
-					isShow: true
-				}, {
-					name: 'notificationforbidfill',
-					isShow: true
-				}, {
-					name: 'explorefill',
-					isShow: true
-				}, {
-					name: 'fold',
-					isShow: true
-				}, {
-					name: 'game',
-					isShow: true
-				}, {
-					name: 'redpacket',
-					isShow: true
-				}, {
-					name: 'selectionfill',
-					isShow: true
-				}, {
-					name: 'similar',
-					isShow: true
-				}, {
-					name: 'appreciatefill',
-					isShow: true
-				}, {
-					name: 'infofill',
-					isShow: true
-				}, {
-					name: 'info',
-					isShow: true
-				}, {
-					name: 'forwardfill',
-					isShow: true
-				}, {
-					name: 'forward',
-					isShow: true
-				}, {
-					name: 'rechargefill',
-					isShow: true
-				}, {
-					name: 'recharge',
-					isShow: true
-				}, {
-					name: 'vipcard',
-					isShow: true
-				}, {
-					name: 'voice',
-					isShow: true
-				}, {
-					name: 'voicefill',
-					isShow: true
-				}, {
-					name: 'friendfavor',
-					isShow: true
-				}, {
-					name: 'wifi',
-					isShow: true
-				}, {
-					name: 'share',
-					isShow: true
-				}, {
-					name: 'wefill',
-					isShow: true
-				}, {
-					name: 'we',
-					isShow: true
-				}, {
-					name: 'lightauto',
-					isShow: true
-				}, {
-					name: 'lightforbid',
-					isShow: true
-				}, {
-					name: 'lightfill',
-					isShow: true
-				}, {
-					name: 'camerarotate',
-					isShow: true
-				}, {
-					name: 'light',
-					isShow: true
-				}, {
-					name: 'barcode',
-					isShow: true
-				}, {
-					name: 'flashlightclose',
-					isShow: true
-				}, {
-					name: 'flashlightopen',
-					isShow: true
-				}, {
-					name: 'searchlist',
-					isShow: true
-				}, {
-					name: 'service',
-					isShow: true
-				}, {
-					name: 'sort',
-					isShow: true
-				}, {
-					name: 'down',
-					isShow: true
-				}, {
-					name: 'mobile',
-					isShow: true
-				}, {
-					name: 'mobilefill',
-					isShow: true
-				}, {
-					name: 'copy',
-					isShow: true
-				}, {
-					name: 'countdownfill',
-					isShow: true
-				}, {
-					name: 'countdown',
-					isShow: true
-				}, {
-					name: 'noticefill',
-					isShow: true
-				}, {
-					name: 'notice',
-					isShow: true
-				}, {
-					name: 'upstagefill',
-					isShow: true
-				}, {
-					name: 'upstage',
-					isShow: true
-				}, {
-					name: 'babyfill',
-					isShow: true
-				}, {
-					name: 'baby',
-					isShow: true
-				}, {
-					name: 'brandfill',
-					isShow: true
-				}, {
-					name: 'brand',
-					isShow: true
-				}, {
-					name: 'choicenessfill',
-					isShow: true
-				}, {
-					name: 'choiceness',
-					isShow: true
-				}, {
-					name: 'clothesfill',
-					isShow: true
-				}, {
-					name: 'clothes',
-					isShow: true
-				}, {
-					name: 'creativefill',
-					isShow: true
-				}, {
-					name: 'creative',
-					isShow: true
-				}, {
-					name: 'female',
-					isShow: true
-				}, {
-					name: 'keyboard',
-					isShow: true
-				}, {
-					name: 'male',
-					isShow: true
-				}, {
-					name: 'newfill',
-					isShow: true
-				}, {
-					name: 'new',
-					isShow: true
-				}, {
-					name: 'pullleft',
-					isShow: true
-				}, {
-					name: 'pullright',
-					isShow: true
-				}, {
-					name: 'rankfill',
-					isShow: true
-				}, {
-					name: 'rank',
-					isShow: true
-				}, {
-					name: 'bad',
-					isShow: true
-				}, {
-					name: 'cameraadd',
-					isShow: true
-				}, {
-					name: 'focus',
-					isShow: true
-				}, {
-					name: 'friendfill',
-					isShow: true
-				}, {
-					name: 'cameraaddfill',
-					isShow: true
-				}, {
-					name: 'apps',
-					isShow: true
-				}, {
-					name: 'paintfill',
-					isShow: true
-				}, {
-					name: 'paint',
-					isShow: true
-				}, {
-					name: 'picfill',
-					isShow: true
-				}, {
-					name: 'refresharrow',
-					isShow: true
-				}, {
-					name: 'colorlens',
-					isShow: true
-				}, {
-					name: 'markfill',
-					isShow: true
-				}, {
-					name: 'mark',
-					isShow: true
-				}, {
-					name: 'presentfill',
-					isShow: true
-				}, {
-					name: 'repeal',
-					isShow: true
-				}, {
-					name: 'album',
-					isShow: true
-				}, {
-					name: 'peoplefill',
-					isShow: true
-				}, {
-					name: 'people',
-					isShow: true
-				}, {
-					name: 'servicefill',
-					isShow: true
-				}, {
-					name: 'repair',
-					isShow: true
-				}, {
-					name: 'file',
-					isShow: true
-				}, {
-					name: 'repairfill',
-					isShow: true
-				}, {
-					name: 'taoxiaopu',
-					isShow: true
-				}, {
-					name: 'weixin',
-					isShow: true
-				}, {
-					name: 'attentionfill',
-					isShow: true
-				}, {
-					name: 'attention',
-					isShow: true
-				}, {
-					name: 'commandfill',
-					isShow: true
-				}, {
-					name: 'command',
-					isShow: true
-				}, {
-					name: 'communityfill',
-					isShow: true
-				}, {
-					name: 'community',
-					isShow: true
-				}, {
-					name: 'read',
-					isShow: true
-				}, {
-					name: 'calendar',
-					isShow: true
-				}, {
-					name: 'cut',
-					isShow: true
-				}, {
-					name: 'magic',
-					isShow: true
-				}, {
-					name: 'backwardfill',
-					isShow: true
-				}, {
-					name: 'playfill',
-					isShow: true
-				}, {
-					name: 'stop',
-					isShow: true
-				}, {
-					name: 'tagfill',
-					isShow: true
-				}, {
-					name: 'tag',
-					isShow: true
-				}, {
-					name: 'group',
-					isShow: true
-				}, {
-					name: 'all',
-					isShow: true
-				}, {
-					name: 'backdelete',
-					isShow: true
-				}, {
-					name: 'hotfill',
-					isShow: true
-				}, {
-					name: 'hot',
-					isShow: true
-				}, {
-					name: 'post',
-					isShow: true
-				}, {
-					name: 'radiobox',
-					isShow: true
-				}, {
-					name: 'rounddown',
-					isShow: true
-				}, {
-					name: 'upload',
-					isShow: true
-				}, {
-					name: 'writefill',
-					isShow: true
-				}, {
-					name: 'write',
-					isShow: true
-				}, {
-					name: 'radioboxfill',
-					isShow: true
-				}, {
-					name: 'punch',
-					isShow: true
-				}, {
-					name: 'shake',
-					isShow: true
-				}, {
-					name: 'move',
-					isShow: true
-				}, {
-					name: 'safe',
-					isShow: true
-				}, {
-					name: 'activityfill',
-					isShow: true
-				}, {
-					name: 'crownfill',
-					isShow: true
-				}, {
-					name: 'crown',
-					isShow: true
-				}, {
-					name: 'goodsfill',
-					isShow: true
-				}, {
-					name: 'messagefill',
-					isShow: true
-				}, {
-					name: 'profilefill',
-					isShow: true
-				}, {
-					name: 'sound',
-					isShow: true
-				}, {
-					name: 'sponsorfill',
-					isShow: true
-				}, {
-					name: 'sponsor',
-					isShow: true
-				}, {
-					name: 'upblock',
-					isShow: true
-				}, {
-					name: 'weblock',
-					isShow: true
-				}, {
-					name: 'weunblock',
-					isShow: true
-				}, {
-					name: 'my',
-					isShow: true
-				}, {
-					name: 'myfill',
-					isShow: true
-				}, {
-					name: 'emojifill',
-					isShow: true
-				}, {
-					name: 'emojiflashfill',
-					isShow: true
-				}, {
-					name: 'flashbuyfill',
-					isShow: true
-				}, {
-					name: 'text',
-					isShow: true
-				}, {
-					name: 'goodsfavor',
-					isShow: true
-				}, {
-					name: 'musicfill',
-					isShow: true
-				}, {
-					name: 'musicforbidfill',
-					isShow: true
-				}, {
-					name: 'card',
-					isShow: true
-				}, {
-					name: 'triangledownfill',
-					isShow: true
-				}, {
-					name: 'triangleupfill',
-					isShow: true
-				}, {
-					name: 'roundleftfill-copy',
-					isShow: true
-				}, {
-					name: 'font',
-					isShow: true
-				}, {
-					name: 'title',
-					isShow: true
-				}, {
-					name: 'recordfill',
-					isShow: true
-				}, {
-					name: 'record',
-					isShow: true
-				}, {
-					name: 'cardboardfill',
-					isShow: true
-				}, {
-					name: 'cardboard',
-					isShow: true
-				}, {
-					name: 'formfill',
-					isShow: true
-				}, {
-					name: 'coin',
-					isShow: true
-				}, {
-					name: 'cardboardforbid',
-					isShow: true
-				}, {
-					name: 'circlefill',
-					isShow: true
-				}, {
-					name: 'circle',
-					isShow: true
-				}, {
-					name: 'attentionforbid',
-					isShow: true
-				}, {
-					name: 'attentionforbidfill',
-					isShow: true
-				}, {
-					name: 'attentionfavorfill',
-					isShow: true
-				}, {
-					name: 'attentionfavor',
-					isShow: true
-				}, {
-					name: 'titles',
-					isShow: true
-				}, {
-					name: 'icloading',
-					isShow: true
-				}, {
-					name: 'full',
-					isShow: true
-				}, {
-					name: 'mail',
-					isShow: true
-				}, {
-					name: 'peoplelist',
-					isShow: true
-				}, {
-					name: 'goodsnewfill',
-					isShow: true
-				}, {
-					name: 'goodsnew',
-					isShow: true
-				}, {
-					name: 'medalfill',
-					isShow: true
-				}, {
-					name: 'medal',
-					isShow: true
-				}, {
-					name: 'newsfill',
-					isShow: true
-				}, {
-					name: 'newshotfill',
-					isShow: true
-				}, {
-					name: 'newshot',
-					isShow: true
-				}, {
-					name: 'news',
-					isShow: true
-				}, {
-					name: 'videofill',
-					isShow: true
-				}, {
-					name: 'video',
-					isShow: true
-				}, {
-					name: 'exit',
-					isShow: true
-				}, {
-					name: 'skinfill',
-					isShow: true
-				}, {
-					name: 'skin',
-					isShow: true
-				}, {
-					name: 'moneybagfill',
-					isShow: true
-				}, {
-					name: 'usefullfill',
-					isShow: true
-				}, {
-					name: 'usefull',
-					isShow: true
-				}, {
-					name: 'moneybag',
-					isShow: true
-				}, {
-					name: 'redpacket_fill',
-					isShow: true
-				}, {
-					name: 'subscription',
-					isShow: true
-				}, {
-					name: 'loading1',
-					isShow: true
-				}, {
-					name: 'github',
-					isShow: true
-				}, {
-					name: 'global',
-					isShow: true
-				}, {
-					name: 'settingsfill',
-					isShow: true
-				}, {
-					name: 'back_android',
-					isShow: true
-				}, {
-					name: 'expressman',
-					isShow: true
-				}, {
-					name: 'evaluate_fill',
-					isShow: true
-				}, {
-					name: 'group_fill',
-					isShow: true
-				}, {
-					name: 'play_forward_fill',
-					isShow: true
-				}, {
-					name: 'deliver_fill',
-					isShow: true
-				}, {
-					name: 'notice_forbid_fill',
-					isShow: true
-				}, {
-					name: 'fork',
-					isShow: true
-				}, {
-					name: 'pick',
-					isShow: true
-				}, {
-					name: 'wenzi',
-					isShow: true
-				}, {
-					name: 'ellipse',
-					isShow: true
-				}, {
-					name: 'qr_code',
-					isShow: true
-				}, {
-					name: 'dianhua',
-					isShow: true
-				}, {
-					name: 'cuIcon',
-					isShow: true
-				}, {
-					name: 'loading2',
-					isShow: true
-				}, {
-					name: 'btn',
-					isShow: true
-				}]
-
-			};
-		},
-		methods: {
-			searchIcon(e) {
-				let key = e.detail.value.toLowerCase();
-				let list = this.cuIcon;
-				for (let i = 0; i < list.length; i++) {
-					let a = key;
-					let b = list[i].name.toLowerCase();
-					if (b.search(a) != -1) {
-						list[i].isShow = true
-					} else {
-						list[i].isShow = false
-					}
-				}
-				this.cuIcon = list
-			}
-		}
-	}
-</script>
-
-<style>
-	page {
-		padding-top: 50px;
-	}
-</style>

pages/basics/layout.vue

@@ -1,207 +0,0 @@
-<template>
-	<view>
-		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">布局</block></cu-custom>
-		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
-			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
-			 :data-id="index">
-				{{tabNav[index]}}
-			</view>
-		</scroll-view>
-		<block v-if="TabCur==0">
-			<view class="cu-bar bg-white solid-bottom margin-top">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>固定尺寸
-				</view>
-			</view>
-			<view class="padding bg-white">
-				<view class="flex flex-wrap">
-					<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
-					<view class="basis-df"></view>
-					<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
-					<view class="basis-df"></view>
-					<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
-					<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
-					<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
-				</view>
-			</view>
-			<view class="cu-bar bg-white  margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>比例布局
-				</view>
-			</view>
-			<view class="padding bg-white">
-				<view class="flex">
-					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
-					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
-				</view>
-				<view class="flex  p-xs margin-bottom-sm mb-sm">
-					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
-					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
-				</view>
-				<view class="flex  p-xs margin-bottom-sm mb-sm">
-					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
-					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
-					<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
-				</view>
-			</view>
-			<view class="cu-bar bg-white  margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>水平对齐(justify)
-				</view>
-			</view>
-			<view class="bg-white">
-				<view class="flex solid-bottom padding justify-start">
-					<view class="bg-grey padding-sm margin-xs radius">start</view>
-					<view class="bg-grey padding-sm margin-xs radius">start</view>
-				</view>
-				<view class="flex solid-bottom padding justify-end">
-					<view class="bg-grey padding-sm margin-xs radius">end</view>
-					<view class="bg-grey padding-sm margin-xs radius">end</view>
-				</view>
-				<view class="flex solid-bottom padding justify-center">
-					<view class="bg-grey padding-sm margin-xs radius">center</view>
-					<view class="bg-grey padding-sm margin-xs radius">center</view>
-				</view>
-				<view class="flex solid-bottom padding justify-between">
-					<view class="bg-grey padding-sm margin-xs radius">between</view>
-					<view class="bg-grey padding-sm margin-xs radius">between</view>
-				</view>
-				<view class="flex solid-bottom padding justify-around">
-					<view class="bg-grey padding-sm margin-xs radius">around</view>
-					<view class="bg-grey padding-sm margin-xs radius">around</view>
-				</view>
-			</view>
-			<view class="cu-bar bg-white  margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>垂直对齐(align)
-				</view>
-			</view>
-			<view class="bg-white">
-				<view class="flex solid-bottom padding align-start">
-					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
-					<view class="bg-grey padding-sm margin-xs radius">start</view>
-				</view>
-				<view class="flex solid-bottom padding align-end">
-					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
-					<view class="bg-grey padding-sm margin-xs radius">end</view>
-				</view>
-				<view class="flex solid-bottom padding align-center">
-					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
-					<view class="bg-grey padding-sm margin-xs radius">center</view>
-				</view>
-			</view>
-		</block>
-		<block v-if="TabCur==1">
-			<view class="cu-bar bg-white  margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>等分列
-				</view>
-				<view class="action"></view>
-			</view>
-			<view class="bg-white padding">
-				<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
-					<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
-				</view>
-			</view>
-			<view class="cu-bar bg-white  margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>等高
-				</view>
-				<view class="action"></view>
-			</view>
-			<view class="bg-white padding">
-				<view class="grid col-4 grid-square">
-					<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
-				</view>
-			</view>
-		</block>
-		<block v-if="TabCur==2">
-			<view class="cu-bar bg-white margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>浮动
-				</view>
-			</view>
-			<view class="bg-white padding">
-				<view class=" cf padding-sm">
-					<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
-					<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
-				</view>
-			</view>
-			<view class="cu-bar bg-white  solid-bottom margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue"></text>内外边距
-				</view>
-			</view>
-			<view class="bg-white">
-				<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">外边距</view>
-					<view class="basis-df padding-bottom-xs">内边距</view>
-					<view class="basis-df">.margin-{size}</view>
-					<view class="basis-df">.padding-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">水平方向外边距</view>
-					<view class="basis-df padding-bottom-xs">水平方向内边距</view>
-					<view class="basis-df">.margin-lr-{size}</view>
-					<view class="basis-df">.padding-lr-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
-					<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
-					<view class="basis-df">.margin-tb-{size}</view>
-					<view class="basis-df">.padding-tb-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">上外边距</view>
-					<view class="basis-df padding-bottom-xs">上内边距</view>
-					<view class="basis-df">.margin-top-{size}</view>
-					<view class="basis-df">.padding-top-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">右外边距</view>
-					<view class="basis-df padding-bottom-xs">右内边距</view>
-					<view class="basis-df">.margin-right-{size}</view>
-					<view class="basis-df">.padding-right-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">下外边距</view>
-					<view class="basis-df padding-bottom-xs">下内边距</view>
-					<view class="basis-df">margin-bottom-{size}</view>
-					<view class="basis-df">.padding-bottom-{size}</view>
-				</view>
-				<view class="flex flex-wrap padding solid-top">
-					<view class="basis-df padding-bottom-xs">左外边距</view>
-					<view class="basis-df padding-bottom-xs">左内边距</view>
-					<view class="basis-df">.margin-left-{size}</view>
-					<view class="basis-df">.padding-left-{size}</view>
-				</view>
-			</view>
-		</block>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				CustomBar: this.CustomBar,
-				TabCur: 0,
-				avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
-				tabNav: ['Flex布局', 'Grid布局', '辅助布局']
-			};
-		},
-		methods: {
-			tabSelect(e) {
-				this.TabCur = e.currentTarget.dataset.id;
-				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
-			}
-		}
-	}
-</script>
-
-<style>
-	page {
-		padding-top: 45px;
-	}
-</style>

pages/basics/loading.vue

@@ -1,101 +0,0 @@
-<template>
-	<view>
-		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
-			<block slot="right">
-				<view class="action">
-					<view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view>
-				</view>
-			</block>
-		</cu-custom>
-		<view class="cu-bar bg-white">
-			<view class="action">
-				<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="cuIcon-title text-blue"></text>加载状态
-			</view>
-			<view class="action">
-				<switch @change="isLoading" :class="isLoad?'checked':''"></switch>
-			</view>
-		</view>
-		<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<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="cuIcon-title text-blue"></text>弹框加载
-			</view>
-			<view class="action">
-				<button class="cu-btn bg-green shadow" @tap="LoadModal">
-					点我
-				</button>
-			</view>
-		</view>
-		<view class="cu-load load-modal" v-if="loadModal">
-			<!-- <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="cuIcon-title text-blue"></text>进度条加载
-			</view>
-			<view class="action">
-				<button class="cu-btn bg-green shadow" @tap="LoadProgress">
-					点我
-				</button>
-			</view>
-		</view>
-		<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
-			<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
-			<view class="load-progress-spinner text-green"></view>
-		</view>
-	</view>
-</template>
-
-
-<script>
-	export default {
-		data() {
-			return {
-				CustomBar: this.CustomBar,
-				isLoad:false,
-				loadModal: false,
-				loadProgress: 0
-			};
-		},
-		methods: {
-			isLoading(e) {
-				this.isLoad = e.detail.value;
-			},
-			LoadModal(e) {
-				this.loadModal = true;
-				setTimeout(() => {
-					this.loadModal = false;
-				}, 2000)
-			},
-			LoadProgress(e) {
-				this.loadProgress = this.loadProgress + 3;
-				if (this.loadProgress < 100) {
-					setTimeout(() => {
-						this.LoadProgress();
-					}, 100)
-				} else {
-					this.loadProgress = 0;
-				}
-			}
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/progress.vue

@@ -1,153 +0,0 @@
-<template>
-	<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="cuIcon-title text-blue"></text>进度条形状
-			</view>
-		</view>
-		<view class="padding bg-white">
-			<view class="cu-progress">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
-			</view>
-			<view class="cu-progress radius margin-top">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
-			</view>
-			<view class="cu-progress round margin-top">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</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="padding bg-white">
-			<view class="cu-progress round">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
-			</view>
-			<view class="cu-progress round margin-top sm">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
-			</view>
-			<view class="cu-progress round margin-top xs">
-				<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
-			</view>
-		</view>
-
-		<view class="cu-bar bg-white solid-bottom margin-top" @tap="showModal" data-target="ColorModal">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>进度条颜色
-			</view>
-			<view class="action">
-				<view class="padding solid radius shadow-blur" :class="'bg-' + color"></view>
-			</view>
-		</view>
-		<view class="padding" :class="color=='white'?'bg-grey':'bg-white'">
-			<view class="cu-progress round">
-				<view :class="'bg-' + color" :style="[{ width:loading?'61.8%':''}]"></view>
-			</view>
-		</view>
-
-
-		<view class="cu-bar bg-white solid-bottom margin-top">
-			<view class="action">
-				<text class="cuIcon-title text-blue"></text>进度条条纹
-			</view>
-			<switch class="margin-right-sm" :class="active?'checked':''" @change="SetActive"></switch>
-		</view>
-		<view class="padding bg-white">
-			<view class="cu-progress round sm striped" :class="active?'active':''">
-				<view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
-			</view>
-			<view class="cu-progress round sm margin-top-sm striped" :class="active?'active':''">
-				<view class="bg-black" :style="[{ width:loading?'40%':''}]"></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="padding bg-white">
-			<view class="cu-progress radius striped active">
-				<view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
-				<view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
-				<view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</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="padding bg-white ">
-			<view class="flex">
-				<view class="cu-progress round">
-					<view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
-				</view>
-				<text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
-			</view>
-			<view class="flex margin-top">
-				<view class="cu-progress round">
-					<view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
-				</view>
-				<text class="margin-left">80%</text>
-			</view>
-		</view>
-
-		<view class="cu-modal" :class="modalName=='ColorModal'?'show':''">
-			<view class="cu-dialog">
-				<view class="cu-bar justify-end solid-bottom">
-					<view class="content">选择颜色</view>
-					<view class="action" @tap="hideModal">
-						<text class="cuIcon-close text-red"></text>
-					</view>
-				</view>
-				<view class="grid col-5 padding">
-					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" @tap="SetColor" :data-color="item.name" v-if="item.name!='gray' && item.name!='white'">
-						<view class="padding-tb radius" :class="'bg-' + item.name"> {{item.title}} </view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-				color: 'red',
-				loading: false,
-				modalName: '',
-				active: false
-			};
-		},
-		onLoad: function() {
-			let that = this;
-			setTimeout(function() {
-				that.loading = true
-			}, 500)
-		},
-		methods: {
-			showModal(e) {
-				this.modalName = e.currentTarget.dataset.target
-			},
-			hideModal(e) {
-				this.modalName = null
-			},
-			SetColor(e) {
-				this.color = e.currentTarget.dataset.color;
-				this.modalName = null
-			},
-			SetActive(e) {
-				this.active = e.detail.value
-			},
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/shadow.vue

@@ -1,54 +0,0 @@
-<template>
-	<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="cuIcon-title text-blue"></text>边框
-			</view>
-			<view class="action">
-				<switch class="sm" @change="SetSize" :class="size?'checked':''"></switch>
-			</view>
-		</view>
-		<view class="padding bg-white text-center">
-			<view class="padding" :class="size?'solids':'solid'">四周</view>
-			<view class="padding margin-top" :class="size?'solids-top':'solid-top'">上</view>
-			<view class="padding margin-top" :class="size?'solids-right':'solid-right'">右</view>
-			<view class="padding margin-top" :class="size?'solids-bottom':'solid-bottom'">下</view>
-			<view class="padding margin-top" :class="size?'solids-left':'solid-left'">左</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class="action">
-				<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 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 bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
-				<view>根据背景图而改变的阴影</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				size: false
-			};
-		},
-		methods: {
-			SetSize(e) {
-				this.size = e.detail.value
-			}
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/tag.vue

@@ -1,130 +0,0 @@
-<template>
-	<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='cuIcon-title text-blue'></text>标签形状
-			</view>
-		</view>
-		<view class="padding bg-white solid-bottom">
-			<view class='cu-tag'>默认</view>
-			<view class='cu-tag round'>椭圆</view>
-			<view class='cu-tag radius'>圆角</view>
-		</view>
-
-		<view class="cu-bar bg-white margin-top">
-			<view class='action'>
-				<text class='cuIcon-title text-blue'></text>标签尺寸
-			</view>
-		</view>
-		<view class="padding bg-white">
-			<view class='cu-tag radius sm'>小尺寸</view>
-			<view class='cu-tag radius'>普通尺寸</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class='action'>
-				<text class='cuIcon-title text-blue'></text>标签颜色
-			</view>
-		</view>
-		<view class='padding-sm flex flex-wrap'>
-			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'">
-				<view class='cu-tag' :class="'bg-' + item.name">{{item.title}}</view>
-			</view>
-			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray' && item.name!='black' && item.name!='white'">
-				<view class='cu-tag light' :class="'bg-' + item.name">{{item.title}}</view>
-			</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class='action'>
-				<text class='cuIcon-title text-blue'></text>镂空标签
-			</view>
-		</view>
-		<view class='padding-sm flex flex-wrap'>
-			<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
-				<view class='cu-tag' :class="'line-' + item.name">{{item.title}}</view>
-			</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class='action'>
-				<text class='cuIcon-title text-blue'></text>胶囊样式
-			</view>
-		</view>
-		<view class="padding">
-			<view class="cu-capsule">
-				<view class='cu-tag bg-red'>
-					<text class='cuIcon-likefill'></text>
-				</view>
-				<view class="cu-tag line-red">
-					12
-				</view>
-			</view>
-			<view class="cu-capsule round">
-				<view class='cu-tag bg-blue '>
-					<text class='cuIcon-likefill'></text>
-				</view>
-				<view class="cu-tag line-blue">
-					23
-				</view>
-			</view>
-			<view class="cu-capsule round">
-				<view class='cu-tag bg-blue '>
-					说明
-				</view>
-				<view class="cu-tag line-blue">
-					123
-				</view>
-			</view>
-			<view class="cu-capsule radius">
-				<view class='cu-tag bg-grey '>
-					<text class='cuIcon-likefill'></text>
-				</view>
-				<view class="cu-tag line-grey">
-					23
-				</view>
-			</view>
-			<view class="cu-capsule radius">
-				<view class='cu-tag bg-brown sm'>
-					<text class='cuIcon-likefill'></text>
-				</view>
-				<view class="cu-tag line-brown sm">
-					23
-				</view>
-			</view>
-		</view>
-		<view class="cu-bar bg-white margin-top">
-			<view class='action'>
-				<text class='cuIcon-title text-blue'></text>数字标签
-			</view>
-		</view>
-		<view class="padding flex justify-between align-center">
-			<view class='cu-avatar xl radius'>
-				港
-				<view class="cu-tag badge">99+</view>
-			</view>
-			<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
-				<view class='cu-tag badge'>9</view>
-			</view>
-			<view class='cu-avatar xl radius'>
-				<view class='cu-tag badge'>99</view>
-				<text class='cuIcon-people'></text>
-			</view>
-			<view class='cu-avatar xl radius'>
-				<view class='cu-tag badge'>99+</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-			};
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/basics/text.vue

@@ -1,169 +0,0 @@
-<template>
-	<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="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=" cuIcon-roundcheckfill text-green"></text>
-					</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=" cuIcon-roundcheckfill text-green"></text>
-					</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>
-					<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>
-					<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>
-					<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>
-			</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>
-					<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>
-					<view class="padding">说明文本，标签文字等关注度低的文字</view>
-				</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" 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="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 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="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>
-		<view class="cu-bar bg-white solid-bottom margin-top">
-			<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>
-		<view class="cu-bar bg-white solid-bottom margin-top">
-			<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>
-			<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 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 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>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				ColorList: this.ColorList,
-			};
-		}
-	}
-</script>
-
-<style>
-
-</style>