UI

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Cloud.git"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@supermap/iclient-leaflet": "^10.2.1",
     "@supermap/iclient-ol": "^10.1.3",

src/assets/styles/base.scss

@@ -4,12 +4,13 @@ $fontLED:led;
 
 //颜色
 $white:#fff;
-$inBlue:#02dcd3;
+$inBlue:#2bacf7;
 $inBlueHover:#07ffc1;
 $inYellow:#ffd014;
 $deepBlue:#0b293a;
 $listText:#1a7988;
 $textGray:#ccc;
+$grayBlue:#5685a0;
 
 
 
@@ -28,7 +29,7 @@ $shadowListHoverI:0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($co
 $fBlue:#03c6e2;
 $fBlueHover:#07ffc1;
 $fBlueG:#0bf3f7;
-$fListTitle:#2ac6c6;
+$fListTitle:#2bacf7;
 $barBgc: rgba($color: #051520, $alpha: .9);
 $barShadow: rgba($color: #033551, $alpha: .5) 0px 0px 18px inset;
 $barBorder: solid rgba($color: #134040, $alpha: .7);
@@ -181,6 +182,9 @@ div::-webkit-scrollbar {
 .h-9{
 	height: 9vh;
 }
+.h-10{
+	height: 10vh;
+}
 .h-16{
 	height: 16vh;
 }
@@ -456,7 +460,6 @@ div::-webkit-scrollbar {
 				position: absolute;
 				font-size: 14px;				
 				top: 10vh;
-				width: 19rem;
 				height: 85vh;
 				display: flex;
 				z-index: 1000;
@@ -466,14 +469,16 @@ div::-webkit-scrollbar {
 
 			}
 			.leftbar{
-				left: .5rem;
+				width: 23rem;
+				left: .3rem;
 				-webkit-transform: translateX(0);
 				transform: translateX(0);
 				transition: all 0.5s ease-in-out;
 				
 			}
 			.rightbar{
-				right: .5rem;
+				width: 19rem;
+				right: .3rem;
 				-webkit-transform: translateX(0);
 				transform: translateX(0);
 				transition: all 0.5s ease-in-out;
@@ -610,11 +615,11 @@ div::-webkit-scrollbar {
 			}
 .forthis {
 				margin-bottom: 2vh;
-				-moz-border-radius-topleft: 0;
-				-moz-border-radius-bottomright: 0;
-				background-color: $barBgc;
-				box-shadow: $barShadow;
-				border: 1px $barBorder;
+				// -moz-border-radius-topleft: 0;
+				// -moz-border-radius-bottomright: 0;
+				// background-color: $barBgc;
+				// box-shadow: $barShadow;
+				// border: 1px $barBorder;
 
 
 				.map-con{
@@ -625,17 +630,16 @@ div::-webkit-scrollbar {
 
 				.this-title {
 					width: 100%;
-					font-size: 1rem;
-					height: 4vh;
-					line-height: 4vh;
-					padding-left: .5em;
+					font-size: .7rem;
+					height: 2vh;
+					line-height: 2vh;
+					padding: 0rem 0 0 1rem;
 					display: flex;
 					justify-content: space-between;
-					padding: 0 12px;
-					background-image: -moz-linear-gradient($GradualGreen);
-					background-image: -webkit-linear-gradient($GradualGreen);
-					background-image: linear-gradient($GradualGreen);
-					box-shadow: $shadowTitle;
+					// background-image: -moz-linear-gradient($GradualGreen);
+					// background-image: -webkit-linear-gradient($GradualGreen);
+					// background-image: linear-gradient($GradualGreen);
+					// box-shadow: $shadowTitle;
 					.el-date-editor{
 						width: 100%;
 					}
@@ -660,7 +664,8 @@ div::-webkit-scrollbar {
 
 					span {
 						font-family: $fontLED;
-						color: $fBlueG;
+						color: $white;
+						text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha:1) ;
 						display: flex;
 						align-items: center;
 
@@ -833,7 +838,7 @@ div::-webkit-scrollbar {
 				cursor: pointer;
 				display: flex;
 				align-items: center;
-				padding: .4rem .5rem;
+				padding: 0 .5rem;
 				box-shadow: $shadowList;
 				flex-wrap: wrap;
 				@for $i from 1 through length($iconBg) {
@@ -992,6 +997,7 @@ div::-webkit-scrollbar {
 					align-items: center;
 					flex: 1;
 					color: $fListTitle;
+					padding: .2rem;
 
 					h4 {
 						font-size: .7rem;
@@ -1040,7 +1046,7 @@ div::-webkit-scrollbar {
 				}
 				.event-list-text {
 					width: 77% !important;
-					display: flex;
+					display: flex; 
 					align-items: left;
 					flex-direction: column !important;
 					h3 {

src/components/clock.vue

@@ -7,11 +7,11 @@
 				<span>{{time}}</span>
 			</div>
 			<div class="week m-r-10">{{weekC}}</div>
-			<div class="line m-r-10"></div>
+			<!-- <div class="line m-r-10"></div>
 			<div class="day m-r-10">
 				<span>{{weatherInfo.weather}} {{weatherInfo.wind}}</span>
 				<span>{{weatherInfo.fireTit}} {{weatherInfo.fireLevel}}</span>
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>

src/components/v-fastmenu.vue

@@ -1,18 +1,34 @@
 <template>
 	<div class="fast-menu">
 		<div class="menu-list">
-			<!-- <a v-for="(fastMenu,index) in fastMenu" @click="backToMainPage" :href="fastMenu.path" :key="index" class="header-right">
-				<!-- <span><i class="iconfont" :class="fastMenu.icon"></i><el-badge :value="fastMenu.msValue" :max="99" class="item">{{fastMenu.name}}</el-badge></span> -->
-			<!-- 	<span><i :class="fastMenu.icon"></i>{{fastMenu.name}}</span> -->
-			<!-- </a> -->
-			<a  @click="backToMainPage" class="header-right">
-				<!-- <span><i class="iconfont" :class="fastMenu.icon"></i><el-badge :value="fastMenu.msValue" :max="99" class="item">{{fastMenu.name}}</el-badge></span> -->
+			<!-- 	<a  @click="backToMainPage" class="header-right">
 				<span><i class="el-icon-s-home"></i>返回首页</span>
 			</a>
 			<a  @click="backToMainPage" class="header-right">
-				<!-- <span><i class="iconfont" :class="fastMenu.icon"></i><el-badge :value="fastMenu.msValue" :max="99" class="item">{{fastMenu.name}}</el-badge></span> -->
 				<span><i class="el-icon-monitor"></i>管理端</span>
-			</a>
+			</a> -->
+			<el-popover placement="top-start" trigger="click" width="300px">
+				<div class="user-tip">
+					<div class="u-tip-1">
+						<img src="@/assets/images/user-photo.png" />
+						<div class="user-info">
+							<div class="user-name">
+								<h2>张三</h2><span>某某部门</span>
+							</div>
+							<div class="phone-number">18686688888</div>
+						</div>
+					</div>
+					<div style="margin-bottom: 1rem;">
+						<el-button type="primary" size="small">修改密码</el-button>
+						<el-button type="warning" size="small">退出登录</el-button>
+					</div>
+					<a><i class="el-icon-s-home"></i>返回首页</a>
+					<a><i class="el-icon-monitor"></i>管理端</a>
+
+				</div>
+				<div slot="reference" style="text-align: center; width:4rem;height:3rem;"><img
+						src="@/assets/images/mascot-small.png" /></div>
+			</el-popover>
 		</div>
 	</div>
 </template>
@@ -21,6 +37,7 @@
 	export default {
 		data() {
 			return {
+				visible: false
 				// fastMenu: [{
 				// 		name: '返回首页',
 				// 		path: '/',
@@ -37,19 +54,19 @@
 
 			}
 		},
-		methods:{
-			backToMainPage(){
-			  let href = window.location.href
-			  let protacal = href.substr(0,href.indexOf("://")+3)
-			  let mo = href.lastIndexOf(":") > 6  ? href.lastIndexOf(":") : href.lastIndexOf("/")
-			  let ip = href.substr(href.indexOf("://")+3,mo);
-			  let url =href.substr(0,mo)
-			  let toUrl = url +":15001/index58"
-			  window.location.href = toUrl
+		methods: {
+			backToMainPage() {
+				let href = window.location.href
+				let protacal = href.substr(0, href.indexOf("://") + 3)
+				let mo = href.lastIndexOf(":") > 6 ? href.lastIndexOf(":") : href.lastIndexOf("/")
+				let ip = href.substr(href.indexOf("://") + 3, mo);
+				let url = href.substr(0, mo)
+				let toUrl = url + ":15001/index58"
+				window.location.href = toUrl
 			},
 		},
 		computed: {},
-		
+
 
 	}
 </script>
@@ -57,6 +74,46 @@
 <style rel="stylesheet/scss" lang="scss">
 	@import '@/assets/styles/base.scss';
 
+	.user-tip {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+
+		.u-tip-1 {
+			display: flex;
+			margin-bottom: 1rem;
+
+			img {
+				margin-right: 1rem;
+			}
+
+			.user-info {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.user-name {
+					display: flex;
+					align-items: flex-end;
+
+					h2 {
+						color: $inBlue;
+						margin-right: .5rem;
+						font-weight: bolder;
+					}
+
+					span {
+						color: $grayBlue;
+					}
+				}
+
+				.phone-number {
+					color: $inBlue;
+				}
+			}
+		}
+	}
+
 
 	.fast-menu {
 		right: 0.5rem;
@@ -68,27 +125,6 @@
 			display: flex;
 			align-items: center;
 
-			span {
-				// min-width: 4.625rem;
-				font-size: 12px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 10px 15px;
-				color: $fBlue;
-				height: 100%;
-				cursor: pointer;
-				text-align: center;
-
-				i {
-					padding-right: 3px;
-				}
-			}
-
-			span:hover {
-				color: $fBlueHover;
-				background-color: #032530;
-			}
 		}
 
 		.el-badge__content.is-fixed {
@@ -99,5 +135,6 @@
 			border: 0;
 		}
 
+
 	}
 </style>

src/components/v-header.vue

@@ -3,20 +3,21 @@
 	<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 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="bignav">
-			<img src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
+			<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-right2.png" />
+			<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
 		</div>
 		<!-- 右侧5个中心 -->
 		<VfastMenu></VfastMenu>
@@ -61,8 +62,9 @@
 	.header {
 		width: 100%;
 		background: #a7ec12;
-		background: url(../assets/images/visual/v-header.png) repeat-x;
-		height: 2.5rem;
+		background: url(../assets/images/visual/header.png) no-repeat center center;
+		background-size: cover;
+		height: 4rem;
 		display: flex;
 		align-items: center;
 		z-index: 1000;
@@ -82,7 +84,6 @@
 				color: $white;
 				font-size: 1.8rem;
 				font-family: $fontFk;
-				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
 	
 				img {
 					margin-right: .5rem;
@@ -95,7 +96,7 @@
 			position: fixed;
 			left: 50%;
 			transform: translateX(-50%);
-			top: 2.4rem;
+			top: 3.9rem;
 			z-index: 1000;
 			border-radius: 5px;
 			display: flex;
@@ -103,12 +104,12 @@
 			align-items: center;
 	
 			.bignav-list {
-				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
+				background: url(../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
 				float: left;
 				display: flex;
 				justify-content: cetner;
 				align-items: center;
-				color: $white;
+				color: $fListTitle;	
 				height: 40px;
 				font-size: 12px;
 				padding: 0 23px;

src/main.js

@@ -25,6 +25,9 @@ import DictData from '@/components/DictData'
 import './assets/icons' // icon
 import './permission' // permission control
 
+//DataV动效组件
+import dataV from '@jiaminghi/data-view'
+
 // //WebSocket封装方法
 // import * as socketApi from '@/api/socket'
 // Vue.prototype.socketApi = socketApi
@@ -38,6 +41,7 @@ Vue.use(ElementUI)
 Vue.use(VueCookies)
 Vue.use(directive)
 Vue.use(plugins)
+Vue.use(dataV)
 Vue.prototype.$echarts = echarts //挂载echarts
 DictData.install()
 

src/router/index.js

@@ -39,7 +39,7 @@ export const constantRoutes = [{
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '林业云图'
+			title: '林业分中心'
 		}
 	},
 	{
@@ -112,7 +112,7 @@ export const constantRoutesNew = [{
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '数字林业'
+			title: '林业分中心'
 		}
 	},
 	{

src/views/forest.vue

@@ -8,16 +8,20 @@
       <!-- 左侧 -->
       <div class="leftbar" :class="indentleft" ref="left">
         <div class="forthis">
+		<dv-border-box-13>
+		  <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
           <div class="this-title">
             <span>基本情况</span>
+			<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
           </div>
-          <div class="i-list-con h-9">
+          <div class="i-list-con h-10">
             <div class="d-l-con">
               <div class="d-l-l-text w-100p">
                 <h4 class="line-h-1 w-100p">{{ forestInfo }}</h4>
               </div>
             </div>
           </div>
+		 </dv-border-box-13>
         </div>
         <div class="forthis">
           <div class="this-title">

src/views/monitor.vue

@@ -555,79 +555,4 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
-
-
-	.header {
-		width: 100%;
-		background: #a7ec12;
-		background: url(../assets/images/visual/v-header.png) repeat-x;
-		height: 2.5rem;
-		display: flex;
-		align-items: center;
-		z-index: 1000;
-		position: absolute;
-		top: 0;
-
-		.title {
-			display: flex;
-			position: fixed;
-			left: 50%;
-			transform: translateX(-50%);
-
-			h3 {
-				display: flex;
-				align-items: center;
-				text-align: center;
-				color: $white;
-				font-size: 1.8rem;
-				font-family: $fontFk;
-				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
-
-				img {
-					margin-right: .5rem;
-				}
-			}
-		}
-
-		.bignav {
-			height: 40px;
-			position: fixed;
-			left: 50%;
-			transform: translateX(-50%);
-			top: 2.4rem;
-			z-index: 1000;
-			border-radius: 5px;
-			display: flex;
-			justify-content: cetner;
-			align-items: center;
-
-			.bignav-list {
-				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
-				float: left;
-				display: flex;
-				justify-content: cetner;
-				align-items: center;
-				color: $white;
-				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>