vue写一个tabs栏 里面有四种状态 已下单 已取消 已退款 已完成 每一个下面都有一个2px的边框 选中的时候出现 点击切换的时候又缓慢的移动

你可以使用Vue.js的组件化思想，通过组件嵌套的方式来实现这个tabs栏。

首先，你可以创建一个Tabs组件，其中包含四个TabItem子组件，每个子组件对应一个状态。Tabs组件会通过props把当前选中的状态传递给子组件，以便子组件知道自己是否被选中。

在Tabs组件中，你可以使用CSS transition来实现点击切换时的缓慢移动效果。当一个TabItem被选中时，你可以给它添加一个类名，该类名可以用来触发transition效果。同时，你可以使用CSS伪类选择器来实现边框的显示和隐藏。

下面是一个示例代码：

<template>
  <div class="tabs">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ active: activeTab === index }"
      @click="activeTab = index"
    >
      {{ tab }}
    </div>
    <div
      class="indicator"
      :style="{ transform: 'translateX(' + (activeTab * 100) + '%)' }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ["已下单", "已取消", "已退款", "已完成"],
    };
  },
};
</script>

<style>
.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  border-bottom: 2px solid #ccc;
}

.tabs div {
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding-bottom: 2px;
}

.tabs div.active {
  color: #333;
  font-weight: bold;
}

.tabs div.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}

.indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25%;
  height: 2px;
  background-color: #333;
  transition: transform 0.3s ease;
}
</style>

在这个示例代码中，我们使用了CSS flex布局来实现tabs栏的横向排列。每个TabItem都是一个<div>元素，通过v-for指令根据tabs数组动态生成。当一个TabItem被选中时，我们会给它添加active类名，从而触发transition效果和边框的显示。Tabs组件中还有一个indicator元素，它的作用是表示当前选中的TabItem。我们使用transform属性来实现它的滑动效果，根据activeTab的值来设置它的位置。

最后，你可以在父组件中引用Tabs组件，并把当前选中的状态作为props传递给它：

<template>
  <div>
    <tabs :active-tab="currentTab"></tabs>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import Tabs from "./Tabs.vue";

export default {
  components: {
    Tabs,
  },
  data() {
    return {
      currentTab: 0,
    };
  },
};
</script>