page-lesson-detail.component.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /* 全局样式文件(styles.css)或组件样式文件 */
  2. ion-img {
  3. width: 100%;
  4. /* 设置为你想要的宽度 */
  5. height: 350px;
  6. /* 设置为你想要的高度 */
  7. object-fit: cover;
  8. /* 调整适应方式,保持原始比例并填充容器 */
  9. }
  10. .custom-subtitle {
  11. color: red;
  12. font-size: 22px;
  13. font-style: italic;
  14. text-align: right;
  15. display: inline-block;
  16. }
  17. .navfooter {
  18. width: 100%;
  19. height: 120px;
  20. }
  21. .material-label {
  22. display: block;
  23. }
  24. .input-box {
  25. width: 300px;
  26. height: 40px;
  27. border-radius: 20px;
  28. background-color: #f2f2f2;
  29. padding: 10px;
  30. border: none;
  31. outline: none;
  32. font-size: 16px;
  33. color: #333;
  34. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  35. }
  36. //评论区
  37. .commentbox {
  38. p {
  39. padding-left: 70px;
  40. padding-right: 30px;
  41. }
  42. .icon-container {
  43. color: grey;
  44. }
  45. }
  46. //固定评论输入框
  47. .footer {
  48. position: fixed;
  49. bottom: 60px;
  50. width: 100vw;
  51. }
  52. .send-container {
  53. display: flex;
  54. align-items: center;
  55. padding: 10px;
  56. background-color: #f2f2f2;
  57. }
  58. .message-input {
  59. flex: 1;
  60. padding: 8px;
  61. border: none;
  62. border-radius: 20px;
  63. background-color: #fff;
  64. }
  65. .send-button {
  66. padding: 8px 15px;
  67. border: none;
  68. border-radius: 20px;
  69. background-color: #38c1f5;
  70. color: white;
  71. font-weight: bold;
  72. cursor: pointer;
  73. margin-left: 10px;
  74. }