tab 选项卡 ​

<template>
  <view class="rstabbar">
    <view style="background: #fff">
      <view>
        <jp-tabs v-model="attribute.active2">
          <jp-tab title="标签1">
            <text>1111</text>
          </jp-tab>
          <jp-tab title="标签2">
            <view class="view-general">
              <image style="width: 200rpx; height: 137.5rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <view>标签2</view>
            </view>
          </jp-tab>
          <jp-tab title="标签3">
            <view class="view-general">
              <image style="width: 200rpx; height: 200rpx" src="https://img.yzcdn.cn/vant/ipad.jpeg" />
              <view>标签3</view>
            </view>
          </jp-tab>
          <jp-tab title="我这个标签就很特别的">
            <text>我这个标签就很特别的</text>
          </jp-tab>
          <jp-tab title="标签5">
            <view class="view-general">
              <image style="width: 200rpx; height: 137.5rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <view>标签5</view>
            </view>
          </jp-tab>
          <jp-tab title="看看">
            <view class="view-general">
              <image style="width: 200rpx; height: 200rpx" src="https://img.yzcdn.cn/vant/ipad.jpeg" />
              <view>看看</view>
            </view>
          </jp-tab>
        </jp-tabs>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  active2: 0
})
</script>

<style scoped lang="scss">
.rstabbar {
  .view-general {
    width: 750rpx;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    height: 44rpx;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 44rpx;
    width: 750rpx;
    box-sizing: border-box;
    padding: 0 16rpx;
  }
}
</style>