pointsMall/src/App.vue

<template>
  <div id="app">
    <div class="view-container">
      <AppHeader></AppHeader>
      <router-view />
    </div>
    
  </div>
</template>
<script lang="ts">
import AppHeader from '@/components/AppHeader.vue';
export default {
  name: 'app',
  components: {
    AppHeader,
  },
  data() {
    return {
      isGray: false,
    };
  },
  created() {
    
  },
}
</script>
<style>
.view-container{
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.header-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  height: 5rem;
  z-index: 250;
}

.header-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 80px;
}

nav a {
  font-weight: bold;
  color: #515767;
}

nav a.route-active {
  color: #1e80ff;
}


.header-item i {
  font-size: 30px;
  margin-bottom: 5px;
}
</style>