nacxj/src/App.vue

<template>
  <div id="app">
    <div class="header">
      <div style="text-align: center;"><img src="../public/images/logo.png"><img src="../public/images/logo-head.png" alt=""/></div>
      <!-- <el-divider></el-divider> -->
      <img
        src="../public/images/head-line.png" style="height: 2px;"
        alt=""
    />
    </div>
    <div class="right-banner" v-if="this.$route.path != '/'">
      <ul>
        <li @click="goToMain" style="background-image: url(images/btn-index.png);">首页</li>
        <li @click="goToBack" style="background-image: url(images/btn-back.png);">返回</li>
      </ul>
    </div>
    <div id="secondText" style="font-size:1.2rem;" v-if="this.$route.path != '/'">(120)</div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    goToMain() {
      sessionStorage.removeItem("policiesPage");
      this.$router.push("/");
    },
    goToBack() {
      this.$router.back();
    }
  },
  mounted() {
    this.url = 'https://zwykb.cq.gov.cn/'
  }
};
</script>

<style>
/*初始化*/
/*清除自带样式*/
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  font-family: Source Han Serif SC;
}

textarea,
button {
  resize: none;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

/*头部*/
/*头部样式*/
.header {
  padding-top: 1.25rem;
  height: 11.1875rem;
  display: flex;
  flex-direction: column;
}

.header img {
  margin: auto;
}

/*中间共同样式*/
.content {
  width: 87.5rem;
  margin: 0 auto;
}

.content-title {
  display: flex;
}

.content-title img {
  width: 3rem;
  height: 3.0625rem;
  margin: 0.625rem 1.25rem 0 0;
}

.content-title span {
  font-size: 2.5rem;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0.125rem 0.1875rem 0px #092B5A;
}

.content-content {
  height: 48.375rem;
  border: 0.0625rem solid #B3D4FF;
  border-radius: 1.25rem;
  margin-top: 0.9375rem;
}

.content-banner {
  margin: 2.8125rem auto;
}

.taps-title {
  margin: auto;
  width: 74.375rem;
  display: flex;
  justify-content: space-between;
}

.taps-title li {
  width: 14.375rem;
  height: 3.75rem;
  line-height: 3.75rem;
  background: #1A65B2;
  font-size: 1.125rem;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.0625rem;
}

.taps-title .click {
  background: #CD9D64;
  font-weight: 800;
}

/*右侧按钮*/
.right-banner {
  position: fixed;
  right: 0;
  bottom: 6.875rem;
}

.right-banner li {
  background-size: 100% 100%;
  width: 12rem;
  height: 5.8125rem;
  line-height: 5.8125rem;
  text-indent: 5.625rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.3125rem;
}

/*倒计时*/
#secondText {
  position: fixed;
  width: 3.125rem;
  height: 3.125rem;
  top: 1.25rem;
  right: 1.25rem;
  color: #b3d4ff;
}

/*隐藏滚动条*/
</style>