Csslearn.vue

<template>
  <div class="container">
    <div class="box_left">
      <div style="padding: 10px">
        <h2>{{ msg }}{{ css_length }}</h2>
        <h2 style="font-size: 1em">选择：{{ now_title }}</h2>
      </div>
      <!-- 标题传递索引 -->
      <div class="css_title">
        <ul v-for="(item, index) in css_title" :key="index" class="ul_style">
          <div v-bind:class="[{ li_active: index == css_loc }, li_errorClass]">
            <li @click="get_ifreame(index)">
              {{ index + 1 }}.&nbsp;{{ item }}
            </li>
          </div>
        </ul>
      </div>
    </div>
    <div class="box_right">
      <!-- 全屏线框 -->
      <div class="fullscreen" @click="fullScreenFun">
        <span></span> {{ screenmsg }}
      </div>
      <!-- 绑定src参数 -->
      <iframe v-bind:src="ifreame_content" id="iframeId"></iframe>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Csslearn',
    data () {
        return {
            screenmsg: '全屏',
            msg: 'css练习：',
            css_length: '',
            // baseurl: 'http://127.0.0.1:1998',
            baseurl: '/api/',
            // baseurl: "http://yongma16.xyz/",
            css_title: [],
            css_path: [],
            css_loc: 0,
            ifreame_content: '',
            look_i: '浏览：',
            now_title: ''
        }
    },
    methods: {
        fullScreenFun: function () {
            window.parent.location.href = this.ifreame_content
            function launchFullscreen (element) {
                if (element.requestFullscreen) {
                    element.requestFullscreen()
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen()
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen()
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullScreen()
                }
            }

            launchFullscreen(document.documentElement)
            // launchFullscreen(document.getElementById('iframeId')) // 某个元素进入全屏
            window.parent.location.href = this.ifreame_content
        },
        li_errorClass: function () {
        },
        get_ifreame: function (index) {
            let that = this // that
            that.ifreame_content = that.css_path[index] // 路径
            that.css_loc = index // 索引传递
            that.now_title = index + 1 + '. ' + that.css_title[index] // 标题
        },
        getCss: function () {
            try {
                document.getElementById('mainappid').style.padding = '0'
                document.getElementById('mainappid').style.margin = '0'
            } catch (e) {
                throw Error(e)
            }

            let that = this
            that.$axios
                .get(that.baseurl + 'css/')
                .then((res) => {
                    let getdata = res.data
                    let csspath = getdata.path
                    let csstitle = getdata.title
                    csspath.map((o) => {
                        that.css_path.push(o)
                    })
                    // 标题传递
                    // eslint-disable-next-line camelcase
                    that.css_title = csstitle
                    // 传递第一个路html路径
                    that.ifreame_content = that.css_path[0]
                    // 传递长度
                    that.css_length = csstitle.length
                    that.now_title = csstitle.length > 0 ? 1 + '. ' + csstitle[0] : '' // 标题加序号
                })
                .catch((error) => {
                    throw Error(error)
                })
        }
    },
    mounted () {
        let that = this
        that.getCss() // get请求
    },
    created () {
        let that = this
        window.onload = that.getCss // get请求
    }
}
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box_left {
  position: relative;
  left: 0;
  width: 20%;
  height: 100%;
  background: #fff;
  transition: 0.5s;
  overflow: auto;
  /* 超出部分 不溢出 */
}
/* 滚动条的隐藏 css3特性 */
.box_left::-webkit-scrollbar {
  display: none;
}
/* .box_left:hover {
  background: #646464;
} */
.box_left h2 {
  color: rgb(0, 140, 255);
  text-align: left;
  line-height: 20px;
}
.box_left:hover h2 {
  color: rgb(0, 140, 255);
}
.box_right {
  position: relative;
  right: 0;
  width: 100%;
  height: 100%;
  background: coral;
}
.box_right iframe {
  position: relative;
  width: 100%;
  height: 100%;
  appearance: none;
  border: none;
  border-left: 3px solid rgb(248, 183, 157);
}
.css_title {
  text-align: center;
  width: 100%;
}
.ul_style {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-content: center;
  /* 取消头部 */
  list-style: none;
  appearance: none;
  /* border:1px solid rgb(253, 135, 0); */
  background: transparent;
  padding: 10px;
  margin: 2px;
  /* transition: 0.5s; */
}
.ul_style:hover {
  background: rgb(0, 140, 255);
  box-shadow: 0 2px 20px rgb(0, 140, 255);
}
.ul_style li {
  appearance: none;
  position: absolute;
  text-align: left;
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: rgb(252, 118, 8);
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  /* transition: 0.5s; */
}

.li_active li {
  appearance: none;
  position: relative;
  text-align: left;
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: rgb(0, 140, 255);
  text-shadow: 0 5px 20px #fff;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  /* transition: 0.5s; */
}
.li_errorClass li {
  appearance: none;
  position: absolute;
  text-align: left;
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: rgb(0, 140, 255);
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  /* transition: 0.5s; */
}
.box_left:hover .ul_style:hover li:hover {
  font-weight: bolder;
  color: #fff;
  /* box-shadow: 0 2px 20px #fff; */
  cursor: pointer;
  /* border:1px solid rgb(253, 135, 0); */
}

.box_left:hover .ul_style li {
  font-weight: bolder;
  /* color: rgb(252, 118, 8); */
  /* color: rgb(255, 255, 255); */
  /* box-shadow: 0 2px 20px #fff; */
  cursor: pointer;
  /* border:1px solid rgb(253, 135, 0); */
}

/* 全屏线框 */
.fullscreen {
  position: fixed;
  width: 140px;
  height: 50px;
  float: right;
  line-height: 50px;
  text-align: center;
  top: 10%;
  right: 10px;
  z-index: 1;
  background: #262626;
  color: #7efff5;
  font-weight: bold;
  text-shadow: 0 10px 20px #7efff5;
  cursor: pointer;
  box-sizing: border-box;
}
.fullscreen::before,
.fullscreen::after,
span::before,
span::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: #7efff5;
  mix-blend-mode: hue;
  transition: 1s;
}

.fullscreen::before {
  top: -2px;
  left: -2px;
}

.fullscreen::after {
  top: -2px;
  right: -2px;
}

span::before {
  bottom: -2px;
  left: -2px;
}

span::after {
  bottom: -2px;
  right: -2px;
}

/* 上下左右 */
.fullscreen:hover::before,
.fullscreen:hover::after,
.fullscreen:hover span::before,
.fullscreen:hover span::after {
  width: calc(140px / 2);
  height: calc(50px / 2);
  box-shadow: 0 5px 20px #7eabff;
}
@media screen and (max-width: 450px) {
  .container {
    position: relative;
    display: inline-block;
    /* box-sizing: border-box; */
  }
  .box_left {
    position: relative;
    width: 100%;
    height: 50%;
  }
  .box_right {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>