lanxin/js/components/header.js

import language from "../common/language.js";
import Service from "../common/service.js";
new Vue({
  el: "#header",
  data: {
    current_language: "chs",
    path_list: [
      { name: "首页", path: "/index.html" },
      { name: "关于我们", path: "/about.html" },
      { name: "产品中心", path: "/product.html" },
      { name: "新闻资讯", path: "/news.html" },
      { name: "加入我们", path: "/join.html" },
      // { name: "联系我们", path: "/contact.html" },
    ],
    current_path: "/index.html",
    baseURL: Service.baseURL,
    config: {},
    logo_path: "",
  },
  mounted() {
    this.current_path = location.pathname;
    this.current_language = localStorage.getItem("language");
    if (!this.current_language) {
      this.changeLanguage("chs");
    }
    this.getConfig();
  },
  methods: {
    text(val) {
      return language[val][this.current_language];
    },
    changeLanguage(val) {
      localStorage.setItem("language", val);
      history.go(0);
    },
    listerHeader() {
      this.setHeaderStyle();
      window.addEventListener("scroll", () => {
        this.setHeaderStyle();
      });
    },
    setHeaderStyle() {
      let height = 0;
      if (
        this.current_path.includes("detail") ||
        this.current_path == "/agreement.html"
      ) {
        // height =
        //   (window.innerWidth / window.screen.availWidth) *
        //   (document.body.clientHeight - 84);
      } else if (this.current_path.includes("./index.html")) {
        height = (window.innerWidth / window.screen.availWidth) * (580 - 84);
      } else {
        height = (window.innerWidth / window.screen.availWidth) * (480 - 84);
      }
      const scrollY = window.scrollY,
        headerStyle = document.querySelector("#header").style;
      headerStyle.background = scrollY >= height ? "#fff" : "transparent";
      headerStyle.setProperty(
        "--color",
        scrollY >= height ? "#222222" : "#fff"
      );
      this.logo_path =
        scrollY >= height
          ? this.baseURL + this.config.web_logo_color
          : this.baseURL + this.config.web_logo;
    },
    getConfig() {
      Service.get_site()
        .then((res) => {
          this.config = res;
          this.logo_path = this.baseURL + res.web_logo;
          this.listerHeader();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
});