marquee

src/views/companyprofil/size768/index.vue

@@ -305,11 +305,61 @@
         </div>
       </div>
     </section>
+    <section style="background: #fff">
+      <div class="flex flex-wrap justify-center">
+        <div class="content w-full px-[188px] mt-[245px]">
+          <div class="text-[#8B59F7] text-[40px]">聚焦FiEE前沿动态</div>
+        </div>
+        <div
+          :ref="
+            (el) => {
+              moveRefs[16].value = el;
+            }
+          "
+          class="w-full title mt-[58px] px-[188px]"
+        >
+          <div>洞察趋势</div>
+          <div>点亮文艺前行灯塔</div>
+        </div>
+        <div class="w-full px-[188px] mt-[140px]">
+          <div
+            :ref="
+              (el) => {
+                moveRefs[17].value = el;
+              }
+            "
+            class="text-[#455363] text-[40px] w-[1345px]"
+          >
+            FIEE始终扎根文艺领域，时刻紧跟全球艺术发展趋势。通过深度剖析案例、开展跨界研讨，探索文艺与科技、商业的深度融合，为文艺事业未来发展提供前瞻性洞察与灵感启迪。
+          </div>
+        </div>
+
+        <div class="mt-[310px] mb-[253px]">
+          <n-marquee>
+            <div
+              v-for="(item, idx) in state.marqueeArr"
+              :key="idx"
+              class="marquee-item w-[785px] flex flex-wrap justify-center pt-[23px] pb-[40px] pl-[20px] pr-[18px]"
+            >
+              <img class="w-[748px] h-[563px]" :src="item.imgUrl" />
+              <div class="pl-[20px] pr-[60px]">
+                <div class="text-[50px] font-medium mt-[38px]">
+                  <div>{{ item.title }}</div>
+                </div>
+                <div class="mt-[23px] text-[#455363] text-[40px]">
+                  <div>{{ item.subTitle }}</div>
+                </div>
+              </div>
+            </div>
+          </n-marquee>
+        </div>
+      </div>
+    </section>
   </main>
 </template>
 
 <script setup>
-import { onUnmounted, ref, onMounted } from "vue";
+import { onUnmounted, ref, onMounted, reactive } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -321,13 +371,51 @@ gsap.registerPlugin(ScrollTrigger);
 const { transitionState } = useTransitionComposable();
 const main = ref();
 const moveRefs = ref(
-  Array(17)
+  Array(18)
     .fill(null)
     .map(() => ref(null))
 );
 const { currentTab } = useHome();
 let ctx;
 
+// 导入图片
+import imageShow1 from "@/assets/image/companyprofil/imageshow-1.png";
+
+const state = reactive({
+  marqueeArr: [
+    {
+      title: "强大资源网络，拓展无限商业",
+      subTitle:
+        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
+      imgUrl: imageShow1, // 使用导入的图片
+    },
+    {
+      title: "强大资源网络，拓展无限商业",
+      subTitle:
+        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
+      imgUrl: imageShow1, // 使用导入的图片
+    },
+    {
+      title: "强大资源网络，拓展无限商业",
+      subTitle:
+        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
+      imgUrl: imageShow1, // 使用导入的图片
+    },
+    {
+      title: "强大资源网络，拓展无限商业",
+      subTitle:
+        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
+      imgUrl: imageShow1, // 使用导入的图片
+    },
+    {
+      title: "强大资源网络，拓展无限商业",
+      subTitle:
+        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
+      imgUrl: imageShow1, // 使用导入的图片
+    },
+  ],
+});
+
 onMounted(() => {
   ctx = gsap.context(() => {
     moveRefs.value.forEach((moveRef, index) => {
@@ -440,4 +528,8 @@ const goToSection = (i) => {
   bottom: -80px;
   right: 0;
 }
+.marquee-item {
+  border-radius: 30px;
+  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
+}
 </style>