DemoHome.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="demo-home">
  3. <view class="demo-home__title">
  4. <image mode="aspectFit" class="demo-home__image" src="../../static/logo.png" />
  5. </view>
  6. <view class="demo-home__desc">
  7. 适配多端的高自定义轮播组件,全面对标swiperjs并兼容全端
  8. </view>
  9. <view v-for="(group, index) in list" :key="index">
  10. <demo-home-nav :group="group" />
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import DemoHomeNav from "../DemoHomeNav/DemoHomeNav.vue";
  16. export default {
  17. props: {
  18. list: {
  19. type: Array,
  20. default: function() {
  21. return [];
  22. },
  23. },
  24. },
  25. components: {
  26. DemoHomeNav,
  27. },
  28. data() {
  29. return {
  30. title: "Hello",
  31. };
  32. },
  33. onLoad() {},
  34. methods: {},
  35. };
  36. </script>
  37. <style scoped lang="scss">
  38. .demo-home {
  39. box-sizing: border-box;
  40. width: 100%;
  41. min-height: 100vh;
  42. padding: 92rpx 40rpx 40rpx;
  43. background-color: #e4ebf5;
  44. }
  45. .demo-home__title,
  46. .demo-home__desc {
  47. padding-left: 32rpx;
  48. font-weight: normal;
  49. line-height: 42rpx;
  50. user-select: none;
  51. }
  52. .demo-home__title {
  53. margin: 0 0 32rpx;
  54. font-size: 64rpx;
  55. }
  56. .demo-home__image,
  57. .demo-home__text {
  58. display: inline-block;
  59. }
  60. .demo-home__image {
  61. width: 500rpx;
  62. height: 152rpx;
  63. }
  64. .demo-home__text {
  65. margin-left: 32rpx;
  66. font-weight: 500;
  67. }
  68. .demo-home__title .demo-home--small {
  69. font-size: 48rpx;
  70. }
  71. .demo-home__desc {
  72. margin: 0 0 80rpx;
  73. color: rgba(69, 90, 100, 0.6);
  74. font-size: 28rpx;
  75. }
  76. </style>