蛋蛋星球-客户端
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.
 
 
 
 
 
 

96 lines
1.8 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{{.title}}</title>
  7. </head>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  9. <style>
  10. * {
  11. padding: 0;
  12. margin: 0;
  13. }
  14. img {
  15. max-width: 100%
  16. }
  17. #app {
  18. padding: 1.5rem;
  19. width: 100vw;
  20. box-sizing: border-box;
  21. height: 100vh;
  22. }
  23. h3 {
  24. font-size: 1.3rem;
  25. padding-bottom: 1.2rem;
  26. }
  27. .slogan-time {
  28. overflow: hidden;
  29. }
  30. .floatLeft {
  31. float: left;
  32. }
  33. .floatLeft>h4 {
  34. display: inline-block;
  35. font-size: 1rem;
  36. }
  37. .floatLeft>span {
  38. border-left: 1px solid rgb(151, 150, 150);
  39. padding-left: .5rem;
  40. height: .8rem;
  41. line-height: .8rem;
  42. display: inline-block;
  43. color: rgb(151, 150, 150);
  44. margin-left: .2rem;
  45. }
  46. .floatRight {
  47. float: right;
  48. font-size: .8rem;
  49. color: rgb(151, 150, 150);
  50. }
  51. .vHmtl {
  52. padding-top: 1.2rem;
  53. width: 100%;
  54. height: auto;
  55. }
  56. </style>
  57. <body>
  58. <div id="app">
  59. <header>
  60. <h3>{{.title}}</h3>
  61. <div class="slogan-time">
  62. <div class="floatLeft">
  63. <h4>{{.author}}</h4>
  64. <span>{{.time}}</span>
  65. </div>
  66. <div class="floatRight">
  67. {{.studyCount}}人已学习
  68. </div>
  69. </div>
  70. </header>
  71. <div class="vHmtl" v-html="hello"></div>
  72. </div>
  73. </body>
  74. </html>
  75. <script>
  76. new Vue({
  77. el: '#app', // 选择器
  78. data: {
  79. hello: '<p style="color:#ff0000">{{.content}}</p>'
  80. }
  81. })
  82. </script>