bd
/
official
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新首页

master
yutent 2023-04-25 17:54:06 +08:00
parent fff73bce8d
commit 8403a81964
4 changed files with 111 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/@wcui/docs/main.js
View File

@ -1,10 +1,11 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './app.vue' import App from './app.vue'
// import '//jscdn.ink/@bd/ui/latest/form/index.js'
import '//jscdn.ink/@bd/ui/latest/form/index.js' import '//jscdn.ink/@bd/ui/latest/form/index.js'
import '//jscdn.ink/@bd/ui/latest/markd/index.js' import '//jscdn.ink/@bd/ui/latest/markd/index.js'
import '//jscdn.ink/@bd/ui/latest/sandbox/index.js' import '//jscdn.ink/@bd/ui/latest/sandbox/index.js'
// import '//127.0.0.1:8090/dist/markd/index.js'
// import '//127.0.0.1:8090/dist/sandbox/index.js'
const app = createApp(App) const app = createApp(App)

392
src/pages/@wcui/index/app.vue
View File

@ -1,98 +1,64 @@
<template> <template>
<Topbar /> <Topbar />
<banner class="banner flex-ac"> <banner class="banner">
<div class="wrapper flex-ac"> <div class="wrapper">
<h1>轻量级模块化组件库</h1> <section class="slogen">
<cite>一款基于Web Components, 面向未来的桌面UI组件库</cite> <h1>轻量级模块化组件库</h1>
<cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite> <cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
<cite>网站快速成型工具</cite> <cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
<cite>网站快速成型工具</cite>
<wc-space gap="xxxl">
<wc-button size="xl" round solid>开始使用</wc-button>
<wc-button size="xl" type="secondary" round>GitHub</wc-button>
</wc-space>
</section>
<div class="blur-bg"></div>
<svg class="line" width="960" height="300">
<g>
<path
d="M20,283 C288,288 604,64 960,16"
fill="none"
stroke="var(--color-blue-a)"
stroke-width="0.5"
/>
<path
d="M424,300 C512,288 588,108 960,23"
fill="none"
stroke="var(--color-dark-a)"
stroke-width="0.5"
/>
<path
d="M234,300 C512,288 588,108 960,63"
fill="none"
stroke="var(--color-teal-a)"
stroke-width="0.5"
/>
</g>
</svg>
</div> </div>
</banner> </banner>
<div class="colorful flex-ac"> <div class="feature">
<div class="wrapper flex-ac"> <div class="wrapper">
<header class="title">- 主题配色 -</header> <section class="item">
<section> <wc-icon name="client"></wc-icon>
<ul class="blue"> <h3>基于原生影子节点</h3>
<li></li> <cite>优秀的兼容性, 不挑框架。</cite>
<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> </section>
<header class="title">Inputs</header> <section class="item">
<section> <wc-icon name="finger-print"></wc-icon>
<wc-input placeholder="Normal Input"></wc-input> <h3>原生的隔离能力</h3>
<wc-input placeholder="Success Input" type="success"></wc-input> <cite>无样式污染, 灵活的拓展接口</cite>
<wc-input placeholder="Danger Input" type="danger"></wc-input>
<wc-input placeholder="Disabled Input" disabled></wc-input>
</section> </section>
<div class="more"> <section class="item">
<wc-link type="danger" to="./docs.html">更多组件...</wc-link> <wc-icon name="fly"></wc-icon>
</div> <h3>基于强大的@bd/core</h3>
<cite>Vue一样的开发体验</cite>
</section>
</div> </div>
</div> </div>
@ -130,238 +96,90 @@ a {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 400px; height: 400px;
background: linear-gradient(to right bottom, #155799, #157879, #159857);
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center;
padding: 48px 0; padding: 48px 0;
.slogen {
display: flex;
flex-direction: column;
}
.blur-bg {
width: 212px;
height: 320px;
border-radius: 50%;
background-image: linear-gradient(
to bottom,
var(--color-blue-a),
var(--color-dark-a) 60%
);
transform: scale(1.25);
filter: blur(50px);
}
.line {
position: absolute;
z-index: -1;
}
h1 { h1 {
line-height: 2; line-height: 2;
font-size: 38px; font-size: 38px;
font-weight: normal; font-weight: normal;
color: var(--color-plain-1);
} }
cite { cite {
line-height: 2; line-height: 1.75;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
color: var(--color-plain-3);
}
section {
margin-top: 64px;
text-align: center;
wc-button {
margin: 0 16px;
}
} }
} }
} }
.colorful {
.feature {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: var(--color-plain-1);
.wrapper { .wrapper {
flex-direction: column; display: flex;
padding: 32px 0; justify-content: space-between;
padding: 64px 0;
.title { .item {
position: relative;
line-height: 3;
font-size: 26px;
text-align: center;
color: var(--color-grey-2);
}
section {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
margin-bottom: 32px; width: 300px;
height: 160px;
padding: 16px;
border-radius: 8px;
background: #f7f8fb;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
ul { &:hover {
flex: 1; background: #fff;
display: flex; transform: translateY(-5px);
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), wc-icon {
ul:nth-child(5) { width: 64px;
li { height: 64px;
height: 48px; padding: 8px;
} border-radius: 6px;
}
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); background: var(--color-plain-2);
} }
li:nth-child(4) { h3 {
background: var(--color-plain-3); margin-top: 16px;
line-height: 2;
font-size: 16px;
font-weight: normal;
} }
}
.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 { cite {
display: flex; font-size: 13px;
justify-content: center; color: var(--color-grey-3);
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);
}
} }
} }
} }

4
src/pages/@wcui/index/components/footer.vue
View File

@ -2,7 +2,7 @@
<footer class="footer"> <footer class="footer">
<div class="wrapper"> <div class="wrapper">
<section class="nav"> <section class="nav">
<a href="/">@bdjs 首页</a> | <a href="/">bd.js 首页</a> |
<a <a
href="https://github.com/bd-js/wcui/blob/master/LICENSE" href="https://github.com/bd-js/wcui/blob/master/LICENSE"
target="_blank" target="_blank"
@ -30,7 +30,7 @@ export default {}
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 260px; height: 240px;
border-top: 1px solid var(--color-plain-3); border-top: 1px solid var(--color-plain-3);
.wrapper { .wrapper {

3
src/pages/@wcui/index/main.js
View File

@ -1,7 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './app.vue' import App from './app.vue'
import '//jscdn.ink/@bd/ui/0.1.3/form/index.js' import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/index.js'
const app = createApp(App) const app = createApp(App)