home1022
This commit is contained in:
bwstudio
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title" style="margin-top: 0;">主色调</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #3c9cff;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Primary</text>
|
||||
<text class="u-page__item__color-box__item__value">#3c9cff</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #398ade;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#398ade</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #9acafc;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#9acafc</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #ecf5ff;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#ecf5ff</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Error</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f56c6c;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Error</text>
|
||||
<text class="u-page__item__color-box__item__value">#f56c6c</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #e45656;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#e45656</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f7b2b2;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#f7b2b2</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #fef0f0;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#fef0f0</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Warning</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f9ae3d;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Warning</text>
|
||||
<text class="u-page__item__color-box__item__value">#f9ae3d</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f1a532;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#f1a532</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f9d39b;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#f9d39b</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #fdf6ec;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#fdf6ec</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Info</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #909399;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Info</text>
|
||||
<text class="u-page__item__color-box__item__value">#909399</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #767a82;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#767a82</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #c4c6c9;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#c4c6c9</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f4f4f5;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f4f4f5</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Success</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #5ac725;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Success</text>
|
||||
<text class="u-page__item__color-box__item__value">#5ac725</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #53c21d;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#53c21d</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #a9e08f;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#a9e08f</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f5fff0;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f5fff0</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">文字颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #303133;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">主要文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#303133</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #606266;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">常规文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#606266</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #909399;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">次要文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#909399</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #c0c4cc;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">占位文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#c0c4cc</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">边框颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #9a9998;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">一级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#9a9998</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #b4b3b1;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">二级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#b4b3b1</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #ceccca;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">三级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#ceccca</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #e7e6e4;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">四级边框</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#e7e6e4</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">背景颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f3f4f6;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">背景颜色</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f3f4f6</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 15px;
|
||||
|
||||
&__item {
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
color: $u-content-color;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__color-box {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__item {
|
||||
width: 160rpx;
|
||||
@include flex(column);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 3px;
|
||||
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-tips-color {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user