91 lines
3.3 KiB
Vue
91 lines
3.3 KiB
Vue
<template>
|
|
<ciy-header :title="lang('apptitle')"></ciy-header>
|
|
<view>
|
|
<view class="ciy-card">
|
|
<view class="title mk">
|
|
暗黑模式
|
|
</view>
|
|
<view class="right">this.settheme()</view>
|
|
<view class="content">
|
|
<view style="margin:0.5em;display: flex;justify-content: space-around;">
|
|
<view class="btn" @tap="this.settheme('dark')">dark</view>
|
|
<view class="btn" @tap="this.settheme('light')">light</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="margin-bottom:0.5em;">
|
|
<view class="box txt1 bg1">txt1 bg1</view>
|
|
<view class="box txt2 bg2">txt2 bg2</view>
|
|
<view class="box txt3 bg3">txt3 bg3</view>
|
|
<view class="box txt4 bg4">txt4 bg4</view>
|
|
<view class="box txt5 bg5">txt5 bg5</view>
|
|
<view class="box txt6 bg6">txt6 bg6</view>
|
|
<view class="box txt7 bg7">txt7 bg7</view>
|
|
<view class="box txt8 bg8">txt8 bg8</view>
|
|
<view class="box txt9 bg9">txt9 bg9</view>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="margin-bottom:0.5em;">
|
|
<view class="box" style="background:var(--man3);color:var(--mant)">man3</view>
|
|
<view class="box" style="background:var(--man4);color:var(--mant)">man4</view>
|
|
<view class="box" style="background:var(--man5);color:var(--mant)">man5</view>
|
|
<view class="box" style="background:var(--man6);color:var(--mant)">man6</view>
|
|
<view class="box" style="background:var(--man7);color:var(--mant)">man7</view>
|
|
<view class="box"><button class="btn man liner">按钮</button></view>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="margin-bottom:0.5em;">
|
|
<view class="box" style="background:var(--succ4);color:var(--succt)">succ4</view>
|
|
<view class="box" style="background:var(--succ5);color:var(--succt)">succ5</view>
|
|
<view class="box" style="background:var(--succ6);color:var(--succt)">succ6</view>
|
|
<view class="box"><button class="btn succ liner">按钮</button></view>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="margin-bottom:0.5em;">
|
|
<view class="box" style="background:var(--warn4);color:var(--warnt)">warn4</view>
|
|
<view class="box" style="background:var(--warn5);color:var(--warnt)">warn5</view>
|
|
<view class="box" style="background:var(--warn6);color:var(--warnt)">warn6</view>
|
|
<view class="box"><button class="btn warn liner">按钮</button></view>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="margin-bottom:0.5em;">
|
|
<view class="box" style="background:var(--dag4);color:var(--dagt)">dag4</view>
|
|
<view class="box" style="background:var(--dag5);color:var(--dagt)">dag5</view>
|
|
<view class="box" style="background:var(--dag6);color:var(--dagt)">dag6</view>
|
|
<view class="box"><button class="btn dag liner">按钮</button></view>
|
|
</view>
|
|
|
|
<view class="flex flex-center px4" style="gap:1em;margin-bottom:0.5em;">
|
|
文字
|
|
<ciy-input bb style="width:4em;"></ciy-input>
|
|
<ciy-switch value="true"></ciy-switch>
|
|
<ciy-switch></ciy-switch>
|
|
</view>
|
|
|
|
<view style="text-align:center;line-height:3em;height:10em;width:100%;background: linear-gradient(60deg, var(--e-userbg1), var(--e-userbg2));">
|
|
我的默认色
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
.box {
|
|
width: 33%;
|
|
line-height: 3em;
|
|
height: 3em;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
sys: {}
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {}
|
|
}
|
|
</script> |