showdoc-ouxuan/web_src/src/components/common/OxHeader.vue

<template>
  <div class="header">
    <div class="header-wrap">
      <div class="logo">
        <a href="/">
          <img src="static/images/logo.png" />
        </a>
      </div>
      <input type="checkbox" name id="mobile-menu-toggle" value />
      <label class="gh" for="mobile-menu-toggle">
        <span></span>
      </label>
      <div class="nav">
        <ul>
          <li><a href="http://www.ouxuanzhineng.cn/">首页</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/product">产品介绍</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/case">案例展示</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/cooperation">合作伙伴</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/news">新闻资讯</a></li>
          <li class="active"><a>帮助中心</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/solution">解决方案</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/plans">费用标准</a></li>
          <li><a href="http://www.ouxuanzhineng.cn/login">登录 / 注册</a></li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OxHeader',
  data() {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*reset*/
 html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/}
 body{ color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
html{zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;}
body{overflow-x: hidden; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
  a{ color:inherit; text-decoration: none;}
  a:hover{ color:#3e6ed4; text-decoration: none;}
  body{font-family: "Microsoft YaHei",sans-serif;}
  
/*手机下汉堡菜单*/
.gh {

	height:34px;
	width:34px;
	margin-right:30px;
	position:absolute;
	right: 0; top: 14px;
	transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	cursor:pointer;
	display: none;
}
.gh span {
	background-color: #fff;
	display: block;
	height: 2px;
	margin-top: -2px;
	position: relative;
	top: 50%;
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	width: 100%;
}

.gh span:after, .gh span:before {
	background-color: #fff;
	content: "";
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	width:100%;
}
.gh span:after {
	top:10px;
}
.gh span:before {
	top:-10px;
}
#mobile-menu-toggle{
	display: none;
}
#mobile-menu-toggle:checked + .gh span:after,
#mobile-menu-toggle:checked + .gh span:before {
	top: 0;
}
#mobile-menu-toggle:checked + .gh span:before {
	transform: translateY(0px) rotate(-45deg);
	-webkit-transform: translateY(0px) rotate(-45deg);
	-ms-transform: translateY(0px) rotate(-45deg);
}
#mobile-menu-toggle:checked + .gh span:after {
	transform: translateY(0px) rotate(45deg);
	-webkit-transform: translateY(0px) rotate(45deg);
	-ms-transform: translateY(0px) rotate(45deg);
}
#mobile-menu-toggle:checked + .gh span {
	background-color: transparent !important;
}
#mobile-menu-toggle:checked + .gh + .nav{
	max-height: 1000px;
}
 * {
  box-sizing: border-box;
}

.body,
body,
select,
input,
view,
text,
button,
textarea {
  font-family: 'PingFang SC', 'microsoft yahei', arial, 'helvetica neue', 'hiragino sans gb', sans-serif;
}

body,
.body {
  font-size: 14px;
  color: #fff;
  background-color: #fff;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  color: inherit;
}

a:hover {
  color: inherit;
}

img {
  max-width: 100%;
}

/*header*/
.header {
  /*margin-top: 50px; position: absolute;*/
  left: 0;
  right: 0;
  top: 0;

  /**/
  background: #009874;
  position: fixed;
  padding-top: 8px;
  padding-bottom: 4px;
  z-index: 99;
}

.header .logo {
  margin-left: 60px;
  float: left;
}

.header .logo img {
  width: 189px;
}

.header .nav {
  float: right;
  margin-right: 60px;
  font-weight: 400;
  margin-top: 10px;
}

.header .nav li {
  margin-left: 30px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  position: relative;
}

.header .nav li.active a,
.header .nav li a:hover {
  color: #000000;
}

.header .nav li.active::after {
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background: #000;
}

* {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  /*去掉浏览器默认样式*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

body,
.body {

  -webkit-text-size-adjust: 100%;
  /*关闭自动调整字体*/
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}


/*pad*/
img {
  max-width: 100%;
}

/* 平板--sm */
@media screen and (max-width:992px) {
  .gh {
    display: block;
  }

  .gh+.nav {
    height: auto;
    background: #fff;
    overflow: hidden;
    transition: 0.4s;
    padding: 0;
    max-height: 0;
    margin-right: 0;
    float: none;
    width: 100%;
    text-align: center;

  }

  .header .nav ul {
    padding: 20px 0;
  }

  .header .nav li {
    display: block;
    margin-left: 0;
  }

  .nav a {
    color: #000;
    display: block;
    padding: 10px 0;
  }

  .header .nav li.active::after {
    display: none;
  }

  .header .nav li.active a,
  .header .nav li a:hover {
    color: #369FFF;
  }

  .header {
    /*margin-top: 20px;*/
    padding-top: 8px;
  }

  .header .logo {
    margin-left: 20px;
  }
  }
</style>