<template>
  <div class="common-top">
    <div class="clearfix">
      <img :src="loginInfo.header" alt="用户图像" @click="goUser()" />
      <p @click="goUser()">{{ loginInfo.member_realname }}</p>
      <span @click="nextLead(0)" class="guidance">操作指导</span>
    </div>
    <div class="cover" @click="nextLead(1)" v-if="step == 0">
      <!-- style="margin-top: 35%" -->
      <section class="_135editor" data-tools="135编辑器" data-id="97331">
        <section
          class="135brush"
          data-brushtype="text"
          style="
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            letter-spacing: 1.5px;
            line-height: 1.75em;
            color: rgb(255, 255, 255);
            padding: 6px 1em;
          "
        >
          讲堂360平台使用说明
        </section>
      </section>
      <section class="_135editor">
        <!-- style="text-align: center" -->
        <section>
          <iframe
            class="video_iframe rich_pages"
            data-vidtype="1"
            style="position: relative; z-index: 1; height: 35em; width: 31em"
            scrolling="no"
            src="http://img.jiangtang360.com/1666599415204.mp4"
            allowfullscreen="1"
            frameborder="0"
          ></iframe>
        </section>
      </section>
      <!-- src="https://v.qq.com/iframe/preview.html?vid=q3076x1mvgy&auto=0" -->
      <!-- height: 240px; width: 320px -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "CommonTop",
  data() {
    return {
      step: 1,
    };
  },
  methods: {
    goUser() {
      this.$router.push({ name: "User" });
    },
    nextLead(val) {
      this.step = val;
    },
  },
  computed: {
    ...mapState(["loginInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.common-top {
  position: relative;
  z-index: 100;
}
.clearfix {
  position: fixed;
  width: 100%;
  z-index: 100;
  height: 5rem;
  background-color: #fff;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  img {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    object-fit: contain;
  }
  p {
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    margin-left: 1rem;
  }
}
.cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.guidance {
  font-size: 1.56rem;
  color: #004cffad;
  margin-left: 33%;
  border: none;
  outline: none;
  z-index: 1;
  border-radius: 3px;
  // outline: 4px solid black;
  position: relative;
  overflow: hidden;
}
.guidance::before {
  content: '';
  position: absolute;
  background: red;
  width: 200%;
  height: 200%;
  z-index: -2;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  animation: rotate 3s infinite linear;
}
.guidance::after {
  content: '';
  position: absolute;
  background: white;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  left: 2px;
  top: 2px;
  border-radius: 3px;
  z-index: -1;

}
@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
</style>

