希望在 `van-swipe` 中的每个 `van-swipe-item` 之间都有一些空隙，同时每个 `van-swipe-item` 都能完全显示

<template>
  <div class="examinePlan-content">
    <van-swipe class="swipe-box"
               ref="swipe"
               :loop="false"
               :width="swipeWidth"
               :show-indicators="false"
               :active-index="activeIndex"
               @change="handleChange">
      <van-swipe-item v-for="n in 9" :key="n">
        <div class="swipe-item-box">{{ n }}</div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      swipeWidth: 300
    };
  },
  methods: {
    handleChange(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style scoped>
.swipe-box .van-swipe-item {
  background: transparent;
}
.swipe-box .van-swipe-item .swipe-item-box {
  background: #fff;
  height: 100%;
  margin-right: 10px;
}
</style>

这个问题的关键在于，`van-swipe` 组件的设计是让所有的 `van-swipe-item` 共享同一个 `width`，这就导致了当我们给 `van-swipe-item` 添加 `margin` 时，`van-swipe-item` 的内容会被遮住。

解决这个问题的一个方法是，我们可以在每个 `van-swipe-item` 内部添加一个新的元素（例如，一个 `div`），然后将 `margin` 应用到这个新的元素上，而不是直接应用到 `van-swipe-item` 上。这样，`van-swipe-item` 的内容就不会被遮住了