Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1b405ac903 | |||
| 9a881f72b4 |
@ -1,121 +1,121 @@
|
||||
<template>
|
||||
<div class="detail-page" @swipe="goBack">
|
||||
<text>{{ year }}年{{ formattedMonth }}月{{ day }}日</text>
|
||||
<text if="{{!!week}}">周{{ week }}</text>
|
||||
<text if="{{!!lunarYear}}">
|
||||
{{ lunarYear }}年 {{ lunarMonth }}月 {{ lunarDay }}
|
||||
</text>
|
||||
<text>{{ festival }}</text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import router from "@blueos.app.appmanager.router";
|
||||
import sloarToLunar from "../../common/utils/sloarToLunar";
|
||||
|
||||
export default {
|
||||
data: {
|
||||
year: "",
|
||||
month: "",
|
||||
day: "",
|
||||
week: null,
|
||||
lunarYear: null,
|
||||
lunarMonth: null,
|
||||
lunarDay: null,
|
||||
festival: "",
|
||||
formattedMonth: '',
|
||||
gregorianFestival: { //阳历
|
||||
"1.1": "元旦",
|
||||
"2.14": "情人节",
|
||||
"3.8": "妇女节",
|
||||
"3.12": "植树节",
|
||||
"4.1": "愚人节",
|
||||
"5.1": "劳动节",
|
||||
"5.4": "青年节",
|
||||
"6.1": "儿童节",
|
||||
"9.10": "教师节",
|
||||
"10.1": "国庆节",
|
||||
"12.25": "圣诞节"
|
||||
},
|
||||
lunarFestival: { //阴历
|
||||
"正月初一": "春节",
|
||||
"正月十五": "元宵节",
|
||||
"五月初五": "端午节",
|
||||
"七月初七": "七夕节",
|
||||
"七月十五": "中元节",
|
||||
"八月十五": "中秋节",
|
||||
"九月初九": "重阳节",
|
||||
"腊月初八": "腊八节",
|
||||
"腊月廿三": "小年",
|
||||
"腊月三十": "除夕",
|
||||
}
|
||||
},
|
||||
|
||||
onInit() {
|
||||
const { year, month, day } = this;
|
||||
this.year = parseInt(year); // 转换为整数
|
||||
this.month = parseInt(month); // 转换为整数
|
||||
this.day = parseInt(day); // 转换为整数
|
||||
|
||||
const { lunarYear, lunarMonth, lunarDay } = sloarToLunar(this.year, this.month, this.day);
|
||||
this.lunarYear = lunarYear;
|
||||
this.lunarMonth = lunarMonth;
|
||||
this.lunarDay = lunarDay;
|
||||
this.getWeek();
|
||||
this.formattedMonth = this.month < 10 ? `0${this.month}` : this.month;
|
||||
const lunar = `${lunarMonth}月${lunarDay}`;
|
||||
if (this.lunarFestival.hasOwnProperty(lunar)) {
|
||||
this.festival = this.lunarFestival[lunar];
|
||||
}
|
||||
const solar = `${this.month}.${this.day}`;
|
||||
if (this.gregorianFestival.hasOwnProperty(solar)) {
|
||||
this.festival = this.gregorianFestival[solar];
|
||||
}
|
||||
},
|
||||
|
||||
getWeek() {
|
||||
const { year, month, day } = this;
|
||||
const weeks = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
const weekIndex = new Date(year, month - 1, day).getDay();
|
||||
this.week = weeks[weekIndex];
|
||||
},
|
||||
backClick() {
|
||||
router.back();
|
||||
},
|
||||
|
||||
goBack(eve) {
|
||||
if (eve.direction === "right") {
|
||||
router.back();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.detail-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 240px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
margin: 0px 20px 0px 20px;
|
||||
background-color: grey;
|
||||
}
|
||||
<template>
|
||||
<div class="detail-page" @swipe="goBack">
|
||||
<text>{{ year }}年{{ formattedMonth }}月{{ day }}日</text>
|
||||
<text if="{{!!week}}">周{{ week }}</text>
|
||||
<text if="{{!!lunarYear}}">
|
||||
{{ lunarYear }}年 {{ lunarMonth }}月 {{ lunarDay }}
|
||||
</text>
|
||||
<text>{{ festival }}</text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import router from "@blueos.app.appmanager.router";
|
||||
import sloarToLunar from "../../common/utils/sloarToLunar";
|
||||
|
||||
export default {
|
||||
data: {
|
||||
year: "",
|
||||
month: "",
|
||||
day: "",
|
||||
week: null,
|
||||
lunarYear: null,
|
||||
lunarMonth: null,
|
||||
lunarDay: null,
|
||||
festival: "",
|
||||
formattedMonth: '',
|
||||
gregorianFestival: { //阳历
|
||||
"1.1": "元旦",
|
||||
"2.14": "情人节",
|
||||
"3.8": "妇女节",
|
||||
"3.12": "植树节",
|
||||
"4.1": "愚人节",
|
||||
"5.1": "劳动节",
|
||||
"5.4": "青年节",
|
||||
"6.1": "儿童节",
|
||||
"9.10": "教师节",
|
||||
"10.1": "国庆节",
|
||||
"12.25": "圣诞节"
|
||||
},
|
||||
lunarFestival: { //阴历
|
||||
"正月初一": "春节",
|
||||
"正月十五": "元宵节",
|
||||
"五月初五": "端午节",
|
||||
"七月初七": "七夕节",
|
||||
"七月十五": "中元节",
|
||||
"八月十五": "中秋节",
|
||||
"九月初九": "重阳节",
|
||||
"腊月初八": "腊八节",
|
||||
"腊月廿三": "小年",
|
||||
"腊月三十": "除夕",
|
||||
}
|
||||
},
|
||||
|
||||
onInit() {
|
||||
const { year, month, day } = this;
|
||||
this.year = parseInt(year); // 转换为整数
|
||||
this.month = parseInt(month); // 转换为整数
|
||||
this.day = parseInt(day); // 转换为整数
|
||||
|
||||
const { lunarYear, lunarMonth, lunarDay } = sloarToLunar(this.year, this.month, this.day);
|
||||
this.lunarYear = lunarYear;
|
||||
this.lunarMonth = lunarMonth;
|
||||
this.lunarDay = lunarDay;
|
||||
this.getWeek();
|
||||
this.formattedMonth = this.month < 10 ? `0${this.month}` : this.month;
|
||||
const lunar = `${lunarMonth}月${lunarDay}`;
|
||||
if (this.lunarFestival.hasOwnProperty(lunar)) {
|
||||
this.festival = this.lunarFestival[lunar];
|
||||
}
|
||||
const solar = `${this.month}.${this.day}`;
|
||||
if (this.gregorianFestival.hasOwnProperty(solar)) {
|
||||
this.festival = this.gregorianFestival[solar];
|
||||
}
|
||||
},
|
||||
|
||||
getWeek() {
|
||||
const { year, month, day } = this;
|
||||
const weeks = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
const weekIndex = new Date(year, month - 1, day).getDay();
|
||||
this.week = weeks[weekIndex];
|
||||
},
|
||||
backClick() {
|
||||
router.back();
|
||||
},
|
||||
|
||||
goBack(eve) {
|
||||
if (eve.direction === "right") {
|
||||
router.back();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.detail-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 240px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
margin: 0px 20px 0px 20px;
|
||||
background-color: grey;
|
||||
}
|
||||
</style>
|
||||
@ -190,7 +190,7 @@ export default {
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
height: 90px;
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -199,7 +199,7 @@ export default {
|
||||
|
||||
.year-month {
|
||||
width: 240px;
|
||||
height: 60px;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -220,8 +220,8 @@ export default {
|
||||
}
|
||||
|
||||
.week-text {
|
||||
width: 64px;
|
||||
font-size: 40px;
|
||||
width: 50px;
|
||||
font-size: 35px;
|
||||
font-weight: 700;
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
@ -242,24 +242,26 @@ export default {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
flex-direction: column;
|
||||
align-items: center; /* 使整个列表内容居中对齐 */
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 80px; /* 增加每一行的高度 */
|
||||
margin-bottom: 10px; /* 增加行与行之间的间距 */
|
||||
margin-bottom: 0px; /* 增加行与行之间的间距 */
|
||||
justify-content: center; /* 使每一行居中对齐 */
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 64px;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.cell-text-workday {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 700;
|
||||
font-size: 40px; /* 调整为你需要的大小 */
|
||||
font-size: 35px; /* 调整为你需要的大小 */
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: transparent;
|
||||
@ -269,7 +271,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 700;
|
||||
font-size: 40px; /* 调整为你需要的大小 */
|
||||
font-size: 35px; /* 调整为你需要的大小 */
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: transparent;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user