网页表头动态配置

src/components/v-header.vue

@@ -1,135 +1,148 @@
 <template>
-	<!--头部-->
-	<div class="header">
-		<Clock></Clock>
-		<!--中间LOGO -->
-		<div class="title">
-			<!-- <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" /> -->
-		</div>
+  <!--头部-->
+  <div class="header">
+    <Clock></Clock>
+    <!--中间LOGO -->
+    <div class="title">
+      <!-- <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" /> -->
+    </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>
+    <!--中间导航-->
+    <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.navbar,
+      this.fontConfig()
+  },
+  data() {
+    return {
+      systemTitle: {
+        title: '通榆县乡村振兴综合监管平台',  //标题
+        subTitle: '数字林业'//副标题
+      }
+    }
+  },
+  methods: {
+    fontConfig() {
+      fontConfig().then(res => {
+        this.systemTitle.title = res.data.fontTitle
+        this.systemTitle.subTitle = res.data.subTitle
+      })
+    }
+  },
+  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/bigdata/bigdata.vue

@@ -5,7 +5,7 @@
     <div class="header">
       <!-- title -->
       <div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png"/>
-        <h3 class="title">通榆县乡村振兴监管平台-数字林业-统计分析</h3>
+        <h3 class="title">{{ systemTitle.title }}-{{ systemTitle.subTitle }}-统计分析</h3>
       </div>
       <div class="bignav">
         <img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
@@ -137,7 +137,6 @@
 <script>
 import tabbar from './tabbar.vue' //区域切换
 import bigdataSupermap from '@/components/supermap' //超图
-
 //echarts
 import chartEvent from './chart-event.vue' //1  事件、、
 import chartForestFarm from './chart-forestFarm.vue' //2  林场分布、、
@@ -153,8 +152,8 @@ import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
 import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
 import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
-
-import {getRlt} from '@/api/bigdata'
+import { getRlt } from '@/api/bigdata'
+import { fontConfig } from '@/api/login'
 
 export default {
   components: {
@@ -178,6 +177,10 @@ export default {
   data() {
 
     return {
+      systemTitle: {
+        title: '通榆县乡村振兴综合监管平台',  //标题
+        subTitle: '数字林业'//副标题
+      },
       visited: '',
       navbar: [
         {
@@ -226,8 +229,10 @@ export default {
 
     }
   },
-
-  methods:{
+  created() {
+    this.fontConfig()
+  },
+  methods: {
     rlt() {
       let that = this
       getRlt().then(resp => {
@@ -236,6 +241,12 @@ export default {
           that.$refs.bigdataSupermap.loadHeatMap(resp.data)
         }, 5000)
       })
+    },
+    fontConfig() {
+      fontConfig().then(res => {
+        this.systemTitle.title = res.data.fontTitle
+        this.systemTitle.subTitle = res.data.subTitle
+      })
     }
   },
   mounted() {
@@ -244,8 +255,6 @@ export default {
 }
 
 
-
-
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>