You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

HelpLesson.vue 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <AppBox class="lesson"
  3. :class="{ 'lesson--small': small }"
  4. :photo="`photo--${lesson.photo}`"
  5. :title="lesson.title"
  6. :content="content"
  7. @click="$emit('click')">
  8. <template v-slot:footer>
  9. <div v-if="!small" class="box__footer text-center">
  10. <a v-for="(button,key) in lesson.buttons"
  11. :key="key"
  12. :href="button.href"
  13. :data-href="button.href"
  14. target="_blank"
  15. class="button button--sm"
  16. @click="onButtonClick">
  17. {{ button.text }}
  18. </a>
  19. </div>
  20. </template>
  21. </AppBox>
  22. </template>
  23. <script>
  24. import { truncate, startsWith } from 'lodash'
  25. export default {
  26. props: {
  27. lesson: {
  28. type: Object,
  29. required: true,
  30. },
  31. small: {
  32. type: Boolean,
  33. default: false,
  34. },
  35. },
  36. computed: {
  37. content() {
  38. let content
  39. if (this.small) {
  40. content = this.lesson.summary || truncate(this.lesson.content, { length: 80 })
  41. } else {
  42. content = this.lesson.content
  43. }
  44. return content
  45. },
  46. },
  47. methods: {
  48. onButtonClick(event) {
  49. if (startsWith(event.srcElement.dataset.href, '/')) {
  50. event.preventDefault()
  51. this.$router.push(event.srcElement.dataset.href)
  52. }
  53. },
  54. },
  55. }
  56. </script>
  57. <style lang="scss" scoped>
  58. /* purgecss start ignore */
  59. .lesson {
  60. &::v-deep {
  61. &.lesson--small {
  62. .title {
  63. @apply text-base;
  64. }
  65. .box__content {
  66. @apply text-xs #{!important};
  67. }
  68. .box__photo {
  69. height: 130px;
  70. }
  71. }
  72. ul {
  73. @apply list-disc;
  74. li {
  75. @apply text-sm ml-3;
  76. }
  77. }
  78. code {
  79. @apply mx-1 p-1 bg-gray-800;
  80. }
  81. .box__photo {
  82. height: 180px;
  83. }
  84. .box__content {
  85. @apply pt-3;
  86. }
  87. .photo--drag {
  88. background-image: url('~assets/images/undraw/undraw_throw_down_ub2l.svg')
  89. }
  90. .photo--tips {
  91. background-image: url('~assets/images/undraw/undraw_depi_wexf.svg')
  92. }
  93. .photo--settings {
  94. background-image: url('~assets/images/undraw/undraw_personal_settings_kihd.svg')
  95. }
  96. .photo--preferences {
  97. background-image: url('~assets/images/undraw/undraw_female_avatar_w3jk.svg')
  98. }
  99. .photo--better-results {
  100. background-image: url('~assets/images/undraw/undraw_blank_canvas_3rbb.svg')
  101. }
  102. .photo--tips-ads {
  103. background-image: url('~assets/images/undraw/undraw_elements_cipa.svg')
  104. }
  105. .photo--preferences-mode {
  106. background-image: url('~assets/images/undraw/undraw_selected_options_42hx.svg')
  107. }
  108. .photo--videos {
  109. background-image: url('~assets/images/undraw/undraw_video_files_fu10.svg')
  110. }
  111. .photo--masks {
  112. background-image: url('~assets/images/undraw/undraw_making_art_759c.svg')
  113. }
  114. .photo--support {
  115. background-image: url('~assets/images/undraw/undraw_active_support_6rwo.svg')
  116. }
  117. }
  118. }
  119. .box__footer {
  120. .button {
  121. @apply mr-2;
  122. }
  123. }
  124. /* purgecss end ignore */
  125. </style>