fix page style
This commit is contained in:
yuanshan
parent
fd40913fa5
commit
65c5d29ff3
12
src/App.vue
12
src/App.vue
@ -1,10 +1,10 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from "vue";
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NConfigProvider, NDropdown } from 'naive-ui'
|
||||
const { locale } = useI18n()
|
||||
const primaryColor = ref('#8B59F7')
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NConfigProvider, NDropdown } from "naive-ui";
|
||||
const { locale } = useI18n();
|
||||
const primaryColor = ref("#ff7bac");
|
||||
const themeOverrides = ref({
|
||||
common: {
|
||||
primaryColorPressed: primaryColor,
|
||||
@ -15,7 +15,7 @@ const themeOverrides = ref({
|
||||
primaryColor: primaryColor,
|
||||
primaryColorHover: primaryColor,
|
||||
},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="100" height="100" :src="FiEELogo" preview-disabled />
|
||||
<NImage width="140" height="140" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NConfigProvider :theme-overrides="themeOverrides">
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="90" height="90" :src="FiEELogo" preview-disabled />
|
||||
<NImage width="140" height="140" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NConfigProvider :theme-overrides="themeOverrides">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage
|
||||
style="width: 120px; height: 30px; max-width: 100%"
|
||||
style="width: 100px; max-width: 100%"
|
||||
:src="FiEELogo"
|
||||
preview-disabled
|
||||
/>
|
||||
@ -28,15 +28,17 @@
|
||||
</NLayoutHeader>
|
||||
<transition name="fade-slide">
|
||||
<div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
|
||||
<NMenu
|
||||
mode="vertical"
|
||||
:options="menuOptions"
|
||||
:inverted="isScrolled"
|
||||
class="mobile-menu"
|
||||
accordion
|
||||
v-model:value="selectedKey"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
<NConfigProvider :theme-overrides="themeOverrides">
|
||||
<NMenu
|
||||
mode="vertical"
|
||||
:options="menuOptions"
|
||||
:inverted="isScrolled"
|
||||
class="mobile-menu"
|
||||
accordion
|
||||
v-model:value="selectedKey"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</NConfigProvider>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -44,12 +46,21 @@
|
||||
<script setup>
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon, NConfigProvider } from "naive-ui";
|
||||
import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
|
||||
const themeOverrides = {
|
||||
Menu: {
|
||||
itemTextColorHover: "#ff7bac",
|
||||
itemTextColorActive: "#ff7bac",
|
||||
itemTextColorActiveHover: "#ff7bac",
|
||||
itemColorHover: "#fff8fb",
|
||||
itemColorActive: "#fff8fb",
|
||||
itemColorActiveHover: "#fff8fb",
|
||||
},
|
||||
};
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
@ -190,15 +201,37 @@ const handleToHome = () => {
|
||||
top: 320px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: rgba(220, 207, 248, 0.95);
|
||||
background: #fddfea;
|
||||
z-index: 1100;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||
padding: 40px 0 80px 0;
|
||||
max-height: 1500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 设置CSS变量，只影响当前组件的菜单
|
||||
// --n-item-text-color-child-active: #ff7bac;
|
||||
|
||||
:deep(.n-menu-item) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// // 强制覆盖子菜单激活状态的文字颜色
|
||||
// :deep(
|
||||
// .n-menu
|
||||
// .n-menu-item-content.n-menu-item-content--child-active
|
||||
// .n-menu-item-content-header
|
||||
// ) {
|
||||
// color: #ff7bac !important;
|
||||
// }
|
||||
|
||||
// // 强制覆盖所有子菜单相关的激活状态
|
||||
// :deep(.n-menu-item-content--child-active) {
|
||||
// color: #ff7bac !important;
|
||||
|
||||
// .n-menu-item-content-header {
|
||||
// color: #ff7bac !important;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
|
||||
@ -239,7 +239,7 @@ const solutions = computed(() => [
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
|
||||
@ -239,7 +239,7 @@ const solutions = computed(() => [
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
|
||||
@ -169,7 +169,7 @@ const solutions = computed(() => [
|
||||
background: #fff8fb;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
||||
box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: cardEnter 0.6s ease forwards;
|
||||
@ -191,7 +191,7 @@ const solutions = computed(() => [
|
||||
|
||||
.solution-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
|
||||
box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -221,7 +221,7 @@ const solutions = computed(() => [
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
}
|
||||
|
||||
.content-point:last-child {
|
||||
|
||||
@ -170,7 +170,7 @@ const solutions = computed(() => [
|
||||
background: #fff8fb;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
||||
box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: cardEnter 0.6s ease forwards;
|
||||
@ -192,7 +192,7 @@ const solutions = computed(() => [
|
||||
|
||||
.solution-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
|
||||
box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -222,7 +222,7 @@ const solutions = computed(() => [
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
}
|
||||
|
||||
.content-point:last-child {
|
||||
|
||||
@ -179,7 +179,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
--primary-dark: #6a11cb;
|
||||
--primary-transparent: rgba(137, 91, 255, 0.1);
|
||||
--primary-transparent: rgba(255, 123, 172, 0.1);
|
||||
}
|
||||
|
||||
.committees-page {
|
||||
@ -223,7 +223,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
|
||||
box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
|
||||
.table-header,
|
||||
@ -317,7 +317,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
.table-row:hover {
|
||||
background: #fdfcff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
|
||||
@ -157,7 +157,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
--primary: #895bff;
|
||||
--primary-light: #a07cff;
|
||||
--primary-dark: #6a11cb;
|
||||
--primary-transparent: rgba(137, 91, 255, 0.1);
|
||||
--primary-transparent: rgba(255, 123, 172, 0.1);
|
||||
}
|
||||
|
||||
.committees-page {
|
||||
@ -220,7 +220,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
|
||||
box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
|
||||
.table-header,
|
||||
@ -314,7 +314,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
.table-row:hover {
|
||||
background: #fdfcff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
|
||||
@ -238,7 +238,7 @@ const getInitials = (name) => {
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
|
||||
box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
|
||||
overflow: hidden;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
@ -316,13 +316,13 @@ const getInitials = (name) => {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: rgba(137, 91, 255, 0.08);
|
||||
background: rgba(255, 123, 172, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.role-badge.chair {
|
||||
background-color: #e6f2ff;
|
||||
color: #00baff;
|
||||
background-color: #fcecf2;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.committee-name {
|
||||
|
||||
@ -162,8 +162,8 @@ const getInitials = (name) => {
|
||||
}
|
||||
|
||||
.role-badge.chair {
|
||||
background-color: #e6f2ff;
|
||||
color: #00baff;
|
||||
background-color: #fcecf2;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.role-badge.member {
|
||||
@ -243,7 +243,7 @@ const getInitials = (name) => {
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
|
||||
box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
|
||||
overflow: hidden;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
@ -321,7 +321,7 @@ const getInitials = (name) => {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: rgba(137, 91, 255, 0.08);
|
||||
background: rgba(255, 123, 172, 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
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 investmentType = ref("amount");
|
||||
const amount = ref(10000);
|
||||
const dividendType = ref("notReinvested");
|
||||
const investmentDate = ref(null);
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
const handleSubmit = () => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-center min-h-[70vh] animate-bg-move">
|
||||
<n-card
|
||||
class="w-[700px] glass-card animate-bounce-in shadow-xl border-none"
|
||||
:content-style="{padding: '32px 32px'}"
|
||||
:header-style="{background: 'transparent'}"
|
||||
:content-style="{ padding: '32px 32px' }"
|
||||
:header-style="{ background: 'transparent' }"
|
||||
>
|
||||
<div class="flex justify-between gap-6">
|
||||
<!-- 投资类型 -->
|
||||
@ -30,7 +36,13 @@ const handleSubmit = () => {
|
||||
<!-- 金额与分红 -->
|
||||
<div class="flex-1">
|
||||
<div class="text-lg font-bold mb-3">Amount to Calculate</div>
|
||||
<n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
|
||||
<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>
|
||||
@ -39,11 +51,22 @@ const handleSubmit = () => {
|
||||
<!-- 投资日期 -->
|
||||
<div class="flex-1">
|
||||
<div class="text-lg font-bold mb-3">Investment Date</div>
|
||||
<n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
|
||||
<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-8">
|
||||
<n-button type="primary" size="medium" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
|
||||
<n-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
Submit
|
||||
</n-button>
|
||||
</div>
|
||||
@ -53,11 +76,10 @@ const handleSubmit = () => {
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
|
||||
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);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,23 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
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 investmentType = ref("amount");
|
||||
const amount = ref(10000);
|
||||
const dividendType = ref("notReinvested");
|
||||
const investmentDate = ref(null);
|
||||
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
const handleSubmit = () => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-center min-h-[80vh] animate-bg-move">
|
||||
<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'}"
|
||||
:content-style="{ padding: '48px 56px' }"
|
||||
:header-style="{ background: 'transparent' }"
|
||||
>
|
||||
<div class="flex justify-between gap-10">
|
||||
<!-- 投资类型 -->
|
||||
@ -31,7 +36,13 @@ const handleSubmit = () => {
|
||||
<!-- 金额与分红 -->
|
||||
<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-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>
|
||||
@ -40,11 +51,22 @@ const handleSubmit = () => {
|
||||
<!-- 投资日期 -->
|
||||
<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" />
|
||||
<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">
|
||||
<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>
|
||||
@ -54,10 +76,10 @@ const handleSubmit = () => {
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.37);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 32px;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
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 investmentType = ref("amount");
|
||||
const amount = ref(10000);
|
||||
const dividendType = ref("notReinvested");
|
||||
const investmentDate = ref(null);
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
const handleSubmit = () => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-center h-60vh px-2 py-4 animate-bg-move">
|
||||
<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'}"
|
||||
:content-style="{ padding: '20px 10px' }"
|
||||
:header-style="{ background: 'transparent' }"
|
||||
>
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- 投资类型 -->
|
||||
@ -30,7 +36,13 @@ const handleSubmit = () => {
|
||||
<!-- 金额与分红 -->
|
||||
<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-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>
|
||||
@ -39,11 +51,22 @@ const handleSubmit = () => {
|
||||
<!-- 投资日期 -->
|
||||
<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" />
|
||||
<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">
|
||||
<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>
|
||||
@ -53,11 +76,10 @@ const handleSubmit = () => {
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.18);
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 4px 16px 0 rgba(255, 123, 172, 0.18);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,22 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
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 investmentType = ref("amount");
|
||||
const amount = ref(10000);
|
||||
const dividendType = ref("notReinvested");
|
||||
const investmentDate = ref(null);
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
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'}"
|
||||
:content-style="{ padding: '32px 24px' }"
|
||||
:header-style="{ background: 'transparent' }"
|
||||
>
|
||||
<div class="flex flex-col gap-8">
|
||||
<!-- 投资类型 -->
|
||||
@ -30,7 +36,13 @@ const handleSubmit = () => {
|
||||
<!-- 金额与分红 -->
|
||||
<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-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>
|
||||
@ -39,11 +51,22 @@ const handleSubmit = () => {
|
||||
<!-- 投资日期 -->
|
||||
<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" />
|
||||
<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">
|
||||
<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>
|
||||
@ -53,11 +76,10 @@ const handleSubmit = () => {
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
|
||||
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);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -74,5 +74,9 @@ const handleSearch = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -80,5 +80,9 @@ const handleSearch = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -400,7 +400,8 @@ const downloadPdf = async (pdfResource, filename = "") => {
|
||||
|
||||
.search-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f0f0;
|
||||
color: #fff;
|
||||
background-color: #ff7bac;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -400,7 +400,8 @@ const downloadPdf = async (pdfResource, filename = "") => {
|
||||
|
||||
.search-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f0f0;
|
||||
color: #fff;
|
||||
background-color: #ff7bac;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -434,7 +434,7 @@ const downloadPdf = (url) => {
|
||||
.search-button {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #2979ff;
|
||||
background: #ff7bac;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@ -444,7 +444,7 @@ const downloadPdf = (url) => {
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #1e6de8;
|
||||
background: #ff7bac;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
|
||||
@ -434,7 +434,7 @@ const downloadPdf = (url) => {
|
||||
.search-button {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #2979ff;
|
||||
background: #ff7bac;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@ -444,7 +444,7 @@ const downloadPdf = (url) => {
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #1e6de8;
|
||||
background: #ff7bac;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
|
||||
@ -574,4 +574,7 @@ const handleViewDocument = (val, type) => {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -575,4 +575,7 @@ const handleViewDocument = (val, type) => {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -575,4 +575,7 @@ const handleViewDocument = (val, type) => {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -577,4 +577,7 @@ const handleViewDocument = (val, type) => {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
:deep(.n-base-loading__icon) {
|
||||
color: #ff7bac;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -134,7 +134,7 @@ const router = useRouter();
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(137, 91, 255, 0.5);
|
||||
text-decoration-color: rgba(255, 123, 172, 0.5);
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -135,7 +135,7 @@ const router = useRouter();
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(137, 91, 255, 0.5);
|
||||
text-decoration-color: rgba(255, 123, 172, 0.5);
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -135,7 +135,7 @@ const router = useRouter();
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(137, 91, 255, 0.5);
|
||||
text-decoration-color: rgba(255, 123, 172, 0.5);
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -134,7 +134,7 @@ const router = useRouter();
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(137, 91, 255, 0.5);
|
||||
text-decoration-color: rgba(255, 123, 172, 0.5);
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -236,7 +236,7 @@ const handleViewDocument = (item) => {
|
||||
|
||||
.governance-card:hover .governance-icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
|
||||
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
||||
}
|
||||
|
||||
/* 卡片背景渐变效果 */
|
||||
@ -249,7 +249,7 @@ const handleViewDocument = (item) => {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(137, 91, 255, 0.1) 0%,
|
||||
rgba(255, 123, 172, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
opacity: 0;
|
||||
|
||||
@ -236,7 +236,7 @@ const handleViewDocument = (item) => {
|
||||
|
||||
.governance-card:hover .governance-icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
|
||||
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
||||
}
|
||||
|
||||
/* 卡片背景渐变效果 */
|
||||
@ -249,7 +249,7 @@ const handleViewDocument = (item) => {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(137, 91, 255, 0.1) 0%,
|
||||
rgba(255, 123, 172, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
opacity: 0;
|
||||
|
||||
@ -229,10 +229,9 @@ const handleViewDocument = (item) => {
|
||||
.governance-icon {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.governance-card:hover .governance-icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
|
||||
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
||||
}
|
||||
|
||||
/* 卡片背景渐变效果 */
|
||||
@ -245,7 +244,7 @@ const handleViewDocument = (item) => {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(137, 91, 255, 0.1) 0%,
|
||||
rgba(255, 123, 172, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
opacity: 0;
|
||||
|
||||
@ -232,7 +232,7 @@ const handleViewDocument = (item) => {
|
||||
|
||||
.governance-card:hover .governance-icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
|
||||
box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
|
||||
}
|
||||
|
||||
/* 卡片背景渐变效果 */
|
||||
@ -245,7 +245,7 @@ const handleViewDocument = (item) => {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(137, 91, 255, 0.1) 0%,
|
||||
rgba(255, 123, 172, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
opacity: 0;
|
||||
|
||||
@ -201,7 +201,7 @@ const getInitials = (name) => {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: #ffbfd7;
|
||||
border-radius: 50%;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
@ -217,7 +217,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #ffbfd7;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -201,7 +201,7 @@ const getInitials = (name) => {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: #ffbfd7;
|
||||
border-radius: 50%;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
@ -217,7 +217,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #ffbfd7;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -190,7 +190,7 @@ const getInitials = (name) => {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: #ffbfd7;
|
||||
border-radius: 50%;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
@ -206,7 +206,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #ffbfd7;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -196,7 +196,7 @@ const getInitials = (name) => {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: #ffbfd7;
|
||||
border-radius: 50%;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
@ -212,7 +212,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #ffbfd7;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -155,9 +155,16 @@
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value positive">{{
|
||||
stockQuote.change || "--"
|
||||
}}</span>
|
||||
<span
|
||||
style="font-size: 18px"
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
@ -622,7 +629,7 @@ const handleLink = (item) => {
|
||||
|
||||
.event-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
|
||||
}
|
||||
|
||||
/* 新闻模块样式 */
|
||||
|
||||
@ -151,9 +151,16 @@
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
<span class="data-value positive">{{
|
||||
stockQuote.change || "--"
|
||||
}}</span>
|
||||
|
||||
<span
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
@ -613,7 +620,7 @@ const handleLink = (item) => {
|
||||
|
||||
.event-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
|
||||
}
|
||||
|
||||
/* 新闻模块样式 */
|
||||
|
||||
@ -155,9 +155,17 @@
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value positive">{{
|
||||
stockQuote.change || "--"
|
||||
}}</span>
|
||||
|
||||
<span
|
||||
style="font-size: 18px"
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
@ -620,7 +628,7 @@ const handleLink = (item) => {
|
||||
|
||||
.event-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
|
||||
}
|
||||
|
||||
/* 新闻模块样式 */
|
||||
|
||||
@ -155,9 +155,17 @@
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value positive">{{
|
||||
stockQuote.change || "--"
|
||||
}}</span>
|
||||
|
||||
<span
|
||||
style="font-size: 18px"
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
@ -623,7 +631,7 @@ const handleLink = (item) => {
|
||||
|
||||
.event-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
|
||||
}
|
||||
|
||||
/* 新闻模块样式 */
|
||||
|
||||
@ -320,5 +320,9 @@ const doLoadMore = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -320,5 +320,9 @@ const doLoadMore = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -353,5 +353,9 @@ const doLoadMore = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -320,5 +320,9 @@ const doLoadMore = () => {
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,7 +71,7 @@ getStockQuate();
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
|
||||
}
|
||||
.info-card {
|
||||
@apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
||||
|
||||
@ -72,7 +72,7 @@ getStockQuate();
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
|
||||
}
|
||||
.info-card {
|
||||
@apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
||||
|
||||
@ -67,12 +67,12 @@ getStockQuate();
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
||||
box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.08);
|
||||
box-shadow: 0 2px 8px 0 rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 4px 0 rgba(31, 38, 135, 0.06);
|
||||
box-shadow: 0 1px 4px 0 rgba(255, 123, 172, 0.06);
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -72,12 +72,12 @@ getStockQuate();
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
||||
box-shadow: 0 3px 12px 0 rgba(31, 38, 135, 0.08);
|
||||
box-shadow: 0 3px 12px 0 rgba(255, 123, 172, 0.08);
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 6px 0 rgba(31, 38, 135, 0.06);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 123, 172, 0.06);
|
||||
padding: 16px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user