inleft
2022-01-14 56a4b88b16b5f86a2a697018a3e2546d3abf73e3
commit | author | age
56a4b8 1 <template>
I 2     <div class="article-meta">
3         <a-button @click="back">
4             <a-icon type="left" />
5         </a-button>
6         <a-divider orientation="left">
7             文章详情
8         </a-divider>
9         <div class="markdown-body article-detail">
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
43 <style scoped>
44     @import '../../assets/md.css';
45
46     
47
48     /* #test{
49         padding-left: 25%;
50         padding-right: 25%;
51     } */
52     /* h3 {
53         margin: 40px 0 0;
54     }
55
56     ul {
57         list-style-type: none;
58         padding: 0;
59     }
60
61     li {
62         display: inline-block;
63         margin: 0 10px;
64     }
65
66     a {
67         color: #42b983;
68     }
69     
70      */
71
72
73     /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */
74     /* .markdown-body {
75         padding: 20px;
76         min-width: 200px;
77         max-width: 900px;
78         font-size: 12px;
79
80         h2 {
81             font-size: 18px;
82             margin: 1em 0 15px;
83             padding-top: 0.8em;
84             padding-bottom: 0.8em;
85         }
86
87         h3 {
88             font-size: 14px;
89             margin: 22px 0 16px;
90         }
91
92         h4 {
93             font-size: 13px;
94             margin: 20px 0 16px;
95         }
96
97         h5 {
98             font-size: 12px;
99             margin: 16px 0 16px;
100             font-weight: 700;
101         }
102
103         p {
104             font-size: 12px;
105             line-height: 24px;
106             color: #666666;
107             margin-top: 0px;
108             margin: 8px 0;
109             margin: 14px 0 14px;
110         }
111
112         pre {
113             background-color: #eee;
114             margin-bottom: 8px;
115             margin-top: 8px;
116             margin: 12px 0 12px;
117         }
118
119         blockquote {
120             margin-bottom: 8px;
121             margin-top: 8px;
122             margin: 14px 0 14px;
123             background-color: #eee;
124             padding: 16px 16px;
125         }
126
127         tr {
128             background-color: #f5f5f5;
129         }
130
131         code {
132             background-color: #eee;
133         }
134
135         ul,
136         ol,
137         li {
138             list-style: unset;
139             font-size: 12px;
140             line-height: 20px;
141             color: #666666;
142             margin-top: 0px;
143             margin: 8px 0;
144         }
145
146         blockquote {
147             border-color: #48b6e2;
148         }
149
150         table {
151             display: table;
152             width: 100%;
153             max-width: 100%;
154             margin-bottom: 20px;
155         }
156     } */
157 </style>