|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
-
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{{.title}}</title>
- </head>
-
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- img {
- max-width: 100%
- }
- #app {
- padding: 1.5rem;
- width: 100vw;
- box-sizing: border-box;
- height: 100vh;
- }
-
- h3 {
- font-size: 1.3rem;
- padding-bottom: 1.2rem;
- }
-
- .slogan-time {
- overflow: hidden;
- }
-
- .floatLeft {
- float: left;
- }
-
- .floatLeft>h4 {
- display: inline-block;
- font-size: 1rem;
- }
-
- .floatLeft>span {
- border-left: 1px solid rgb(151, 150, 150);
- padding-left: .5rem;
- height: .8rem;
- line-height: .8rem;
- display: inline-block;
- color: rgb(151, 150, 150);
- margin-left: .2rem;
- }
- .floatRight {
- float: right;
- font-size: .8rem;
- color: rgb(151, 150, 150);
-
- }
-
- .vHmtl {
- padding-top: 1.2rem;
- width: 100%;
- height: auto;
- }
- </style>
-
- <body>
- <div id="app">
- <header>
- <h3>{{.title}}</h3>
- <div class="slogan-time">
- <div class="floatLeft">
- <h4>{{.author}}</h4>
- <span>{{.time}}</span>
- </div>
-
- <div class="floatRight">
- {{.studyCount}}人已学习
- </div>
- </div>
- </header>
- <div class="vHmtl" v-html="hello"></div>
- </div>
- </body>
- </html>
- <script>
- new Vue({
- el: '#app',
- data: {
- hello: '<p style="color:#ff0000">{{.content}}</p>'
- }
- })
- </script>
-
|