63 lines
2.3 KiB
Vue
63 lines
2.3 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 min-h-[80vh] animate-bg-move">
|
||
|
|
<n-card
|
||
|
|
class="w-[900px] glass-card animate-bounce-in shadow-2xl border-none"
|
||
|
|
:content-style="{padding: '48px 56px'}"
|
||
|
|
:header-style="{background: 'transparent'}"
|
||
|
|
>
|
||
|
|
<div class="flex justify-between gap-10">
|
||
|
|
<!-- 投资类型 -->
|
||
|
|
<div class="flex-1">
|
||
|
|
<div class="text-xl font-bold mb-4">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 class="flex-1">
|
||
|
|
<div class="text-xl font-bold mb-4">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 class="flex-1">
|
||
|
|
<div class="text-xl font-bold mb-4">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-10">
|
||
|
|
<n-button type="primary" size="large" class="px-10 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
|
||
|
|
Submit
|
||
|
|
</n-button>
|
||
|
|
</div>
|
||
|
|
</n-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.glass-card {
|
||
|
|
background: rgba(255,255,255,0.18);
|
||
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
border-radius: 32px;
|
||
|
|
border: 1px solid rgba(255,255,255,0.18);
|
||
|
|
}
|
||
|
|
</style>
|