641 lines
30 KiB
HTML
641 lines
30 KiB
HTML
{{:ModuleInclude('public/header')}}
|
||
<style type="text/css">
|
||
ul {
|
||
padding: 0 1.2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
ul li {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
ul li p:first-child {
|
||
min-width: 80px;
|
||
color: var(--color-grey-dark);
|
||
}
|
||
|
||
h1 {
|
||
padding: 0.6rem 1.2rem;
|
||
background: var(--color-grey-border);
|
||
border-radius: 0.4rem;
|
||
margin-bottom: 1.2rem;
|
||
}
|
||
|
||
h3 {
|
||
padding: 0.6rem 1.2rem;
|
||
}
|
||
|
||
.text-copy-submit {
|
||
cursor: pointer;
|
||
color: #409eff;
|
||
padding: 0.4rem 2rem;
|
||
border-radius: 0.4rem;
|
||
white-space: nowrap;
|
||
transition: 0.5s all;
|
||
}
|
||
|
||
.text-copy-submit:hover {
|
||
background: #409eff;
|
||
color: #fff;
|
||
outline: none;
|
||
}
|
||
|
||
.demo-block {
|
||
border: 0.1rem solid #f5f5f5;
|
||
padding: 0.5rem 1rem;
|
||
min-height: 3rem;
|
||
min-width: 3rem;
|
||
}
|
||
|
||
.am-min-width {
|
||
min-width: 50rem;
|
||
}
|
||
|
||
.am-height-vh {
|
||
height: calc(100vh - 4rem);
|
||
max-height: 100%;
|
||
}
|
||
|
||
.am-flex-4 {
|
||
flex: 4;
|
||
}
|
||
|
||
body ::-webkit-scrollbar-track-piece {
|
||
background: transparent;
|
||
}
|
||
|
||
body ::-webkit-scrollbar {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
body ::-webkit-scrollbar-track,
|
||
body ::-webkit-scrollbar-track:vertical {
|
||
background-color: transparent;
|
||
}
|
||
|
||
body ::-webkit-scrollbar-thumb,
|
||
body ::-webkit-scrollbar-thumb:vertical {
|
||
background: rgba(0, 0, 0, .1);
|
||
border-radius: 1rem;
|
||
}
|
||
</style>
|
||
<!-- content start -->
|
||
<div class="am-padding-sm am-flex am-flex-nowarp am-gap-1 am-scrollable-horizontal am-height-vh">
|
||
<div class="am-background-white am-radius am-padding-sm am-height-vh am-min-width am-scrollable-vertical am-flex-2">
|
||
<h1>配色说明</h1>
|
||
<ul class="color">
|
||
<li>
|
||
<p>基准数大小</p>
|
||
<p class=" demo-block" style="font-size: var(--html-body-size);">-</p>
|
||
<p class="text-copy-submit am-width" data-value="--html-body-size">--html-body-size: 10px;</p>
|
||
</li>
|
||
<li>
|
||
<p>背景颜色</p>
|
||
<p class=" demo-block" style="background: var(--body-bg-color);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--body-bg-color">--body-bg-color: #f7f7f7;</p>
|
||
</li>
|
||
<li>
|
||
<p>价格颜色</p>
|
||
<p class=" demo-block" style="background: var(--color-price);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--color-price">--color-price: #E22C08;</p>
|
||
</li>
|
||
<li>
|
||
<p>红色</p>
|
||
<p class=" demo-block" style="background: var(--color-red);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--color-red">--color-red: #f00;</p>
|
||
</li>
|
||
<li>
|
||
<p>默认圆角</p>
|
||
<p class=" demo-block" style="border-radius: var(--border-radius);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--border-radius">--border-radius: 0.4rem;</p>
|
||
</li>
|
||
<li>
|
||
<p>小圆角</p>
|
||
<p class=" demo-block" style="border-radius: var(--border-radius-sm);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--border-radius-sm">--border-radius-sm: 0.2rem;</p>
|
||
</li>
|
||
<li>
|
||
<p>大圆角</p>
|
||
<p class=" demo-block" style="border-radius: var(--border-radius-lg);"></p>
|
||
<p class="text-copy-submit am-width" data-value="">--border-radius-lg:0.8rem;</p>
|
||
</li>
|
||
<li>
|
||
<p>阴影效果</p>
|
||
<p class=" demo-block" style="box-shadow: var(--box-shadow);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--box-shadow">--box-shadow: 0 5px 20px
|
||
rgba(50,55,58,0.1);
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>小阴影效果</p>
|
||
<p class=" demo-block" style="box-shadow: var(--box-shadow-sm);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--box-shadow-sm">--box-shadow-sm: 0 2px 8px
|
||
rgba(50,55,58,0.1);</p>
|
||
</li>
|
||
<li>
|
||
<p>大阴影效果</p>
|
||
<p class=" demo-block" style="box-shadow: var(--box-shadow-lg);"></p>
|
||
<p class="text-copy-submit am-width" data-value="--box-shadow-lg">--box-shadow-lg: 0 8px 34px
|
||
rgba(50,55,58,0.1);</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="am-background-white am-radius am-padding-sm am-height-vh am-min-width am-scrollable-vertical am-flex-2">
|
||
<h1>辅助class说明</h1>
|
||
<ul>
|
||
<li>
|
||
<p>class说明</p>
|
||
<p class="text-copy-submit am-width">am-margin-top-sm</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="am-background-white am-radius am-padding-sm am-height-vh am-min-width am-scrollable-vertical am-flex-4">
|
||
<h1>操作按钮</h1>
|
||
<div class="am-margin-top-sm">
|
||
<h3>默认样式</h3>
|
||
<ul>
|
||
<li>
|
||
<p>默认</p>
|
||
<button type="button" class="am-btn am-btn-default">默认样式</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-default">.am-btn-default</p>
|
||
</li>
|
||
<li>
|
||
<p>主色按钮</p>
|
||
<button type="button" class="am-btn am-btn-primary">主色按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-primary">.am-btn-primary</p>
|
||
</li>
|
||
<li>
|
||
<p>次色按钮</p>
|
||
<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-secondary">.am-btn-secondary</p>
|
||
</li>
|
||
<li>
|
||
<p>成功按钮</p>
|
||
<button type="button" class="am-btn am-btn-success">成功按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-success">.am-btn-success</p>
|
||
</li>
|
||
<li>
|
||
<p>警告按钮</p>
|
||
<button type="button" class="am-btn am-btn-warning">警告按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-warning">.am-btn-warning</p>
|
||
</li>
|
||
<li>
|
||
<p>危险按钮</p>
|
||
<button type="button" class="am-btn am-btn-danger">危险按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-danger">.am-btn-danger</p>
|
||
</li>
|
||
<li>
|
||
<p>辅助按钮</p>
|
||
<button type="button" class="am-btn am-btn-assist">辅助按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-assist">.am-btn-assist</p>
|
||
</li>
|
||
<li>
|
||
<p>链接</p>
|
||
<a class="am-btn am-btn-link">链接按钮</a>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-link">.am-btn-link</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<hr class="am-margin-top-xl" />
|
||
<div class="am-margin-top-sm">
|
||
<h3>空心按钮</h3>
|
||
<ul>
|
||
<li>
|
||
<p>默认</p>
|
||
<button type="button" class="am-btn am-btn-default-plain">默认样式</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-default-plain">.am-btn-default-plain</p>
|
||
</li>
|
||
<li>
|
||
<p>主色按钮</p>
|
||
<button type="button" class="am-btn am-btn-primary-plain">主色按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-primary-plain">.am-btn-primary-plain</p>
|
||
</li>
|
||
<li>
|
||
<p>次色按钮</p>
|
||
<button type="button" class="am-btn am-btn-secondary-plain">次色按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-secondary-plain">.am-btn-secondary-plain</p>
|
||
</li>
|
||
<li>
|
||
<p>成功按钮</p>
|
||
<button type="button" class="am-btn am-btn-success-plain">成功按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-success-plain">.am-btn-success-plain</p>
|
||
</li>
|
||
<li>
|
||
<p>警告按钮</p>
|
||
<button type="button" class="am-btn am-btn-warning-plain">警告按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-warning-plain">.am-btn-warning-plain</p>
|
||
</li>
|
||
<li>
|
||
<p>危险按钮</p>
|
||
<button type="button" class="am-btn am-btn-danger-plain">危险按钮</button>
|
||
<p class="text-copy-submit am-width" data-value="am-btn-danger-plain">.am-btn-danger-plain</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<hr class="am-margin-top-xl" />
|
||
<div class="am-margin-top-sm">
|
||
<h3>圆角按钮<span class="text-copy-submit" data-value="am-radius">.am-radius</span></h3>
|
||
<div class="am-margin-top-xs am-padding-left-module">
|
||
<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>
|
||
<button type="button" class="am-btn am-btn-primary am-radius">主色按钮</button>
|
||
<button type="button" class="am-btn am-btn-secondary am-radius">次色按钮</button>
|
||
<button type="button" class="am-btn am-btn-success am-radius">成功按钮</button>
|
||
<button type="button" class="am-btn am-btn-warning am-radius">警告按钮</button>
|
||
<button type="button" class="am-btn am-btn-danger am-radius">危险按钮</button>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="am-margin-top-xl" />
|
||
<div class="am-margin-top-sm">
|
||
<h3>椭圆形按钮<span class="text-copy-submit" data-value="am-round">.am-round</span></h3>
|
||
<div class="am-margin-top-xs am-padding-left-module">
|
||
<button type="button" class="am-btn am-btn-default am-round">默认样式</button>
|
||
<button type="button" class="am-btn am-btn-primary am-round">主色按钮</button>
|
||
<button type="button" class="am-btn am-btn-secondary am-round">次色按钮</button>
|
||
<button type="button" class="am-btn am-btn-success am-round">成功按钮</button>
|
||
<button type="button" class="am-btn am-btn-warning am-round">警告按钮</button>
|
||
<button type="button" class="am-btn am-btn-danger am-round">危险按钮</button>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="am-margin-top-xl" />
|
||
<div class="am-margin-top-sm">
|
||
<h3>激活状态<span class="text-copy-submit" data-value="am-active">.am-active</span></h3>
|
||
<div class="am-margin-top-xs am-padding-left-module">
|
||
<button type="button" class="am-btn am-btn-default am-active">默认样式</button>
|
||
<button type="button" class="am-btn am-btn-primary am-active">主色按钮</button>
|
||
<button type="button" class="am-btn am-btn-secondary am-active">次色按钮</button>
|
||
<button type="button" class="am-btn am-btn-success am-active">成功按钮</button>
|
||
<button type="button" class="am-btn am-btn-warning am-active">警告按钮</button>
|
||