inleft
2022-01-21 f9c38ed1b72fc96b96c1d3ffdcc1a66b03bd3b73
commit | author | age
56a4b8 1 <template>
b505f3 2     <div class="article-meta ">
I 3         <a-button @click="back" style="position: absolute;">
56a4b8 4             <a-icon type="left" />
I 5         </a-button>
b505f3 6         <!-- <a-divider orientation="left">
56a4b8 7             文章详情
b505f3 8         </a-divider> -->
56a4b8 9         <div class="markdown-body article-detail">
I 10             <vue-markdown :source="source"></vue-markdown>
11         </div>
12     </div>
13 </template>
14
15 <script>
16     import VueMarkdown from 'vue-markdown'
17     import esPath from '../../assets/es.md'
18
19     export default {
20         // props: ['id'], //接收动态路由的值
21         components: {
22             VueMarkdown
23         },
24         data() {
25             return {
26                 source: esPath,
27             }
28         },
29         methods: {
30             back: function() {
31                 this.$router.go(-1);
32
33             }
34         },
35         mounted() {
36             // console.log(this.$route.params)
37             // console.log(this.$route.params.id)
38             // console.log(this.$route.query.id)
39         }
40     }
41 </script>
42
b505f3 43 <style lang="less">
I 44     @import '../../assets/md.less';
56a4b8 45
b505f3 46     .markdown-body {
I 47         padding: 10px 20px 10px 20px;
48         box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
49             -8px -8px 18px #ffffff;
50     }
56a4b8 51
I 52     /* #test{
53         padding-left: 25%;
54         padding-right: 25%;
55     } */
56     /* h3 {
57         margin: 40px 0 0;
58     }
59
60     ul {
61         list-style-type: none;
62         padding: 0;
63     }
64
65     li {
66         display: inline-block;
67         margin: 0 10px;
68     }
69
70     a {
71         color: #42b983;
72     }
73     
74      */
75
76
77     /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */
78     /* .markdown-body {
79         padding: 20px;
80         min-width: 200px;
81         max-width: 900px;
82         font-size: 12px;
83
84         h2 {
85             font-size: 18px;
86             margin: 1em 0 15px;
87             padding-top: 0.8em;
88             padding-bottom: 0.8em;
89         }
90
91         h3 {
92             font-size: 14px;
93             margin: 22px 0 16px;
94         }
95
96         h4 {
97             font-size: 13px;
98             margin: 20px 0 16px;
99         }
100
101         h5 {
102             font-size: 12px;
103             margin: 16px 0 16px;
104             font-weight: 700;
105         }
106
107         p {
108             font-size: 12px;
109             line-height: 24px;
110             color: #666666;
111             margin-top: 0px;
112             margin: 8px 0;
113             margin: 14px 0 14px;
114         }
115
116         pre {
117             background-color: #eee;
118             margin-bottom: 8px;
119             margin-top: 8px;
120             margin: 12px 0 12px;
121         }
122
123         blockquote {
124             margin-bottom: 8px;
125             margin-top: 8px;
126             margin: 14px 0 14px;
127             background-color: #eee;
128             padding: 16px 16px;
129         }
130
131         tr {
132             background-color: #f5f5f5;
133         }
134
135         code {
136             background-color: #eee;
137         }
138
139         ul,
140         ol,
141         li {
142             list-style: unset;
143             font-size: 12px;
144             line-height: 20px;
145             color: #666666;
146             margin-top: 0px;
147             margin: 8px 0;
148         }
149
150         blockquote {
151             border-color: #48b6e2;
152         }
153
154         table {
155             display: table;
156             width: 100%;
157             max-width: 100%;
158             margin-bottom: 20px;
159         }
160     } */
161 </style>