.index-hd { padding: 80rpx; text-align: center; } .index-bd { padding: 0 30rpx 40rpx; } .index-ft { padding-bottom: 20rpx; text-align: center; } .index-logo { width: 86rpx; height: 86rpx; } .index-desc { margin-top: 20rpx; color: #888888; font-size: 28rpx; } .navigator-box { opacity: 0; position: relative; background-color: #FFFFFF; line-height: 1.41176471; font-size: 34rpx; transform: translateY(-50%); transition: .3s; } .navigator-box-show { opacity: 1; transform: translateY(0); } .navigator { padding: 20rpx 30rpx; position: relative; display: flex; align-items: center; } .navigator:before { content: " "; position: absolute; left: 30rpx; top: 0; right: 30rpx; height: 1px; border-top: 1rpx solid #D8D8D8; color: #D8D8D8; } .navigator:first-child:before { display: none; } .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; } .kind-list-item { margin: 20rpx 0; background-color: #FFFFFF; border-radius: 4rpx; overflow: hidden; } .kind-list-item:first-child { margin-top: 0; } .kind-list-text{ flex: 1; } .kind-list-img { width: 60rpx; height: 60rpx; } .kind-list-item-hd { padding: 30rpx; display: flex; align-items: center; transition: opacity .3s; } .kind-list-item-hd-show { opacity: .2; } .kind-list-item-bd { height: 0; overflow: hidden; } .kind-list-item-bd-show { height: auto; }