Skip to content

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

首页

parent fdd5d261
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 27 deletions
src/components/GHeader.vue
View file @ 0f35f171
......@@ -36,8 +36,7 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
<div class="gc-header">
<img class="logo" src="/img/logo.png" alt="">
<div class="nav-list">
<div v-for="nav in navList" class="btn" :class="{ active: active === nav.route }"
@click="navClick(nav, 1)">
<div v-for="nav in navList" class="btn" :class="{ active: active === nav.route }" @click="navClick(nav, 1)">
{{ $t(nav.name) }}
<Transition>
<div v-show="active === nav.route" class="line"></div>
......@@ -78,11 +77,11 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
margin: 0 5vw;
display: flex;
align-items: center;
gap: 5vw;
}
.nav-list .btn {
padding: 16px 2px;
margin-right: 5vw;
font-family: Roboto-Regular;
font-weight: 400;
font-size: 18px;
......@@ -99,6 +98,10 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
color: var(--theme-color);
}
.nav-list .btn:last-of-type {
margin-right: 0;
}
.nav-list .btn .line {
position: absolute;
bottom: 0;
......
src/i18n/en.json
View file @ 0f35f171
......@@ -27,7 +27,7 @@
"Your Personalized Zodiac Reading": "Your Personalized Zodiac Reading",
"Create an exclusive horoscope": "Create an exclusive horoscope guide for you, embark on your journey to the stars, and make the future within reach!",
"Constellation identity intelligent recognition": "Constellation identity intelligent recognition",
"Automatically locate the user's": "Automatically locate the user's constellation. By calculating the birth date in milliseconds, the user's zodiac sign is automatically matched without the need for manual selection, improving the smoothness of the experience.",
"Automatically locate the": "Automatically locate the user's constellation. By calculating the birth date in milliseconds, the user's zodiac sign is automatically matched without the need for manual selection, improving the smoothness of the experience.",
"Multi dimensional fortune prediction": "Multi dimensional fortune prediction",
"Daily/weekly/monthly": "Daily/weekly/monthly fortune report. Based on astronomical data and user behavior analysis, generate personalized fortune interpretation, covering six dimensions including emotions, wealth, and health.",
"AI exclusive divination": "AI exclusive divination, online answers",
......
src/i18n/zh.json
View file @ 0f35f171
......@@ -27,7 +27,7 @@
"Your Personalized Zodiac Reading": "您专属的星座测运",
"Create an exclusive horoscope": "为您打造专属星座指南，开启您的星际之旅，让未来触手可及！",
"Constellation identity intelligent recognition": "星座身份智能识别‌",
"Automatically locate the user's": "自动定位用户星座‌。通过出生日期毫秒级计算，自动匹配用户星座，无需手动选择，提升体验流畅度。",
"Automatically locate the": "自动定位用户星座‌。通过出生日期毫秒级计算，自动匹配用户星座，无需手动选择，提升体验流畅度。",
"Multi dimensional fortune prediction": "多维度运势预测‌",
"Daily/weekly/monthly": "日/周/月运势报告‌‌。基于天文数据与用户行为分析，生成个性化运势解读，覆盖情感、财富、健康等 6 大维度。",
"AI exclusive divination": "AI专属占卜。在线解答",
......
src/style.css
View file @ 0f35f171
......@@ -7,6 +7,7 @@
* {
box-sizing: border-box;
outline: none;
}
body {
......@@ -19,11 +20,20 @@ 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');
}
@font-face {
font-family: Roboto-Medium;
src: url('@/assets/font/Roboto/Roboto-Medium-12.ttf');
}
@font-face {
font-family: Roboto-Bold;
src: url('@/assets/font/Roboto/Roboto-Bold-3.ttf');
......
src/utils/const.js
View file @ 0f35f171
export default {
ConstellationList: [
{ key: 'Aries' },
{ key: 'Taurus' },
{ key: 'Gemini' },
{ key: 'Cancer' },
{ key: 'Leo' },
{ key: 'Virgo' },
{ key: 'HLibra' },
{ key: 'Scorpio' },
{ key: 'Sagittarius' },
{ key: 'Capricornus' },
{ key: 'Aquarius' },
{ key: 'Pisces' },
{ key: 'Aries', date: ['3.21', '4.19'] },
{ key: 'Taurus', date: ['4.20', '5.20'] },
{ key: 'Gemini', date: ['5.21', '6.21'] },
{ key: 'Cancer', date: ['6.22', '7.22'] },
{ key: 'Leo', date: ['7.23', '8.22'] },
{ key: 'Virgo', date: ['8.23', '9.22'] },
{ key: 'HLibra', date: ['9.23', '10.23'] },
{ key: 'Scorpio', date: ['10.24', '11.22'] },
{ key: 'Sagittarius', date: ['11.23', '12.21'] },
{ key: 'Capricornus', date: ['12.22', '1.19'] },
{ key: 'Aquarius', date: ['1.20', '2.18'] },
{ key: 'Pisces', date: ['2.19', '3.20'] },
]
}
\ No newline at end of file
src/views/home.vue
View file @ 0f35f171
<script setup>
import { inject } from 'vue';
import { inject, ref } from 'vue';
const _const = inject('_const')
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref(_const.ConstellationList[0])
function changeConstellation(item) {
active.value = item
}
function goDetail() {
router.push({ name: 'Forecast', query: { key: active.value.key } })
}
</script>
<template>
......@@ -29,18 +38,89 @@ const _const = inject('_const')
{{ $t('Let the') }}<span style="color: var(--theme-color);">Astro Fly</span>{{ $t('guide your day') }}
</div>
<div class="position-center constellation-list">
<div v-for="item in _const.ConstellationList" class="constellation">
<div v-for="item in _const.ConstellationList" class="constellation g-flex-center"
:class="{ active: active.key === item.key }" @click="changeConstellation(item)">
<img :src="`/img/xz/${item.key}.png`" alt="">
{{ $t(item.key) }}
</div>
</div>
<div class="position-center constellation-detail">
<img class="pic" :src="`/img/xz/${active.key}2.png`" alt="">
<div class="content">
<div class="name">
<img :src="`/img/xz/${active.key}1.png`" alt="">
{{ $t(active.key) }} ({{ `${active.date[0]}~${active.date[1]}` }})
</div>
<div class="desc">
Fluctuating like tides, flowing downstream!
</div>
<div class="info">
Today's Pisces seem to be at the boundary between the deep sea and the starry sky, with exceptionally sharp
intuition and inspiration. Suitable for listening to inner voices and resolving problems with emotions, but
avoid excessive indulgence in fantasies. Emotions and creativity are the shining points of today, seize the
opportunity to express yourself!
</div>
<div class="more g-flex-center" @click="goDetail">
{{ $t('more') }}
<img src="/img/arrow.png" alt="">
</div>
</div>
</div>
<div class="position-center txt1 title5">
<span style="color: var(--theme-color);margin-right: 1.875vw;">Astro Fly</span>
{{ $t('Your Personalized Zodiac Reading') }}
</div>
<div class="position-center txt2 title6">{{ $t('Create an exclusive horoscope') }}</div>
<div class="position-center pic-txt-block block1">
<img src="/img/pic1.png" alt="">
<div class="content">
<div class="txt1">{{ $t('Constellation identity intelligent recognition') }}</div>
<div class="txt2">{{ $t('Automatically locate the') }}</div>
</div>
</div>
<div class="position-center pic-txt-block block2">
<div class="content">
<div class="txt1">{{ $t('Multi dimensional fortune prediction') }}</div>
<div class="txt2">{{ $t('Daily/weekly/monthly') }}</div>
</div>
<img src="/img/pic2.png" alt="">
</div>
<div class="position-center pic-txt-block block3">
<img src="/img/pic3.png" alt="">
<div class="content">
<div class="txt1">{{ $t('AI exclusive divination') }}</div>
<div class="txt2">{{ $t('AI real-time analysis') }}</div>
</div>
</div>
<img class="position-center pic-app" src="/img/pic-app.png" alt="">
<div class="position-center title7 g-flex-center">
{{ $t('Get Application') }}
<span class="txt1">Astro Fly</span>
</div>
<div class="position-center title8">{{ $t('Download the app') }}</div>
<div class="position-center download-list g-flex-center">
<div class="btn g-flex-center">
<img src="/img/store-ios.png" alt="">
{{ $t('App Store') }}
</div>
<div class="btn g-flex-center">
<img src="/img/store-android.png" alt="">
{{ $t('Android App Store') }}
</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>
</div>
<el-backtop :right="100" :bottom="100" :visibility-height="1000" />
</div>
</template>
<style scoped>
.page {
height: 6000px;
height: 310vw;
}
.page .page-bg {
......@@ -54,9 +134,12 @@ const _const = inject('_const')
.page .page-bg img {
width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
.page .main {
height: 100%;
position: relative;
z-index: 1;
}
......@@ -73,29 +156,253 @@ const _const = inject('_const')
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 2.604vw;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.66);
text-shadow: 0 0.15625vw 0.3125vw rgba(0, 0, 0, 0.66);
}
.txt2 {
font-family: Roboto-Regular;
font-weight: 400;
font-size: 1.25vw;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.66);
text-shadow: 0 0.15625vw 0.3125vw rgba(0, 0, 0, 0.66);
line-height: 2.083vw;
}
.main .title1 {
top: 27.5vw;
top: 27.3vw;
}
.main .title2 {
top: 33.073vw;
top: 33vw;
}
.main .title3 {
top: 65.833vw;
top: 65vw;
}
.main .title4 {
top: 71.042vw;
top: 70vw;
}
.main .constellation-list {
top: 75vw;
width: 83.33vw;
padding: 0.833vw 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.constellation-list .constellation {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.9375vw;
opacity: 0.7;
cursor: pointer;
}
.constellation-list .constellation:hover,
.constellation-list .constellation.active {
opacity: 1;
}
.constellation-list .constellation img {
width: 1.5625vw;
height: 1.5625vw;
margin-right: 0.573vw;
}
.main .constellation-detail {
top: 80.5vw;
width: 83.33vw;
height: 30.2083vw;
background: rgba(22, 21, 72, 0.8);
display: flex;
}
.constellation-detail .pic {
width: 30.2083vw;
height: 30.2083vw;
flex-shrink: 0;
}
.constellation-detail .content {
padding: 4.375vw 3.4375vw;
position: relative;
}
.constellation-detail .content .name {
display: flex;
align-items: center;
font-family: Roboto-Bold;
font-weight: bold;
font-size: 2.083vw;
}
.constellation-detail .content .name img {
width: 2.8125vw;
height: 2.8125vw;
margin-right: 1.042vw;
}
.constellation-detail .content .desc {
margin-top: 3.75vw;
margin-bottom: 2.083vw;
font-family: Roboto-Medium;
font-weight: 500;
font-size: 1.6146vw;
text-align: left;
}
.constellation-detail .content .info {
font-family: Roboto-Regular;
font-weight: 400;
font-size: 1.354vw;
line-height: 2.083vw;
text-align: left;
height: 10.415vw;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
}
.constellation-detail .content .more {
position: absolute;
right: 1.5625vw;
bottom: 1.5625vw;
font-family: Roboto-Regular;
font-weight: 400;
font-size: 1.25vw;
opacity: 0.8;
cursor: pointer;
}
.constellation-detail .content .more:hover {
opacity: 1;
}
.constellation-detail .content .more img {
margin-left: 0.833vw;
}
.main .title5 {
top: 129vw;
}
.main .title6 {
top: 133.5vw;
}
.main .pic-txt-block {
width: 83.33vw;
height: 26.04vw;
display: flex;
}
.main .pic-txt-block.block1 {
top: 147vw;
}
.main .pic-txt-block.block2 {
top: 183vw;
}
.main .pic-txt-block.block3 {
top: 219vw;
}
.pic-txt-block img {
width: 26.04vw;
height: 26.04vw;
flex-shrink: 0;
}
.pic-txt-block .content {
padding: 7.6vw 3.125vw 0;
text-align: left;
}
.pic-txt-block .content .txt1 {
font-size: 1.875vw;
margin-bottom: 2.083vw;
}
.main .pic-app {
top: 261vw;
width: 36.51vw;
}
.main .title7 {
top: 290vw;
font-family: Roboto-Bold;
font-weight: bold;
font-size: 2.083vw;
}
.main .title7 .txt1 {
font-size: 3.229vw;
color: var(--theme-color);
margin-left: 2.083vw;
}
.main .title8 {
top: 296vw;
font-family: Roboto-Regular;
font-weight: 400;
font-size: 1.354vw;
}
.main .download-list {
top: 300vw;
}
.main .download-list .btn {
width: 15.625vw;
height: 3.54vw;
background: rgba(255, 255, 255, 0.11);
border-radius: 8px 8px 8px 8px;
border: 1px solid #FFFFFF;
margin-right: 4vw;
font-family: Roboto-Bold;
font-weight: bold;
font-size: 1.146vw;
cursor: pointer;
}
.main .download-list .btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.main .download-list .btn:last-of-type {
margin-right: 0;
}
.main .download-list .btn img {
width: 2.5vw;
height: 2.5vw;
margin-right: 0.8vw;
}
.main .company-info {
bottom: 0;
width: 83.33vw;
height: 3.125vw;
border-top: 1px solid rgba(255, 255, 255, 0.19);
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 0.729vw;
color: #999;
}
.company-info .txt {
margin-right: 3vw;
}
.company-info .txt:last-of-type {
margin-right: 0;
}
</style>
src/views/index.vue
View file @ 0f35f171
......@@ -22,6 +22,6 @@ import GHeader from '@/components/GHeader.vue'
margin: 0 auto;
height: var(--layout-header-height);
background: linear-gradient(180deg, rgba(14, 0, 85, 0.71) 0%, rgba(4, 0, 106, 0) 100%);
z-index: 1;
z-index: 2;
}
</style>
\ No newline at end of file
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