@yetan/vue-hollow v0.0.1

内边距盒子

<Hollow />，通过由内而外撑开的内边距盒子实现，可内嵌内容。即可以作为页面级别的布局组件，也可以作为局部布局组件。

安装

# 使用 NPM
$ npm i @yetan/vue-view-hollow

# 使用 Yarn
$ yarn add @yetan/vue-view-hollow

使用

<template>
  <Hollow class="hollow-demo">
    <div class="hollow-demo-content"></div>
    <div class="hollow-demo-content"></div>
  </Hollow>
</template>

<script>
import Hollow from '@yetan/vue-hollow';

export default {
  name: 'newPage',
  components: {
    Hollow,
  },
};
</script>

<style lang="scss" scoped>
.hollow-demo {
  padding-top: 300px !important;
  background-color: #ff9a9e;

  > div {
    border-radius: 10px;
    padding: 0 10px !important;
    background: #fff;
  }

  .hollow-demo-content {
    &:last-child {
      border-bottom: 10px solid #fff;
    }
  }
}

.hollow-demo-content {
  min-height: 100px;
  border-top: 10px solid #fff;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>