From 022bf8dd6683f7b194e479b2a29c3721f45fd867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 26 Aug 2025 10:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/productCenter/detail1.vue | 86 +++++++++++++++++++++++++++++
 src/views/productCenter/detail2.vue | 85 ++++++++++++++++++++++++++++
 src/views/productCenter/detail3.vue | 85 ++++++++++++++++++++++++++++
 3 files changed, 256 insertions(+)

diff --git a/src/views/productCenter/detail1.vue b/src/views/productCenter/detail1.vue
index d6addad..6c1d599 100644
--- a/src/views/productCenter/detail1.vue
+++ b/src/views/productCenter/detail1.vue
@@ -63,6 +63,19 @@
         </div>
       </div>
 
+    </div>
+
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </div>
+      </div>
+
     </div>
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
@@ -82,6 +95,18 @@ export default {
   },
   data() {
     return {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
       activeIndex: 0,
       data:{
         banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
@@ -158,6 +183,20 @@ export default {
     },
     toDetail(id){
       this.$router.push('/productCenter/detail?id='+id)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
     }
   }
 }
@@ -487,4 +526,51 @@ export default {
     }
   }
 }
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
 </style>
diff --git a/src/views/productCenter/detail2.vue b/src/views/productCenter/detail2.vue
index 0520a87..0e18b29 100644
--- a/src/views/productCenter/detail2.vue
+++ b/src/views/productCenter/detail2.vue
@@ -63,6 +63,18 @@
         </div>
       </div>
 
+    </div>
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </div>
+      </div>
+
     </div>
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
@@ -82,6 +94,18 @@ export default {
   },
   data() {
     return {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
       activeIndex: 0,
       data:{
 
@@ -157,6 +181,20 @@ export default {
     },
     toDetail(id){
       this.$router.push('/productCenter/detail?id='+id)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
     }
   }
 }
@@ -486,4 +524,51 @@ export default {
     }
   }
 }
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
 </style>
diff --git a/src/views/productCenter/detail3.vue b/src/views/productCenter/detail3.vue
index fe22237..a6b23cd 100644
--- a/src/views/productCenter/detail3.vue
+++ b/src/views/productCenter/detail3.vue
@@ -63,6 +63,18 @@
         </div>
       </div>
 
+    </div>
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </div>
+      </div>
+
     </div>
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
@@ -82,6 +94,18 @@ export default {
   },
   data() {
     return {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
       activeIndex: 0,
       data:{
 
@@ -167,6 +191,20 @@ export default {
     },
     toDetail(id){
       this.$router.push('/productCenter/detail?id='+id)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
     }
   }
 }
@@ -496,4 +534,51 @@ export default {
     }
   }
 }
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
 </style>