Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

src/views/BusinessServices/size768/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-page">
     <div class="business-page">
-      <!-- 渐变背景标题区 - 增加层次感 -->
+      <!-- 渐变背景标题区 -->
       <section class="hero-section">
         <div class="container">
           <div class="title-wrapper">
@@ -25,94 +25,30 @@
 
         <!-- 解决方案网格 - 响应式弹性布局 -->
         <div class="solution-grid">
-          <!-- 主推解决方案组 -->
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
-          <div class="solution-group">
+          <div
-            <div class="featured-solution">
+            v-for="(solution, sIndex) in solutions"
-              <div class="solution-card" :style="{ '--delay': '0s' }">
+            :key="sIndex"
-                <div class="card-header">
+            class="featured-solution"
-                  <div class="decorative-line"></div>
+          >
-                  <h2 class="card-title">{{ solutions[0].title }}</h2>
+            <div
-                </div>
+              class="solution-card"
-                <ul class="card-content">
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
-                  <li
+            >
-                    v-for="(point, pIndex) in solutions[0].points"
+              <div class="card-header">
-                    :key="pIndex"
+                <div class="decorative-line"></div>
-                    class="content-point"
+                <h2 class="card-title">{{ solution.title }}</h2>
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0.2s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[1].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[1].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <!-- 次推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.4s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[2].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[2].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                  <li style="padding-bottom: 45px"></li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.6s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[3].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[3].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
               </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">➤</div>
+                  <div class="point-text">{{ point }}</div>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
@@ -166,6 +102,7 @@ const solutions = computed(() => [
 .container {
   margin: 0 auto;
   padding: 0 2rem;
+  max-width: 1600px;
 }
 
 /* 标题区样式 */
@@ -188,13 +125,25 @@ const solutions = computed(() => [
 }
 
 .hero-title {
-  font-size: 40px;
+  font-size: 2.5rem;
   color: #2c3e50;
   margin-bottom: 2rem;
-  animation: slideIn 1s ease;
+  position: relative;
+}
+
+.hero-title::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
+  border-radius: 2px;
 }
 
 .hero-description {
+  max-width: 1000px;
   margin: 0 auto;
   font-size: 1.1rem;
   line-height: 1.8;
@@ -211,6 +160,7 @@ const solutions = computed(() => [
     var(--primary-color) 100%
   );
 }
+
 .home-page {
   background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
@@ -218,99 +168,29 @@ const solutions = computed(() => [
   background-repeat: no-repeat;
 }
 
-.container {
+/* 解决方案网格 - 响应式布局 */
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区 - 紫色渐变 */
-.hero-section {
-  background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
-  position: relative;
-  overflow: hidden;
-  color: white;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
-    no-repeat bottom/100% 30%;
-}
-.title-decoration {
-  position: absolute;
-  bottom: -15px;
-  left: 0;
-  width: 80%;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 2px;
-}
-
-/* 解决方案网格 */
 .solution-grid {
-  padding: 6rem 0 4rem;
+  padding: 6rem 0;
-}
+  display: grid;
-
+  grid-template-columns: 1fr; /* 默认单列（移动端） */
-.solution-group {
-  display: flex;
-  flex-direction: column;
   gap: 3rem;
-  margin-bottom: 4rem;
 }
 
-/* 桌面端布局（>=768px） */
+/* 中等屏幕（768px-1439px） - 单列布局 */
-@media (min-width: 768px) {
+@media (min-width: 768px) and (max-width: 1439px) {
-  .solution-group {
+  .solution-grid {
-    flex-direction: row;
+    grid-template-columns: 1fr;
-    gap: 4rem;
-  }
-
-  .featured-solution {
-    flex: 1;
-  }
-
-  .solution-card {
-    height: 350px;
   }
 }
 
-/* 移动端布局（<768px） */
+/* 大屏幕（≥1440px） - 双列布局 */
-@media (max-width: 767px) {
+@media (min-width: 1440px) {
-  .home-page {
+  .solution-grid {
-    background-image: url("@/assets/image/bg-mobile.png");
+    grid-template-columns: 1fr 1fr;
-  }
-
-  .hero-title {
-    font-size: 1.8rem;
-  }
-
-  .solution-group {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .featured-solution {
-    width: 100% !important; /* 强制占满容器 */
-    margin-bottom: 2rem;
-  }
-
-  .solution-card {
-    padding: 2rem;
-    height: auto;
-  }
-
-  .content-point {
-    padding: 1rem 0;
   }
 }
 
-/* 卡片公共样式 */
+/* 卡片样式 */
 .solution-card {
   background: white;
   border-radius: 16px;
@@ -322,22 +202,17 @@ const solutions = computed(() => [
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(137, 91, 255, 0.2);
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+  transition: all 0.3s ease;
 }
 
-.solution-card::after {
+.solution-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 4px;
-  background: linear-gradient(
+  background: var(--primary-gradient);
-    135deg,
-    rgba(137, 91, 255, 0.03) 0%,
-    rgba(137, 91, 255, 0) 100%
-  );
-  z-index: -1;
 }
 
 .solution-card:hover {
@@ -355,6 +230,7 @@ const solutions = computed(() => [
   background: var(--primary-gradient);
   margin-bottom: 1rem;
   border-radius: 3px;
+  transition: width 0.3s ease;
 }
 
 .solution-card:hover .decorative-line {
@@ -374,6 +250,10 @@ const solutions = computed(() => [
   border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 
+.content-point:last-child {
+  border-bottom: none;
+}
+
 .point-icon {
   color: var(--primary-color);
   font-size: 1.2rem;

src/views/financialinformation/quarterlyresults/size1440/index.vue

@@ -25,13 +25,17 @@
         class="result-item"
       >
         <div class="content">
-          <a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
+          <p class="result-title subtitle">{{ item.title }}</p>
           <p class="result-description content-text">{{ item.description }}</p>
         </div>
-        <div class="pdf-icon">
+
-          <a :href="item.url" target="_blank">
+        <div
-            <img src="@/assets/image/pdf.png" alt="PDF" />
+          class="pdf-icon"
-          </a>
+          @click="downloadPdf(item.url)"
+          style="color: #2979ff; cursor: pointer"
+        >
+          <img src="@/assets/image/pdf.png" alt="PDF" />
+          {{ t("financialinformation.quarterlyresults.download") }}
         </div>
       </div>
     </div>
@@ -341,6 +345,31 @@ const handleSearch = () => {
   // 搜索处理逻辑
   console.log("搜索:", searchQuery.value);
 };
+const downloadPdf = async (pdfResource, filename = "") => {
+  try {
+    // 获取PDF文件
+    const response = await fetch(pdfResource);
+    const blob = await response.blob();
+
+    // 创建Blob URL
+    const blobUrl = URL.createObjectURL(blob);
+
+    // 创建下载链接
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
+
+    // 触发下载
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    // 释放Blob URL
+    URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("下载PDF文件失败:", error);
+  }
+};
 </script>
 <style scoped lang="scss">
 .title {
@@ -387,7 +416,7 @@ const handleSearch = () => {
 .result-item {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   padding: 15px 0;
   border-bottom: 1px solid #eee;
 }
@@ -401,10 +430,6 @@ const handleSearch = () => {
   text-decoration: none;
   display: block;
   margin-bottom: 5px;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .result-description {

src/views/financialinformation/quarterlyresults/size1920/index.vue

@@ -25,13 +25,16 @@
         class="result-item"
       >
         <div class="content">
-          <a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
+          <p class="result-title subtitle">{{ item.title }}</p>
           <p class="result-description content-text">{{ item.description }}</p>
         </div>
-        <div class="pdf-icon">
+        <div
-          <a :href="item.url" target="_blank">
+          class="pdf-icon"
-            <img src="@/assets/image/pdf.png" alt="PDF" />
+          @click="downloadPdf(item.url)"
-          </a>
+          style="color: #2979ff; cursor: pointer"
+        >
+          <img src="@/assets/image/pdf.png" alt="PDF" />
+          {{ t("financialinformation.quarterlyresults.download") }}
         </div>
       </div>
     </div>
@@ -341,6 +344,32 @@ const handleSearch = () => {
   // 搜索处理逻辑
   console.log("搜索:", searchQuery.value);
 };
+
+const downloadPdf = async (pdfResource, filename = "") => {
+  try {
+    // 获取PDF文件
+    const response = await fetch(pdfResource);
+    const blob = await response.blob();
+
+    // 创建Blob URL
+    const blobUrl = URL.createObjectURL(blob);
+
+    // 创建下载链接
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
+
+    // 触发下载
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    // 释放Blob URL
+    URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("下载PDF文件失败:", error);
+  }
+};
 </script>
 <style scoped lang="scss">
 .title {
@@ -387,7 +416,7 @@ const handleSearch = () => {
 .result-item {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   padding: 15px 0;
   border-bottom: 1px solid #eee;
 }
@@ -401,10 +430,6 @@ const handleSearch = () => {
   text-decoration: none;
   display: block;
   margin-bottom: 5px;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .result-description {

src/views/financialinformation/quarterlyresults/size375/index.vue

@@ -36,7 +36,7 @@
         <img
           src="@/assets/image/download.svg"
           style="width: 20px; height: 20px"
-          @click="handleDownload(item.url)"
+          @click="downloadPdf(item.url)"
         />
       </div>
     </div>
@@ -345,55 +345,29 @@ const handleSearch = () => {
   console.log("搜索:", searchQuery.value);
 };
 
-const handleDownload = (url) => {
+const downloadPdf = async (pdfResource, filename = "") => {
-  // 下载处理逻辑
+  try {
-  console.log("下载:", url);
+    // 获取PDF文件
+    const response = await fetch(pdfResource);
+    const blob = await response.blob();
 
-  // 创建一个隐藏的a元素
+    // 创建Blob URL
-  const link = document.createElement("a");
+    const blobUrl = URL.createObjectURL(blob);
-  link.href = url;
 
-  // 修复文件名提取逻辑
+    // 创建下载链接
-  let fileName = url.split("/").pop();
+    const a = document.createElement("a");
-  // 移除可能存在的查询参数
+    a.href = blobUrl;
-  if (fileName.includes("?") || fileName.includes("_t=")) {
+    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
-    fileName = fileName.split(/[?_]/)[0];
-  }
-  link.download = fileName;
-  link.target = "_blank";
 
-  // 对于移动设备，我们需要特殊处理
+    // 触发下载
-  const isMobile =
+    document.body.appendChild(a);
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    a.click();
-      navigator.userAgent
+    document.body.removeChild(a);
-    );
 
-  if (isMobile) {
+    // 释放Blob URL
-    // 在移动设备上，可能需要使用fetch下载文件并创建blob
+    URL.revokeObjectURL(blobUrl);
-    fetch(url)
+  } catch (error) {
-      .then((response) => response.blob())
+    console.error("下载PDF文件失败:", error);
-      .then((blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        link.href = objectUrl;
-        document.body.appendChild(link);
-        link.click();
-
-        // 清理
-        setTimeout(() => {
-          document.body.removeChild(link);
-          URL.revokeObjectURL(objectUrl);
-        }, 100);
-      })
-      .catch((error) => {
-        console.error("下载文件时出错:", error);
-        // 如果fetch失败，回退到window.open
-        window.open(url, "_blank");
-      });
-  } else {
-    // 桌面设备上直接点击链接
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
   }
 };
 </script>
@@ -475,10 +449,6 @@ const handleDownload = (url) => {
   margin-bottom: 8px;
   font-size: 92px;
   font-weight: 600;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .result-description {

src/views/financialinformation/quarterlyresults/size768/index.vue

@@ -36,7 +36,7 @@
         <img
           src="@/assets/image/download.svg"
           style="width: 20px; height: 20px"
-          @click="handleDownload(item.url)"
+          @click="downloadPdf(item.url)"
         />
       </div>
     </div>
@@ -345,55 +345,29 @@ const handleSearch = () => {
   console.log("搜索:", searchQuery.value);
 };
 
-const handleDownload = (url) => {
+const downloadPdf = async (pdfResource, filename = "") => {
-  // 下载处理逻辑
+  try {
-  console.log("下载:", url);
+    // 获取PDF文件
+    const response = await fetch(pdfResource);
+    const blob = await response.blob();
 
-  // 创建一个隐藏的a元素
+    // 创建Blob URL
-  const link = document.createElement("a");
+    const blobUrl = URL.createObjectURL(blob);
-  link.href = url;
 
-  // 修复文件名提取逻辑
+    // 创建下载链接
-  let fileName = url.split("/").pop();
+    const a = document.createElement("a");
-  // 移除可能存在的查询参数
+    a.href = blobUrl;
-  if (fileName.includes("?") || fileName.includes("_t=")) {
+    a.download = filename || pdfResource.split("/").pop() || "download.pdf";
-    fileName = fileName.split(/[?_]/)[0];
-  }
-  link.download = fileName;
-  link.target = "_blank";
 
-  // 对于移动设备，我们需要特殊处理
+    // 触发下载
-  const isMobile =
+    document.body.appendChild(a);
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    a.click();
-      navigator.userAgent
+    document.body.removeChild(a);
-    );
 
-  if (isMobile) {
+    // 释放Blob URL
-    // 在移动设备上，可能需要使用fetch下载文件并创建blob
+    URL.revokeObjectURL(blobUrl);
-    fetch(url)
+  } catch (error) {
-      .then((response) => response.blob())
+    console.error("下载PDF文件失败:", error);
-      .then((blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        link.href = objectUrl;
-        document.body.appendChild(link);
-        link.click();
-
-        // 清理
-        setTimeout(() => {
-          document.body.removeChild(link);
-          URL.revokeObjectURL(objectUrl);
-        }, 100);
-      })
-      .catch((error) => {
-        console.error("下载文件时出错:", error);
-        // 如果fetch失败，回退到window.open
-        window.open(url, "_blank");
-      });
-  } else {
-    // 桌面设备上直接点击链接
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
   }
 };
 </script>
@@ -475,10 +449,6 @@ const handleDownload = (url) => {
   margin-bottom: 8px;
   font-size: 50px;
   font-weight: 600;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .result-description {