Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

src/views/email-alerts/size1920/index.vue

@@ -7,7 +7,7 @@ const form = ref({
   email: "",
   company: "",
   phone: "",
-  alertType: "all"
+alertType: "all"
 });
 const submitted = ref(false);
 

src/views/email-alerts/size375/index.vue

@@ -1,22 +1,75 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { ref } from 'vue';
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 
+const form = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  company: '',
+  phone: '',
+  alertType: 'all',
+});
+const submitted = ref(false);
+
+function handleSubmit(e) {
+  e.preventDefault();
+  submitted.value = true;
+}
 </script>
 
 <template>
-  <header className="header">
+  <main class="min-h-screen flex flex-col items-center justify-center bg-white relative px-4 py-8">
-  375
+    <!-- Card -->
-  </header>
+    <div class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
-  <main ref="main">
+      <template v-if="!submitted">
-
+        <h2 class="text-xl font-bold text-#8A5AFB mb-2 text-center tracking-wide">E-Mail Alerts</h2>
+        <p class="text-xs text-gray-500 mb-4 text-center">* Required Fields</p>
+        <form class="flex flex-col gap-3" @submit="handleSubmit">
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm">* First Name</label>
+            <input v-model="form.firstName" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Last Name</label>
+            <input v-model="form.lastName" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Email</label>
+            <input v-model="form.email" type="email" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Company</label>
+            <input v-model="form.company" type="text" required class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm">Phone</label>
+            <input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+          </div>
+          <button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2">
+            Submit
+          </button>
+        </form>
+      </template>
+      <template v-else>
+        <div class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in">
+          <span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
+          <h2 class="text-lg font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
+          <div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
+          <div class="w-full bg-white/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm">
+            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+            <div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
+            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
   </main>
-  <footer>
-
-  </footer>
 </template>
 
 <style scoped lang="scss">
-
+/* Keep mobile background simple */
 </style>
 

src/views/index/size375/index.vue

@@ -11,19 +11,17 @@ import customFooter from '@/components/customFooter/index.vue'
   375
   </header> -->
   <!-- <main ref="main"></main> -->
-
+  <div class="flex flex-col h-screen">
     <customHeader />
-  <div style="margin: 80px 0; position: relative; min-height: 100vh;">
+    <div class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1" style="margin: 80px 0;">
-    <div class="background-image"></div>
     <router-view />
   </div>
   <customFooter />
+</div>
+ 
 </template>
 
 <style scoped lang="scss">
-main {
-  padding: var(--header-height, 80px) 0 0;
-}
 .background-image {
   position: absolute;
   top: 0;

src/views/stock-quote/size375/index.vue

@@ -1,22 +1,54 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { useStockQuote } from '@/store/stock-quote/index.js';
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+const { getStockQuate, stockQuote } = useStockQuote();
-
+getStockQuate();
 </script>
 
 <template>
-  <header className="header">
+  <main class="h-60vh flex flex-col items-center justify-center px-2">
-  375
+    <!-- 价格卡片 -->
-  </header>
+    <section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow-lg mb-6">
-  <main ref="main">
+      <div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">$1.98</div>
-
+      <div class="mt-4 text-base text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
+    </section>
+    <!-- 信息卡片列表 -->
+    <section class="w-full max-w-90vw grid grid-cols-2 gap-3">
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Open</div>
+        <div class="text-xl font-bold">{{ stockQuote.Open }}</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Change</div>
+        <div class="text-xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Day's Range</div>
+        <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">52-Week Range</div>
+        <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Volume</div>
+        <div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Market Cap</div>
+        <div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
+      </div>
+    </section>
   </main>
-  <footer>
-
-  </footer>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
-
+.glass-card {
+  backdrop-filter: blur(12px);
+  background: rgba(255,255,255,0.7);
+  border: 1px solid rgba(255,255,255,0.3);
+  box-shadow: 0 4px 16px 0 rgba(31,38,135,0.10);
+}
+.info-card {
+  @apply glass-card p-3 rounded-lg flex flex-col items-start gap-1;
+}
 </style>
-