这个嘛？

是的

代码亮出来，怎么写的样式？

<scroll-view scroll-x="true" class="tab-list flex-x-center">
     <view class="tab-item active" v-for="(item, index) in dict" :key="index">
          <view class="ti-img-box">
               <mage :src="item.img"></image>
          </view>
         <view class="ti-txt">{{ item.name }}</view>
     </view>
</scroll-view>


.tab-list{
     padding: 30upx 0;
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     &::after{
          clear: both;
     }
    .tab-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         white-space: normal;
         float: left;
              .ti-img-box{
                   width: 120upx;
                   height: 120upx;
                   border-radius: 50%;
                   border: 4upx solid transparent;
                   overflow: hidden;
                   image{
                        display: block;
                        width: 100%;
                        height: 100%;
                   }
              }
              .ti-txt{
                    display: block;
                    width: 156upx;
                    height: 36upx;
                    border: 2upx solid #333;
                    border-radius: 20upx;
                    text-align: center;
                    line-height: 36upx;
                    margin-top: 10upx;
                }
          }
         .tab-item.active{
              .ti-img-box {
                    border: 4upx solid #9A613F;
              }
              .ti-txt{
                    border: 2upx solid #9A613F;
                    background: #9A613F;
                    color: #fff;
               }
          }
  }