From 5ab32ac10ab096bfce3b0f04d90097055f0ca67c Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 23 May 2025 13:45:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=8A=95=E8=B5=84=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E5=99=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=8A=95=E8=B5=84=E7=B1=BB=E5=9E=8B=E3=80=81=E9=87=91=E9=A2=9D?=
 =?UTF-8?q?=E3=80=81=E5=88=86=E7=BA=A2=E7=B1=BB=E5=9E=8B=E5=92=8C=E6=8A=95?=
 =?UTF-8?q?=E8=B5=84=E6=97=A5=E6=9C=9F=E7=9A=84=E8=BE=93=E5=85=A5=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/calculator/size375/index.vue | 67 +++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/views/calculator/size375/index.vue b/src/views/calculator/size375/index.vue
index f3e7467..c3cb577 100644
--- a/src/views/calculator/size375/index.vue
+++ b/src/views/calculator/size375/index.vue
@@ -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>