更新首页
parent
43ab9fd321
commit
1ae58175a9
|
|
@ -33,9 +33,9 @@ export default {
|
|||
imports: {
|
||||
vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
|
||||
'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
|
||||
fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js',
|
||||
'@bytedo/editor': '//jscdn.ink/@bytedo/editor/1.0.0/index.js',
|
||||
'@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/1.0.0/index.js',
|
||||
'@bd/core': '//jscdn.ink/@bd/core/1.9.0/index.js'
|
||||
fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
|
||||
'@bytedo/editor': '//jscdn.ink/@bytedo/editor/latest/index.js',
|
||||
'@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/latest/index.js',
|
||||
'@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#86909B" d="M512 137c-212.2 0-384 172.1-384 384.5 0 170.1 109.9 313.8 262.6 364.8 19.2 3.4 26.4-8.2 26.4-18.3 0-9.1-.5-39.4-.5-71.6-96.5 17.8-121.5-23.6-129.1-45.2-4.3-11.1-23-45.2-39.4-54.3-13.4-7.2-32.6-25-.5-25.5 30.2-.5 51.8 27.9 59 39.4 34.6 58.2 89.8 41.8 111.8 31.7 3.4-25 13.4-41.8 24.5-51.4-85.4-9.6-174.7-42.8-174.7-189.8 0-41.8 14.9-76.4 39.4-103.3-3.8-9.6-17.3-49 3.8-101.9 0 0 32.2-10.1 105.6 39.4 30.7-8.7 63.4-13 96-13s65.3 4.3 96 13c73.4-50 105.6-39.4 105.6-39.4 21.1 52.9 7.7 92.3 3.8 101.9 24.5 26.9 39.4 61 39.4 103.3 0 147.5-89.8 180.2-175.2 189.8 13.9 12 25.9 35.1 25.9 71.1 0 51.4-.5 92.8-.5 105.7 0 10.1 7.2 22.1 26.4 18.3C790.7 833.4 896 686.7 896 521.5 896 309.1 724.2 137 512 137z"/></svg>
|
||||
|
After Width: | Height: | Size: 824 B |
|
|
@ -1 +1 @@
|
|||
<svg viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/><path d="M36.21 192.639l160.921-74.805-81.778-5.063 119.519-67.69L49.06 126.138l88.8 2.712z" fill="rgb(252, 118, 97)"/></svg>
|
||||
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#FF6B81" d="M896 512.2v304.5c0 47.6-31.8 79.3-79.5 79.3h-609c-47.8 0-79.5-31.7-79.5-79.3V207c0-47.1 31.9-79 79.1-79h609.7c47.2 0 79.1 31.8 79.1 78.9.1 101.8.1 203.5.1 305.3zm-587.3-64.7c15.5-.5 21.6 3.5 23.9 12.8 2 8.2-2.2 15.3-12 19.9-3.1 1.5-6.5 2.6-9.9 3.5-11.8 3.1-23.7 6.1-35.6 8.9-33.8 8-67.8 14.8-101.4 23.8-12.1 3.2-19.4 11.1-20.2 21.3-1.4 17.3 13.1 28.5 31.7 24.3 48-10.8 95.9-21.8 143.9-32.6 9.5-2.1 18.8-5.3 28.6-5.4 9.4-.1 16.6 5.1 18.9 13 2.6 8.7-.6 16.4-9 21.8-3.4 2.2-7.1 3.5-11 4.6-33 9-66 18-99 27.1-14.1 3.9-21.5 13.9-19.4 26 2.5 14.6 15 22.4 30.3 18.7 19.4-4.6 38.5-10.7 58.2-14.1 8.1-1.4 15.6 2.9 19.1 10.1 3.4 7 1.9 14.7-3.9 20.6-4.9 5.1-11.4 7.1-17.9 8.8-38.2 10-76.3 20-114.5 29.9-7.8 2-14.1 6.2-19.2 12.4-6.4 7.8-6.5 16.9-.2 24.7 6.8 8.5 16 11.1 26.2 8.6 13.6-3.3 27-7.3 40.5-11C376.9 692.1 497 659 617.2 625.9c24.3-6.7 48.7-13.2 72.9-20.1 14.1-4 21-16.1 17.2-28.6-3.5-11.4-14.2-18-26.1-16.2-9.4 1.3-18.2 5.8-27.9 5.1-8.8-.7-14.2-5.2-16.1-13.2-1.6-7 1.8-13.9 9-18.1 5-2.9 10.5-4.7 16.1-6.1 55.3-13.6 110.6-27.1 165.9-40.7 8.2-2 16.5-4 24.6-6.6 12.9-4.1 19.5-15.7 16.5-27.9-3.1-12.3-14.2-19.3-27.6-17.3-2.5.4-4.9 1.1-7.3 1.7-82.8 20.7-165.7 41.5-248.5 62.3-4.9 1.2-9.8 1.9-14.8 1.5-7.8-.7-13-4.7-15.7-11.9-2.8-7.3-1.2-13.7 4.3-19.2 4.7-4.6 10.6-6.5 16.6-8.1 29.9-8 59.9-15.9 89.8-23.9 11.6-3.1 23.3-5.9 34.6-9.8 11.5-3.9 17.3-15 14.9-26.2-2.5-11.5-11.7-18.6-24.1-17.9-3.9.2-7.9 1.2-11.7 2.1-16.5 4.1-32.9 8.6-49.4 12.5-10.5 2.5-19.4-2.6-22.8-12.2-3.1-8.6 1.3-18.3 10.8-22.8 4.7-2.2 9.8-3.6 14.9-5 33.2-9.1 66.5-18.1 99.8-27 6-1.6 11.1-4.7 15.5-8.7 12.8-11.7 9.2-29.8-7.1-36.1-6.1-2.4-12.2-2.1-18.4-.3-140.8 40.1-282.5 76.6-423.9 114-23.7 6.2-47.4 12.3-70.9 19.1-12.5 3.6-18.6 15-15.9 26.8 2.7 11.7 13.5 19.1 26 17.3 7.4-1.1 14.6-3.3 21.9-5 17.4-4.4 34.9-8.7 48.4-11.9zm449.3 237c0-29.7-24.1-53.9-53.8-54-29.7-.1-54.1 23.9-54.2 53.6-.2 30.1 24.1 54.5 54.2 54.4 29.7-.1 53.8-24.3 53.8-54z"/></svg>
|
||||
|
Before Width: | Height: | Size: 394 B After Width: | Height: | Size: 2.0 KiB |
|
|
@ -1,14 +1,24 @@
|
|||
<template>
|
||||
<h1>it works! docs page</h1>
|
||||
<div>
|
||||
<wc-link to="/playground.html">plyaground</wc-link>
|
||||
</div>
|
||||
<Topbar nav="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Topbar from '../index/components/topbar.vue'
|
||||
export default {
|
||||
components: {}
|
||||
components: {
|
||||
Topbar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,369 @@
|
|||
<template>
|
||||
<h1>it works! index page</h1>
|
||||
<div>
|
||||
<wc-link to="/playground.html">plyaground</wc-link>
|
||||
<Topbar />
|
||||
|
||||
<banner class="banner flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<h1>轻量级模块化组件库</h1>
|
||||
<cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
|
||||
<cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
|
||||
<cite>网站快速成型工具</cite>
|
||||
</div>
|
||||
</banner>
|
||||
|
||||
<div class="colorful flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<header class="title">- 主题配色 -</header>
|
||||
<section>
|
||||
<ul class="blue">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="teal">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="green">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="red">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="orange">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="plain">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="grey">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="dark">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basic-demo flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<header class="title">Buttons</header>
|
||||
<section>
|
||||
<wc-button type="primary">Primary Button</wc-button>
|
||||
<wc-button type="secondary">Secondary Button</wc-button>
|
||||
<wc-button type="info">Info Button</wc-button>
|
||||
<wc-button type="help">Help Button</wc-button>
|
||||
</section>
|
||||
<section>
|
||||
<wc-button solid>Solid Button</wc-button>
|
||||
<wc-button solid type="success">Success Button</wc-button>
|
||||
<wc-button solid type="warning">Warning Button</wc-button>
|
||||
<wc-button solid type="danger">Danger Button</wc-button>
|
||||
</section>
|
||||
|
||||
<header class="title">Inputs</header>
|
||||
<section>
|
||||
<wc-input placeholder="Normal Input"></wc-input>
|
||||
<wc-input placeholder="Success Input" type="success"></wc-input>
|
||||
<wc-input placeholder="Danger Input" type="danger"></wc-input>
|
||||
<wc-input placeholder="Disabled Input" disabled></wc-input>
|
||||
</section>
|
||||
|
||||
<div class="more">
|
||||
<wc-link type="danger" to="./docs.html">更多组件...</wc-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Topbar from './components/topbar.vue'
|
||||
import Footer from './components/footer.vue'
|
||||
export default {
|
||||
components: {}
|
||||
components: {
|
||||
Topbar,
|
||||
Footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
background: linear-gradient(to right bottom, #155799, #157879, #159857);
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48px 0;
|
||||
|
||||
h1 {
|
||||
line-height: 2;
|
||||
font-size: 38px;
|
||||
font-weight: normal;
|
||||
color: var(--color-plain-1);
|
||||
}
|
||||
cite {
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
color: var(--color-plain-3);
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 64px;
|
||||
text-align: center;
|
||||
|
||||
wc-button {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.colorful {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--color-plain-1);
|
||||
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 32px 0;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
line-height: 3;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
li {
|
||||
height: 56px;
|
||||
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
ul:nth-child(2),
|
||||
ul:nth-child(5) {
|
||||
li {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
ul:nth-child(3),
|
||||
ul:nth-child(7) {
|
||||
li {
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-blue-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-blue-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-blue-3);
|
||||
}
|
||||
}
|
||||
.teal {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-teal-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-teal-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-teal-3);
|
||||
}
|
||||
}
|
||||
.green {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-green-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-green-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-green-3);
|
||||
}
|
||||
}
|
||||
.red {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-red-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-red-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-red-3);
|
||||
}
|
||||
}
|
||||
.orange {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-orange-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-orange-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-orange-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-orange-3);
|
||||
}
|
||||
}
|
||||
.plain {
|
||||
li:nth-child(1) {
|
||||
background: #f7f8fb;
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-plain-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-plain-3);
|
||||
}
|
||||
}
|
||||
.grey {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-grey-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-grey-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-grey-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-grey-3);
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-dark-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-dark-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-dark-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.basic-demo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 32px 0;
|
||||
|
||||
.title {
|
||||
line-height: 2;
|
||||
font-size: 22px;
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
wc-button,
|
||||
wc-input {
|
||||
flex: 1;
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
text-align: center;
|
||||
a {
|
||||
display: inline-flex;
|
||||
padding: 4px 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<footer class="footer">
|
||||
<div class="wrapper">
|
||||
<section class="nav">
|
||||
<a href="/">@bdjs 首页</a> |
|
||||
<a
|
||||
href="https://github.com/bd-js/wcui/blob/master/LICENSE"
|
||||
target="_blank"
|
||||
>MIT 开源协议</a
|
||||
>
|
||||
| <a href="https://github.com/bd-js" target="_blank">作者</a> |
|
||||
<a href="https://github.com/bd-js/wcui" target="_blank">GitHub</a>
|
||||
</section>
|
||||
<section class="copyright">
|
||||
©2023, Designed By Yutent, Powered By
|
||||
<a target="_blank" href="">@bd/core</a>,<a target="_blank" href=""
|
||||
>@bytedo/fite</a
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 260px;
|
||||
border-top: 1px solid var(--color-plain-3);
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--color-plain-3);
|
||||
|
||||
a {
|
||||
margin: 0 32px;
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 16px;
|
||||
color: var(--color-grey-2);
|
||||
|
||||
a {
|
||||
color: var(--color-teal-1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<header class="topbar noselect">
|
||||
<div class="logo">
|
||||
<img src="/assets/logo.svg" alt="Web Components" />
|
||||
<span>Web Components</span>
|
||||
</div>
|
||||
|
||||
<nav class="menu">
|
||||
<a :class="{ active: nav === 'index' }" href="./index.html">主页</a>
|
||||
<a :class="{ active: nav === 'docs' }" href="./docs.html">文档</a>
|
||||
<a target="_blank" href="https://github.com/bd-js/wcui"
|
||||
><img class="github" src="/assets/github.svg" alt="Web Components"
|
||||
/></a>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
nav: { type: String, default: 'index' }
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 54px;
|
||||
padding: 0 64px;
|
||||
border-bottom: 1px solid var(--color-plain-2);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 48px;
|
||||
transition: color 0.15s linear;
|
||||
|
||||
&.active {
|
||||
color: var(--color-red-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-red-3);
|
||||
}
|
||||
}
|
||||
|
||||
.github {
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue