<template>
  <!-- 本文件由HTML+css+jquery页面修改而来，后期优化，暂时能够使用即可 -->
  <div>
    <!-- 头部 -->
    <div class="head_top">
      <img class="head_logo_img" src="@/assets/images/caj/Logo_banner.png" />
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 标题 -->
      <div class="content_title">
        <ul>
          <li
            @click="changeDemo(item.value)"
            :class="{ active: currentDemo == item.value, 'list-item': true }"
            v-for="(item, index) in list"
            :key="index"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>

      <!-- 表头 -->
      <div class="content_head">
        <ul>
          <li style="width: 27%">软件名称</li>
          <li style="width: 15%">软件大小</li>
          <li style="width: 15%">系统版本</li>
          <li style="width: 15%">更新时间</li>
          <li style="width: 15%">下载地址</li>
        </ul>
      </div>

      <!-- 内容列表 -->
      <div class="content_line">
        <!-- TXUOS 列表 -->
        <ul class="out_ul" v-show="currentDemo === 'TXUOS'">
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/intel.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">Intel,AMD</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                47.6M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="TXUOS_INTER"></a>
              </li>
              <!--<li style="width:15%;margin-left:15px;line-height:50px;" class="in_ul_li"> <button class="download" onclick="downloads()"></button></li>-->
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >飞腾FT200，鲲鹏920</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                56.6M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="TXUOS_FT"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/longxin.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">龙芯3A4000</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                56.4M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="TXUOS_LX3A4000"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/longxin.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">龙芯3A5000</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                60.7M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="TXUOS_LX3A5000"></a>
              </li>
            </ul>
          </li>
          <!-- <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >昆明市人民检察院适配安装包</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                47.6M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a
                  class="download"
                  :href="TXUOS_KMSRMJCY"
                ></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px; font-size: 13px"
                  >南涧彝族自治县人民检察院适配安装包</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                56.6M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                统信
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a
                  class="download"
                  href="./SoftWare/TXUOS/NJXRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb"
                ></a>
              </li>
            </ul>
          </li> -->
        </ul>

        <!--银河麒麟-->
        <ul class="out_ul" v-show="currentDemo === 'YHQL'">
          <!-- ... （省略部分代码） -->
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/intel.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">Intel,AMD</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                47.7M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                银河麒麟
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="YHQL_INTER"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >飞腾FT2000，鲲鹏920，麒麟990</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                46.7M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                银河麒麟
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="YHQL_FT"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/longxin.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">龙芯3A4000</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                64.8M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                银河麒麟
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="YHQL_LX3A4000"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/longxin.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px">龙芯3A5000</span>
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                60.6M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                银河麒麟
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="YHQL_LX3A5000"></a>
              </li>
            </ul>
          </li>
        </ul>

        <!--中科方德-->
        <ul class="out_ul" v-show="currentDemo === 'ZKFD'">
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >服务器端（rpm文件）</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                35.4M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                中科方德
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="ZKFD_SERVER"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >桌面端（deb文件）</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                47.7M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                中科方德
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="ZKFD_CLIENT"></a>
              </li>
            </ul>
          </li>
        </ul>

        <!--Windows-->
        <ul class="out_ul" v-show="currentDemo === 'WIN'">
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >CAJViewer 8（64-bit）</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                111M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                Windows
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="WINDOWS_64"></a>
              </li>
            </ul>
          </li>
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >CAJViewer 8（32-bit）</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                109M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                Windows
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="WINDOWS_32"></a>
              </li>
            </ul>
          </li>
        </ul>

        <!--绝大部分操作系统都可以用，x86的linux都可以用。包括 kylin, uos, 中科方德-->
        <ul class="out_ul" v-show="currentDemo === 'JDBF'">
          <li class="out_ul_li">
            <ul class="in_ul">
              <li style="width: 28%" class="in_ul_li">
                <img
                  src="@/assets/images/caj/other.png"
                  style="float: left; margin-top: 10px"
                /><span style="float: left; margin-left: 20px"
                  >CAJViewer-x86_64</span
                >
              </li>
              <li style="width: 15%; margin-left: 5px" class="in_ul_li">
                64.2M
              </li>
              <li style="width: 15%; margin-left: 15px" class="in_ul_li">
                绝大部分适配
              </li>
              <li style="width: 15%; margin-left: 35px" class="in_ul_li">
                2023-01-04
              </li>
              <li
                style="width: 15%; margin-left: 15px; line-height: 50px"
                class="in_ul_li"
              >
                <a class="download" :href="JDBF"></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import fullUrl from "./urls";
export default {
  data() {
    return {
      list: [
        {
          label: "Windows系统适配",
          value: "WIN",
        },
        {
          label: "统信UOS",
          value: "TXUOS",
        },
        {
          label: "银河麒麟",
          value: "YHQL",
        },
        {
          label: "中科方德",
          value: "ZKFD",
        },
        {
          label: "绝大部分国产化系统适配",
          value: "JDBF",
        },
      ],
      currentDemo: "WIN",
      activeBg: require("@/assets/images/caj/title_bg2.png"),
      defaultBg: require("@/assets/images/caj/title_bg1.png"),
      ...fullUrl,
    };
  },
  methods: {
    changeDemo(n) {
      this.currentDemo = n;
    },
  },
};
</script>

<style scoped lang="scss">
/* 样式表样式（将原来的样式表内容放在这里） */
@charset "utf-8";
b,
i {
  font-style: normal;
  font-weight: normal;
}
a:link,
a:visited {
  color: #333;
}
.cBlu:link,
.cBlu:visited,
.cBlu {
  color: #107bce;
}
.gray:link,
.gray:visited {
  color: #107bce;
}
a:hover {
  text-decoration: none;
  color: #c5c527;
  cursor: pointer;
}
input,
select {
  border: none;
  outline: none;
}
.wrap,
.wrapper,
.header_t_in,
.header_b,
.main_sz,
.bigNav,
.footerL_gf-in,
.reader-tools-bar {
  width: 1200px;
  margin: 0 auto;
}
body {
  font-family: "\5FAE\8F6F\96C5\9ED1";
  background-color: #f8f8f8;
}

/* 首页标头*/
.head_top {
  width: 100%;
  height: 135px;
  img {
    width: 100%;
  }
}
.head_left_link {
  float: left;
  width: 100px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  margin-top: -5px;
}
.head_right_link {
  float: right;
  width: 300px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  margin-top: -5px;
}
// .head_title {
//   width: 100%;
//   height: 190px;
//   background: url(@/assets/images/caj/index/banner.png);
//   background-size: 100% 100%;
// }
// .head_title img {
//   width: 40%;
//   height: 60px;
//   /*position: absolute;*/
//   margin-left: 30%;
//   /*left: 50%;*/
//   /*top: 40%;*/
//   /*margin-left: -350px;*/
//   /*margin-top: -190px;*/
//   /*margin: 0 auto;*/
//   margin-top: 55px;
// }
.head_logo_img {
  /*height: 120px;*/
  background-size: 100% 100%;
}
.content {
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
  padding-top: 60px;
}
.content_title {
  width: 80%;
  height: 130px;
  margin-left: 10%;
  margin-top: -20px;
}
.content_title ul {
  width: 100%;
  height: 130px;

  list-style: none;
}
.content_title ul li {
  width: 19%;
  height: 120px;
  float: left;
  text-align: center;
  line-height: 100px;
  margin-left: 12px;
  background-image: url(~@/assets/images/caj/title_bg1.png);
  background-size: 100% 100%;
}
.list-item {
  // margin-left: ;
}
.active {
  background-image: url(~@/assets/images/caj/title_bg2.png) !important;
  color:#fff;
}
.content_head {
  width: 80%;
  height: 50px;
  margin-left: 10%;
  margin-top: -20px;
}
.content_head ul {
  width: 100%;
  height: 50px;
  list-style: none;
}
.content_head ul li {
  height: 50px;
  float: left;
  line-height: 50px;
  text-align: center;
  margin-left: 15px;
}
.content_line {
  width: 80%;
  height: 650px;
  margin-left: 10%;
  margin-top: -20px;
}
.out_ul {
  width: 100%;
  height: auto;
  list-style: none;
  font-size: 14px;
  color: #808080;
}
.out_ul_li {
  width: 98%;
  height: 80px;
  margin-top: 25px;
}
.in_ul {
  width: 100%;
  height: 80px;
  list-style: none;
  background-image: url(~@/assets/images/caj/line_li_bg.png);
  background-size: 100% 100%;
}
.in_ul_li {
  height: 80px;
  float: left;
  line-height: 60px;
  text-align: center;
  &:nth-child(1){
    padding-left: 140px;
  }
}
.download:hover {
  background-image: url(~@/assets/images/caj/download2.png);
}
.in_ul_li button {
  background-image: url(~@/assets/images/caj/download.png);
  width: 120px;
  height: 40px;
  background-size: 100% 100%;
  border: none;
}
.download {
  background-image: url(~@/assets/images/caj/download.png);
  margin-left: 60px;
  width: 120px;
  height: 36px;
  display: block;
  background-size: cover;
  margin-top: 10px;
}
</style>
