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