ducha-qianduan/src/views/pt.vue

<template>
  <div class="header">
    <!-- 大盒子 -->
    <div class="box">
      <!-- 头部区域 -->
      <div class="tou">
        <span>12313465465456465</span>
      </div>
      <!-- 主体区域 -->
      <div class="centen">
        <!-- 左面盒子 -->
        <div class="boxx">
          <ul class="ul">
            <li>
              <div class="demo active" v-on:click="doThis">
                <img src="../images/dj.png" alt />
                <br />
                <a href="#" class="a">基 层 登 统 计</a>
              </div>
            </li>
            <li>
              <div class="demo active" id="a1" data-url="/diary?ref=addtabs">
                <img src="../images/dy.png" alt />
                <br />
                <a href="#" class="a">集 中 文 印</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="gongzuofun" data-url="/diary?ref=addtabs">
                <img src="../images/gz.png" alt />
                <br />
                <a href="#" class="a">工 作 安 排</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="guizhangfun"  data-url="/diary?ref=addtabs">
                <img src="../images/zd.png" alt />
                <br />
                <a href="#" class="a">规 章 制 度</a>
              </div>
            </li>
            <li>
              <div class="demo active" data-url="/diary?ref=addtabs">
                <img src="../images/fx.png" alt />
                <br />
                <a href="#" class="a">态 势 分 析</a>
              </div>
            </li>
          </ul>
          <hr />
          <ul class="ul">
            <li>
              <div class="demo active" v-on:click="zhanbeifun" data-url="/diary?ref=addtabs">
                <img src="../images/zb.png" alt />
                <br />
                <a href="#" class="a">战备值班</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="jianchafun" data-url="/diary?ref=addtabs">
                <img src="../images/jc.png" alt />
                <br />
                <a href="#" class="a">检查督导</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="renyuanfun" data-url="/diary?ref=addtabs">
                <img src="../images/ry.png" alt />
                <br />
                <a href="#" class="a">人员进出</a>
              </div>
            </li>
            <li>
              <div class="demo active" data-url="/diary?ref=addtabs">
                <img src="../images/af.png" alt />
                <br />
                <a href="#" class="a">安防监控</a>
              </div>
            </li>
            <li>
              <div class="demo active" data-url="/diary?ref=addtabs">
                <img src="../images/ag.png" alt />
                <br />
                <a href="#" class="a">门岗管理</a>
              </div>
            </li>
            <li>
              <div class="demo active" id="a2" data-url="/diary?ref=addtabs">
                <img src="../images/mj.png" alt />
                <br />
                <a href="#" class="a">门禁管理</a>
              </div>
            </li>
          </ul>
          <hr />
          <ul class="ul">
            <li>
              <div class="demo active" data-url="/diary?ref=addtabs">
                <img src="../images/sx.png" alt />
                <br />
                <a href="#" class="a">思想政治</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="renlifun" data-url="/diary?ref=addtabs">
                <img src="../images/rl.png" alt />
                <br />
                <a href="#" class="a">人力资源</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="xitongfun" data-url="/diary?ref=addtabs">
                <img src="../images/xt.png" alt />
                <br />
                <a href="#" class="a">系统管理</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="gongju" data-url="/diary?ref=addtabs">
                <img src="../images/xt.png" alt />
                <br />
                <a href="#" class="a">系统工具</a>
              </div>
            </li>
          </ul>
          <hr />
          <ul class="ul">
            <li>
              <div class="demo active" id="a3" v-on:click="junchefun">
                <img src="../images/cart.png" alt />
                <br />
                <a href="#" class="a">车辆管理</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="yingfangfun" data-url="/diary?ref=addtabs">
                <img src="../images/git.png" alt />
                <br />
                <a href="#" class="a">营房管理</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="yingjufun" data-url="/diary?ref=addtabs">
                <img src="../images/gl.png" alt />
                <br />
                <a href="#" class="a">营具管理</a>
              </div>
            </li>
            <li>
              <div class="demo active" v-on:click="yiliaofun" data-url="/diary?ref=addtabs">
                <img src="../images/yl.png" alt />
                <br />
                <a href="#" class="a">医疗卫生管理</a>
              </div>
            </li>
          </ul>
        </div>
        <!-- 右面盒子 -->
        <div class="rigin">
          <div class="num1">
            <div class="num2">
              <img src="../images/db.png" alt />
              <span>待办事项</span>
            </div>
            <table class="table">
              <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
            </table>
          </div>
          <div class="num1">
            <div class="num2">
              <img src="../images/db.png" alt />
              <span>待办事项</span>
            </div>
            <table class="table">
              <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
            </table>
          </div>
          <div class="num1">
            <div class="num2">
              <img src="../images/db.png" alt />
              <span>待办事项</span>
            </div>
            <table class="table">
              <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
              <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    doThis() {
      this.$router
        .push({ path: "/index", query: { name: "/grassrootsregistration" } })
        .catch(() => {});
    },
    zhanbeifun() {
      this.$router
        .push({ path: "/index", query: { name: "/combatduty" } })
        .catch(() => {});
    },
    renlifun() {
      this.$router
        .push({ path: "/index", query: { name: "/peopleManage" } })
        .catch(() => {});
    },
    renyuanfun() {
      this.$router
        .push({ path: "/index", query: { name: "/peopleChuRu" } })
        .catch(() => {});
    },
    yingfangfun() {
      this.$router
        .push({ path: "/index", query: { name: "/barracksManagement" } })
        .catch(() => {});
    },
    junchefun() {
      this.$router
        .push({ path: "/index", query: { name: "/militaryvehicleManagement" } })
        .catch(() => {});
    },
    gongzuofun() {
      this.$router
        .push({ path: "/index", query: { name: "/workingArrangements" } })
        .catch(() => {});
    },
    guizhangfun(){
      this.$router
        .push({ path: "/index", query: { name: "/regulations" } })
        .catch(() => {});
    },
    yiliaofun() {
      this.$router
        .push({ path: "/index", query: { name: "/medicalhealth" } })
        .catch(() => {});
    },
    jianchafun() {
      this.$router
        .push({ path: "/index", query: { name: "/bdglregular" } })
        .catch(() => {});
    },
    yingjufun() {
      this.$router
        .push({ path: "/index", query: { name: "/materialManagement" } })
        .catch(() => {});
    },
    xitongfun() {
      this.$router
        .push({ path: "/index", query: { name: "/system" } })
        .catch(() => {});
    },
    gongju() {
      this.$router
        .push({ path: "/index", query: { name: "/tool" } })
        .catch(() => {});
    },
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
  width: 100%;
}
li {
  list-style: none;
}
.header {
  height: 100%;
  width: 100%;
  overflow: auto;
  background: url("../images/背景1.png") no-repeat center;
  background-size: 100% 100%;
}
.tou {
  color: #fff;
  position: relative;
  height: 120px;
  background: url("../images/顶部.png") no-repeat center;
  background-size: cover;
}
.tou span {
  position: absolute;
  right: 143px;
  top: 55px;
}
.in1 {
  padding: 0 84px;
}
.demo {
  color: #fff;
  width: 107px;
  height: 123px;
  background: url("../images/tx.png") no-repeat;
  text-align: center;
  line-height: 64px;
  /* margin: 0 80px; */
}
.demo img {
  margin-top: 36px;
}
.ul {
  display: flex;
  margin-bottom: 62px;
}
.ul li {
  margin: 0 48px;
  cursor: pointer;
}
.boxx {
  padding: 0 0 0 80px;
  flex: 1;
}
hr {
  height: 2px;
  background-color: #06668a;
  border: none;
  margin-bottom: 20px;
}
.centen {
  display: flex;
}
.num1 {
  color: #fff;
  width: 529px;
  height: 244px;
  background: url("../images/rd.png") no-repeat;
  margin-bottom: 20px;
  padding: 22px 20px 0px 20px;
}
.num1 img {
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  margin-right: 10px;
}
.rigin {
  flex: 1;
  margin-left: 52px;
}
.table {
  margin-top: 20px;
  width: 492px;
  /* height: 182px; */
  /* 去除中间的线 */
  border-collapse: collapse;
  border-spacing: 0;
}
.table tr td {
  height: 28px;
  text-align: center;
}
.table tr:nth-child(even) {
  background-color: rgba(39, 104, 136, 0.2);
}
.table tr:hover {
  background: rgba(0, 246, 255, 0.3);
}
#a2 img {
  margin-top: 40px;
}
#a1 img {
  margin-top: 40px;
}
#a3 img {
  margin-top: 43px;
}
</style>