226 lines
8.0 KiB
Vue
226 lines
8.0 KiB
Vue
<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> |