<script setup lang="ts"> import { reactive } from 'vue'; const dateMsg = reactive({ date: '2023-03-20', week: '周一', day: '20', detail: [ ['癸卯(兔)年', '二月廿九'], ['乙卯(兔)月', '丁丑(牛)日'], ['本年第12周', '第79天'], ], zodiac: '兔', constellation: '双鱼座', suitable: [ '祭祀', '订盟', '纳采', '修造', '动土', '祈福', '塑绘', '斋醮', '沐浴', '拆卸', '起基', '入宅', '安香', '造庙', '移柩', '谢土', '除服', '成服', '入学', '习艺', '出行', '竖柱', '上梁', '掘井', '求嗣', '解除', '伐木', ], taboo: ['作灶', '安葬', '开市', '盖屋'], moon: '晓月', phenology: '鹰化为鸠', good_direction: '正南', sun_direction: '西北', cloudy_direction: '正西', happy_direction: '东南', wealth_direction: '西南', }); </script> <template> <div class="box"> <div> {{ dateMsg.date }} {{ dateMsg.week }} </div> <div class="day-box">{{ dateMsg.day }}</div> <div class="detail-box"> <div class="align-right">{{ dateMsg.detail[0][0] }}</div> <div>{{ dateMsg.detail[0][1] }}</div> <div class="align-right">{{ dateMsg.detail[1][0] }}</div> <div>{{ dateMsg.detail[1][1] }}</div> <div class="align-right">{{ dateMsg.detail[2][0] }}</div> <div>{{ dateMsg.detail[2][1] }}</div> </div> <div class="line"></div> <div class="middle-item"> <div class="legend" style="background: #ffc300">生肖</div> <div class="text-grey-6">{{ dateMsg.zodiac }}</div> </div> <div class="line"></div> <div class="middle-item"> <div class="legend" style="background: #02c9c9">星座</div> <div class="text-grey-6">{{ dateMsg.constellation }}</div> </div> <div class="line"></div> <div class="middle-item"> <div class="legend" style="background: #bccf3d">宜</div> <div class="text-grey-6">{{ dateMsg.suitable.join(',') }}</div> </div> <div class="line"></div> <div class="middle-item"> <div class="legend" style="background: #eb5651">忌</div> <div class="text-grey-6">{{ dateMsg.taboo.join(',') }}</div> </div> <div class="line"></div> <div class="row full-width"> <div class="row col-6"> <div class="legend" style="background: #c5bd99">月相</div> <div class="text-grey-6">{{ dateMsg.moon }}</div> </div> <div class="row col-6"> <div class="legend" style="background: #c5bd99">物候</div> <div class="text-grey-6">{{ dateMsg.phenology }}</div> </div> </div> <div class="line"></div> <div class="full-width"> <div class="text-grey-6">喜神方位:{{ dateMsg.good_direction }}</div> <div class="text-grey-6">阳贵神方位:{{ dateMsg.sun_direction }}</div> <div class="text-grey-6">阴贵方位:{{ dateMsg.cloudy_direction }}</div> <div class="text-grey-6">福神方位:{{ dateMsg.happy_direction }}</div> <div class="text-grey-6">财神方位:{{ dateMsg.wealth_direction }}</div> </div> </div> </template> <style lang="scss" scoped> .box { height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 14px; } .align-right { text-align: right; } .line { width: 100%; height: 1px; background-color: rgba(180, 180, 180, 0.3); } .legend { color: #fff; padding: 0 5px; border-radius: 4px; margin-right: 10px; font-size: 13px; flex: 0 0 auto; align-self: flex-start; } .day-box { width: 80px; height: 80px; margin: 8px 0; color: #fff; background-color: #e8a0b8; border-radius: 10px; font-size: 50px; text-align: center; line-height: 90px; position: relative; &::before { position: absolute; content: ''; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; top: 8px; left: 8px; } &::after { position: absolute; content: ''; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; top: 8px; right: 8px; } } .detail-box { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; } .middle-item { width: 100%; display: flex; } </style>