fx66/src/App.vue

<template>
	<div class="top">
		<div class="wrap">
			<div class="logo">
				<img src="../../static/images/mainLogo.png" alt="" class="fl">
				<!--<img src="" alt="">-->
			</div>
			<ul class="nav fl">
				<li class="active">
					<span>首页</span></li>
					<li class="">
						<span>申请经纪商</span>
						<i class="hot">HOT</i>
					</li>
				</ul>
			</div>

		</div>

	</template>

	<script>
	export default {
		name: "Top",
		data(){
			return{

			}
		}
	}
	</script>

	<style scoped>
	.top{
		height: 75px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 100;
	}
	.logo{
		float: left;
		width: 98px;
		line-height: 75px;
		height: 75px;
		margin-right: 55px;
		display: flex;
		align-items: center;
	}
	.logo>img{
		width: 100%;
	}
	.nav li{
		float:left;
		width: 118px;
		line-height: 75px;
		font-size: 14px;
		color:#fff;
		position: relative;
	}
	.nav li:hover{
		cursor: pointer;
	}
	.nav .active{
		background-color: #fff;
		color: #1a6fa6;;
	}
	.hot{
		position: absolute;
		background-color: #ff4e00;
		color: #fff;
		display: block;
		width: 38px;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		border-radius: 2px;
		top: 8px;
		right: 0;
	}
	.hot:after{
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		z-index: -1;
		bottom: 0;
		left: 30%;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 14px solid #ff4e00;
		margin-bottom: -8px;
		transform: rotate(30deg);
	}

	</style>