scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: scout666:b4e8ed0736b3d8cc88b1e63bde29e24abdee8de5
Branches Tags
scout666:main
scout666:LiWenHao
scout666:wyfMain-dev
scout666:zhangyuanshan-5.26
scout666:zhangyuanshan
scout666:xingyy
scout666:qb
scout666:1.0.0
...
compare: scout666:9cc5eaf0214d3fa89379eea5cd6ae6c972e54a3a
Branches Tags
scout666:main
scout666:LiWenHao
scout666:wyfMain-dev
scout666:zhangyuanshan-5.26
scout666:zhangyuanshan
scout666:xingyy
scout666:qb
scout666:1.0.0

6 Commits
b4e8ed0736 ... 9cc5eaf021

Author SHA1 Message Date
Phoenix
9cc5eaf021 移除移动端头部和底部内容，调整主容器的内边距以优化布局和样式。 2025-05-23 13:56:39 +08:00
Phoenix
a0806cf79e 优化股票报价组件的样式，调整了价格卡片和信息卡片的布局、字体大小及间距，改善了视觉效果和响应式设计。 2025-05-23 13:50:06 +08:00
Phoenix
660f6f16cf 调整了视图组件的样式，将主容器的最小高度从屏幕高度修改为60vh，以优化布局和响应式设计。 2025-05-23 13:46:42 +08:00
Phoenix
5ab32ac10a 重构投资计算器组件，增加投资类型、金额、分红类型和投资日期的输入字段，优化样式和布局。 2025-05-23 13:45:39 +08:00
Phoenix
bbdb49a655 Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website 2025-05-23 13:41:30 +08:00
Phoenix
4943345467 更新了多个视图组件，调整了表单字段和样式，增加了股票报价信息展示，优化了响应式布局。 2025-05-23 13:41:29 +08:00
6 changed files with 180 additions and 53 deletions
Show Stats Expand all files Collapse all files

67
src/views/calculator/size375/index.vue
View File

@ -1,22 +1,63 @@
<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { ref } from 'vue'
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
const investmentType = ref('amount')
const amount = ref(10000)
const dividendType = ref('notReinvested')
const investmentDate = ref(null)
const handleSubmit = () => {
}
</script>
<template>
<header className="header">
375
</header>
<main ref="main">
</main>
<footer>
</footer>
<div class="flex-center h-60vh px-2 py-4 animate-bg-move">
<n-card
class="w-full max-w-90vw glass-card animate-bounce-in shadow-lg border-none"
:content-style="{padding: '20px 10px'}"
:header-style="{background: 'transparent'}"
>
<div class="flex flex-col gap-6">
<!-- 投资类型 -->
<div>
<div class="text-base font-bold mb-2">Investment Type</div>
<n-radio-group v-model:value="investmentType" name="investmentType">
<n-radio value="amount">Amount invested (in dollars)</n-radio>
<n-radio value="shares">Number of shares purchased</n-radio>
</n-radio-group>
</div>
<!-- 金额与分红 -->
<div>
<div class="text-base font-bold mb-2">Amount to Calculate</div>
<n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
<n-radio-group v-model:value="dividendType" name="dividendType">
<n-radio value="reinvested">Dividends reinvested</n-radio>
<n-radio value="notReinvested">Dividends not reinvested</n-radio>
</n-radio-group>
</div>
<!-- 投资日期 -->
<div>
<div class="text-base font-bold mb-2">Investment Date</div>
<n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
</div>
</div>
<div class="flex justify-end mt-6">
<n-button type="primary" size="medium" class="px-6 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
Submit
</n-button>
</div>
</n-card>
</div>
</template>
<style scoped lang="scss">
<style scoped>
.glass-card {
background: rgba(255,255,255,0.18);
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.18);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.18);
}
</style>

10
src/views/contacts/size375/index.vue
View File

@ -6,10 +6,8 @@ function copyEmail() {
</script>
<template>
<header class="header-mobile">
<!-- 可根据需要添加移动端头部内容 -->
</header>
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 bg-[url('@/assets/image/bg-mobile.png')]">
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px bg-[url('@/assets/image/bg-mobile.png')]">
<div class="w-full flex flex-col items-center gap-4 px-2">
<h1 class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
<div class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
@ -20,9 +18,7 @@ function copyEmail() {
</div>
</div>
</main>
<footer class="footer-mobile">
<!-- 可根据需要添加移动端底部内容 -->
</footer>
</template>
<style scoped lang="scss">

2
src/views/email-alerts/size1920/index.vue
View File

@ -7,7 +7,7 @@ const form = ref({
email: "",
company: "",
phone: "",
alertType: "all"
alertType: "all"
});
const submitted = ref(false);

75
src/views/email-alerts/size375/index.vue
View File

@ -1,22 +1,75 @@
<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { ref } from 'vue';
const form = ref({
firstName: '',
lastName: '',
email: '',
company: '',
phone: '',
alertType: 'all',
});
const submitted = ref(false);
function handleSubmit(e) {
e.preventDefault();
submitted.value = true;
}
</script>
<template>
<header className="header">
375
</header>
<main ref="main">
<main class="min-h-60vh flex flex-col items-center justify-center relative px-4 py-8">
<!-- Card -->
<div class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
<template v-if="!submitted">
<h2 class="text-xl font-bold text-#8A5AFB mb-2 text-center tracking-wide">E-Mail Alerts</h2>
<p class="text-xs text-gray-500 mb-4 text-center">* Required Fields</p>
<form class="flex flex-col gap-3" @submit="handleSubmit">
<div>
<label class="block text-gray-700 font-semibold mb-1 text-sm">* First Name</label>
<input v-model="form.firstName" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
</div>
<div>
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Last Name</label>
<input v-model="form.lastName" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
</div>
<div>
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Email</label>
<input v-model="form.email" type="email" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
</div>
<div>
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Company</label>
<input v-model="form.company" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
</div>
<div>
<label class="block text-gray-700 font-semibold mb-1 text-sm">Phone</label>
<input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
</div>
<button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2">
Submit
</button>
</form>
</template>
<template v-else>
<div class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in">
<span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
<h2 class="text-lg font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
<div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
<div class="w-full bg-white/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm">
<div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
<div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
<div><span class="font-semibold">Email：</span>{{ form.email }}</div>
<div><span class="font-semibold">Company：</span>{{ form.company }}</div>
<div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
</div>
</div>
</template>
</div>
</main>
<footer>
</footer>
</template>
<style scoped lang="scss">
/* Keep mobile background simple */
</style>

12
src/views/index/size375/index.vue
View File

@ -11,19 +11,17 @@ import customFooter from '@/components/customFooter/index.vue'
375
</header> -->
<!-- <main ref="main"></main> -->
<customHeader />
<div style="margin: 80px 0; position: relative; min-height: 100vh;">
<div class="background-image"></div>
<div class="flex flex-col h-screen">
<customHeader />
<div class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1" style="margin: 80px 0;">
<router-view />
</div>
<customFooter />
</div>
</template>
<style scoped lang="scss">
main {
padding: var(--header-height, 80px) 0 0;
}
.background-image {
position: absolute;
top: 0;

67
src/views/stock-quote/size375/index.vue
View File

@ -1,22 +1,61 @@
<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { useStockQuote } from '@/store/stock-quote/index.js';
const { getStockQuate, stockQuote } = useStockQuote();
getStockQuate();
</script>
<template>
<header className="header">
375
</header>
<main ref="main">
<main class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px">
<!-- 价格卡片 -->
<section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
<div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">$1.98</div>
<div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
</section>
<!-- 信息卡片列表 -->
<section class="w-full max-w-90vw grid grid-cols-2 gap-2">
<div class="info-card">
<div class="text-xs text-gray-400">Open</div>
<div class="text-lg font-bold">{{ stockQuote.Open }}</div>
</div>
<div class="info-card">
<div class="text-xs text-gray-400">Change</div>
<div class="text-lg font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
</div>
<div class="info-card">
<div class="text-xs text-gray-400">Day's Range</div>
<div class="text-lg font-bold">{{ stockQuote.DaysRange }}</div>
</div>
<div class="info-card">
<div class="text-xs text-gray-400">52-Week Range</div>
<div class="text-lg font-bold">{{ stockQuote.Week52Range }}</div>
</div>
<div class="info-card">
<div class="text-xs text-gray-400">Volume</div>
<div class="text-lg font-bold">{{ stockQuote.Volume }}</div>
</div>
<div class="info-card">
<div class="text-xs text-gray-400">Market Cap</div>
<div class="text-lg font-bold">{{ stockQuote.MarketCap }}</div>
</div>
</section>
</main>
<footer>
</footer>
</template>
<style scoped lang="scss">
<style scoped>
.glass-card {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.92);
border: 1px solid rgba(200,200,255,0.18);
box-shadow: 0 2px 8px 0 rgba(31,38,135,0.08);
}
.info-card {
background: rgba(255,255,255,0.95);
border-radius: 16px;
box-shadow: 0 1px 4px 0 rgba(31,38,135,0.06);
padding: 12px 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
</style>