nav.vue

<template>
  <el-container id="nav">
    <el-aside width="10%" style="background-color:black;position:relative">
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router :collapse="false" text-color="white" background-color="rgba(0,0,0,0)" active-text-color="#ffd04b">
        <div style="height:20%;text-align:center">
          <img src="../assets/logo.png" alt="" style="width:100%;height:26%">
        </div>

        <el-menu-item index="/nav/search">
          <i class="icon i-search"></i>
          <span slot="title">检索合同</span>
        </el-menu-item>
        <el-menu-item index="/nav/contract/0" @click="contract" v-if="contract_show">
          <i class="icon i-file"></i>
          <span slot="title">合同信息</span>
        </el-menu-item>
        <el-menu-item index="/nav/user">
          <i class="icon i-user"></i>
          <span slot="title">个人管理</span>
        </el-menu-item>
        <el-menu-item index="/nav/manage" v-show="management">
          <i class="icon i-setting"></i>
          <span slot="title">后台管理</span>
        </el-menu-item>
        <el-menu-item index="" @click="exit">
          <i class="icon i-login"></i>
          <span slot="title">退出</span>
        </el-menu-item>
      </el-menu>
      <div class="poem">
        <div class="content" v-for="(item,index) in poem.sentences" :key="index" v-if="item">
          {{item}}
        </div>
        <div class="content" v-if="poem.author">
          丨丨{{poem.author}}
        </div>
      </div>
    </el-aside>

    <el-main :style="color">
      <keep-alive include="search">
        <router-view></router-view>
      </keep-alive>
    </el-main>
  </el-container>

</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        poem: {
          author: "",
          sentences: [,]
        },
        color: "background-color: lightblue",
        management: false,
        username: "",
        department: "",
        collapse: true,
        contract_show: true
      };
    },

    methods: {
      contract() {
        if (sessionStorage.getItem("modify")) {
          sessionStorage.removeItem("modify");
        }
      },
      exit() {
        this.$confirm("确认退出?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            sessionStorage.clear();
            this.$router.push({ path: "/" });
          })
          .catch(() => {});
      },
      get_poem() {
        this.$Axios.get("https://api.gushi.ci/all.json").then(res => {
          this.poem = res.data;
          console.log(this.poem.content);
          var reg = /[。；、，？！]/;
          var a = this.poem.content.split(reg);
          this.poem.sentences = a;
        });
      }
    },
    beforeCreate() {
      if (!sessionStorage.getItem("login_check")) {
        alert("请登录");
        this.$router.push({ path: "/" });
      }
    },
    created() {
      if (
        sessionStorage.getItem("user_roles") != "null" &&
        sessionStorage.getItem("user_roles")
      ) {
        var roles = JSON.parse(sessionStorage.getItem("user_roles"));
        for (let i = 0; i < roles.length; i++) {
          const e = roles[i];
          if (e.role_unid == "91d5185d47e3bad099e17570b0dd0ed2") {
          }
        }
      } else {
        this.contract_show = false;
      }
      if (sessionStorage.getItem("user_name") === "Admin") {
        this.management = true;
      }
      if (sessionStorage.getItem("manager")) {
        this.management = true;
        this.contract_show = true;
      }

      if (localStorage.getItem("color")) {
        var style = {};
        switch (localStorage.getItem("color")) {
          case "天空蓝":
            this.color = "background-color: lightblue";
            style.color = "lightblue";
            style.image = null;
            break;
          case "梦幻紫":
            this.color =
              "background-color:#8ec5fc;background-image:linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
            style.color = "#8ec5fc";
            style.image = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
            break;
          case "活力橙":
            this.color =
              "background-color:#FBAB7E;background-image:linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
            style.color = "#FBAB7E";
            style.image = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
            break;
          case "柠檬绿":
            this.color =
              "background-color:#F4D03F;background-image:linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
            style.color = "#F4D03F";
            style.image = "linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
            break;
          case "灰灰灰":
            this.color = "background-color:#f0f0f0";
            style.color = "#f0f0f0";
            style.image = null;
            break;
          case "小清新":
            this.color =
              "background-color:#FFDEE9;background-image:linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
            style.color = "#FFDEE9";
            style.image = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
            break;
        }
        localStorage.setItem("style", JSON.stringify(style));
      }
    },
    mounted() {
      // this.get_poem();
    }
  };
</script>

<style>
.el-container > .el-main {
  min-width: 1120px;
  text-align: center;
  padding: 0;
  overflow-y: scroll;
}
.el-container,
.el-aside {
  min-width: 167px;
  height: 100%;
}
.el-aside > .el-menu {
  height: 100%;
}
.poem {
  position: absolute;
  margin: auto;
  left: 15px;
  bottom: 50px;
}
.content {
  font-family: "隶书";
  color: white;
  display: inline-block;
  width: 25px;
  font-size: 20px;
  line-height: 24px;
  overflow: hidden;
  word-wrap: break-word;
}
</style>