网页表头动态配置

src/components/v-header.vue

@@ -1,135 +1,149 @@
 <template>
-	<!--头部-->
-	<div class="header">
-		<Clock></Clock>
-		<!--中间LOGO -->
-		<a class="title" href="/integrated/index" >
-			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-left2.png" /> -->
-			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />通榆县乡村振兴监管平台 {{titlename}}
-			</h3>
-			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-right2.png" /> -->
-		</a>
+  <!--头部-->
+  <div class="header">
+    <Clock></Clock>
+    <!--中间LOGO -->
+    <a class="title" href="/integrated/index">
+      <!-- <img src="@/assets/images/integrated/bigdata-header-nav-left2.png" /> -->
+      <h3><img class="logo" src="@/assets/images/integrated/logo-small.png"/>{{ systemTitle.title }} {{ titlename }}
+      </h3>
+      <!-- <img src="@/assets/images/integrated/bigdata-header-nav-right2.png" /> -->
+    </a>
 
-		<!--中间导航-->
-		<div class="bignav">
-			<img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
-			<router-link v-for="(navbar,index) in navbar" :key="index+'1'" :to="navbar.path"  class="bignav-list"
-				exact>
-				<a>{{navbar.meta.title}}</a>
-			</router-link>
-			<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
-		</div>
-		<!-- 右侧5个中心 -->
-		<VfastMenu></VfastMenu>
-	</div>
+    <!--中间导航-->
+    <div class="bignav">
+      <img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
+      <router-link v-for="(navbar,index) in navbar" :key="index+'1'" :to="navbar.path" class="bignav-list"
+                   exact>
+        <a>{{ navbar.meta.title }}</a>
+      </router-link>
+      <img src="@/assets/images/integrated/bigdata-header-nav-right.png"/>
+    </div>
+    <!-- 右侧5个中心 -->
+    <VfastMenu></VfastMenu>
+  </div>
 </template>
 
 <script>
-	import {constantRoutes} from '@/router/index'//navbar导航引用了router路由的数组
-	import Clock from '@/components/clock.vue' // 时钟+天气
-	import VfastMenu from '@/components/v-fastmenu.vue' // 头部右侧菜单
-	export default{
-		components:{
-			VfastMenu,
-			Clock
+import { constantRoutes } from '@/router/index'//navbar导航引用了router路由的数组
+import Clock from '@/components/clock.vue' // 时钟+天气
+import VfastMenu from '@/components/v-fastmenu.vue' // 头部右侧菜单
+import { fontConfig } from '@/api/login'
 
-		},
-		created(){
-			this.navbar
-		},
-		data(){
-			return{
+export default {
+  components: {
+    VfastMenu,
+    Clock
 
-			}
-		},
-		methods:{
-		},
-		computed:{
-			titlename(){
-				return this.$route.meta.title
-			},
-			//导航菜单
-			navbar(){
-				return constantRoutes.slice(1)
-			},
-		},
+  },
+  created() {
+    this.fontConfig()
+    this.navbar
+  },
+  data() {
+    return {
+      systemTitle: {
+        title: '',  //标题
+        subTitle: ''//副标题 数字农业
+      }
+    }
+  },
+  methods: {
+    fontConfig() {
+      fontConfig().then(res => {
+        this.systemTitle.title = res.data.fontTitle
+        this.systemTitle.subTitle = res.data.subTitle
+        this.backgroudImg = res.data.picUrl
+      })
+    }
+  },
+  computed: {
+    titlename() {
+      return this.$route.meta.title
+    },
+    //导航菜单
+    navbar() {
+      return constantRoutes.slice(1)
+    }
+  }
 
-	}
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
-	.header {
-		width: 100%;
-		background: #a7ec12;
-		background: url(../assets/images/visual/header.png) no-repeat center center;
-		background-size: cover;
-		height: 4rem;
-		display: flex;
-		align-items: center;
-		z-index: 1000;
-		position: absolute;
-		top: 0;
+@import '@/assets/styles/base.scss';
 
-		.title {
-			display: flex;
-			position: fixed;
-			left: 50%;
-			transform: translateX(-50%);
+.header {
+  width: 100%;
+  background: #a7ec12;
+  background: url(../assets/images/visual/header.png) no-repeat center center;
+  background-size: cover;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
 
-			h3 {
-				display: flex;
-				align-items: center;
-				text-align: center;
-				color: $white;
-				font-size: 1.8rem;
-				font-family: $fontFk;
+  .title {
+    display: flex;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
 
-				img {
-					margin-right: .5rem;
-				}
-			}
-		}
+    h3 {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: $white;
+      font-size: 1.8rem;
+      font-family: $fontFk;
 
-		.bignav {
-			height: 40px;
-			position: fixed;
-			left: 50%;
-			transform: translateX(-50%);
-			top: 3.9rem;
-			z-index: 1000;
-			border-radius: 5px;
-			display: flex;
-			justify-content: cetner;
-			align-items: center;
+      img {
+        margin-right: .5rem;
+      }
+    }
+  }
 
-			.bignav-list {
-				background: url(../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
-				float: left;
-				display: flex;
-				justify-content: cetner;
-				align-items: center;
-				color: $fListTitle;
-				height: 40px;
-				font-size: 12px;
-				padding: 0 23px;
-				cursor: pointer;
-				-webkit-transform: translateY(0);
-				transform: translateY(0);
-				transition: all 0.3s ease-in-out;
-			}
+  .bignav {
+    height: 40px;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 3.9rem;
+    z-index: 1000;
+    border-radius: 5px;
+    display: flex;
+    justify-content: cetner;
+    align-items: center;
 
-			.router-link-active,
-			.bignav-list:hover {
-				filter: brightness(2.3);
-				-webkit-transform: translateY(-1px);
-				transform: translateY(-1px);
-				color: $inBlueHover;
-				border-bottom: 1px solid $inBlueHover;
-				transition: all 0.3s ease-in-out;
+    .bignav-list {
+      background: url(../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
+      float: left;
+      display: flex;
+      justify-content: cetner;
+      align-items: center;
+      color: $fListTitle;
+      height: 40px;
+      font-size: 12px;
+      padding: 0 23px;
+      cursor: pointer;
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      transition: all 0.3s ease-in-out;
+    }
 
-			}
-		}
+    .router-link-active,
+    .bignav-list:hover {
+      filter: brightness(2.3);
+      -webkit-transform: translateY(-1px);
+      transform: translateY(-1px);
+      color: $inBlueHover;
+      border-bottom: 1px solid $inBlueHover;
+      transition: all 0.3s ease-in-out;
 
-	}
+    }
+  }
+
+}
 </style>

src/views/system/login.vue

@@ -71,8 +71,8 @@
 			return {
 				backgroudImg:require('../../assets/images/login/login-ty.jpg'), //背景图片
         systemTitle:{
-					title:'通榆县乡村振兴综合监管平台',  //标题
-					subTitle:'数字农业'  ,//副标题
+					title:'',  //标题
+					subTitle:''  ,//副标题 数字农业
 				},
 				codeUrl: '',
 				loginForm: {