uniapp自定义选项卡

沃野_juededa

于 2025-04-29 16:39:48 发布

阅读量887

点赞数 5

CC 4.0 BY-SA版权

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_63542260/article/details/147614968

样式

.issue-main {
           .tab-control {
               background: #FC5041;
               padding: 20rpx;
               height: 360rpx;
               background: linear-gradient(-30deg, transparent 50rpx, #FC5041 0) right,
                                       linear-gradient( 30deg, transparent 50rpx, #FC5041 0) left;
               background-size: 50% 100%;
               background-repeat: no-repeat;
               .tab-control-box {
                   width: 100%;
                   height: 420rpx;
                   background: #FFFFFF;
                   border-radius: 20rpx 20rpx 20rpx 20rpx;
                   .tab-control-box-top {
                       width: 100%;
                       display: flex;
                       background: #FD7367;
                       color: #FFFFFF;
                       border-radius: 20rpx 20rpx 0rpx 0rpx;
                       position: relative;
                       z-index: 1;
                       .tab-control-item {
                           width: 25%;
                           text-align: center;
                           height: 80rpx;
                           line-height: 80rpx;
                       }
                   }
               }
           }
       }
       .active-tab {
           background: #fff;
           color: #FC5041;
           font-weight: bold;
           border-radius: 20rpx 20rpx 0rpx 0rpx;
           height: 80rpx !important;
           line-height: 100rpx !important;
           transform: translateY(-10rpx);
           &::before {
               content: '';
               position: absolute;
               bottom: -20rpx;
               left: 0;
               width: 100%;
               height: 20rpx;
               background: inherit; /* 继承父元素背景 */
               z-index: -1;
           }
       }