Compare commits
No commits in common. "60d228c3d81b8d7b1060d6e45b1489aeebfa47be" and "52d908381360de6a6168bd763fd9a2dbe26ac7b3" have entirely different histories.
60d228c3d8
...
52d9083813
@ -74,7 +74,7 @@ function copyEmail() {
|
||||
gap: 4px;
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
background-image: url("@/assets/image/1440/contacts-bg.png");
|
||||
background-image: url("@/assets/image/1920/contacts-bg.png");
|
||||
background-size: 64% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -1,148 +1,67 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText("fiee@dlkadvisory.com");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact-container">
|
||||
<!-- Title Section -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="contact-title">Investor Contacts</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Section -->
|
||||
<div class="contact-card">
|
||||
<div class="logo-text">FiEE Inc.</div>
|
||||
<div class="relation-text">Investor Relations</div>
|
||||
<div class="email-section">
|
||||
<main
|
||||
ref="main"
|
||||
class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px"
|
||||
>
|
||||
<div class="w-full flex flex-col items-center gap-5 px-4">
|
||||
<h1
|
||||
class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0"
|
||||
>
|
||||
Investor Contacts
|
||||
</h1>
|
||||
<div
|
||||
class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
|
||||
>
|
||||
FiEE Inc.
|
||||
</div>
|
||||
<div class="text-lg text-#ff7bac animate-fade-in-down animate-delay-400">
|
||||
Investor Relations
|
||||
</div>
|
||||
<div
|
||||
class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
|
||||
>
|
||||
<span>Email:</span>
|
||||
<span class="email-address" @click="copyEmail"
|
||||
<span
|
||||
class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
|
||||
@click="copyEmail"
|
||||
>fiee@dlkadvisory.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-container {
|
||||
width: 650 * 2.5px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43 * 2.5px;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32 * 2.5px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 511 * 2.5px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
background-image: url("@/assets/image/768/contacts-bg.png");
|
||||
background-size: 64% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 3 * 2.5px 14 * 2.5px 0px rgba(0, 0, 0, 0.16);
|
||||
animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 110 * 2.5px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.relation-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 24 * 2.5px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.email-section {
|
||||
font-size: 18 * 2.5px;
|
||||
color: #4a5568;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
animation-delay: 0.6s;
|
||||
margin-top: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.email-address {
|
||||
color: #ff7bac;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20 * 2.5px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.animate-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.animate-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.animate-delay-600 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -245,7 +245,7 @@ async function handleSubmit(e) {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/image/1440/email-alerts-submit.png");
|
||||
background-image: url("@/assets/image/1920/email-alerts-submit.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: 100%;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import size375 from "@/views/events-calendar/size375/index.vue";
|
||||
import size768 from "@/views/events-calendar/size768/index.vue";
|
||||
import size768 from "@/views/events-calendar/size375/index.vue";
|
||||
import size1440 from "@/views/events-calendar/size1440/index.vue";
|
||||
import size1920 from "@/views/events-calendar/size1920/index.vue";
|
||||
import { computed } from "vue";
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
<!-- 背景图片区域 -->
|
||||
<div class="background-image-container">
|
||||
<img
|
||||
src="@/assets/image/1440/events-calendar-bg.png"
|
||||
src="@/assets/image/1920/events-calendar-bg.png"
|
||||
alt="Events Calendar Background"
|
||||
class="background-image"
|
||||
/>
|
||||
|
||||
@ -1,218 +0,0 @@
|
||||
<template>
|
||||
<div class="events-calendar-page">
|
||||
<main class="page-container">
|
||||
<div class="events-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="events-title">
|
||||
{{ t("events_calendar.title") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<div class="date-picker-wrapper">
|
||||
<n-date-picker
|
||||
v-model:value="state.selectedDateValue"
|
||||
type="date"
|
||||
class="search-date-picker"
|
||||
placeholder="Select Date"
|
||||
>
|
||||
<template #prefix>
|
||||
<svg
|
||||
class="calendar-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<g clip-path="url(#clip0_134_3094)">
|
||||
<path
|
||||
d="M17.5 3.33398H2.5C2.08333 3.33398 1.66667 3.66732 1.66667 4.08398V17.5007C1.66667 17.9173 2.08333 18.2507 2.5 18.2507H17.5C17.9167 18.2507 18.3333 17.9173 18.3333 17.5007V4.08398C18.3333 3.66732 17.9167 3.33398 17.5 3.33398Z"
|
||||
stroke="#78777B"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M13.3333 1.66602V5.00018"
|
||||
stroke="#78777B"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M6.66669 1.66602V5.00018"
|
||||
stroke="#78777B"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M1.66669 8.33398H18.3334"
|
||||
stroke="#78777B"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_134_3094">
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
fill="white"
|
||||
transform="translate(0 0.000976562)"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
</n-date-picker>
|
||||
</div>
|
||||
<button @click="handleSearch" class="search-button">
|
||||
{{ t("events_calendar.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 背景图片区域 -->
|
||||
<div class="background-image-container">
|
||||
<img
|
||||
src="@/assets/image/768/events-calendar-bg.png"
|
||||
alt="Events Calendar Background"
|
||||
class="background-image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { NDatePicker, NButton } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const state = reactive({
|
||||
selectedDateValue: null, //选中值
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
// console.log('搜索:', state.selectedDateValue)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.events-container {
|
||||
width: 650 * 2.5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43 * 2.5px;
|
||||
}
|
||||
|
||||
.events-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32 * 2.5px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 20 * 2.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.date-picker-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-input) {
|
||||
height: 34 * 2.5px;
|
||||
border-radius: 3 * 2.5px;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
&:hover {
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
:deep(.n-input--focus) {
|
||||
border-color: #ff7bac;
|
||||
box-shadow: 0 0 0 2px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
margin-left: 12 * 2.5px;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
height: 34 * 2.5px;
|
||||
padding: 7 * 2.5px 12 * 2.5px;
|
||||
color: #fff;
|
||||
background-color: #ff7bac;
|
||||
border: none;
|
||||
border-radius: 3 * 2.5px;
|
||||
cursor: pointer;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.03em;
|
||||
min-width: 160 * 2.5px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e66f9a;
|
||||
}
|
||||
}
|
||||
|
||||
.background-image-container {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 511 * 2.5px;
|
||||
margin-top: 20 * 2.5px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16 * 2.5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
width: 300 * 2.5px;
|
||||
height: 170 * 2.5px;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 83/47;
|
||||
}
|
||||
</style>
|
||||
@ -1,206 +1,79 @@
|
||||
<template>
|
||||
<div class="press-releases-page">
|
||||
<main class="mx-auto">
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title">
|
||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
||||
<main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
:options="state.selectOptions"
|
||||
v-model:value="state.selectedValue"
|
||||
class="search-select"
|
||||
/>
|
||||
<input
|
||||
v-model="state.inputValue"
|
||||
type="text"
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<button @click="handleSearch" class="search-button">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="reports-list">
|
||||
<div
|
||||
v-for="(item, idx) in state.filterNewsData"
|
||||
:key="idx"
|
||||
class="news-item table-row"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="file-content">
|
||||
<div class="file-info">
|
||||
<div class="vertical-line"></div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
:options="state.selectOptions"
|
||||
v-model:value="state.selectedValue"
|
||||
class="search-select"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="state.inputValue"
|
||||
type="text"
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<n-button @click="handleSearch" class="search-button w-[120px]">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
||||
<div class="news-item mt-[10px]">
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
class="news-item-title text-[#000] cursor-pointer"
|
||||
:ref="(el) => setTitleRef(el, idx)"
|
||||
class="news-item-content"
|
||||
style="
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<svg
|
||||
class="arrow-icon"
|
||||
width="7"
|
||||
height="14"
|
||||
viewBox="0 0 7 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
<path
|
||||
d="M1 1L6 7L1 13"
|
||||
stroke="#FF7BAC"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<n-tooltip trigger="hover" :disabled="true" width="trigger">
|
||||
<template #trigger>
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, idx)"
|
||||
class="news-item-content file-description"
|
||||
style="
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div class="download-section">
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container" v-if="state.total > 0">
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-info" v-if="state.total > 0">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</n-infinite-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import {
|
||||
reactive,
|
||||
onMounted,
|
||||
watch,
|
||||
nextTick,
|
||||
ref,
|
||||
computed,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
|
||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import axios from "axios";
|
||||
|
||||
@ -221,16 +94,32 @@ const state = reactive({
|
||||
}),
|
||||
], //下拉选项
|
||||
inputValue: "", //输入值
|
||||
newsData: [
|
||||
{
|
||||
date: "June 3, 2025",
|
||||
title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
|
||||
content:
|
||||
"Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
|
||||
},
|
||||
{
|
||||
date: "June 2, 2025",
|
||||
title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
|
||||
content:
|
||||
"Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:FIEE) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
|
||||
},
|
||||
{
|
||||
date: "May 30, 2025",
|
||||
title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
|
||||
content:
|
||||
"Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
|
||||
},
|
||||
],
|
||||
filterNewsData: [],
|
||||
loading: false, //是否正在加载数据
|
||||
hasMore: true, //是否还有更多数据
|
||||
currentPage: 1, //当前页码
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
gotoPage: 1,
|
||||
});
|
||||
|
||||
const showPageSizeMenu = ref(false);
|
||||
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
@ -250,18 +139,14 @@ const checkAllTitleOverflow = () => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// state.filterNewsData = state.newsData;
|
||||
getPressReleasesDisplay();
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => state.filterNewsData,
|
||||
() => {
|
||||
@ -274,68 +159,93 @@ watch(
|
||||
|
||||
// 获取新闻列表
|
||||
const getPressReleasesDisplay = () => {
|
||||
state.loading = true;
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
query: state.inputValue,
|
||||
page: state.currentPage,
|
||||
pageSize: state.pageSize,
|
||||
pageSize: 10,
|
||||
timeStart: state.selectedValue
|
||||
? state.selectedValue === "all_years"
|
||||
? null
|
||||
: new Date(state.selectedValue).getTime()
|
||||
: null,
|
||||
};
|
||||
axios
|
||||
.post(url, params)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
if (state.currentPage === 1) {
|
||||
state.filterNewsData = res.data.data?.data || [];
|
||||
state.total = res.data.data?.total || 0;
|
||||
} else {
|
||||
state.filterNewsData = [
|
||||
...state.filterNewsData,
|
||||
...(res.data.data?.data || []),
|
||||
];
|
||||
}
|
||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
||||
state.hasMore = true;
|
||||
} else {
|
||||
state.hasMore = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑
|
||||
let filteredData = [...state.newsData];
|
||||
|
||||
// 按年份筛选
|
||||
if (state.selectedValue !== "all_years") {
|
||||
filteredData = filteredData.filter((item) => {
|
||||
// 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
|
||||
const dateMatch = item.date.match(/\b\d{4}\b/);
|
||||
if (dateMatch) {
|
||||
const year = dateMatch[0];
|
||||
return year === state.selectedValue;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// 按输入内容进行模糊查询（title 和 content）
|
||||
if (state.inputValue && state.inputValue.trim() !== "") {
|
||||
const searchText = state.inputValue.toLowerCase().trim();
|
||||
filteredData = filteredData.filter((item) => {
|
||||
const titleMatch = item.title.toLowerCase().includes(searchText);
|
||||
const contentMatch = item.content.toLowerCase().includes(searchText);
|
||||
return titleMatch || contentMatch;
|
||||
});
|
||||
}
|
||||
|
||||
state.filterNewsData = filteredData;
|
||||
};
|
||||
|
||||
// 添加 watcher 来实现自动筛选
|
||||
watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.pageSize,
|
||||
() => {
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.currentPage,
|
||||
(newPage) => {
|
||||
state.gotoPage = newPage;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
// console.log("筛选结果:", state.filterNewsData);
|
||||
};
|
||||
|
||||
const handleNewClick = (item) => {
|
||||
@ -347,461 +257,72 @@ const handleNewClick = (item) => {
|
||||
});
|
||||
};
|
||||
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.total / state.pageSize) || 1;
|
||||
});
|
||||
|
||||
const displayRange = computed(() => {
|
||||
if (state.total === 0) return { start: 0, end: 0 };
|
||||
const start = (state.currentPage - 1) * state.pageSize + 1;
|
||||
const end = Math.min(state.currentPage * state.pageSize, state.total);
|
||||
return { start, end };
|
||||
});
|
||||
|
||||
const goToPage = (page) => {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
const goToPrevPage = () => {
|
||||
if (state.currentPage > 1) {
|
||||
state.currentPage--;
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (state.currentPage < totalPages.value) {
|
||||
state.currentPage++;
|
||||
}
|
||||
};
|
||||
|
||||
const changePageSize = (size) => {
|
||||
state.pageSize = size;
|
||||
};
|
||||
|
||||
const handleGoto = () => {
|
||||
const page = parseInt(state.gotoPage);
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
const togglePageSizeMenu = () => {
|
||||
showPageSizeMenu.value = !showPageSizeMenu.value;
|
||||
};
|
||||
|
||||
const getVisiblePages = () => {
|
||||
const current = state.currentPage;
|
||||
const total = totalPages.value;
|
||||
const pages = [];
|
||||
|
||||
if (total <= 7) {
|
||||
for (let i = 1; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
pages.push(1);
|
||||
|
||||
if (current <= 4) {
|
||||
for (let i = 2; i <= 5; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
} else if (current >= total - 3) {
|
||||
pages.push("...");
|
||||
for (let i = total - 4; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
pages.push("...");
|
||||
for (let i = current - 1; i <= current + 1; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
// 点击外部关闭页面大小选择菜单
|
||||
const handleClickOutside = (event) => {
|
||||
if (!event.target.closest || !event.target.closest(".page-size-selector")) {
|
||||
showPageSizeMenu.value = false;
|
||||
//加载更多数据
|
||||
const doLoadMore = () => {
|
||||
if (!state.hasMore || state.loading) {
|
||||
return;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.press-releases-page {
|
||||
width: 650 * 2.5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43 * 2.5px;
|
||||
}
|
||||
.title {
|
||||
font-size: 32 * 2.5px;
|
||||
color: #000;
|
||||
font-size: 63px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 20 * 2.5px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
width: 134 * 2.5px;
|
||||
height: 34 * 2.5px;
|
||||
width: 360px;
|
||||
:deep(.n-base-selection) {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 292 * 2.5px;
|
||||
height: 34 * 2.5px;
|
||||
padding: 7 * 2.5px 12 * 2.5px;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
color: #455363;
|
||||
|
||||
&::placeholder {
|
||||
color: #b6b6b6;
|
||||
}
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
:deep(.n-input) {
|
||||
.n-input__input {
|
||||
padding: 4 * 2.5px 0;
|
||||
// border: 1*2.5px solid #ccc;
|
||||
border-radius: 4 * 2.5px;
|
||||
padding: 4px 0;
|
||||
// border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-select__input {
|
||||
padding: 8 * 2.5px 12 * 2.5px;
|
||||
border: 1 * 2.5px solid #ccc;
|
||||
border-radius: 4 * 2.5px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-button) {
|
||||
padding: 20 * 2.5px 16 * 2.5px;
|
||||
border-radius: 4 * 2.5px;
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
height: 34 * 2.5px;
|
||||
padding: 7 * 2.5px 12 * 2.5px;
|
||||
min-width: 160 * 2.5px;
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 3 * 2.5px;
|
||||
cursor: pointer;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
&:hover {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4 * 2.5px;
|
||||
background: #fff;
|
||||
width: 650 * 2.5px;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border-radius: 8 * 2.5px;
|
||||
|
||||
// &:last-child {
|
||||
// .separator-line {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.table-row .content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
&:hover {
|
||||
background: #fff8fb;
|
||||
}
|
||||
}
|
||||
|
||||
.file-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding-right: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16 * 2.5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.news-item-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
width: 1 * 2.5px;
|
||||
height: 20 * 2.5px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-description {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
color: #455363;
|
||||
margin: 0;
|
||||
padding-left: 17 * 2.5px;
|
||||
margin-top: 8 * 2.5px;
|
||||
}
|
||||
|
||||
.news-item-date {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 4 * 2.5px 16 * 2.5px;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
width: 100%;
|
||||
height: 1 * 2.5px;
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
#e6eaee 0 * 2.5px,
|
||||
#e6eaee 2 * 2.5px,
|
||||
transparent 2 * 2.5px,
|
||||
transparent 4 * 2.5px
|
||||
);
|
||||
margin-top: 16 * 2.5px;
|
||||
}
|
||||
|
||||
// 分页器样式
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20 * 2.5px 0;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.4375em;
|
||||
color: #455363;
|
||||
text-align: right;
|
||||
margin-bottom: 30 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
}
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-selector {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18 * 2.5px;
|
||||
padding: 4 * 2.5px 12 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
margin-bottom: 2 * 2.5px;
|
||||
}
|
||||
|
||||
.page-size-option {
|
||||
padding: 8 * 2.5px 12 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff0f5;
|
||||
color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.goto-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
width: 60 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
padding: 4 * 2.5px 12 * 2.5px;
|
||||
border: 1 * 2.5px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user