GCLS_Page_LC/src/components/learnCenter/HeaderOne.vue

<template>
  <div :class="type ? 'HeaderTwo' : 'HeaderOne'">
    <div>
      <span class="befor" @click="gohome">
        <img src="../../assets/learncenter/Frame3.png" alt="" />
      </span>
      <span v-if="classilfyID"> > </span>
      <span
        v-if="classilfyID"
        v-text="classilfyID == 'TEXTBOOK' ? '教材' : '课程'"
        @click="back"
      ></span>
      <span class="arrows" v-if="title"> > </span>
      <span @click="back" class="text">{{ title }}</span>
      <!-- <span class="text" v-if="type"> TEXTBOOK </span> -->

      <span class="arrows" v-if="text"> > </span>
      <span class="text" v-if="text">{{ name }}</span>
    </div>
    <div>
      <div :class="type ? 'Headseek' : 'seek'" @keydown="keyDownSeekData">
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="SeekName"
        >
        </el-input>
        <img
          v-if="!type"
          @click="gotoSeekResult"
          src="../../assets/learncenter/Group2149.png"
          alt=""
        />
        <img
          v-else
          @click="gotoSeekResult"
          src="../../assets/learncenter/Group 2148.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: [
    "type",
    "text",
    "title",
    "keycode",
    "changeKeycode",
    "name",
    "classilfyID",
  ],
  data() {
    //这里存放数据
    return {
      SeekName: "",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    keycode(newval, oldval) {
      this.SeekName = newval;
    },
  },
  //方法集合
  methods: {
    back() {
      this.$router.go(-1);
    },
    // 返回首页
    gohome() {
      this.$router.push("/");
    },
    keyDownSeekData(e) {
      if (e.keyCode == 13) {
        this.gotoSeekResult();
      } else {
        return;
      }
    },

    gotoSeekResult() {
      if (this.SeekName == "") {
        this.$message.warning("请输入内容");
        return;
      }
      // 如果不是在搜索结果页面就跳到搜索结果页面
      if (this.$route.name != "learnCenterSeekresult") {
        this.$router.push({
          path: "/learncenter/Seekresult",
          query: {
            keycode: this.SeekName,
            id: this.$route.query.id,
          },
        });
      } else {
        // 如果在就把关键字传给父组件进行搜索
        this.changeKeycode(this.SeekName);
        // 修改keycode 避免刷新丢失
        this.$router.replace({
          path: "/learncenter/Seekresult",
          query: {
            keycode: this.SeekName,
            id: this.$route.query.id,
          },
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.SeekName = this.keycode || "";
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.HeaderOne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 120px 0 24px;
  height: 64px;
  background: #fff;
  :first-child {
    display: flex;
    align-items: center;
    > span {
      margin-left: 15px;
      cursor: pointer;
    }
    .befor {
      img {
        width: 24px;
      }
    }
    .befor::before {
      content: "|";
      width: 6px;
      height: 24px;
      color: #ff9900;
      background: #ff9900;
      position: relative;
      right: 10px;
    }
    .text {
      font-weight: bold;
      font-size: 16px;
      color: #2c2c2c;
    }
    .arrows {
      opacity: 0.4;
    }
  }
  .Headseek,
  .seek {
    position: relative;
    img {
      width: 24px;
      position: absolute;
      right: 19px;
      top: 7px;
      cursor: pointer;
    }
  }
}
.HeaderTwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px 0 24px;
  height: 64px;
  background: none;
  color: white;
  :first-child {
    display: flex;
    align-items: center;
    > span {
      margin-left: 15px;
      cursor: pointer;
    }
    .befor {
      img {
        width: 24px;
      }
    }
    .befor::before {
      content: "|";
      width: 6px;
      height: 24px;
      color: #ff9900;
      background: #ff9900;
      position: relative;
      right: 10px;
    }
    .text {
      font-weight: bold;
      font-size: 16px;
      color: white;
    }
    .arrows {
      opacity: 0.4;
    }
  }

  .Headseek,
  .seek {
    position: relative;
    img {
      width: 24px;
      position: absolute;
      right: 19px;
      top: 7px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.opacity {
  .el-input__inner {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    color: white;
  }
  input::-webkit-input-placeholder {
    color: white;
    opacity: 0.6;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: white;
    opacity: 0.6;
  }
}
</style>
<style lang="scss">
.Headseek {
  .el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
  }
}
</style>