| commit | author | age | ||
| 56a4b8 | 1 | <template> |
| b505f3 | 2 | <div class="article-meta "> |
| 7b98c8 | 3 | <div> |
| I | 4 | <a-button @click="back" style="position: absolute;"> |
| 5 | <a-icon type="left" /> | |
| 6 | </a-button> | |
| 7 | </div> | |
| 8 | ||
| 9 | ||
| 10 | <div class="mySecret" v-if="!isHasId"> | |
| 11 | <h1>天长地久有时尽,此爱绵绵无绝期..</h1> | |
| 12 | <h3>日志id参数缺失</h3> | |
| 13 | ||
| 14 | </div> | |
| 15 | <div v-else> | |
| 16 | <div class="mySecret" v-if="myLock"> | |
| 17 | ||
| 18 | <h1>越不正经的人越深情..</h1> | |
| 19 | ||
| 20 | <h3>受庇护的文字..输入神秘代码以解除封印</h3> | |
| 21 | <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pass"> | |
| 22 | <a-input-password @pressEnter="pass"> | |
| 23 | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> | |
| 24 | </a-input-password> | |
| 25 | </a-auto-complete> | |
| 26 | </div> | |
| 27 | ||
| 28 | <div class="markdown-body article-detail" v-else> | |
| 29 | <vue-markdown :source="source"></vue-markdown> | |
| 30 | </div> | |
| 56a4b8 | 31 | </div> |
| I | 32 | </div> |
| 33 | </template> | |
| 34 | ||
| 35 | <script> | |
| 36 | import VueMarkdown from 'vue-markdown' | |
| 37 | import esPath from '../../assets/es.md' | |
| 38 | ||
| 39 | export default { | |
| 7b98c8 | 40 | props: ['id'], //接收动态路由的值 |
| 56a4b8 | 41 | components: { |
| I | 42 | VueMarkdown |
| 43 | }, | |
| 44 | data() { | |
| 45 | return { | |
| 7b98c8 | 46 | isHasId: false, |
| I | 47 | secret: '', |
| 48 | myLock: true, | |
| 49 | search: { | |
| 50 | placeholder: "", | |
| 51 | autoFocus: true, | |
| 52 | backfill: true, | |
| 53 | value: '', | |
| 54 | disabled: false | |
| 55 | }, | |
| 56 | // secret: "", | |
| 56a4b8 | 57 | source: esPath, |
| I | 58 | } |
| 59 | }, | |
| 7b98c8 | 60 | created() { |
| I | 61 | var queryId = this.$route.query.id; |
| 62 | if (queryId == undefined || queryId == null || queryId == "") { | |
| 63 | this.$message.error('日志id缺失..', 2.5) | |
| 64 | } else { | |
| 65 | this.isHasId = true; | |
| 66 | } | |
| 67 | ||
| 68 | }, | |
| 69 | watch: { | |
| 70 | '$route'(to, from) { | |
| 71 | var queryId = this.$route.query.id; | |
| 72 | if (queryId == undefined || queryId == null || queryId == "") { | |
| 73 | this.$message.error('日志id缺失..', 2.5) | |
| 74 | } | |
| 75 | ||
| 76 | } | |
| 77 | }, | |
| 56a4b8 | 78 | methods: { |
| 7b98c8 | 79 | pass() { |
| I | 80 | if (this.secret == "") { |
| 81 | return | |
| 82 | } | |
| 83 | this.search.disabled = true | |
| 84 | ||
| 85 | this.$message | |
| 86 | .loading('卍解..', 1.5) | |
| 87 | .then(() => { | |
| 88 | // this.myLock = false; | |
| 89 | // this.$message.success('Loading finished', 2.5) | |
| 90 | ||
| 91 | ||
| 92 | this.$message.warn('错了错了..', 2.5) | |
| 93 | ||
| 94 | this.search.disabled = false; | |
| 95 | }) | |
| 96 | ||
| 97 | }, | |
| 56a4b8 | 98 | back: function() { |
| I | 99 | this.$router.go(-1); |
| 100 | } | |
| 101 | }, | |
| 102 | mounted() { | |
| 103 | // console.log(this.$route.params) | |
| 104 | // console.log(this.$route.params.id) | |
| 105 | // console.log(this.$route.query.id) | |
| 106 | } | |
| 107 | } | |
| 108 | </script> | |
| 109 | ||
| b505f3 | 110 | <style lang="less"> |
| I | 111 | @import '../../assets/md.less'; |
| 56a4b8 | 112 | |
| 7b98c8 | 113 | .mySecret { |
| I | 114 | height: 715px; |
| 115 | display: flex; | |
| 116 | flex-direction: column; | |
| 117 | justify-content: center; | |
| 118 | padding-left: auto; | |
| 119 | align-items: center; | |
| 120 | } | |
| 121 | ||
| b505f3 | 122 | .markdown-body { |
| I | 123 | padding: 10px 20px 10px 20px; |
| 124 | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), | |
| 125 | -8px -8px 18px #ffffff; | |
| 126 | } | |
| 56a4b8 | 127 | |
| I | 128 | /* #test{ |
| 129 | padding-left: 25%; | |
| 130 | padding-right: 25%; | |
| 131 | } */ | |
| 132 | /* h3 { | |
| 133 | margin: 40px 0 0; | |
| 134 | } | |
| 135 | ||
| 136 | ul { | |
| 137 | list-style-type: none; | |
| 138 | padding: 0; | |
| 139 | } | |
| 140 | ||
| 141 | li { | |
| 142 | display: inline-block; | |
| 143 | margin: 0 10px; | |
| 144 | } | |
| 145 | ||
| 146 | a { | |
| 147 | color: #42b983; | |
| 148 | } | |
| 149 | ||
| 150 | */ | |
| 151 | ||
| 152 | ||
| 153 | /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */ | |
| 154 | /* .markdown-body { | |
| 155 | padding: 20px; | |
| 156 | min-width: 200px; | |
| 157 | max-width: 900px; | |
| 158 | font-size: 12px; | |
| 159 | ||
| 160 | h2 { | |
| 161 | font-size: 18px; | |
| 162 | margin: 1em 0 15px; | |
| 163 | padding-top: 0.8em; | |
| 164 | padding-bottom: 0.8em; | |
| 165 | } | |
| 166 | ||
| 167 | h3 { | |
| 168 | font-size: 14px; | |
| 169 | margin: 22px 0 16px; | |
| 170 | } | |
| 171 | ||
| 172 | h4 { | |
| 173 | font-size: 13px; | |
| 174 | margin: 20px 0 16px; | |
| 175 | } | |
| 176 | ||
| 177 | h5 { | |
| 178 | font-size: 12px; | |
| 179 | margin: 16px 0 16px; | |
| 180 | font-weight: 700; | |
| 181 | } | |
| 182 | ||
| 183 | p { | |
| 184 | font-size: 12px; | |
| 185 | line-height: 24px; | |
| 186 | color: #666666; | |
| 187 | margin-top: 0px; | |
| 188 | margin: 8px 0; | |
| 189 | margin: 14px 0 14px; | |
| 190 | } | |
| 191 | ||
| 192 | pre { | |
| 193 | background-color: #eee; | |
| 194 | margin-bottom: 8px; | |
| 195 | margin-top: 8px; | |
| 196 | margin: 12px 0 12px; | |
| 197 | } | |
| 198 | ||
| 199 | blockquote { | |
| 200 | margin-bottom: 8px; | |
| 201 | margin-top: 8px; | |
| 202 | margin: 14px 0 14px; | |
| 203 | background-color: #eee; | |
| 204 | padding: 16px 16px; | |
| 205 | } | |
| 206 | ||
| 207 | tr { | |
| 208 | background-color: #f5f5f5; | |
| 209 | } | |
| 210 | ||
| 211 | code { | |
| 212 | background-color: #eee; | |
| 213 | } | |
| 214 | ||
| 215 | ul, | |
| 216 | ol, | |
| 217 | li { | |
| 218 | list-style: unset; | |
| 219 | font-size: 12px; | |
| 220 | line-height: 20px; | |
| 221 | color: #666666; | |
| 222 | margin-top: 0px; | |
| 223 | margin: 8px 0; | |
| 224 | } | |
| 225 | ||
| 226 | blockquote { | |
| 227 | border-color: #48b6e2; | |
| 228 | } | |
| 229 | ||
| 230 | table { | |
| 231 | display: table; | |
| 232 | width: 100%; | |
| 233 | max-width: 100%; | |
| 234 | margin-bottom: 20px; | |
| 235 | } | |
| 236 | } */ | |
| 237 | </style> | |
