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