feat 下载中心

src/components/downloadCenter.vue

@@ -8,7 +8,55 @@
       <div class="label">猎豹AI软件</div>
     </div>
     <div class="lb-list">
-
+      <div class="lb-app" v-for="(v,i) in lbApp" :key="i">
+        <img class="img" :src="v.img" alt="">
+        <div class="name">{{v.name}}</div>
+        <div class="tips">{{v.tips}}</div>
+        <div @click="download(v.src)" v-if="v.download" class="download">下载</div>
+      </div>
+    </div>
+    <div class="title">
+      <div class="head-line">
+        <div class="b_line"></div>
+        <div class="triangle"></div>
+      </div>
+      <div class="label">USB打印插件<span>(使用USB打印机必装插件、请根据电脑操作系统位数选择对应插件安装)</span></div>
+    </div>
+    <div class="plug-list">
+      <div class="plug" v-for="(v,i) in necessaryPlug" :key="i">
+        <div class="name">{{v.name}}</div>
+        <div class="tips">{{v.tips}}</div>
+        <div @click="download(v.src)" class="download">下载</div>
+      </div>
+    </div>
+    <div class="title">
+      <div class="head-line">
+        <div class="b_line"></div>
+        <div class="triangle"></div>
+      </div>
+      <div class="label">打印机插件<span>(请依据打印机品牌安装对应的插件)</span></div>
+    </div>
+    <div class="plug-list">
+      <div class="plug" v-for="(v,i) in printerPlug" :key="i">
+        <div class="name">{{v.name}}</div>
+        <div class="tips">{{v.tips}}</div>
+        <div @click="download(v.src)" class="download">下载</div>
+      </div>
+    </div>
+    <div class="title">
+      <div class="head-line">
+        <div class="b_line"></div>
+        <div class="triangle"></div>
+      </div>
+      <div class="label">其他软件</div>
+    </div>
+    <div class="lb-list">
+      <div class="lb-app">
+        <img class="img" src="../../static/image/xiangrikui.png" alt="">
+        <div class="name">向日葵</div>
+        <div class="tips">远程桌面控制软件，便于更好的排查解决问题，提供更优质的服务</div>
+        <div @click="download('https://sunlogin.oray.com/download')" class="download">下载</div>
+      </div>
     </div>
   </div>
 </template>
@@ -17,18 +65,90 @@
 export default {
   name: "downloadCenter",
   data() {
-    return {};
+    return {
+      lbApp: [
+        {
+          img: require("../../static/image/download.png"),
+          name: "Android手机版",
+          tips: "适合大部分安卓手机使用",
+          download: false,
+          src: "",
+        },
+        {
+          img: require("../../static/image/download.png"),
+          name: "Iphone手机版",
+          tips: "应用市场搜索[猎豹AI聚合运力配送]",
+          download: false,
+          src: "",
+        },
+        {
+          img: require("../../static/image/juhe-icon.png"),
+          name: "Windows",
+          tips: "客户端、支持Windows系统",
+          download: true,
+          src: "https://pc.liebaoai.cn/download/liebao-web%20Setup%200.1.0.exe",
+        },
+      ],
+      necessaryPlug: [
+        {
+          name: "Lodop打印网页插件(64位)",
+          tips: "Lodop打印网页插件，该插件只支持64位Windows操作系统",
+          src: "https://pc.liebaoai.cn/download/install_lodop64.exe",
+        },
+        {
+          name: "C-Lodop打印服务插件(64位)",
+          tips: "C-Lodop打印服务插件，该插件只支持64位Windows操作系统",
+          src: "https://pc.liebaoai.cn/download/CLodop_Setup_for_Win64NT.exe",
+        },
+        {
+          name: "Lodop打印网页插件(32位)",
+          tips: "Lodop打印网页插件，该插件只支持32位Windows操作系统",
+          src: "https://pc.liebaoai.cn/download/install_lodop32.exe",
+        },
+        {
+          name: "C-Lodop打印服务插件(32位)",
+          tips: "C-Lodop打印服务插件，该插件只支持32位Windows操作系统",
+          src: "https://pc.liebaoai.cn/download/CLodop_Setup_for_Win32NT.exe",
+        },
+      ],
+      printerPlug: [
+        {
+          name: "佳博打印机插件",
+          tips: "进入驱动下载页面，选择对应打印机驱动进行下载",
+          src: "http://cn.gainscha.com/qudong.html",
+        },
+        {
+          name: "佳博IP修改工具",
+          tips: "C-Lodop打印服务插件，该插件只支持64位Windows操作系统",
+          src: "https://pc.liebaoai.cn/download/GP_printer.exe",
+        },
+        {
+          name: "芯烨打印机插件",
+          tips: "进入驱动下载页面，根据打印机小票宽度，选择对应驱动",
+          src: "https://www.xprinter.net/companyfile/6/",
+        },
+        {
+          name: "芯烨IP修改工具",
+          tips: "进入测试工具下载页面，选择V3.2C打印测试工具并下载",
+          src: "https://www.xprinter.net/companyfile/5/",
+        },
+      ],
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
-  // 方法集合
-  methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
+  // 方法集合
+  methods: {
+    download(src) {
+      window.open(src, "_blank");
+    },
+  },
 };
 </script>
 
@@ -37,6 +157,7 @@ export default {
   .title {
     display: flex;
     align-items: center;
+    margin-bottom: 10px;
     .head-line {
       position: relative;
       width: 4px;
@@ -61,6 +182,91 @@ export default {
       font-size: 15px;
       font-weight: 500;
       color: #0d1e40;
+      span {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+  .lb-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    .lb-app {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 10px 20px;
+      width: 215px;
+      height: 235px;
+      background: #ffffff;
+      opacity: 1;
+      border-radius: 8px;
+      margin: 0 10px 10px 0;
+      .img {
+        width: 100px;
+        height: 100px;
+        margin-top: 20px;
+      }
+      .name {
+        font-size: 15px;
+        color: #333;
+        margin-top: 10px;
+      }
+      .tips {
+        font-size: 12px;
+        color: #999;
+        margin: 10px 0;
+        text-align: center;
+      }
+      .download {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 20px;
+        border-radius: 15px;
+        font-size: 12px;
+        color: #fff;
+        background: #fc7200;
+        cursor: pointer;
+      }
+    }
+  }
+  .plug-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    .plug {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-evenly;
+      padding: 10px 20px;
+      width: 215px;
+      height: 155px;
+      background: #fff;
+      border-radius: 8px;
+      margin: 0 10px 10px 0;
+      .name {
+        font-size: 16px;
+        color: #333;
+      }
+      .tips {
+        font-size: 12px;
+        color: #999;
+        text-align: center;
+      }
+      .download {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 20px;
+        border-radius: 15px;
+        font-size: 12px;
+        color: #fff;
+        background: #fc7200;
+        cursor: pointer;
+      }
     }
   }
 }