.example-menu {}
.example-menu__item {
    margin: 20rpx 0;
    background-color: #FFFFFF;
    border-radius: 4rpx;
    overflow: hidden
}
.example-menu__item:first-child {
    margin-top: 0
}
.example-menu__head {
    padding: 30rpx;
    display: flex;
    align-items: center;
    transition: opacity .3s
}
.example-menu__head--show {
    color: #28b1b0
}
.example-menu__title {
    flex: 1
}
.example-menu__image {
    width: 60rpx;
    height: 60rpx
}
.example-menu__image--show {
    opacity: .3
}
.example-menu__body {
    height: 0;
    overflow: hidden
}
.example-menu__body--show {
    height: auto
}
.example-menu__pages {
    opacity: 0;
    position: relative;
    background-color: #FFFFFF;
    line-height: 1.41176471;
    font-size: 34rpx;
    transform: translateY(-50%);
    transition: .3s
}
.example-menu__pages--show {
    opacity: 1;
    transform: translateY(0)
}
.example-menu__navigator {
    padding: 20rpx 30rpx;
    position: relative;
    display: flex;
    align-items: center
}
.example-menu__navigator:before {
    content: " ";
    position: absolute;
    left: 30rpx;
    top: 0;
    right: 30rpx;
    height: 1rpx;
    border-top: 1rpx solid #D8D8D8;
    color: #D8D8D8
}
.example-menu__navigator:first-child:before {
    display: none
}
  .navigator {}
  .navigator__text {
    flex: 1
}
  .navigator__arrow {
    padding-right: 26rpx;
    position: relative
}
  .navigator__arrow:after {
    content: " ";
    display: inline-block;
    height: 18rpx;
    width: 18rpx;
    border-width: 2rpx 2rpx 0 0;
    border-color: #888888;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -8rpx;
    right: 28rpx
}