1、wxml

2、wxss

/* 分类课程布局 */
.course .cates-container {
    display: flex;
    /* 利用视图高度-上面图片-搜索框, */
    height: calc(100vh - 147px);
}
/* 左侧导航 */
.course .cates-container .leftmenu {
   width: 24%;
}
/* 左侧导航 */
.course .cates-container .leftmenu .menuitem{
    height: 110rpx;
    display: flex;
    margin-left: 2px;
    margin-top: 5px;
    font-size: 32rpx;
    align-items: center;
    justify-content: center;
}

/* 右侧内容 */
.course .cates-container .rightcontent {
    width: 76%;
 }

3、us.js

4、效果