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

重构投资计算器组件，增加投资类型、金额、分红类型和投资日期的输入字段，优化样式和布局。

Browse Source
This commit is contained in:
Phoenix 2025-05-23 13:45:39 +08:00
parent bbdb49a655
commit 5ab32ac10a
1 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File 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>