vue高仿立体卡片效果（第三版）

组件

如图所示：

使用方法

<template>
  <div class="Home w100 h100">
    <!-- tab切换 start -->
    <tab-card :data="tabArr" class="ml15 mr15 pt15" @tabClick="tabChange">
        <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 0">
            天有不测风云，人有旦夕祸福。人有冲天之志，非运不能自通。
            盖闻：人生在世，富贵不能淫，贫贱不能移。
            天不得时，日月无光；地不得时，草木不生；水不得时，风浪不平；人不得时，利运不通。
            嗟呼！人生在世，富贵不可尽用，贫贱不可自欺，听由天地循环，周而复始焉。
        </p>
        <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 1">
            须知少时凌云志，曾许人间第一流。<br/>哪晓岁月蹉跎过，依旧名利两无收。
        </p>
        <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 2">
            为天地立心，<br/>为生民立命，<br/>为往圣继绝学，<br/>为万世开太平。
        </p>
    </tab-card>
    <!-- tab切换 end -->
  </div>
</template>

<script>
import tabCard from "@/components/tabCard.vue";
export default {
  data() {
    return {
        tabArr:['劝世章','悔余生诗','横渠四句'],
        tabIndex:0
    };
  },
  name: "Home",
  components:{
        tabCard,
    },
  created() {

  },
  methods: {
    //tabCard 切换
    tabChange(i){
        console.log('选中tab index：',i)
        this.tabIndex = i
    },
  },
};
</script>

<style lang="scss" scoped>
.Home{
    background: linear-gradient(180deg, #5377F3 0%, #5376F3 100%);
}

</style>

下载地址：TAB组件

在此基础修改：vue高仿立体卡片效果（第一版）

更新记录：

1.0 修复中间分割线ios端异常，放弃border-image采用after伪元素实现