105 lines
4.2 KiB
Vue
105 lines
4.2 KiB
Vue
<template>
|
|
<ciy-header title="Tailwind 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">字体</view>
|
|
<view class="content">
|
|
<view class="txt-smmm">txt-smmm</view>
|
|
<view class="txt-smm">txt-smm</view>
|
|
<view class="txt-sm">txt-sm</view>
|
|
<view class="txt-center">txt默认字号</view>
|
|
<view class="txt-lg">txt-lg</view>
|
|
<view class="txt-lgg">txt-lgg</view>
|
|
<view class="txt-lggg">txt-lggg</view>
|
|
<view class="txt-lgggg">txt-lgggg</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
<view class="txt-wb">txt-wb加粗</view>
|
|
<view class="txt-wl">txt-wl细线</view>
|
|
<view class="txt-un">txt-un下划线</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
<view class="txt-right">txt-right右对齐</view>
|
|
<view class="txt-center">txt-center居中对齐</view>
|
|
<view class="txt-left">txt-left左对齐</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
<view class="txt-just">txt-just两端对齐 Do not go gentle into that goodnight.For I pick chrysanthemums under the eastern hedge, and far away to the south I can see the mountains.</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
<view class="txt-nowrap">txt-nowrap不换行</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
<view class="txt-over">txt-over不换行 省略号溢出 Walt Whitman And still I rise</view>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-card">
|
|
<view class="title">颜色</view>
|
|
<view class="content">
|
|
<view class="txt1">txt1</view>
|
|
<view class="txt2">txt2</view>
|
|
<view class="txt3">txt3</view>
|
|
<view class="txt4">txt4</view>
|
|
<view class="txt5">txt5</view>
|
|
<view class="txt6">txt6</view>
|
|
<view class="txt7">txt7</view>
|
|
<view class="txt8">txt8</view>
|
|
<view class="txt9">txt9</view>
|
|
|
|
<view class="bg1">bg1 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg2">bg2 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg3">bg3 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg4">bg4 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg5">bg5 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg6">bg6 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg7">bg7 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg8">bg8 <text style="color:var(--bg1)">txt</text></view>
|
|
<view class="bg9">bg9 <text style="color:var(--bg1)">txt</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-card">
|
|
<view class="title">其他</view>
|
|
<view class="content">
|
|
<view class="bg5">左右不留白</view>
|
|
<view class="px1 bg6">px1左右留白 0.25rem</view>
|
|
<view class="px2 bg7">px2左右留白 0.5rem</view>
|
|
<view class="px3 bg6">px3左右留白 0.75rem</view>
|
|
<view class="px4 bg5">px4左右留白 1rem</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
|
|
<view class="bg5">上下不留白</view>
|
|
<view class="py1 bg6">py1上下留白 0.25rem</view>
|
|
<view class="py2 bg7">py2上下留白 0.5rem</view>
|
|
<view class="py3 bg6">py3上下留白 0.75rem</view>
|
|
<view class="py4 bg5">py4上下留白 1rem</view>
|
|
<view class="ciy-hr" style="margin:1em 0"></view>
|
|
|
|
<view class="px2 py2 bg6" style="margin-bottom:0.5em;">无圆角</view>
|
|
<view class="r1 px2 py2 bg6" style="margin-bottom:0.5em;">r1圆角 0.25rem</view>
|
|
<view class="r2 px2 py2 bg6" style="margin-bottom:0.5em;">r2圆角 0.5rem</view>
|
|
<view class="r3 px2 py2 bg6" style="margin-bottom:0.5em;">r3圆角 0.75rem</view>
|
|
<view class="r4 px2 py2 bg6" style="margin-bottom:0.5em;">r4圆角 1rem</view>
|
|
<view class="r5 px2 py2 bg6" style="margin-bottom:0.5em;">r5圆角 2rem</view>
|
|
|
|
<view>display: block/hide/flex</view>
|
|
<view>flex: flexcol/flex1/flexnone/flex-center/flex-wrap</view>
|
|
<view>transition: tran5</view>
|
|
<view>position: sta/abs/fix/rel/sti</view>
|
|
<view>pos: t0/l0/r0/b0,t1/l1/r1/b1</view>
|
|
<view>noselect</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
}
|
|
}
|
|
</script> |