jmpc/src/App.vue

<template>
<div :class="{'body-box': isGrey}" >
	<div class="bg bgig" :class="{bgig: isGrey}" >
		<img src="@/assets/img/box-bg.png" >
	</div>
	<div id="app" class="app">
		<div class="boxHeader">
			<div class="boxLogo">
				<img src="@/assets/img/logo.png" >
			</div>
			<div class="boxSearch">
				<input type="text" v-model="searchValue" placeholder="输入关键词搜索" required />
				<img src="@/assets/img/search.png" class="searchImg" @click="search">
			</div>
		</div>
		<div class="boxNav">
			<div class="nav" v-for="(n,index) in navList" :class="{navC: isNav == index}" @click="navChoose(index,n)">
				<img :src="n.img" class="navImg">
				<div class="navName">
					{{ n.name }}
				</div>
			</div>
		</div>
	  <router-view />
	</div>
	<div class="footer">
		版权所有：Copyright©2017-2037 　版权所有 荆门市红十字会 <br>
		地址：湖北省荆门市东宝区金虾路60号 浙ICP备17054590号-1
	</div>
</div>
</template>
<script>
import { getTime } from '@/utils/utils.js'
import { getList,getSearch,getgrey,index } from '@/request/api.js'
	export default {
		data() {
			return {
				isGrey: false,
				isNav: 0,
				searchValue: '',
				navList: [
					{
						img: require('@/assets/img/navList/nav1.png'),
						name: '首页',
						url: '/index'
					},
					{
						img: require('@/assets/img/navList/nav2.png'),
						name: '组织介绍',
						url: '/introduce'
					},
					{
						img: require('@/assets/img/navList/nav3.png'),
						name: '政策法规',
						url: '/law'
					},
					{
						img: require('@/assets/img/navList/nav4.png'),
						name: '核心业务',
						url: '/busine'
					},
					{
						img: require('@/assets/img/navList/nav5.png'),
						name: '新闻资讯',
						url: '/new'
					},
					{
						img: require('@/assets/img/navList/nav6.png'),
						name: '我要参与',
						url: '/partake'
					},
					{
						img: require('@/assets/img/navList/nav7.png'),
						name: '联系我们',
						url: '/contactUs'
					},
				],
				
			}
		},
		mounted() {
			index().then(res => {
				// console.log(res);
					console.log(getTime(res.time));
			})
			// 页面灰化
			getgrey().then(res => {
				const time = new Date().getTime()
				if (getTime(time) == getTime(res.time)) {
					// this.isGrey = true
					console.log(getTime(res.time));
					console.log(this.isGrey);
				} else{
					console.log(time);
				}
				
			})
		},
		methods: {
			// 搜索
			search() {
				if(this.searchValue == '') {
					this.$message('搜索内容为空');
				}else {
					this.$router.push({
						name: 'searchList',
						query: {value: this.searchValue}
					})
				}
			},
			navChoose(index,n) {
				this.isNav = index
				this.navTo(n.url)
			},
			// 跳转页面
			navTo(url) {
				this.$router.push({
					path: url
				})
			},
			getTime(time) {
				return getTime(time)
			},
		},
		// 解决刷新导航栏选择返回默认值问题
		watch: {
			"$route": function(val) {
				for (var i = 0; i < this.navList.length; i++) {
					if (val.path == '/') {
						this.isNav = 0
					} else{
						if (this.navList[i].url == val.path) {
							this.isNav = i
						}
					}
				}
			}
		},
	}
</script>
<style lang="scss">

.body-box {
	-webkit-filter: grayscale(100%); /* webkit */
	-moz-filter: grayscale(100%); /*firefox*/
	-ms-filter: grayscale(100%); /*ie9*/
	-o-filter: grayscale(100%); /*opera*/
	filter: grayscale(100%);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
	filter:gray; /*ie9- */
	
}
	.nowarp {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	html, body {
		scroll-behavior:smooth; 
		margin: 0;
	}
	.bg {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;
		img {
			width: 100%;
		}
	}
	.bgig {
		top: -100px;
	}
	$red: #D82020;
	.app {
		font-family: PingFang-SC-Bold;
		width: 1100px;
		margin: 0 auto;
		.boxHeader {
			display: flex;
			justify-content: space-between;
			margin: 80px 0;
			.boxLogo,.boxSearch {
				margin: auto 0;
			}
			.boxLogo {
				img {
					width: 300px;
				}
			}
			.boxSearch {
				position: relative;
				input {
					min-width: 180px;
					border-radius: 20px;
					border: solid 2px $red;
					padding: 5px 10px;
					padding-right: 30px;
					height: 15px;
				    outline: none; // 设置点击后无效果
				}
				.searchImg {
					width: 15px;
					margin: auto 0;
					position: absolute;
					top: 7px;
					right: 10px;
				}
			}
		}
		.boxNav {
			background-color: $red;
			display: flex;
			justify-content: space-around;
			margin: 20px 0;
			.nav {
				padding: 10px;
				flex: 1;
				text-align: center;
				color: #fff;
				font-size: 16px;
				font-family: PingFang-SC-Bold;
				// font-weight: Bold;
				letter-spacing: 2px;
				.navImg {
					width: 26px;
					height: 24px;
					margin: 2px;
				}
			}
			.navC {
				background-color: #C2191C;
			}
		}
	}
		.footer {
			min-width: 1100px;
			margin-top: 100px;
			background-color: $red;
			width: 100%;
			color: #fff;
			line-height: 20px;
			font-size: 14px;
			padding: 40px 0;
			text-align: center;
		}
</style>