tui-grid.vue 690 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="tui-grids" :class="{'tui-border-top':unlined}">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name:"tuiGrid",
  9. props: {
  10. //是否去掉上线条
  11. unlined: {
  12. type: Boolean,
  13. default: false
  14. }
  15. }
  16. }
  17. </script>
  18. <style scoped>
  19. .tui-grids {
  20. width: 100%;
  21. position: relative;
  22. overflow: hidden;
  23. }
  24. .tui-grids::after {
  25. content: " ";
  26. position: absolute;
  27. left: 0;
  28. top: 0;
  29. width: 100%;
  30. height: 1px;
  31. border-top: 1px solid #eaeef1;
  32. -webkit-transform-origin: 0 0;
  33. transform-origin: 0 0;
  34. -webkit-transform: scaleY(0.5);
  35. transform: scaleY(0.5);
  36. }
  37. .tui-border-top::after {
  38. border-top: 0 !important;
  39. }
  40. </style>