App.vue

<template>
  <div id="app">
    <el-container>
      <el-aside v-if="!navigate_flag">
        <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;display: flex;justify-items: center;align-items:center;word-spacing: 16px;">
            <span style="cursor: pointer; width: 80px" v-if="currentUserName">
              <el-popover
                trigger="click">
                <span @click="loginOut" style="cursor: pointer; height: 16px">注销</span>
  <template slot="reference">
    <i class="el-icon-user" style="font-weight: 300">{{currentUserName}}</i>
  </template>
</el-popover>

            </span>
            <a href="https://codechina.csdn.net/qq_38870145/myblogvue"
              ><img
                src="@/assets/img/code-china.png"
                style="cursor: pointer; height: 16px"
            /></a>

            <a href="https://github.com/yongma16"
              ><img
                src="@/assets/img/github-fill.png"
                style="cursor: pointer; height: 16px"
            /></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;{{startTime}} 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>
import store from '@/store'
export default {
    name: 'App',
    data () {
        return {
            // 开始时间
            startTime: '',
            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
        }
    },
    computed: {
        currentUserName: function () {
            return store.state.user.userInfo && store.state.user.userInfo.name
                ? store.state.user.userInfo.name
                : ''
        }
    },
    mounted () {
        this.initStartTime()
        this.addReadCountFun()
        this.readCountFun()
    },
    methods: {
        initStartTime () {
            const now = new Date()
            const year = now.getFullYear()
            this.startTime = `2021-${year}`
        },
        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.warn('ip待定')
            } catch (e) {
                console.warn(e)
            }
            that.$axios
                .post(this.baseUrl + 'count/add/', {
                    ip: clientIp
                })
                .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) => {
                    throw Error(error)
                })
        },
        changeNavigate: function () {
            this.navigate_flag = !this.navigate_flag // 取反
        },

        handleOpen (key, keyPath) {
            if (key === '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) => {
                    throw Error(error)
                })
        },
        onlineWebsocket: function () {
            this.$router
                .push({
                    path: '/onlinewebsocket'
                })
                .catch((error) => {
                    throw Error(error)
                })
        },
        jumpToEcharts: function () {
            this.$router
                .push({
                    path: '/bilicom'
                })
                .catch((error) => {
                    throw Error(error)
                })
        },
        jumpToAdmin: function () {
            this.$router
                .push({
                    path: '/mavoneditor'
                })
                .catch((error) => {
                    throw Error(error)
                })
        },
        loginAction: function () {
            this.$router
                .push({
                    path: '/login'
                })
                .catch((error) => {
                    throw Error(error)
                })
        },
        registerAction: function () {
            this.$router
                .push({
                    path: '/register'
                })
                .catch((error) => {
                    throw Error(error)
                })
        },
        loginOut () {
            localStorage.removeItem('yma16siteUserInfo')
            window.location.reload()
        }
    }
}
</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);
  }
}
::-webkit-scrollbar {
  width: 10px;
  /* height:5px; */
  /* display: none; */
}
::-webkit-scrollbar-track {
  background: rgba(226, 247, 255, 0.5);
  border-radius: 2px;
  /* display: none; */
}
::-webkit-scrollbar-track-piece {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  /* display: none; */
}
::-webkit-scrollbar-thumb {
  background: #ff995e;
  height: 2px;
  border-radius: 2px;
  /* display: none; */
}
@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
</style>