Content.vue 746 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div v-html="html" class="content"></div>
  3. </template>
  4. <script>
  5. export default {
  6. props: {
  7. html: {
  8. type: String,
  9. default: ""
  10. }
  11. }
  12. };
  13. </script>
  14. <style lang="less" scoped>
  15. .content {
  16. margin-top: 20px;
  17. font: 18px/29px "Golos Text";
  18. ::v-deep iframe {
  19. width: 100%;
  20. height: auto;
  21. aspect-ratio: 16 / 9;
  22. }
  23. ::v-deep a {
  24. color: #a6d0ff;
  25. }
  26. ::v-deep .style1 {
  27. display: block;
  28. background: rgba(255, 255, 255, 0.15);
  29. padding: 33px;
  30. margin-top: 20px;
  31. strong {
  32. font-weight: bold;
  33. font-size: 24px;
  34. }
  35. }
  36. @media screen and(max-width: 768px) {
  37. ::v-deep .style1 {
  38. padding: 5px;
  39. strong {
  40. font-size: 18px;
  41. }
  42. }
  43. }
  44. }
  45. </style>