@red:#F01740; // @yellow:#FFE300; page { background: #f6f6f6; font-family: Source Han Sans CN; } .location{ display: flex; justify-content: space-between; align-items: center; padding: 20rpx 25rpx 0rpx 25rpx; background-color: #ffffff; .l_left { font-size: 24rpx; } .l_right{ color:#636363; font-size: 24rpx; span{ color: #229293; font-weight: bold; } } } .swiper { margin: 30rpx; height: 400rpx; .slide-image { width: 100%; height: 98%; margin-bottom: 20rpx; border-radius: 30rpx; } } .navBar { display: flex; justify-content: space-around; height: 100rpx; position: relative; background: #fff; margin: 30rpx; border-radius: 30rpx; .navItem { display: flex; align-items: center; justify-content: center; border-bottom: 4rpx solid transparent; .navItemTitle { font-size: 30rpx; } .navItemIcon { width: 50rpx; image { width: 40rpx; height: 40rpx; margin-top: 12brpx; // transform: translate(-25rpx -25rpx 0); } } } .active { color: #333; font-weight: bold; border-bottom: 4rpx solid #399899; } } .nav_content{ flex: 1; } .kind { width: 687rpx; // height: 150rpx; position: relative; left: 15rpx; // top: 30rpx; display: flex; .item { width: 219rpx; height: 150rpx; margin-left: 17rpx; image { width: 219rpx; height: 150rpx; border-radius: 6px; } } .item2 { width: 219rpx; height: 150rpx; margin-left: 15rpx; image { width: 219rpx; height: 150rpx; border-radius: 6px; } } .item3 { width: 219rpx; height: 150rpx; margin-left: 15rpx; image { width: 219rpx; height: 150rpx; border-radius: 6px; } } .head-text{ width: 219rpx; height: 50rpx; position: relative; z-index: 99; background-color: #439f9b; // opacity:0.6; background-color:rgba(63,156,152,0.9); line-height: 50rpx; text-align: center; font-weight: 550; font-size: 25rpx; color: white; // left:58rpx; bottom: 55rpx; border-radius: 10px; } } .tab_title { flex: none; width:280rpx ; } .tab_page { width: 100%; height: 100%; overflow: hidden; }