App.vue

<template>
  <div id="app">
    <el-container>
      <el-aside v-if="navigate_flag ? false : true">
        <router-link to="/">
          <svg
            class="icon"
            aria-hidden="true"
            style="width: auto; height: auto; padding-top: 5%"
          >
            <use xlink:href="#iconshejitouxiangai"></use>
          </svg>
        </router-link>
        <el-menu
          default-active=""
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">开发人员</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="1-1">
                <template slot="title">yma16</template>
                <el-menu-item index="1-1-1">stay hungry</el-menu-item>
                <a @click="jumpToEcharts">
                  <el-menu-item index="1-1-2">echarts</el-menu-item>
                </a>
                <a @click="jumpToAdmin">
                  <el-menu-item index="1-1-3">superuser</el-menu-item>
                </a>
              </el-submenu>
              <el-submenu index="1-2">
                <template slot="title">location</template>
                <el-menu-item index="1-2-1" @click="jumpRouter('Home')"
                  >guiyang</el-menu-item
                >
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting"></i>管理后台</template
            >
            <el-menu-item-group>
              <el-submenu index="2-1">
                <template slot="title">登录</template>
              </el-submenu>
              <el-submenu index="2-2">
                <template slot="title">注册</template>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-chat-line-round" :click="onlineWebsocket"></i
              >线上聊天</template
            >
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <a v-on:click="changeNavigate" style="cursor: pointer"
            ><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;<span
              style="font-weight: bold"
              >{{ authSlogan }}</span
            ></a
          >
          <i style="font-weight: bold; font-style: normal" v-if="chat_flag"
            >&nbsp;&nbsp;在线聊天室</i
          >
          <div style="float: right; overflow: hidden; align-height: 60px">
            <a href="https://codechina.csdn.net/qq_38870145/myblogvue"
              ><img
                src="@/assets/img/code-china.png"
                style="cursor: pointer; height: 24px"
            /></a>
            <a href="https://github.com/yongma16"
              ><img
                src="@/assets/img/github-fill.png"
                style="cursor: pointer; height: 24px"
            /></a>
          </div>

          <!-- <a v-on:click="changeNavigate"><i class="el-icon-menu"></i></a> -->
        </el-header>

        <el-main id="mainappid" class="mainappclass">
          <!-- 路由 -->
          <router-view />
        </el-main>

        <el-footer>
          <div class="design-footer">
            <div class="footer_font">
              <div style="float: left"></div>
              <span>
                Copyright &copy;2022 yongma16.xyz
                个人空间&nbsp;&nbsp;&nbsp;</span
              >
              <span> 足迹:{{ readCount }}&nbsp;&nbsp;&nbsp;</span>
              <span
                ><img
                  src="@/assets/img/badge.png"
                  style="
                    cursor: pointer;
                    height: 16px;
                    margin-bottom: 0;
                    padding-bottom: 0;
                  "
                />&nbsp;&nbsp;<span style="cursor: pointer" @click="jumpIpDns"
                  >黔ICP备20001426号-1</span
                ></span
              >
            </div>
            <!--            <div></div>-->
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      authSlogan: 'yma16',
      chat_flag: false,
      msg: 'yma16',
      navigate_flag: true,
      value: new Date(),
      baseUrl: '/api/',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      url: '/image/logo/logo.jpg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
      readCount: 0
    }
  },
  mounted () {
    this.addReadCountFun()
    this.readCountFun()
  },
  methods: {
    jumpIpDns: function () {
      try {
        window.open('https://beian.miit.gov.cn')
      } catch (r) {
        window.location.href = 'https://beian.miit.gov.cn'
        throw Error(r)
      }
    },
    addReadCountFun: function () {
      const that = this
      let clientIp = '未知'
      try {
        console.log('ip待定')
      } catch (e) {
        console.log(e)
      }
      that.$axios
        .post(this.baseUrl + 'count/add/', {
          ip: clientIp
        })
        .then((res) => {
          console.log(res)
        })
        .catch((e) => {
          throw Error(e)
        })
    },
    readCountFun: function () {
      let that = this
      that.$axios
        .get(that.baseUrl + 'count/get/')
        .then((res) => {
          this.readCount = res.data.num
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeNavigate: function () {
      this.navigate_flag = !this.navigate_flag // 取反
    },

    handleOpen (key, keyPath) {
      console.log(key, keyPath)
      if (key === '3') {
        console.log('打开3号')
        this.chat_flag = true
        this.onlineWebsocket() // 调用跳转
      }
      if (key === '2-1') {
        this.chat_flag = false
        this.loginAction() // 调用跳转
      }
      if (key === '2-2') {
        this.chat_flag = false
        this.registerAction() // 调用跳转
      }
    },
    handleClose (key, keyPath) {
      console.info(key, keyPath)
      if (key === '3') {
        this.chat_flag = false
      }
    },
    jumpRouter: function (params) {
      this.$router
        .push({
          name: `${params}`
        })
        .catch((error) => {
          console.log(error)
        })
    },
    onlineWebsocket: function () {
      // console.log(this.$router);
      this.$router
        .push({
          path: '/onlinewebsocket'
        })
        .catch((error) => {
          throw Error(error)
        })
    },
    jumpToEcharts: function () {
      // console.log(this.$router);
      this.$router
        .push({
          path: '/bilicom'
        })
        .catch((error) => {
          console.log(error)
        })
    },
    jumpToAdmin: function () {
      this.$router
        .push({
          path: '/mavoneditor'
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loginAction: function () {
      this.$router
        .push({
          path: '/login'
        })
        .catch((error) => {
          console.log(error)
        })
    },
    registerAction: function () {
      this.$router
        .push({
          path: '/register'
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
html,
body,
#app,
.el-container {
  margin: 0px;
  padding: 0%;
  border: 0px;
  height: 100%;
  /* background: url(../myblog_static/utils/fx_background/image/gg.jpg) center top no-repeat; */
  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
}

body {
  background-color: #2f214b;
  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
}

.el-header {
  background-color: #d4beb4;
  /* color: rgb(48, 76, 77); */
  text-align: left;
  line-height: 60px;
  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
}

.design-footer {
  position: relative;
  margin-top: 20px;
}

.footer_font {
  position: relative;
  /* height: 100%; */
}

.el-footer {
  height: 100%;
  background-color: #bba8a4;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
  box-sizing: border-box;
}

.el-aside {
  background-color: #be9a90;
  color: #333;
  text-align: center;
  line-height: 80px;
  width: 80px;
  min-height: 60px;
}

.activeleft {
  transform: translateX(-100vw);
  /* 左移100 */
}

.activeright {
  transform: translateX(100vw);
  /* 右移100 */
}

.el-main {
  /* background-color: #e9eef3; */
  text-align: left;
  opacity: 1;
  /* background: url(../myblog_static/utils/fx_background/image/gg.jpg) center top no-repeat; */
  margin: 0;
  padding: 0;
}

.mainappclass {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.mainappclass::-webkit-scrollbar {
  display: none;
}

body > .el-container {
  color: #475669;
  opacity: 0.5;
  padding: 0%;
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.5;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  /* background-image: url("/image/navigation/previewFix.jpg"); */
  transition-duration: 2s;
}

.el-carousel__item:nth-child(2n + 1) {
  /* background-image: url("/image/navigation/original.jpg"); */
  transition-duration: 2s;
}

.footerclass {
  position: relative;
  display: flex;
}

.midfooter {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateX(-50%, -50%);
}

.heart {
  width: 30px;
  height: 30px;
  position: relative;
  background: pink;
  transform: rotate(45deg);
  animation-name: change;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.heart::before {
  content: "";
  width: 30px;
  height: 30px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  transform: translateX(-15px);
}

.heart::after {
  content: "";
  width: 30px;
  height: 30px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  /* 定位 */
  transform: translate(0px, -15px);
  /* transform: translateX(-100px); */
}

@keyframes change {
  0% {
    transform: rotate(45deg) scale(0.25);
  }

  50% {
    transform: rotate(45deg) scale(0.5);
  }

  100% {
    transform: rotate(45deg) scale(0.25);
  }
}

@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
</style>