Skip to content

Commit

Permalink
feat: 添加白天黑夜模式示例 | 优化build
Browse files Browse the repository at this point in the history
  • Loading branch information
@electroluxcode
electroluxcode committed Aug 19, 2023
1 parent cfc1397 commit e475aa1
Show file tree
Hide file tree
Showing 6 changed files with 237 additions and 74 deletions.
3 changes: 3 additions & 0 deletions src/component/wz-card/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


:host {
/* 头部渐变色 */
--card_title_target_color: rgba(44, 123, 76, 0);
Expand Down Expand Up @@ -82,3 +84,4 @@
border-radius: 5px 5px 0px 0px;
}


119 changes: 58 additions & 61 deletions src/component/wz-card/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,69 +17,66 @@

<body>

<style>
.layout {
width: 100%;
height: 400px;
}

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
width: 100%;
height: 100%;
margin: 0 auto;
}

.container_item_card {
background: #00ffe4;
}

.container_item_card:nth-child(2) {
background: #c51313;
/* 横着排列 */
grid-column: 2 / span 1;
/* 竖着排列 */
grid-row: 1 / span 2;
}

@media screen and (max-width:1000px) {
.container {
display: flex;
/* width: 60%; */
flex-direction: column;

}
.layout {
margin: 0 auto;
width: 100%;
height: 400vh;
}
.container_item_card {
flex: 1;

}
}
</style>

<div class="layout">
<div class="container">
<div class="container_item_card">1</div>

<div class="container_item_card">2</div>
<div class="container_item_card">3</div>
<div class="container_item_card">4</div>
<div class="container_item_card">5</div>
<div class="container_item_card">6</div>
<div class="container_item_card">7</div>
<div class="container_item_card">8</div>

</div>

<div class="night" style="display:flex;width:100%;height:100px">
<wz-card style="flex:1;margin:0px 10px" header-config='{
cardTitleColor: " rgba(255, 255, 255, 1)",
fontColor: "black"
}' body-config='{
cardBodyColor: "rgba(255, 255, 255, 1)",
}'>
<div slot="card_header_left">
头部左边
</div>
<div slot="card_container">
<div>测试数据</div>
</div>
</wz-card>
<wz-card style="flex:1;margin:0px 10px" header-config='{
cardTitleColor: " rgba(255, 255, 255, 1)",
fontColor: "black"
}' body-config='{
cardBodyColor: "rgba(255, 255, 255, 1)",
}'>
<div slot="card_header_left">
头部左边
</div>
<div slot="card_container">
<div>测试数据</div>
</div>
</wz-card>
<wz-card style="flex:1;margin:0px 10px" header-config='{
cardTitleColor: " rgba(255, 255, 255, 1)",
fontColor: "black"
}' body-config='{
cardBodyColor: "rgba(255, 255, 255, 0.1)",
}'>
<div slot="card_header_left">
头部左边
</div>
<div slot="card_container">
<div>测试数据</div>
</div>
</wz-card>
</div>

<script>
customElements.whenDefined('wz-card').then(() => {
// let event = new CustomEvent('mode', {
// detail: {
// title: "我是标题哦"
// }
// })
// // 最后还跟着是否能够冒泡和是否阻止默认操作
// globalThis.dispatchEvent(
// event, true, false
// )
console.log("webzen:",webzen)
window.webzenMode("mode",{mode:"light"},webzen)
// webzen("mode")
})


</script>
</body>

</html>
10 changes: 4 additions & 6 deletions src/component/wz-card/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Base from "../wz-base.js";
// @ts-ignore
import styles from "./index.css?inline" assert { type: "css" };
// @ts-ignore
import stylesnight from "./night.css?inline" assert { type: "css" };
console.log("styles:", styles);
function switchJson(input) {
let init = input;
init = (Function("return " + init))();
Expand Down Expand Up @@ -33,15 +36,12 @@ function dataCssSwitch(headerConfig, bodyConfig, that) {
that.shadowRootInit.querySelector(".card_header_wrapper_before").style.width = "100%";
that.shadowRootInit.querySelector(".card_header_wrapper_before").style.background = headerConfig.cardTitleColor;
}
console.log("headerConfig.fontColor:", headerConfig, bodyConfig);
// 字体颜色
if (headerConfig.fontColor) {
console.log("headerConfig.fontColor:", headerConfig, bodyConfig);
that.shadowRootInit.querySelector(".card").style.color = headerConfig.fontColor;
}
}
class myDiv extends Base {
shadowRootInit;
close;
headerConfig;
bodyConfig;
Expand All @@ -55,15 +55,13 @@ class myDiv extends Base {
super();
// 是否 展开
this.close = false;
const shadowRoot = this.attachShadow({ mode: "open" });
this.adoptedStyle(styles);
this.shadowRootInit = shadowRoot;
this.adoptedStyle(stylesnight);
}
/**
* @des 初始化数据
*/
connectedCallback() {
console.log("connectedCallback:", this);
this.render({});
this.headerConfig = switchJson(this.getAttribute("header-config"));
this.bodyConfig = switchJson(this.getAttribute("body-config"));
Expand Down
12 changes: 5 additions & 7 deletions src/component/wz-card/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
import Base from "../wz-base.js";
// @ts-ignore
import styles from "./index.css?inline" assert { type: "css" };

// @ts-ignore
import stylesnight from "./night.css?inline" assert { type: "css" };
console.log("styles:",styles)

function switchJson(input: string): any {
let init = input
Expand Down Expand Up @@ -45,16 +47,13 @@ function dataCssSwitch(headerConfig:headerConfigType,bodyConfig:bodyConfigType,t
that.shadowRootInit.querySelector(".card_header_wrapper_before").style.width="100%"
that.shadowRootInit.querySelector(".card_header_wrapper_before").style.background = headerConfig.cardTitleColor
}
console.log("headerConfig.fontColor:",headerConfig,bodyConfig)
// 字体颜色
if(headerConfig.fontColor){
console.log("headerConfig.fontColor:",headerConfig,bodyConfig)
that.shadowRootInit.querySelector(".card").style.color = headerConfig.fontColor
}
}

class myDiv extends Base {
shadowRootInit: any;
close: boolean;
headerConfig!: headerConfigType;
bodyConfig!: bodyConfigType
Expand All @@ -69,16 +68,15 @@ class myDiv extends Base {
super();
// 是否 展开
this.close = false
const shadowRoot = this.attachShadow({ mode: "open" });
this.adoptedStyle(styles);
this.shadowRootInit = shadowRoot
this.adoptedStyle(stylesnight);

}

/**
* @des 初始化数据
*/
connectedCallback() {
console.log("connectedCallback:", this)
this.render({})
this.headerConfig = switchJson(this.getAttribute("header-config")!)
this.bodyConfig = switchJson(this.getAttribute("body-config")!)
Expand Down
78 changes: 78 additions & 0 deletions src/component/wz-card/night.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.night {
display: none;
/* 分割线 */
/* 头部颜色 */
}
.night :host {
/* 头部渐变色 */
--card_title_target_color: rgba(44, 123, 76, 0);
/* 头部颜色 */
--card_title_color: rgba(44, 123, 76, 0.81);
/* 头部最终颜色 */
--card_header_color: var(linear-gradient(90deg, var(--card_title_color) 0%, var(--card_title_target_color) 100%));
/* 头部高度 */
--card_title_height: 36px;
/* 身体实体颜色 */
--card_body_color: rgba(0, 0, 0, 0.3);
}
.night .card {
/* border: 1px solid rgba(0, 0, 0, 0.1); */
color: white;
position: relative;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
border-radius: 10px;
border: 1.5px solid #f0f0f0;
overflow: hidden;
font-size: 12px;
}
.night .card_header {
position: relative;
display: flex;
justify-content: space-between;
background: black;
/* z-index: 999; */
}
.night .card_header_gradient {
display: flex;
position: relative;
justify-content: space-between;
z-index: 99;
align-items: center;
height: var(--card_title_height);
padding: 0px 10px;
}
.night .card_header_wrapper {
border-bottom: 1.5px solid #f0f0f0;
position: relative;
font-size: 13px;
}
.night .card_header_wrapper_before {
width: 100%;
background: linear-gradient(90deg, var(--card_title_color) 0%, var(--card_title_target_color) 100%);
content: "";
position: absolute;
height: var(--card_title_height);
backdrop-filter: blur(2px);
border-radius: 5px 5px 0px 0px;
/* width: 30%; */
/* z-index: -9; */
align-items: center;
}
.night .card_mask {
/* transition: all .3s ease-in-out; */
background: var(--card_body_color);
border-radius: 10px;
backdrop-filter: blur(6px);
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.night .padding {
padding: 2px 10px;
border-radius: 5px 5px 0px 0px;
}
89 changes: 89 additions & 0 deletions src/component/wz-card/night.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@

.night{
display: none;
:host {
/* 头部渐变色 */
--card_title_target_color: rgba(44, 123, 76, 0);
/* 头部颜色 */
--card_title_color: rgba(44, 123, 76, 0.81);
/* 头部最终颜色 */
--card_header_color:var(linear-gradient(90deg, var(--card_title_color) 0%, var(--card_title_target_color) 100%));
/* 头部高度 */
--card_title_height: 36px;
/* 身体实体颜色 */
--card_body_color: rgba(0, 0, 0, 0.3);
}

.card {
/* border: 1px solid rgba(0, 0, 0, 0.1); */
color: white;
position: relative;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
border-radius: 10px;
border: 1.5px solid rgba(240, 240, 240, 1);
overflow:hidden;
font-size:12px
}

/* 分割线 */
.card_header {
position: relative;
display: flex;
justify-content: space-between;

background: black;
/* z-index: 999; */
}

.card_header_gradient {
display: flex;
position: relative;
justify-content: space-between;
z-index: 99;
align-items: center;
height: var(--card_title_height);
padding: 0px 10px;
}

/* 头部颜色 */
.card_header_wrapper {
border-bottom: 1.5px solid rgba(240, 240, 240, 1);
position: relative;
font-size:13px
}
.card_header_wrapper_before {

width: 100%;
background: linear-gradient(90deg, var(--card_title_color) 0%, var(--card_title_target_color) 100%);
content: "";
position: absolute;
height: var(--card_title_height);
backdrop-filter: blur(2px);
border-radius: 5px 5px 0px 0px;
/* width: 30%; */
/* z-index: -9; */

align-items: center;
}
.card_mask {
/* transition: all .3s ease-in-out; */
background: var(--card_body_color);
border-radius: 10px;
backdrop-filter: blur(6px);
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
transition: all .3s ease-in-out;
overflow:hidden
}

.padding {
padding: 2px 10px;
border-radius: 5px 5px 0px 0px;
}


}

0 comments on commit e475aa1

Please sign in to comment.