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>
import axios from "axios";
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 () {
      console.log(0);
    },
    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 {
        console.log(
          "domMain",
          document.getElementById("mainappid"),
          document.getElementById("mainappid").style
        );
        document.getElementById("mainappid").style.padding = "0";
        document.getElementById("mainappid").style.margin = "0";
      } catch (e) {
        console.log("e", e);
      }

      let that = this;
      axios
        .get(that.baseurl + "css/")
        .then((res) => {
          console.log("get返回", res);
          let getdata = res.data;
          let csspath = getdata.path;
          let csstitle = getdata.title;
          console.log(csspath, csstitle);
          csspath.map((o) => {
            let temp = that.baseurl + o;
            that.css_path.push(temp);
          });
          // 标题传递
          // eslint-disable-next-line camelcase
          that.css_title = csstitle;
          console.log(that.css_path, that.css_title);
          // 传递第一个路html路径
          that.ifreame_content = that.css_path[0];
          // 传递长度
          that.css_length = csstitle.length;
          that.now_title = csstitle.length > 0 ? 1 + ". " + csstitle[0] : ""; // 标题加序号
        })
        .catch((error) => {
          console.log("get错误！", 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>