newjzpc/src/components/leftNav/LeftNav.vue

<template>
	<div class="wrapper">
		<div class="left-nav" :style="{height: navHeight}">
			<div class="nav-title">{{topTitle}}</div>
			<div class="nav-item" v-for="item in navList" :key="item.id"
				:class="{'action': currentUrl.indexOf(item.path) !== -1 }" @click="navTo(item.path)">
				<div class="item-name">
					{{item.name}}
				</div>
				<div class="item-icon">
					>
				</div>
			</div>
		</div>
		<div class="right-content">
			<div class="title moren" v-if="isShow">
				{{rightTitle}}
			</div>
			<template v-else>
				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 0}"
					@click="changeClik(0)">
					基础知识
				</div>
				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 1}"
					@click="changeClik(1)">
					如何报名
				</div>
			</template>
			<div style="padding: 35px 50px 35px 50px;" class="line">
				<slot></slot>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		props: {
			navList: {
				type: Array,
				default: []
			},
			topTitle: {
				type: String,
				default: '公众参与'
			}
		},
		computed: {
			isShow() {
				return this.$route.path !== '/donation/Hpc'
			},
			navHeight() {
				return this.navList.length * 51 + 52 + 'px'
			},
			currentUrl() {
				return this.$route.path
			},
			rightTitle() {
				let title = ''
				switch (this.currentUrl) {
					case '/donation/contribution':
						title = '爱心捐赠'
						break;
					case '/donation/organDonation':
						title = '遗体及器官捐献'
						break;
					case '/join/rescue':
						title = '成为“救在身边”志愿者'
						break;
					case '/join/member':
						title = '会员入会登记'
						break
					case '/join/volunteer':
						title = '志愿者报名'
						break
					case '/join/train':
						title = '普及培训报名'
						break
					case '/about/chineseRedCross':
						title = '关于中国红十字会'
						break
					case '/about/matrix':
						title = '微信矩阵'
						break
					case '/about/redCrossLaw':
						title = '中国红十字会法'
						break
					case '/about/redCrossMovement':
						title = '关于红十字运动'
						break
					case '/concat':
						title = '信息公开'
						break
					case '/concat/publicity/list':
						title = '公告公示'
						break
					case '/concat/publicity/detail':
						title = '公告公示'
						break
					case '/concat/rules/list':
						title = '规章制度'
						break
					case '/concat/rules/detail':
						title = '规章制度'
						break
					case '/concat/finance/list':
						title = '财务信息'
						break
					case '/concat/finance/detail':
						title = '财务信息'
						break
					case '/concat/donation/list':
						title = '社会捐赠信息'
						break
					case '/concat/donation/detail':
						title = '社会捐赠信息'
						break
					case '/concat/expenditure/list':
						title = '捐赠款物支出信息'
						break
					case '/concat/expenditure/detail':
						title = '捐赠款物支出信息'
						break
					case '/concat/concat/detail':
						title = '联系我们'
						break
					case '/popularScience/list':
						title = '红会科普'
						break
					case '/popularScience/detail':
						title = '红会科普'
						break
					case '/news/list':
						title = '红会新闻'
						break
					case '/news/detail':
						title = '红会新闻'
						break
					case '/publicity/list':
						title = '公示公告'
						break
					case '/publicity/detail':
						title = '公示公告'
						break
					case '/regulations/detail':
						title = '政策法规'
						break
					case '/regulations/list':
						title = '政策法规'
						break
					case '/regulations':
						title = '政策法规'
						break
					case '/knowledge/rescue/list':
						title = '救护培训'
						break
					case '/knowledge/rescue/detail':
						title = '救护培训'
						break
					case '/knowledge/cells/detail':
						title = '造血干细胞'
						break
					case '/knowledge/cells/list':
						title = '造血干细胞'
						break
					case '/knowledge/bloodDonation/list':
						title = '无偿献血'
						break
					case '/knowledge/bloodDonation/detail':
						title = '无偿献血'
						break
					case '/knowledge/development/detail':
						title = '红十字发展'
						break
					case '/knowledge/development/list':
						title = '红十字发展'
						break
					case '/newContent/jlx/detail':
						title = '江陵县红会'
						break
					case '/newContent/jlx/list':
						title = '江陵县红会'
						break
					case '/newContent/jzq/list':
						title = '荆州区红会'
						break
					case '/newContent/jzq/detail':
						title = '荆州区红会'
						break
					case '/newContent/szs/list':
						title = '松滋市红会'
						break
					case '/newContent/szs/detail':
						title = '松滋市红会'
						break
					case '/newContent/sss/list':
						title = '石首市红会'
						break
					case '/newContent/sss/detail':
						title = '石首市红会'
						break
					case '/newContent/jls/list':
						title = '监利市红会'
						break
					case '/newContent/jls/detail':
						title = '监利市红会'
						break
					case '/newContent/ssq/list':
						title = '沙市区红会'
						break
					case '/newContent/ssq/detail':
						title = '沙市区市红会'
						break
					case '/newContent/hhs/list':
						title = '洪湖市红会'
						break
					case '/newContent/hhs/detail':
						title = '洪湖市红会'
						break
					case '/newContent/gnx/list':
						title = '公安县红会'
						break
					case '/newContent/gnx/detail':
						title = '公安县红会'
						break
					case '/directories/list':
						title = '造血干细胞捐献名录'
						break
					case '/directories/detail':
						title = '造血干细胞捐献名录'
						break
					case '/organs/detail':
						title = '器官/遗体捐献名录'
						break
					case '/organs/list':
						title = '器官/遗体捐献名录'
						break
					case '/cause/cells/list':
						title = '造血干细胞捐献'
						break
					case '/cause/cells/detail':
						title = '造血干细胞捐献'
						break
					case '/cause/emergency/detail':
						title = '应急救护'
						break
					case '/cause/emergency/list':
						title = '应急救护'
						break
					case '/cause/free/detail':
						title = '无偿献血'
						break
					case '/cause/free/list':
						title = '无偿献血'
						break
					case '/cause/humanity/detail':
						title = '人道救助'
						break
					case '/cause/humanity/list':
						title = '人道救助'
						break
					case '/cause/remains/detail':
						title = '遗体和人体器官捐献'
						break
					case '/cause/remains/list':
						title = '遗体和人体器官捐献'
						break
					case '/cause/rescue/detail':
						title = '应急救援'
						break
					case '/cause/rescue/list':
						title = '应急救援'
						break
					case '/cause/service/detail':
						title = '志愿服务'
						break
					case '/cause/service/list':
						title = '志愿服务'
						break
					case '/cause/teenagers/detail':
						title = '红十字志愿服务和青少年'
						break
					case '/cause/teenagers/list':
						title = '红十字志愿服务和青少年'
						break
					default:
						title = ''
				}
				return title
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			navTo(path) {
				// console.log(path,'dddddddddddddddd')
				let currentUrl = this.$route.path
				if (currentUrl === path) {
					return
				} else {
					this.$router.push(path)
				}
			},
			changeClik(index) {
				this.currentIndex = index
				this.$router.push('/donation/Hpc?id=' + index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 1200px;
		display: flex;
		justify-content: space-between;

	}

	.left-nav {
		width: 265px;
		// height: 154px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

		.nav-title {
			height: 52px;
			background-color: #d82020;
			line-height: 52px;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			letter-spacing: 3px;
			cursor: default;
		}

		.nav-item {
			cursor: pointer;
			border-top: 1px #fcfbfb solid;
			display: flex;
			height: 50px;
			background-color: #f2eeef;
			justify-content: space-between;
			line-height: 50px;
			padding: 0 20px 0 26px;

			.item-name {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				letter-spacing: 1px
			}

			.item-icon {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
			}
		}

		.action {
			background-color: #f7dfdf;
		}
	}

	.right-content {
		width: 915px;
		min-height: 706px;
		border-top: 2px solid #D82020;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

		.title {
			border: 2px #d82020 solid;
			// width: 200px;
			min-width: 180px;
			display: inline-block;
			padding: 0 10px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #D82020;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			top: -2px;
		}

		.action {
			background: #FFFFFF;
			color: #D82020;
		}
	}

	.line {
		line-height: 1.5;
	}
</style>