Skip to content

Commit bbee05f

Browse files
WalterDSUWalterDSU
authored
增加个人喜好版
1 parent 8eef44b commit bbee05f

File tree

1 file changed

+94
-70
lines changed

1 file changed

+94
-70
lines changed

‎dist/ch_calendar-card.js‎

Lines changed: 94 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ class ChineseCalendarCard extends LitElement {
88

99
return css`
1010
:host {
11-
--main-bg-color: linear-gradient(to bottom,#03a9f4,#68d0ff);
11+
--main-bg-color: none /* 设置上半部分container背景颜色为none */
1212
--main-title-color: white;
13-
--ch-highlight-color: #68d0ff;
14-
--cell-title-color: #515151;
13+
--ch-highlight-color: #03a9f4;
14+
--cell-title-color: white; /* 设置下半部分list的左边文字颜色为白色 */
1515
--cell-date-color: #aaa;
1616
}
1717
.icon_container {
18-
width: 40px;
18+
width: 40px; /*设置下半部分倒计数字日期的数字与下文的空隙,从40到8 */
1919
}
2020
.icon {
21-
width: 25px;
22-
height: 25px;
21+
width: 28px; /*设置下半部分左侧图标大小,从25到28 */
22+
height: 28px; /*设置下半部分左侧图标大小,从25到28 */
2323
display: inline-block;
2424
vertical-align: middle;
2525
background-size: contain;
@@ -40,110 +40,128 @@ class ChineseCalendarCard extends LitElement {
4040
margin-left: 10px;
4141
}
4242
.card {
43-
padding: 0 18px 18px 18px;
43+
padding: 0 18px 18px 18px; /* 设置,从18到8 */
4444
}
4545
.header div {
4646
display: flex;
4747
}
4848
.title {
4949
margin-left: 16px;
50-
font-size: 14px;
50+
font-size: 16px;
5151
}
5252
5353
.flex_container_center {
5454
display: flex;
5555
align-items: baseline;
5656
justify-content: center;
57-
}
57+
}
5858
5959
.date_solar {
60-
font-size: 30px;
60+
font-size: 28px; /* 设置上半部分阳历日期的字体大小, 从30到28 */
6161
text-align: right;
62-
margin-right: 17px;
63-
padding-top: 20px;
64-
color: var(--main-title-color);
62+
color: white;
63+
margin-right: 18px;
64+
margin-top: 18px;
6565
}
6666
.date_week {
6767
font-size: 18px;
68-
color: var(--main-title-color);
68+
color: white;
6969
text-align: right;
70-
margin-right: 20px;
70+
margin-right: 18px;
71+
margin-top: -18px;
7172
}
7273
.date_lunar {
7374
font-size: 14px;
74-
color: var(--main-title-color);
75+
color: white;
7576
text-align: right;
76-
margin-right: 20px;
77-
margin-top: -10px;
77+
margin-right: 18px;
78+
margin-top: -18px;
7879
}
7980
.latest_title {
80-
color: var(--main-title-color);
81+
color: white;
8182
font-size: 14px;
8283
text-align: center;
83-
padding-top: 20px;
84+
padding-top: 8px; /* 设置距离两字与上面信息之间的空隙,从35到28 */
8485
}
8586
.latest_holiday {
86-
color: var(--main-title-color);
87+
color: white;
8788
font-size: 18px;
8889
text-align: center;
89-
padding-top: 4px;
90+
padding-top: 4px; /* new */
9091
}
9192
.latest_days {
92-
color: var(--main-title-color);
93-
font-size: 45px;
93+
color: var(--ch-highlight-color); /* 设置上半部分倒计数字天数的颜色, 为用下面列表数字一样的浅蓝色,原来是白色的 */
9494
text-align: center;
95-
padding-top: 20px;
96-
padding-bottom: 16px;
97-
}
98-
99-
.latest_days_unit {
100-
101-
color: var(--main-title-color);
102-
font-size: 14px;
103-
margin-left: 2px;
95+
padding-top: 18px; /* 设置上半部分倒计数字天数的颜色与上文案间隙, 从20到18 */
96+
padding-bottom: 0px; /* 设置上半部分倒计数字天数的颜色与下文案间隙 */
10497
}
105-
98+
.days-number {
99+
font-size: 68px; /* 设置上半部分倒计数字天数的字体大小 */
100+
font-weight: bold;
101+
display: bold;
102+
}
103+
.days-text {
104+
font-size: 12px; /* 设置上半部分倒计数字天数的天字的字体大小 */
105+
color: white;
106+
}
107+
106108
.latest_date {
107-
color: var(--main-title-color);
108-
font-size: 14px;
109+
color: white;
110+
font-size: 16px; /* 设置上半部分倒计数字日期的数字字体大小 */
109111
text-align: center;
110-
padding-bottom: 35px;
112+
padding-bottom: 0px; /* 设置上半部分倒计数字日期的数字与下文的空隙 */
111113
}
112114
.cell_l {
113115
text-align: left;
114116
}
115117
.cell_name {
116-
font-size: 14px;
117-
color: var(--cell-title-color);
118+
font-size: 16px;
119+
color: white
120+
118121
}
119122
.cell_date {
120-
color: var(--cell-date-color);
121123
font-size: 14px;
124+
color: rgba(255, 255, 255, 0.7); /* 设置为白色的70%透明度,0代表完全透明 */
125+
122126
}
123127
.cell_day_h {
124128
text-align: right;
125-
font-size: 14px;
129+
padding-right: 12px;
130+
font-size: 16px;
126131
color: var(--ch-highlight-color);
127132
}
128133
.cell_day_n {
129134
text-align: right;
130-
font-size: 14px;
135+
padding-right: 12px;
136+
font-size: 16px;
131137
color: var(--cell-title-color);
132138
}
133139
.table {
134140
width: 100%;
135-
padding-right: 20px;
136-
padding-top: 12px;
137-
padding-bottom: 6px;
141+
padding-right: 18px; /* 设置下半部分倒计数字日期的数字与下文的空隙,从20到8 */
142+
padding-top: 8px; /* 设置下半部分倒计数字日期的数字与下文的空隙,从12到8 */
143+
padding-bottom: 6px; /* 设置下半部分倒计数字日期的数字与下文的空隙,从6到8 */
144+
padding: 1px;
138145
}
139146
.container {
140147
background: var(--main-bg-color);
141-
border-top-left-radius: 8px;
142-
border-top-right-radius: 8px;
148+
border-top-left-radius: 8px; /* new */
149+
border-top-right-radius: 8px; /* new */
143150
}
144151
.list_container {
145-
padding-bottom: 20px;
152+
padding-bottom: 8px; /* 设置下半部分倒计数字日期的数字与下文的空隙,从20到8 */
146153
}
154+
.clock {
155+
margin-left: 18px;
156+
font-size: 58px;
157+
color: white;
158+
text-align: left;
159+
margin-top: 28px;
160+
}
161+
.timeanddate {
162+
display: flex;
163+
justify-content: space-between;
164+
}
147165
`;
148166
}
149167

@@ -154,12 +172,14 @@ class ChineseCalendarCard extends LitElement {
154172
<div style="align-items: baseline;">
155173
<div class="title">${this.title}</div>
156174
</div>
157-
<div class="date_solar">
158-
${this.attributes.solar}
159-
</div>
160-
<div class="date_solar">
175+
<div class="timeanddate">
176+
<div class="clock">
161177
${this.currentTime}
162-
</div>
178+
</div>
179+
<div class="date_solar">
180+
${this.attributes.solar}
181+
</div>
182+
</div>
163183
<div class="date_week">
164184
<p class="icon_state" style="background: none, url(${this.getStateIcon(this.calendarEntity.state)}) no-repeat; background-size: contain;"></p>
165185
${this.attributes.week}
@@ -174,13 +194,10 @@ class ChineseCalendarCard extends LitElement {
174194
</div>
175195
<div class="latest_title">距离</div>
176196
<div class="latest_holiday">${this.latestReminder.name}</div>
177-
<div class="flex_container_center">
178-
<div class="latest_days">
179-
${this.latestReminder.days}
180-
</div>
181-
<div class="latest_days_unit">
182-
天
183-
</div>
197+
198+
<div class="latest_days">
199+
<span class="days-number">${this.latestReminder.days}</span>
200+
<span class="days-text">天</span>
184201
</div>
185202
<div class="latest_date">${this.dateFormatIfNeed(this.latestReminder.date)}</div>
186203
</div>
@@ -258,15 +275,15 @@ class ChineseCalendarCard extends LitElement {
258275
constructor() {
259276
super();
260277
const options = {
261-
hour: 'numeric',
278+
hour: '2-digit',
262279
minute: 'numeric',
263-
second: 'numeric',
280+
second: 'none',
264281
}
265282
var d = new Date();
266-
this.currentTime = d.toLocaleTimeString();
283+
this.currentTime = d.toLocaleTimeString('en-US', {hour12: false,hour: '2-digit', minute:'2-digit'});
267284
setInterval(() => {
268285
var d = new Date();
269-
this.currentTime = d.toLocaleTimeString();
286+
this.currentTime = d.toLocaleTimeString('en-US', {hour12: false,hour: '2-digit', minute:'2-digit'});
270287
this.requestUpdate();
271288
}, 1000);
272289

@@ -388,7 +405,7 @@ class ChineseCalendarCard extends LitElement {
388405

389406
}
390407

391-
//transfer yyyyMMdd to yyyy-MM-dd
408+
//transfer yyyyMMdd to yyyy-MM-dd
392409
dateFormatIfNeed(date_str) {
393410
const regex = /^\d{4}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[01])$/;
394411

@@ -409,11 +426,11 @@ class ChineseCalendarCard extends LitElement {
409426
}
410427

411428
getStateIcon(state) {
412-
var stateIcons = [{state:'工作日', icon:'working'},{state:'休息日', icon:'dating'},{state:'节假日', icon:'vacation'}];
413-
var iconName = "";
414-
415-
stateIcons.forEach(function(item, index) {
416-
if(item.state == state) {
429+
var stateIcons = [{state:'工作日', icon:'working'},{state:'休息日', icon:'dating'},{state:'节假日', icon:'vacation'}];
430+
var iconName = "";
431+
432+
stateIcons.forEach(function(item, index) {
433+
if(item.state == state) {
417434
iconName = item.icon;
418435
return true;
419436
}
@@ -448,3 +465,10 @@ class ChineseCalendarCard extends LitElement {
448465

449466

450467
customElements.define('ch_calendar-card', ChineseCalendarCard);
468+
window.customCards = window.customCards || [];
469+
window.customCards.push({
470+
type: "ch_calendar-card",
471+
name: "中国节假日日历卡片",
472+
preview: true, // Optional - defaults to false
473+
description: "中国节假日日历卡片" // Optional
474+
});

0 commit comments

Comments
 (0)