first commit

src/components/HeaderNav.vue

@@ -0,0 +1,152 @@
+<template>
+  <div id="wrapper">
+    <!--  :style="{'background-image':'url('+imgUrl.home1+')'}"  -->
+    <div class="img-box">
+      <img :src="imgUrl.home1" alt />
+    </div>
+    <div class="box">
+      <div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
+      <div
+        @click="$jump('informationQuery',{id:1,text:'666'})"
+        :class="styleNum == 1 ? 'style': ''"
+      >社会组织信用信息查询</div>
+      <div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
+      <div @click="$jump('personalZte')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
+      <div>
+        <span v-if="enter" @click="$jump('login')">登录&nbsp;|&nbsp;</span>
+        <span v-if="enter" @click="$jump('registered')">注册</span>
+          <el-tooltip class="item" effect="dark" :content="name" placement="top">
+                   <span class="three" v-if="!enter">{{name}}</span>
+    </el-tooltip>
+ 
+        <span v-if="!enter" @click="quit()">&nbsp;|&nbsp;退出</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ['index_num'],
+  data () {
+    return {
+      imgUrl: {
+        home: require('../../static/img/home.png'),
+        home1: require('../../static/img/home1.png')
+      },
+      styleNum: 0,
+      enter: true,
+      name: ''
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    judge () {
+      if (sessionStorage.id) {
+        this.name = sessionStorage.name
+        this.enter = false
+      }
+    },
+    quit () {
+      this.$router.push({
+        name: 'homePage'
+      })
+      this.$message.success('退出成功!')
+      sessionStorage.clear()
+      localStorage.clear()
+      this.enter = true
+    }
+  },
+  created () {
+    let sub = this.styleNum
+    sub = this.$props.index_num
+    this.styleNum = sub
+    this.judge()
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+#wrapper {
+  min-width: 1280px;
+  // width: 100%;
+  height: 389px;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+
+  .img-box {
+    width: 100%;
+    height: 389px;
+    display: flex;
+    justify-content: center;
+
+    img {
+      // width: 100%;
+      height: 100%; 
+      cursor: default;
+      
+    }
+  }
+
+  .box {
+    position: absolute;
+    bottom: 0%;
+    left: 0%;
+    // width: 1280px;
+    width: 100%;
+    height: 63px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    & > div {
+      font-family: "MicrosoftYaHei";
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #333333;
+      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+      cursor: pointer;
+
+      &:last-child {
+        width: 120px;
+        display: flex;
+        align-items: center;
+
+        .three {
+          text-align: right;
+          display: inline-block;
+          width: 58px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+          cursor: default;
+        }
+      }
+    }
+
+    .style {
+      font-family: "MicrosoftYaHei";
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
+      padding: 21px;
+      background-color: #e60012;
+      border-radius: 10px;
+    }
+  }
+}
+</style>