1.左侧添加阴影
修改左侧盒子:
.discovery-left-part{
height: 300px;
width: 110px;
background: #FFFFFF;
margin-right: 10px;
margin-left: 5px;
box-shadow: 0 5px 10px #d4d4d4;
}
2.调整类别样式
修改代码如下:
<style scoped>
.discovery-content-box{
margin-top: 20px;
}
/** 总宽度1140 **/
.discovery-left-part{
width: 105px;
background: #FFFFFF;
margin-right: 10px;
margin-left: 5px;
box-shadow: 0 5px 10px #d4d4d4;
}
.discovery-left-part li{
cursor: pointer;
text-align: center;
width: 105px;
height: 40px;
}
.discovery-left-part li:hover{
background: #ff4500;
color: white;
}
.discovery-left-part span{
line-height: 40px;
}
.discovery-center-part{
width: 710px;
background: fuchsia;
height: 1000px;
margin-right: 10px;
margin-left: 10px;
}
.discovery-right-part{
height: 500px;
width: 280px;
background: #4d555d;
margin-left: 10px;
}
</style>
整体效果如下: