做一个uni-app标签卡，可以左右滑动切换，标签名有4个，分别为任务信息、企业信息和产品信息、抽样机构信息，生成相应代码，要求样式精美

您好，以下是生成的代码，可以实现左右滑动切换标签卡，标签名为任务信息、企业信息、产品信息和抽样机构信息，样式也比较精美：

<template>
<view class="tab-container">
<view class="tab-header">
<view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">任务信息</view>
<view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">企业信息</view>
<view class="tab-item" :class="{active: currentTab === 2}" @click="switchTab(2)">产品信息</view>
<view class="tab-item" :class="{active: currentTab === 3}" @click="switchTab(3)">抽样机构信息</view>
</view>
<view class="tab-content">
<view class="tab-pane" :class="{active: currentTab === 0}">
<!-- 任务信息内容 -->
</view>
<view class="tab-pane" :class="{active: currentTab === 1}">
<!-- 企业信息内容 -->
</view>
<view class="tab-pane" :class="{active: currentTab === 2}">
<!-- 产品信息内容 -->
</view>
<view class="tab-pane" :class="{active: currentTab === 3}">
<!-- 抽样机构信息内容 -->
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
currentTab: 0
}
},
methods: {
switchTab(index) {
this.currentTab = index
}
}
}
</script>

<style>
.tab-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}

.tab-item {
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #333;
cursor: pointer;
}

.tab-item.active {
color: #f00;
}

.tab-content {
flex: 1;
overflow: hidden;
}

.tab-pane {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
}

.tab-pane.active {
opacity: 1;
}
</style>