diff --git a/src/router/index.js b/src/router/index.js
index d2b86eb..ef365a3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,11 @@ const routes = [
         name: 'contacts',
         component: () => import('@/views/contacts/index.vue'),
       },
+      {
+        path: '/calculator',
+        name: 'calculator',
+        component: () => import('@/views/calculator/index.vue'),
+      },
       {
         path: '/home',
         name: 'home',
diff --git a/src/views/calculator/index.vue b/src/views/calculator/index.vue
new file mode 100644
index 0000000..cfc4094
--- /dev/null
+++ b/src/views/calculator/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/calculator/size1440/index.vue b/src/views/calculator/size1440/index.vue
new file mode 100644
index 0000000..427f3d2
--- /dev/null
+++ b/src/views/calculator/size1440/index.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  1440
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+
diff --git a/src/views/calculator/size1920/index.vue b/src/views/calculator/size1920/index.vue
new file mode 100644
index 0000000..cd2c3ea
--- /dev/null
+++ b/src/views/calculator/size1920/index.vue
@@ -0,0 +1,64 @@
+<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 = () => {
+  message.success('已提交！')
+}
+</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>
\ No newline at end of file
diff --git a/src/views/calculator/size375/index.vue b/src/views/calculator/size375/index.vue
new file mode 100644
index 0000000..f3e7467
--- /dev/null
+++ b/src/views/calculator/size375/index.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+
diff --git a/src/views/calculator/size768/index.vue b/src/views/calculator/size768/index.vue
new file mode 100644
index 0000000..e7c4364
--- /dev/null
+++ b/src/views/calculator/size768/index.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  768
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+