修改自定义页面

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>

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>

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>