liebao-web/src/components/downloadCenter.vue

<template>
  <div class="download-list">
    <div class="title">
      <div class="head-line">
        <div class="b_line"></div>
        <div class="triangle"></div>
      </div>
      <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>

<script>
export default {
  name: "downloadCenter",
  data() {
    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.2.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: "点击下载IP修改工具，安装后进行相关操作",
          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: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    download(src) {
      window.open(src, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped  type="text/css">
.download-list {
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .head-line {
      position: relative;
      width: 4px;
      height: 15px;
      background: #fc7200;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 10px;
      .b_line {
        width: 100px;
        height: 6px;
        background: #462bf7;
      }
      .triangle {
        width: 0;
        height: 0;
        border-top: 100px solid #462bf7;
        border-left: 100px solid transparent;
      }
    }
    .label {
      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;
      }
    }
  }
}
</style>