86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script setup>
|
|
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>
|
|
<div class="flex-center h-70vh px-4 py-8 animate-bg-move">
|
|
<n-card
|
|
class="w-full max-w-[900px] glass-card animate-bounce-in shadow-xl border-none"
|
|
:content-style="{ padding: '32px 24px' }"
|
|
:header-style="{ background: 'transparent' }"
|
|
>
|
|
<div class="flex flex-col gap-8">
|
|
<!-- 投资类型 -->
|
|
<div>
|
|
<div class="text-lg font-bold mb-3">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-lg font-bold mb-3">Amount to Calculate</div>
|
|
<n-input
|
|
v-model:value="amount"
|
|
type="number"
|
|
class="mb-3"
|
|
size="large"
|
|
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-lg font-bold mb-3">Investment Date</div>
|
|
<n-date-picker
|
|
v-model:value="investmentDate"
|
|
type="date"
|
|
class="w-full"
|
|
size="large"
|
|
placeholder="Select date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-8">
|
|
<n-button
|
|
type="primary"
|
|
size="large"
|
|
class="px-8 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>
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
box-shadow: 0 6px 24px 0 rgba(255, 123, 172, 0.25);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
}
|
|
</style>
|