diff --git a/pages/fortune/record.vue b/pages/fortune/record.vue index 82a6d0f..80bd4e1 100644 --- a/pages/fortune/record.vue +++ b/pages/fortune/record.vue @@ -50,8 +50,8 @@ mode="aspectFill" class="item-image" /> - - {{ item.tag || "大吉" }} + + {{ getFortuneName(item.fortuneLevel) }} @@ -105,18 +105,30 @@ const progressWidth = computed(() => { return `${percentage}%`; }); -const getTagClass = (tag) => { +const getFortuneName = (level) => { const map = { - 大吉: "tag-gold", - 安康: "tag-green", - 顺遂: "tag-red", - 上吉: "tag-orange", + 1: "吉签", + 2: "中吉签", + 3: "上吉签", + 4: "上上签", + 5: "大吉签", }; - return map[tag] || "tag-gold"; + return map[level] || "吉签"; +}; + +const getTagClass = (level) => { + const map = { + 1: "tag-blue", + 2: "tag-green", + 3: "tag-orange", + 4: "tag-red", + 5: "tag-gold", + }; + return map[level] || "tag-blue"; }; const getThumbUrl = (url) => { - return `${url}?imageView2/1/w/340/h/600/q/80`; + return `${url}?imageView2/1/w/360/h/480/q/80`; }; const loadData = async () => { @@ -306,17 +318,22 @@ onLoad(() => { color: #fff; backdrop-filter: blur(4px); } -.tag-gold { - background: rgba(212, 175, 55, 0.9); +.tag-blue { + background: rgba(0, 122, 255, 0.9); } .tag-green { - background: rgba(46, 139, 87, 0.9); -} -.tag-red { - background: rgba(178, 34, 34, 0.9); + background: rgba(52, 199, 89, 0.9); } .tag-orange { - background: rgba(255, 140, 0, 0.9); + background: rgba(255, 149, 0, 0.9); +} +.tag-red { + background: rgba(255, 59, 48, 0.9); +} +.tag-gold { + background: rgba(212, 175, 55, 0.9); + color: #fff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .item-info {