<template>
	<ciy-header title="通用CSS示例"></ciy-header>
	<view style="margin:2em;display: flex;justify-content: space-around;">
		<view @tap="this.settheme('dark')">dark</view>
		<view @tap="this.settheme('light')">light</view>
	</view>
	<view class="ciy-card">
		<view class="title mk">
			ciy-card 卡片标题
		</view>
		<view class="right">right右侧文字</view>
		<view class="content">
			<view>.title 标题</view>
			<view v-html="tobr(`.title >.mk 标题装饰`)"></view>
			<view>.right 右侧信息</view>
			<view>.content [padding=1em]的内容区，可不加。</view>
			<view v-html="tobr(`.content>view 内容区行间距自动设置。`)"></view>
		</view>
	</view>
	<view class="ciy-title mk">
		ciy-title标题段落(简易)
	</view>
	内容分隔
	<view class="ciy-title">
		<view class="title">ciy-title标题段落</view>
		<view class="right">right 右侧</view>
	</view>
	内容分隔
	<view class="ciy-caption mk">
		<view class="title">ciy-caption标题段落</view>
		<view class="right">right 右侧</view>
		<view class="sub">sub 子标题</view>
	</view>


	<view class="ciy-list">
		<view class="l0">No: l0</view>
		<view class="l1">ciy-list l1主标题</view>
		<view class="l2">l2次级主题</view>
		<view class="l2">
			<label>l2标签</label>
			<view>l2内容</view>
		</view>
		<view class="l2">
			<label>l2标签</label>
			<view>l2内容</view>
		</view>
		<view class="l3">l3内容</view>
		<view class="rtz dag liner">rtz状态</view>
		<view class="dot" @tap="list_dot"></view>
	</view>
	<view class="ciy-list">
		<view class="l1">ciy-list l1主标题</view>
		<view class="l2">l2次级主题</view>
		<view class="rt">rt右上</view>
		<view class="rb">rb右下</view>
		<view class="lb">lb左下</view>
	</view>

	<view class="ciy-load">ciy-load 加载中...</view>

	<view class="px4 py2">
		文字内容<text class="code">code</text>内容，内容<text class="kbd">kbd</text>内容
	</view>

	<view class="ciy-add" style="bottom:7em;" @tap="alert('转到添加')"></view>

	<view class="ciy-tip">
		<text style="font-size:1.1em;font-weight:bold;">
			ciy-tip 提示块</text>
		<br />1、内容
		<br />2、内容
	</view>

	<view class="ciy-grid">
		<view class="title">ciy-grid 九宫格 分类小标题</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">图标名称</view>
		</view>
		<view class="br"></view>
		<view class="grid">
			<view class="icon" :style="{backgroundImage:svg2bg(ciysvg)}"></view>
			<view class="name">新行图标</view>
		</view>
	</view>
	<view class="ciy-hr"></view>

	<view class="px4" style="margin-top:1em;">ciy-form-group char4</view>
	<view class="ciy-form-group char4">
		<view class="ciy-form">
			<label class="imp">重点项</label>
			<view>
				<ciy-input bb left name="name"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>一般</label>
			<view>
				<ciy-textarea bb left name="content"></ciy-textarea>
			</view>
		</view>
	</view>
	<view class="px4">ciy-form-group</view>
	<view class="ciy-form-group">
		<view class="ciy-form">
			<label class="imp">重点项</label>
			<view>
				<ciy-input bb left name="name"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>一般</label>
			<view>
				<ciy-textarea bb left name="content"></ciy-textarea>
			</view>
		</view>
		<view class="ciy-form v">
			<label>竖列</label>
			<view>
				<ciy-textarea bb left name="content"></ciy-textarea>
			</view>
		</view>
	</view>
	<view class="ciy-card">
		<view class="title">btn 按钮样式</view>
		<view class="right">.btn</view>
		<view class="content">
			<view>xs微 sm/smm小 lg/lgg大</view>
			<view>sq方角 cc原角</view>
			<view>def弱色 warn黄色 dag红色 imp绿色</view>
			<view>liner渐变 loading加载中</view>
			<form @submit="search">
				<button form-type="submit" class="btn xs">微xs</button>
				<button form-type="submit" class="btn smm">小smm</button>
				<button form-type="submit" class="btn sm">小sm</button>
				<button form-type="submit" class="btn">正常按钮</button>
				<button form-type="submit" class="btn lg">大lg</button>
				<button form-type="submit" class="btn lgg">大lgg</button>
				<view></view>
				<button form-type="submit" class="btn def">弱化</button>
				<button form-type="submit" class="btn dag">危险</button>
				<button form-type="submit" class="btn warn">重要</button>
				<button form-type="submit" class="btn succ">同意</button>
				<view></view>
				<button form-type="submit" class="btn def liner">弱化</button>
				<button form-type="submit" class="btn dag liner">危险</button>
				<button form-type="submit" class="btn warn liner">重要</button>
				<button form-type="submit" class="btn succ liner">同意</button>
				<view></view>
				<button form-type="submit" class="btn xs cc">圆按钮</button>
				<button form-type="submit" class="btn sm cc">圆按钮</button>
				<button form-type="submit" class="btn cc">圆按钮</button>
				<button form-type="submit" class="btn lg cc">圆按钮</button>
				<view></view>
				<button form-type="submit" class="btn sq">方角按钮</button>
				<button form-type="submit" class="btn cc loading">加载中</button>
				<button form-type="submit" class="btn lg cc loading">加载中</button>
				<view></view>
				<button form-type="submit" type="primary">默认按钮</button>
				<button form-type="submit">默认按钮</button>
				<view></view>
				<button form-type="submit" type="primary" size="mini">默认mini</button>
				<button form-type="submit" type="default" size="mini">默认mini</button>
				<button form-type="submit" type="warn" size="mini">默认mini</button>
			</form>
		</view>
	</view>

	<view style="text-align:center;padding:1em 0;">↓ 装饰分隔线 ↓</view>
	<view class="ciy-hr"></view>
	<view style="text-align:center;padding:1em 0;">↑ 装饰分隔线 ↑</view>


	<view class="ciy-bottom">
		<button class="btn lgg cc long" @tap="edited">大圆角 长条</button>
	</view>

</template>

<style>
</style>

<script>
	export default {
		data() {
			return {
				ciysvg: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M987.136 384.512C919.552 131.584 668.16-22.528 415.232 27.136c219.648-41.984 434.176 79.36 488.96 283.136 57.344 214.016-82.944 437.76-313.344 499.2-49.664 13.312-78.848 64-65.536 113.152 13.312 49.664 64 78.848 113.152 65.536 263.168-70.144 418.816-340.48 348.672-603.648zM116.224 713.216C58.88 499.2 199.68 275.456 430.08 214.016c49.664-13.312 78.848-64 65.536-113.152C482.816 51.2 432.128 21.504 382.464 34.816c-263.68 70.656-419.84 340.992-349.184 604.16 67.584 252.928 319.488 407.04 571.392 356.864-219.648 42.496-433.664-78.848-488.448-282.624z m93.184-203.776L291.84 449.536c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z m516.096-60.416L808.96 509.952l-149.504-229.888-149.504 229.376 82.432-59.904c44.544-32.256 90.112-32.256 133.12-0.512z m-366.08 291.84L441.856 680.96c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z" fill="#56a4ef"></path></svg>'
			}
		},
		onLoad() {},
		methods: {
			search(b) {
				//微信小程序支持 b.target.target.id
				console.log('search', b, b.detail.value);
			},
			list_dot() {
				this.popmenu({
					items: [{
						name: '菜单'
					}]
				});
			}
		}
	}
</script>