9/18 23:20

src/components/footerNav.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="wrapper-w" :style="{'background-image':'url('+imgUrl.foot+')'}">
+    <div>
+      <p>版权所有：朝阳区委社会工委区民政局</p>
+      <p>京ICP备19040879号 Copyright 2019-2029 www.cyteam.orz.cn All Rights Reserved</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data () {
+    return {
+      imgUrl: {
+        foot: require('../../static/img/foot.png')
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created () {},
+  mounted () {}
+}
+</script>
+
+<style lang='scss' scoped>
+#wrapper-w {
+  width: 1280px;
+  height: 227px !important;
+  background-size: 100% 100%;
+  background-color: rgba($color: #000000, $alpha: 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    display: inline-block;
+    height: 64px;
+    text-align: center;
+
+    & > p:first-child {
+      font-family: "MicrosoftYaHei";
+      font-size: 16px;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: -1px;
+      color: #ffffff;
+    }
+
+    & > p:last-child {
+      font-family: "MicrosoftYaHei";
+      font-size: 16px;
+      font-weight: bold;
+      font-stretch: normal;
+      line-height: 60px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/components/headerNav.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="wrapper" :style="{'background-image':'url('+imgUrl.home+')'}">
+    <div class="box">
+      <div @click="btn(0)" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
+      <div @click="btn(1)" :class="styleNum == 1 ? 'style': ''">社会组织信用信息查询</div>
+      <div @click="btn(2)" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
+      <div @click="btn(3)" :class="styleNum == 3 ? 'style': ''">个人中心</div>
+      <div>
+        <span @click="$jump('login')">登录</span> |
+        <span @click="$jump('registered')">注册</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ['index_num'],
+  data () {
+    return {
+      imgUrl: { home: require('../../static/img/home.png') },
+      styleNum: 0
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created () {
+    let sub = this.styleNum
+    sub = this.$props.index_num
+    this.styleNum = sub
+  },
+  mounted () {}
+}
+</script>
+
+<style lang='scss' scoped>
+#wrapper {
+  width: 1280px;
+  height: 389px;
+  box-sizing: border-box;
+  background-size: 100% 100%;
+  position: relative;
+
+  .box {
+    position: absolute;
+    bottom: 0%;
+    left: 0%;
+    width: 1280px;
+    height: 64px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    & > div {
+      font-family: "MicrosoftYaHei";
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #333333;
+      text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
+      cursor: pointer;
+    }
+
+    .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>