diff --git a/src/components/AppHeader/size375/index.vue b/src/components/AppHeader/size375/index.vue index 580dda3..6a53326 100644 --- a/src/components/AppHeader/size375/index.vue +++ b/src/components/AppHeader/size375/index.vue @@ -75,6 +75,18 @@ /> +
+
+ 投资者关系 + +
+
diff --git a/src/views/investor/size375/index.vue b/src/views/investor/size375/index.vue index 5dd77fc..362e7d3 100644 --- a/src/views/investor/size375/index.vue +++ b/src/views/investor/size375/index.vue @@ -2,21 +2,20 @@
- +
-
+
-
{{ $t("companyprofil.slogan.title1") }}
-
{{ $t("companyprofil.slogan.title2") }}
+
投资者关系
- {{ $t("companyprofil.slogan.desc") }} -
-
- -
- -
-
- logo -
-
- -
-
-
-
- {{ $t("companyprofil.intro.label") }} -
-
-
-
{{ $t("companyprofil.intro.title1") }}
-
{{ $t("companyprofil.intro.title2") }}
-
-
-
- {{ $t("companyprofil.intro.desc") }} -
-
- {{ $t("companyprofil.intro.desc") }} -
-
-
- + Minim（纳斯达克股票代码：MINM）财务状况
-
+
-
-
- {{ $t("companyprofil.team.label") }} -
+
+
-
-
{{ $t("companyprofil.team.title1") }}
-
{{ $t("companyprofil.team.title2") }}
-
-
-
- {{ $t("companyprofil.team.desc") }} -
-
- -
- -
- -
- - -
- {{ $t("companyprofil.team.features.global.title") }} -
-
- {{ $t("companyprofil.team.features.global.desc") }} -
-
-
- - -
- {{ $t("companyprofil.team.features.fans.title") }} -
-
- {{ $t("companyprofil.team.features.fans.desc") }} -
-
-
- - -
- {{ $t("companyprofil.team.features.talent.title") }} -
-
- {{ $t("companyprofil.team.features.talent.desc") }} -
-
- -
- -
-
-
-
-
-
-
- {{ $t("companyprofil.achievement.label") }} -
+
+
最新动态
-
{{ $t("companyprofil.achievement.title1") }}
-
{{ $t("companyprofil.achievement.title2") }}
-
-
-
- {{ $t("companyprofil.achievement.desc") }} -
-
-
-
- {{ $t("companyprofil.achievement.certification.title1") }} -
-
- {{ $t("companyprofil.achievement.certification.title2") }} -
-
-
-
- {{ $t("companyprofil.achievement.certification.desc") }} -
-
-
- -
-
-
{{ $t("companyprofil.achievement.platform.title1") }}
-
{{ $t("companyprofil.achievement.platform.title2") }}
-
-
-
-
- {{ $t("companyprofil.achievement.platform.desc") }} -
-
-
-
- -
-
-
-
-
-
-
- {{ $t("companyprofil.news.label") }} -
-
-
-
{{ $t("companyprofil.news.title1") }}
-
{{ $t("companyprofil.news.title2") }}
-
-
-
- {{ $t("companyprofil.news.desc") }} -
-
-
-
-
- -
-
- -
-
-
-
-
+
-
-
-
- {{ - $t( - `companyprofil.news.carousel.item${item.titleNo}.title` - ) - }} -
-
-
- {{ - $t(`companyprofil.news.carousel.item${item.titleNo}.desc`) - }} +
+
{{ item.title }}
+
+ {{ item.date }}
+
+
{{ item.subTitle }}
+
+
+ +
{{ item.link }}
+
+
+
+
+
+
+ +
+
+
+
+
+
+
财务数据
+
+ +
+
+
+
+
+ 收益报告 +
+
+ 财报电话会议 +
+
+ 10-Q/10-K +
+
+ 年度报告 +
+
+ 年度会议 +
+
+ 特别股东大会 +
+
+ 委托书 +
+
+
+
+
{{ state.activeYear }}年
+
 
+
+
+
Q1
+
Q2
+
Q3
+
Q4
+
+
+
Q1
+
Q2
+
Q3
+
Q4
+
+
+
Q1
+
Q2
+
Q3
+
Q4
+
+
+
Q1
+
Q2
+
Q3
+
Q4
+
+
+
{{ state.activeYear }}年
+
+
+
{{ state.activeYear }}年
+
+
+
{{ state.activeYear }}年
+
+
+
+
+ +
+ 投资者沟通指南 + +
+
+
+
+
+
+
+
+
+
行情走势
+
+ +
+ SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。 +
+
+ 通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。 +
+
+
+ 查看所有SEC文件 + +
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+
董事会
+
+
+
+
+ 帕特里克·里瓦德 +
+
+ 董事会董事 +
+
+ 美国财富保护公司合伙人兼首席财务官 +
+
+
+
+ 安德鲁·帕帕尼科劳 +
+
+ 董事会董事 +
+
+ 雷神公司财务经理 +
+
+
+
+
+ +
+
+
+
+
+
+
治理、多样性和委员会章程
+
+
+
+
+ {{ item.title }} + +
@@ -395,7 +313,7 @@ className="flex flex-wrap justify-center" > logo @@ -409,97 +327,333 @@ import { NDivider } from "naive-ui"; import { onUnmounted, ref, onMounted, reactive, watch, nextTick } from "vue"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; -import { useHome } from "@/store/home/index.js"; +import AppHeader from "@/components/AppHeader/index.vue"; import { useTransitionComposable } from "@/composables/transition-composable"; -import { useI18n } from "vue-i18n"; -const { t } = useI18n(); + // 定义组件的自定义事件 defineEmits(["sendCode"]); // 注册 ScrollTrigger 插件 gsap.registerPlugin(ScrollTrigger); +import { useI18n } from "vue-i18n"; +const { t } = useI18n(); const { transitionState } = useTransitionComposable(); const moveRefs = ref( - Array(18) + Array(27) .fill(null) .map(() => ref(null)) ); -const { currentTab } = useHome(); let ctx; -import { useRouter } from "vue-router"; -const router = useRouter(); // 导入图片 -import carouselShow1 from "@/assets/image/companyprofil/375/carouselShow-1.png"; -import carouselShow2 from "@/assets/image/companyprofil/375/carouselShow-2.png"; -import carouselShow3 from "@/assets/image/companyprofil/375/carouselShow-3.png"; -import carouselShow4 from "@/assets/image/companyprofil/375/carouselShow-4.png"; -import carouselShow5 from "@/assets/image/companyprofil/375/carouselShow-5.png"; +import imageshow1 from "@/assets/image/investor/768/imageshow-1.png"; +import imageshow2 from "@/assets/image/investor/768/imageshow-2.png"; +import imageshow3 from "@/assets/image/investor/768/imageshow-3.png"; const state = reactive({ marqueeArr: [ { - titleNo: "1", - imgUrl: carouselShow1, + title: "最新财务", + subTitle: "2022年第四季度和2022年全年收益结果", + date: "2023年3月29日", + link: "收益公布", + imgUrl: imageshow1, + linkUrl: "https://www.minim.com/investor-relations/financials/", }, { - titleNo: "2", - imgUrl: carouselShow2, + title: "最近的事件", + subTitle: "Minim宣布与e2Companies达成合并协议", + date: "2024年3月13日", + link: "合并协议-新闻稿最终稿2024年12月3日", + imgUrl: imageshow2, + linkUrl: "https://www.minim.com/investor-relations/financials/", }, { - titleNo: "3", - imgUrl: carouselShow3, - }, - { - titleNo: "4", - imgUrl: carouselShow4, - }, - { - titleNo: "5", - imgUrl: carouselShow5, + title: "股票报价", + subTitle: "TradingView的MINM报价", + link: "MINM报价", + imgUrl: imageshow3, + linkUrl: "https://www.minim.com/investor-relations/financials/", }, ], + linkArr: [ + { + title: "高级财务人员道德守则", + link: "", + }, + { + title: "冲突矿产声明", + link: "", + }, + { + title: "道德和商业行为准则", + link: "", + }, + { + title: "审计委员会章程", + link: "", + }, + { + title: "举报人政策", + link: "", + }, + { + title: "薪酬委员会章程", + link: "", + }, + { + title: "关联方交易政策", + link: "", + }, + { + title: "提名和治理委员会章程", + link: "", + }, + { + title: "2022年多样性矩阵", + link: "", + }, + { + title: "2023年多样性矩阵", + link: "", + }, + ], + activeYear: 2023, }); + +// 添加年份内容区域的引用 +const yearContent = ref(null); + +// 添加动画状态控制变量 +const isAnimating = ref(false); + +// 添加滑动方向变量 +const slideDirection = ref("left"); // 默认向左滑动 + +// 添加当前年份索引 +const currentYearIndex = ref(0); +const yearArray = [2021, 2022, 2023]; + +// 添加触摸和鼠标事件相关变量 +const isPaused = ref(false); +const touchStartX = ref(0); +const mouseStartX = ref(0); +const isMouseDown = ref(false); +let interval = null; +let pauseTimeout = null; + +// 根据滑动方向创建动画并在完成后更新年份 +const animateYearChange = (direction, targetYear) => { + if (!yearContent.value) return; + + // 设置动画状态为进行中 + isAnimating.value = true; + + const tl = gsap.timeline(); + + if (direction === "left") { + // 向左滑动效果：从右向左 + tl.to(yearContent.value, { + opacity: 0, + x: -50, + duration: 0.3, + ease: "power2.inOut", + }) + .set(yearContent.value, { + x: 50, + }) + .add(() => { + // 在动画中间点更新年份值 + state.activeYear = targetYear; + }) + .to(yearContent.value, { + opacity: 1, + x: 0, + duration: 0.3, + ease: "power2.out", + onComplete: () => { + // 动画完成后，设置动画状态为完成 + isAnimating.value = false; + }, + }); + } else { + // 向右滑动效果：从左向右 + tl.to(yearContent.value, { + opacity: 0, + x: 50, + duration: 0.3, + ease: "power2.inOut", + }) + .set(yearContent.value, { + x: -50, + }) + .add(() => { + // 在动画中间点更新年份值 + state.activeYear = targetYear; + }) + .to(yearContent.value, { + opacity: 1, + x: 0, + duration: 0.3, + ease: "power2.out", + onComplete: () => { + // 动画完成后，设置动画状态为完成 + isAnimating.value = false; + }, + }); + } +}; + +// 开始年份切换定时器 +const startYearInterval = () => { + if (interval) clearInterval(interval); + interval = setInterval(() => { + if (!isPaused.value) { + nextYear(); + } + }, 3000); +}; + +// 切换到下一个年份 +const nextYear = () => { + slideDirection.value = "left"; // 设置滑动方向为左滑 + const nextIndex = (currentYearIndex.value + 1) % yearArray.length; + const nextYearValue = yearArray[nextIndex]; + + // 先执行动画，动画完成后会更新 activeYear + animateYearChange("left", nextYearValue); + + // 更新索引 + currentYearIndex.value = nextIndex; +}; + +// 切换到上一个年份 +const prevYear = () => { + slideDirection.value = "right"; // 设置滑动方向为右滑 + const prevIndex = + (currentYearIndex.value - 1 + yearArray.length) % yearArray.length; + const prevYearValue = yearArray[prevIndex]; + + // 先执行动画，动画完成后会更新 activeYear + animateYearChange("right", prevYearValue); + + // 更新索引 + currentYearIndex.value = prevIndex; +}; + +// 暂停年份切换 +const pauseYearInterval = () => { + isPaused.value = true; +}; + +// 恢复年份切换 +const resumeYearInterval = () => { + isPaused.value = false; +}; + +// 暂停一段时间后恢复 +const pauseForDuration = (duration = 3000) => { + pauseYearInterval(); + + // 清除之前的定时器（如果存在） + if (pauseTimeout) { + clearTimeout(pauseTimeout); + } + + // 设置新的定时器 + pauseTimeout = setTimeout(() => { + resumeYearInterval(); + }, duration); +}; + +// 处理触摸开始事件 +const handleTouchStart = (event) => { + pauseYearInterval(); + touchStartX.value = event.touches[0].clientX; +}; + +// 处理触摸结束事件 +const handleTouchEnd = () => { + // 不立即恢复，而是等待一段时间 + // resumeYearInterval(); +}; + +// 处理触摸移动事件 +const handleTouchMove = (event) => { + if (touchStartX.value === 0) return; + + const touchEndX = event.touches[0].clientX; + const diffX = touchEndX - touchStartX.value; + + // 如果滑动距离足够大，切换年份 + if (Math.abs(diffX) > 50) { + if (diffX < 0) { + // 向左滑动，下一年 + slideDirection.value = "left"; + nextYear(); + } else { + // 向右滑动，上一年 + slideDirection.value = "right"; + prevYear(); + } + touchStartX.value = 0; // 重置起始位置，防止连续触发 + + // 滑动切换后暂停一段时间 + pauseForDuration(); + } +}; + +// 处理鼠标按下事件 +const handleMouseDown = (event) => { + isMouseDown.value = true; + mouseStartX.value = event.clientX; + pauseYearInterval(); +}; + +// 处理鼠标抬起事件 +const handleMouseUp = () => { + isMouseDown.value = false; + // 不立即恢复，等待一段时间后恢复 + // resumeYearInterval(); +}; + +// 处理鼠标移动事件 +const handleMouseMove = (event) => { + if (!isMouseDown.value || mouseStartX.value === 0) return; + + const mouseEndX = event.clientX; + const diffX = mouseEndX - mouseStartX.value; + + // 如果滑动距离足够大，切换年份 + if (Math.abs(diffX) > 50) { + if (diffX < 0) { + // 向左滑动，下一年 + slideDirection.value = "left"; + nextYear(); + } else { + // 向右滑动，上一年 + slideDirection.value = "right"; + prevYear(); + } + mouseStartX.value = 0; // 重置起始位置，防止连续触发 + + // 滑动切换后暂停一段时间 + pauseForDuration(); + } +}; + +// 启动年份切换定时器 +startYearInterval(); + const carouselTrack = ref(null); -const currentIndex = ref(0); -const isTransitioning = ref(false); +let carouselAnimation = null; // 存储 GSAP 动画实例 const getVisibleItems = () => { const items = state.marqueeArr; - // 创建一个包含所有项目的数组，前后各复制一组用于无缝循环 - return [...items, ...items, ...items]; -}; - -// 计算实际滑动距离 -const getSlideOffset = () => { - if (!carouselTrack.value) return 0; - - const firstItem = carouselTrack.value.querySelector(".carousel-item"); - if (!firstItem) return 0; - - const itemWidth = firstItem.offsetWidth; - const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight); - const totalWidth = itemWidth + itemMargin; - - const len = state.marqueeArr.length; - if (currentIndex.value <= -len) { - currentIndex.value = -currentIndex.value % len; - } else if (currentIndex.value >= len) { - currentIndex.value = currentIndex.value % len; - } - - // 初始偏移一组数据的长度 - const initialOffset = len * totalWidth + 8; - return initialOffset + currentIndex.value * totalWidth; -}; - -// 定义 resize 处理函数 -const handleResize = () => { - if (carouselTrack.value) { - carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`; - } + // 复制两组用于无缝滚动 + return [...items, ...items]; }; // 监听窗口大小变化 @@ -532,24 +686,32 @@ onMounted(() => { }); } }); - }); - // 使用定义的 handleResize 函数 - window.addEventListener("resize", handleResize); + // 初始化轮播动画 + nextTick(() => { + if (carouselTrack.value) { + const firstItem = carouselTrack.value.querySelector(".carousel-item"); + if (!firstItem) return; - // 初始化位置为第二组的开头 - currentIndex.value = 0; + const itemWidth = firstItem.offsetWidth; + const itemMargin = parseInt( + window.getComputedStyle(firstItem).marginRight + ); + const slideWidth = itemWidth + itemMargin; + const totalWidth = slideWidth * state.marqueeArr.length; - nextTick(() => { - if (carouselTrack.value) { - carouselTrack.value.style.transition = "none"; - carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`; - - // 重新启用过渡效果 - setTimeout(() => { - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - }, 50); - } + // 创建无限滚动动画 + carouselAnimation = gsap.to(carouselTrack.value, { + x: -totalWidth, + duration: 20, + ease: "none", + repeat: -1, + onRepeat: () => { + gsap.set(carouselTrack.value, { x: 0 }); + }, + }); + } + }); }); }); @@ -558,10 +720,20 @@ onUnmounted(() => { ctx.revert(); } ScrollTrigger.killAll(); - // 移除事件监听 - window.removeEventListener("resize", handleResize); + if (carouselAnimation) { + carouselAnimation.kill(); + } + if (interval) { + clearInterval(interval); + } + if (pauseTimeout) { + clearTimeout(pauseTimeout); + } }); +import { useRouter } from "vue-router"; +const router = useRouter(); + const goToSection = (i) => { ctx.data.forEach((e) => { if (e.vars && e.vars.id === "scrollTween") { @@ -578,132 +750,22 @@ const goToSection = (i) => { }); }); }; - -// 向前滑动 -const handlePrev = () => { - if (isTransitioning.value) return; - isTransitioning.value = true; - - if (!carouselTrack.value) return; - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - currentIndex.value--; - - if (currentIndex.value < -state.marqueeArr.length) { - setTimeout(() => { - carouselTrack.value.style.transition = "none"; - currentIndex.value = -1; - carouselTrack.value.offsetHeight; - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - isTransitioning.value = false; - }, 500); - } else { - setTimeout(() => { - isTransitioning.value = false; - }, 500); +const handleLink = (url) => { + window.open(url); +}; +const handlePageLink = (link) => { + router.push(link); +}; +// 添加轮播动画暂停和恢复函数 +const pauseCarouselAnimation = () => { + if (carouselAnimation) { + carouselAnimation.pause(); } }; -// 向后滑动 -const handleNext = () => { - if (isTransitioning.value) return; - isTransitioning.value = true; - - if (!carouselTrack.value) return; - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - currentIndex.value++; - - if (currentIndex.value >= state.marqueeArr.length) { - setTimeout(() => { - carouselTrack.value.style.transition = "none"; - currentIndex.value = 0; - carouselTrack.value.offsetHeight; - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - isTransitioning.value = false; - }, 500); - } else { - setTimeout(() => { - isTransitioning.value = false; - }, 500); - } -}; - -// 添加滑动相关的状态 -const isDragging = ref(false); -const startX = ref(0); -const scrollLeft = ref(0); - -// 处理鼠标/触摸按下事件 -const handleDragStart = (e) => { - isDragging.value = true; - startX.value = e.type === "mousedown" ? e.pageX : e.touches[0].pageX; - scrollLeft.value = getSlideOffset(); - - // 禁用过渡效果，实现平滑拖动 - if (carouselTrack.value) { - carouselTrack.value.style.transition = "none"; - } -}; - -// 处理鼠标/触摸移动事件 -const handleDragMove = (e) => { - if (!isDragging.value) return; - e.preventDefault(); - - const x = e.type === "mousemove" ? e.pageX : e.touches[0].pageX; - const walk = startX.value - x; - - if (carouselTrack.value) { - carouselTrack.value.style.transform = `translateX(-${ - scrollLeft.value + walk - }px)`; - } -}; - -// 处理鼠标/触摸释放事件 -const handleDragEnd = (e) => { - if (!isDragging.value) return; - isDragging.value = false; - - if (carouselTrack.value) { - // 恢复过渡效果 - carouselTrack.value.style.transition = "transform 0.5s ease-in-out"; - - const x = e.type === "mouseup" ? e.pageX : e.changedTouches[0].pageX; - const walk = startX.value - x; - - // 获取单个项目的宽度 - const firstItem = carouselTrack.value.querySelector(".carousel-item"); - if (!firstItem) return; - - const itemWidth = firstItem.offsetWidth; - const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight); - const totalWidth = itemWidth + itemMargin; - - // 根据滑动距离决定是否切换到下一个/上一个 - if (Math.abs(walk) > totalWidth / 3) { - if (walk > 0) { - handleNext(); - } else { - handlePrev(); - } - } else { - // 如果滑动距离不够，回到当前位置 - carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`; - } - } -}; - -const handleCarouselClick = (item, event) => { - // 检查事件类型是否为点击 - if (event.type === "click") { - event.stopPropagation(); // 阻止事件传播 - event.preventDefault(); // 阻止默认行为 - router.push({ - path: "/companyprofildetail", - query: { - titleNo: item.titleNo, - }, - }); +const resumeCarouselAnimation = () => { + if (carouselAnimation) { + carouselAnimation.play(); } }; @@ -715,81 +777,52 @@ const handleCarouselClick = (item, event) => { position: relative; } -.header { - width: 100%; - height: 260px; - position: fixed; - z-index: 10; - top: 0; - left: 0; - right: 0; - padding: 0 102px; - background-color: #fff; -} -.logo { - img { - width: 399px; - height: 128px; - } -} - -.tabs { - display: flex; - gap: 77px; - margin-left: 67px; -} - -.tab-item { - display: flex; - align-items: center; - font-size: 61px; - color: #000000; - max-width: 251px; - cursor: pointer; - transition: color 0.3s ease; - padding: 4px 8px; - - &.active { - color: #8b59fa; - } - - &:hover { - color: #8b59fa; - } -} -.ellipsis { - white-space: nowrap; /* 防止文本换行 */ - overflow: hidden; /* 隐藏溢出内容 */ - text-overflow: ellipsis; /* 文本溢出时显示省略号 */ -} .title { - font-size: 113px; + font-size: 85px; font-weight: 600; - color: #10253e; - line-height: 143px; -} -.subTitle { - line-height: 102px; } + .section-first { - background: url("@/assets/image/companyprofil/375/image-x.png"); + width: 100%; + background-image: url("@/assets/image/investor/768/bg-1.png"); background-size: cover; - background-position: center; + background-position: bottom; background-repeat: no-repeat; } .section-four { - background: url("@/assets/image/companyprofil/375/bg-3.png"); + background: url("@/assets/image/investor/768/bg-2.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } +.div-bg3 { + background: url("@/assets/image/investor/768/bg-3.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + padding: 0px 45px 50px 45px; + align-content: end; + box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16); + border-radius: 40px; +} +.div-bg4 { + background: url("@/assets/image/investor/768/bg-4.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + padding: 0px 45px 50px 45px; + align-content: end; + box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16); + border-radius: 40px; +} .icon-langmul { position: absolute; - bottom: -206px; + bottom: -80px; right: 0; } .carousel-container { width: 96%; + overflow: hidden; position: relative; } @@ -809,50 +842,43 @@ const handleCarouselClick = (item, event) => { } .carousel-item { - width: 1710px; + width: 785px; + margin-right: 73px; flex: 0 0 auto; - display: block; - padding: 46px 36px 118px 51px; - border-radius: 61px; - box-shadow: 0 15px 72px 5px rgba(0, 0, 0, 0.16); + display: block; // 改为 block 布局 + padding: 23px 20px 83px 20px; + border-radius: 30px; + box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16); } .carousel-image { - width: 1623px; - height: 1152px; + width: 748px; + height: 563px; object-fit: cover; display: block; } .carousel-content { padding: 0 20px 0 60px; - margin-top: 87px; + margin-top: 38px; } .carousel-title { - font-size: 92px; + font-size: 50px; font-weight: 500; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.5; - max-height: calc(1.5em * 5); + margin-top: 48px; } .carousel-subtitle { - margin-top: 51px; + margin-top: 23px; color: #455363; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - line-height: 102px; - max-height: calc(1.5em * 4); + font-size: 40px; +} +.carousel-link { + margin-top: 25px; + color: #8b59fa; + font-size: 35px; } - // 添加一个通用的溢出控制类 .overflow-hidden { overflow: hidden; @@ -860,7 +886,7 @@ const handleCarouselClick = (item, event) => { .divider1 { position: absolute; z-index: 3; - left: 64px; + left: 142px; width: 1px; height: 100%; background-color: rgba(230, 234, 238, 0.5) !important; @@ -869,103 +895,37 @@ const handleCarouselClick = (item, event) => { .divider5 { position: absolute; z-index: 3; - right: 60px; + right: 142px; width: 1px; height: 100%; background-color: rgba(230, 234, 238, 0.5) !important; } - -/* 语言选择模态框样式 */ -.language-modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1000; - touch-action: none; /* 防止触摸事件影响背景 */ +.line-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + max-height: calc(1.5em * 2); } - -.language-modal-backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1001; -} - -.language-modal-content { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - max-height: 90vh; /* 最大高度为视口高度的90% */ - background-color: #fff; - z-index: 1002; - box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); - display: flex; - flex-direction: column; - overflow: hidden; /* 内容溢出隐藏 */ -} - -.modal-header { - padding: 67px 77px 113px 77px; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 82px; - color: #000000; +.before-line { position: relative; - flex-shrink: 0; /* 不允许头部收缩 */ + &::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 100%; + background: #c6acff; + border-radius: 20px 0 0 20px; + } } -.close-btn { - cursor: pointer; -} - -.language-modal-body { - padding: 10px 0; - overflow-y: auto; /* 只有内容区域可滚动 */ - -webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */ - flex: 1; /* 内容区域填充剩余空间 */ -} - -.language-option { - padding: 30px 0; - font-size: 72px; - color: #333; - cursor: pointer; - transition: background-color 0.3s; - text-align: center; -} - -.language-option:hover, -.language-option.active { - background-color: #f5f5f5; - color: #8b59f7; -} - -.language-modal-footer { - padding: 113px 77px; - display: flex; - justify-content: center; - flex-shrink: 0; /* 不允许底部收缩 */ -} - -.confirm-btn { - background-color: #8b59f7; - color: white; - border: none; - border-radius: 20px; - padding: 46px 0; - width: 100%; - font-size: 82px; - cursor: pointer; -} - -.confirm-btn:hover { - background-color: #7a48e6; +// 添加过渡样式 +.year-content-animation { + position: relative; + will-change: transform, opacity; } diff --git a/src/views/investorhandbook/size375/index.vue b/src/views/investorhandbook/size375/index.vue index 6c77029..ee1c56e 100644 --- a/src/views/investorhandbook/size375/index.vue +++ b/src/views/investorhandbook/size375/index.vue @@ -6,51 +6,49 @@
-
-
+
+
与投资者社区的最低沟通指南
-
+
logo 授权发言人
-
+
以下Minim代表有权与分析师、股票经纪人、个人和机构股东的投资界进行沟通：
· 总裁
· 总裁兼首席营销官
· 首席财务官
在本指南中，这些代表被称为“授权IR联系人”
-
+
logo 季度末沟通和会议
-
+
1.静默期——公司遵守“静默期”，从季度末日期开始，到收益发布时结束。在此期间，企业管理层将不会与分析师或投资者进行1:1的会面。然而，根据要求，可向投资者提供基于事实的公共信息，并由授权投资者关系联系人进行分析。
-
+
2.分析师会议/电话会议——所有讨论季度、年度财务和业务信息的分析师会议或通话应通过互联网或电话会议同时向所有感兴趣的公众广播。会议的适当提前通知和同步广播应通过新闻稿或符合FD条例的其他通信方式进行。
-
+
3.收益新闻稿——收益新闻稿将在投资者关系部和首席财务官确定的会议或电话会议开始时或之前，按照适用的美国证券交易委员会和纳斯达克规则，在新闻专线上发布，以8-K表格的形式提供给美国证券交易会，并发布在公司网站上。
-
+
4.有关年度首次认购收入和每股收益范围的指导意见，可在收益新闻稿中提供，如有必要，可在每个季度的收益新闻稿上提供对指导意见的修改。一般来说，公司不会在本季度更新本指南或提供额外指南，除非财务副总裁/首席财务官认为有必要，并且只能根据FD条例在公开论坛上提供。
-
+
收到媒体、市场专业人士或股东任何询问的Minim代表（授权发言人除外）不得回复此类询问，但应将提问者转介给授权发言人。然而，分配给Minim投资者关系和营销团队的Minim代表可以按照授权发言人不时制定的指导方针，对公开信息的例行询问作出回应。
@@ -62,7 +60,7 @@ className="flex flex-wrap justify-center" > logo @@ -102,9 +100,9 @@ onUnmounted(() => {}); } .title { - font-size: 85px; + font-size: 113px; font-weight: 600; - line-height: 110px; + line-height: 143px; color: #10253e; } @@ -112,7 +110,7 @@ onUnmounted(() => {}); position: absolute; z-index: 3; background-color: rgba(230, 234, 238, 0.5) !important; - left: 116px; + left: 64px; width: 1px; height: 100%; } @@ -121,7 +119,7 @@ onUnmounted(() => {}); position: absolute; z-index: 3; background-color: rgba(230, 234, 238, 0.5) !important; - right: 116px; + right: 60px; width: 1px; height: 100%; }