菱角导航栏 vue uni-app

ゞ浴缸里的玫瑰 2022-12-19 06:06 91阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]

UI刚改的界面，代同事写，主要思路，给父级添加伪类即可，里面的字要定位，因为伪类也定位了  
上代码

css

.navItem { 
    		display: flex;
    		display: -webkit-flex;
    		align-items: center;
    		justify-content: center;
    		height: 80rpx;
    		background: #5AB53C;
    		color: #ffffff;
    		position: relative;
    
    	}
    .avtiveNav::after { 
    		position: absolute;
    		left: 0;
    		top: 0;
    		display: block;
    		content: "";
    		width: 100%;
    		height: 100%;
    		border: 1px rgba(255, 255, 255, .2) solid;
    		border-bottom: none;
    		transform: scale(1.1, 1.5) perspective(.7em) rotateX(2.2deg);
    		background:#ffffff;
    		z-index: 1;
    		border-radius: 16rpx 16rpx 0 0;
    		box-sizing: border-box;
    	}
    	.avtiveStyle{ 
    		color:#5AB53C;
    		/* background:#5AB53C ; */
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/53f7fa69365945eb81e479d5569061a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201105163406655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center