index.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <demo-home :list="list" />
  3. </template>
  4. <script>
  5. import config from '../../common/js/config.js';
  6. import DemoHome from '../../components/DemoHome/DemoHome.vue';
  7. export default {
  8. components: {
  9. DemoHome
  10. },
  11. data() {
  12. return {
  13. list: config
  14. }
  15. },
  16. }
  17. </script>
  18. <style scoped lang="scss">
  19. .demo-home {
  20. box-sizing: border-box;
  21. width: 100%;
  22. min-height: 100vh;
  23. padding: 92rpx 40rpx 40rpx;
  24. background: linear-gradient(131.16deg, rgba(240, 242, 247, 1) 0%, rgba(255, 250, 250, 1) 100%, rgba(216, 220, 230, 1) 100%);
  25. }
  26. .demo-home__title,
  27. .demo-home__desc {
  28. padding-left: 32rpx;
  29. font-weight: normal;
  30. line-height: 1;
  31. user-select: none;
  32. }
  33. .demo-home__title {
  34. margin: 0 0 32rpx;
  35. font-size: 64rpx;
  36. }
  37. .demo-home__image,
  38. .demo-home__text {
  39. display: inline-block;
  40. vertical-align: middle;
  41. }
  42. .demo-home__image {
  43. width: 64rpx;
  44. height: 64rpx;
  45. }
  46. .demo-home__text {
  47. margin-left: 32rpx;
  48. font-weight: 500;
  49. }
  50. .demo-home__title .demo-home--small {
  51. font-size: 48rpx;
  52. }
  53. .demo-home__desc {
  54. margin: 0 0 80rpx;
  55. color: rgba(69, 90, 100, 0.6);
  56. font-size: 28rpx;
  57. }
  58. </style>