Skip to content

A
ai-astro
Commit ae1af405 authored by liubinyu's avatar liubinyu
Browse files
Options

预测页

parent 01f9081a
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 20 deletions
src/components/GHeader.vue
View file @ ae1af405
<script setup>
import { reactive, ref, computed } from 'vue'
import { reactive, ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
......@@ -25,7 +25,9 @@ function navClick(nav) {
}
}
}
navClick(navList.find(i => i.route === router.currentRoute.value.name))
watch(() => router.currentRoute.value.name, (val) => {
navClick(navList.find(i => i.route === val))
}, { immediate: true })
const isLight = computed(() => locale.value !== 'En')
......@@ -39,7 +41,8 @@ const isLight = computed(() => locale.value !== 'En')
<img v-if="isLight" class="logo" src="/img/logo-color.png" alt="">
<img v-else class="logo" src="/img/logo.png" alt="">
<div class="nav-list">
<div v-for="nav in navList" class="btn g-flex-center" :class="{ active: active === nav.route }" @click="navClick(nav, 1)">
<div v-for="nav in navList" class="btn g-flex-center" :class="{ active: active === nav.route }"
@click="navClick(nav, 1)">
{{ $t(nav.name) }}
<Transition>
<div v-show="active === nav.route" class="line"></div>
......
src/i18n/cn.json
View file @ ae1af405
......@@ -37,7 +37,7 @@
"App Store": "App Store",
"Android App Store": "Android App Store",
"Come and check out": "快来查看今日份的星座指南",
"Today's fortune keywords": "今日运势关键词",
"fortune keywords": "今日运势关键词",
"Lucky index": "幸运指数",
"Lucky numbers": "幸运数字",
"Lucky color": "幸运色",
......
src/i18n/en.json
View file @ ae1af405
......@@ -3,7 +3,7 @@
"Home": "Home",
"ConstellationForecast": "Constellation Forecast",
"AnalysisConstellationPersonality": "Analysis of Constellation Personality",
":": ":",
":": ": ",
"Your Personal Ai Astrologist": "Your Personal Ai Astrologist",
"Let AI decode": "Let AI decode your zodiac secrets and guide you on a journey of precise divination",
"Unlock Your Day": "Unlock Your Day : Horoscope",
......@@ -37,7 +37,7 @@
"App Store": "App Store",
"Android App Store": "Android App Store",
"Come and check out": "Come and check out today's constellation guide",
"Today's fortune keywords": "Today's fortune keywords",
"fortune keywords": "Today's fortune keywords",
"Lucky index": "Lucky index",
"Lucky numbers": "Lucky numbers",
"Lucky color": "Lucky color",
......
src/router/index.js
View file @ ae1af405
......@@ -34,6 +34,9 @@ const routes = [
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}
})
// const whiteList = ['Login'];
......
src/style.css
View file @ ae1af405
......@@ -2,6 +2,7 @@
color: #FFFFFF;
background-color: #0F0C29;
--theme-color: #FF8800;
--el-color-primary: #FF8800;
--layout-header-height: 80px;
}
......@@ -20,10 +21,6 @@ body {
align-items: center;
}
.el-backtop {
color: var(--theme-color);
}
@font-face {
font-family: Roboto-Regular;
src: url('@/assets/font/Roboto/Roboto-Regular-14.ttf');
......
src/views/forecast.vue
View file @ ae1af405
<script setup>
import { inject, ref } from 'vue';
const _const = inject('_const')
import * as api from '@/api'
import { dateFormat } from '@/utils'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const active = ref()
const loading = ref(false)
async function getInfo() {
loading.value = true
const res = await api.list({ fortuneDate: dateFormat(Date.now()), pageSize: 20 })
loading.value = false
res?.rows?.forEach(i => {
const item = _const.ConstellationList.find(j => j.zodiacSignId === i?.zodiacSignId)
if (item) {
item.info = i || {}
}
})
}
getInfo()
function changeConstellation(item) {
active.value = item
if (!item.info?.zodiacSignId) {
getInfo()
}
}
import { useRoute } from 'vue-router'
const route = useRoute()
let current
if (route.query.key) {
current = _const.ConstellationList.find(i => i.key === route.query.key)
}
changeConstellation(current || _const.ConstellationList[0])
function getWordList(word) {
return word?.split(',').filter(i => !!i) || []
}
</script>
<template>
<div class="page">
Forecast
<div class="title1">{{ $t('Daily') }}{{ $t('Horoscope') }}</div>
<div class="title2">{{ $t('Come and check out') }}</div>
<div class="constellation-list">
<div v-for="item in _const.ConstellationList" class="constellation" :class="{ active: active.key === item.key }"
@click="changeConstellation(item)">
<div class="img-wrap g-flex-center">
<img :src="`/img/xz/${item.key}.png`" alt="">
</div>
{{ $t(item.key) }}
</div>
</div>
<div class="constellation-detail">
<img class="border-tl" src="/img/border-tl.png" alt="">
<img class="border-tr" src="/img/border-tr.png" alt="">
<img class="border-bl" src="/img/border-bl.png" alt="">
<img class="border-br" src="/img/border-br.png" alt="">
<div class="name">
<img :src="`/img/xz/${active.key}1.png`" alt="">
{{ $t(active.key) }} ({{ `${active.date[0]}~${active.date[1]}` }})
</div>
<div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
<div class="desc">{{ active.info[`title${locale}`] }}</div>
<div v-if="active.info.zodiacSignId" class="tag-list g-flex-center">
<div class="tag">
<span class="label">{{ $t('fortune keywords') }}:</span>
<div class="word-list">
<div v-for="word in getWordList(active.info[`keyWord${locale}`])" class="word">{{ word }}</div>
</div>
</div>
<div class="tag">
<span class="label">{{ $t('Lucky index') }}:</span>
<div class="star-list g-flex-center">
<img v-for="i in Number(active.info.luckyStar)" class="star" src="/img/star.png" alt="">
<template v-if="Number(active.info.luckyStar) <= 5">
<img v-for="i in 5 - Number(active.info.luckyStar)" class="star" src="/img/star1.png" alt="">
</template>
</div>
</div>
</div>
<div class="info">{{ active.info[`fortune${locale}`] }}</div>
</div>
</div>
</div>
</template>
<style scoped>
.page {
background-image: url(/img/bg/1.png);
background-size: 100% auto;
padding-top: calc(var(--layout-header-height) + 5.5vw);
padding-bottom: 5vw;
}
.title1 {
font-family: Roboto-Bold;
font-weight: bold;
font-size: 2.604vw;
text-shadow: 0 0.15625vw 0.3125vw rgba(0, 0, 0, 0.66);
text-align: center;
}
.title2 {
font-family: Roboto-Regular;
font-weight: 400;
font-size: 24px;
text-shadow: 0 0.15625vw 0.3125vw rgba(0, 0, 0, 0.66);
text-align: center;
margin-top: 1.2vw;
margin-bottom: 2.7vw;
}
.constellation-list {
width: 83.33vw;
margin: 2.604vw auto;
padding: 2.604vw 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.constellation-list .constellation {
flex: 1;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.9375vw;
text-align: center;
opacity: 0.8;
cursor: pointer;
}
.constellation-list .constellation:hover,
.constellation-list .constellation.active {
opacity: 1;
}
.constellation-list .constellation .img-wrap {
width: 3.125vw;
height: 3.125vw;
background: #27265D;
border-radius: 50%;
margin: 0 auto 1vw;
}
.constellation.active .img-wrap {
background: #4746B7;
border: 2px solid #D2C8FF;
}
.constellation-list .constellation .img-wrap img {
width: 1.771vw;
height: 1.771vw;
}
.constellation-detail {
width: 83.33vw;
margin: 0 auto;
background: rgba(22, 21, 72, 0.8);
padding: 3vw 2.604vw;
position: relative;
}
.constellation-detail .border-tl {
width: 6.25vw;
height: 6.25vw;
position: absolute;
top: 0;
left: -2.08vw;
}
.constellation-detail .border-tr {
width: 12.7604vw;
height: 11.5625vw;
position: absolute;
top: 0.52vw;
right: 0.52vw;
}
.constellation-detail .border-bl {
width: 12.7604vw;
height: 11.5625vw;
position: absolute;
bottom: 0.52vw;
left: 0.52vw;
}
.constellation-detail .border-br {
width: 3.6458vw;
height: 3.6458vw;
position: absolute;
bottom: -0.68vw;
right: -0.94vw;
}
.constellation-detail .name {
display: flex;
align-items: center;
font-family: Roboto-Bold;
font-weight: bold;
font-size: 1.667vw;
}
.constellation-detail .name img {
width: 2.396vw;
height: 2.396vw;
margin-right: 1vw;
}
.constellation-detail .desc {
font-family: Roboto-Bold;
font-weight: bold;
font-size: 1.771vw;
margin: 1.2vw 0;
}
.constellation-detail .tag-list {
flex-wrap: wrap;
margin: 2vw 0;
}
.constellation-detail .tag-list .tag {
display: flex;
margin-right: 3vw;
}
.constellation-detail .tag-list .tag:last-of-type {
margin-right: 0;
}
.constellation-detail .tag-list .tag .label {
flex-shrink: 0;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.9375vw;
color: #ccc;
line-height: 1.7vw;
margin-right: 0.8vw;
}
.constellation-detail .word-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.625vw;
}
.constellation-detail .word-list .word {
padding: 0.3125vw 0.833vw;
background: rgba(116, 100, 255, 0.13);
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.9375vw;
color: #CC9AFF;
}
.constellation-detail .info {
font-family: Roboto-Regular;
font-weight: 400;
font-size: 1.042vw;
line-height: 2.5vw;
color: #eee;
text-align: left;
white-space: pre-wrap;
}
.constellation-detail .star-list {
gap: 0.4vw;
}
.constellation-detail .star-list .star {
width: 1.5625vw;
}
</style>
src/views/home.vue
View file @ ae1af405
......@@ -9,18 +9,24 @@ import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const active = ref()
const loading = ref(false)
async function getInfo() {
loading.value = true
const res = await api.list({ fortuneDate: dateFormat(Date.now()), pageSize: 20 })
loading.value = false
res?.rows?.forEach(i => {
const item = _const.ConstellationList.find(j => j.zodiacSignId === i.zodiacSignId)
const item = _const.ConstellationList.find(j => j.zodiacSignId === i?.zodiacSignId)
if (item) {
item.info = i
item.info = i || {}
}
})
}
getInfo()
function changeConstellation(item) {
active.value = item
if (!item.info?.zodiacSignId) {
getInfo()
}
}
changeConstellation(_const.ConstellationList[0])
function goDetail() {
......@@ -66,8 +72,10 @@ function goDetail() {
<img :src="`/img/xz/${active.key}1.png`" alt="">
{{ $t(active.key) }} ({{ `${active.date[0]}~${active.date[1]}` }})
</div>
<div class="desc">{{ active.info[`title${locale}`] }}</div>
<div class="info">{{ active.info[`fortune${locale}`] }}</div>
<div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
<div class="desc">{{ active.info[`title${locale}`] }}</div>
<div class="info">{{ active.info[`fortune${locale}`] }}</div>
</div>
<div class="more g-flex-center" @click="goDetail">
{{ $t('more') }}
<img src="/img/arrow.png" alt="">
......@@ -117,9 +125,9 @@ function goDetail() {
</div>
</div>
<div class="position-center company-info g-flex-center">
<div class="txt">{{ $t('Company Name') }}{{ $t(':') }} {{ $t('Company Value') }}</div>
<div class="txt">{{ $t('Address') }}{{ $t(':') }} {{ $t('Address Value') }}</div>
<div class="txt">{{ $t('Phone') }}{{ $t(':') }} {{ $t('Phone Value') }}</div>
<div class="txt">{{ $t('Company Name') }}{{ $t(':') }}{{ $t('Company Value') }}</div>
<div class="txt">{{ $t('Address') }}{{ $t(':') }}{{ $t('Address Value') }}</div>
<div class="txt">{{ $t('Phone') }}{{ $t(':') }}{{ $t('Phone Value') }}</div>
</div>
</div>
<el-backtop :right="100" :bottom="100" :visibility-height="1000" />
......@@ -205,7 +213,7 @@ function goDetail() {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.9375vw;
opacity: 0.7;
opacity: 0.8;
cursor: pointer;
}
......@@ -269,6 +277,7 @@ function goDetail() {
font-size: 1.354vw;
line-height: 2.083vw;
text-align: left;
white-space: pre-wrap;
height: 10.415vw;
overflow: hidden;
/* text-overflow: -o-ellipsis-lastline;
......@@ -375,7 +384,7 @@ function goDetail() {
width: 15.625vw;
height: 3.54vw;
background: rgba(255, 255, 255, 0.11);
border-radius: 8px 8px 8px 8px;
border-radius: 0.417vw;
border: 1px solid #FFFFFF;
margin-right: 4vw;
font-family: Roboto-Bold;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment