From 7b98c8999087b7551d2e2e32daf12dd10a0d9713 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Fri, 18 Feb 2022 18:55:42 +0800 Subject: [PATCH] 日志详情加锁页 --- src/components/mini/mdDetail.vue | 108 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 94 insertions(+), 14 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index d681f69..73394c8 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -1,13 +1,33 @@ <template> - <div class="article-meta"> - <a-button @click="back"> - <a-icon type="left" /> - </a-button> - <a-divider orientation="left"> - 文章详情 - </a-divider> - <div class="markdown-body article-detail"> - <vue-markdown :source="source"></vue-markdown> + <div class="article-meta "> + <div> + <a-button @click="back" style="position: absolute;"> + <a-icon type="left" /> + </a-button> + </div> + + + <div class="mySecret" v-if="!isHasId"> + <h1>天长地久有时尽,此爱绵绵无绝期..</h1> + <h3>日志id参数缺失</h3> + + </div> + <div v-else> + <div class="mySecret" v-if="myLock"> + + <h1>越不正经的人越深情..</h1> + + <h3>受庇护的文字..输入神秘代码以解除封印</h3> + <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pass"> + <a-input-password @pressEnter="pass"> + <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> + </a-input-password> + </a-auto-complete> + </div> + + <div class="markdown-body article-detail" v-else> + <vue-markdown :source="source"></vue-markdown> + </div> </div> </div> </template> @@ -17,19 +37,66 @@ import esPath from '../../assets/es.md' export default { - // props: ['id'], //接收动态路由的值 + props: ['id'], //接收动态路由的值 components: { VueMarkdown }, data() { return { + isHasId: false, + secret: '', + myLock: true, + search: { + placeholder: "", + autoFocus: true, + backfill: true, + value: '', + disabled: false + }, + // secret: "", source: esPath, } }, + created() { + var queryId = this.$route.query.id; + if (queryId == undefined || queryId == null || queryId == "") { + this.$message.error('日志id缺失..', 2.5) + } else { + this.isHasId = true; + } + + }, + watch: { + '$route'(to, from) { + var queryId = this.$route.query.id; + if (queryId == undefined || queryId == null || queryId == "") { + this.$message.error('日志id缺失..', 2.5) + } + + } + }, methods: { + pass() { + if (this.secret == "") { + return + } + this.search.disabled = true + + this.$message + .loading('卍解..', 1.5) + .then(() => { + // this.myLock = false; + // this.$message.success('Loading finished', 2.5) + + + this.$message.warn('错了错了..', 2.5) + + this.search.disabled = false; + }) + + }, back: function() { this.$router.go(-1); - } }, mounted() { @@ -40,10 +107,23 @@ } </script> -<style scoped > - /* @import '../../assets/md.less'; */ +<style lang="less"> + @import '../../assets/md.less'; - + .mySecret { + height: 715px; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: auto; + align-items: center; + } + + .markdown-body { + padding: 10px 20px 10px 20px; + box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), + -8px -8px 18px #ffffff; + } /* #test{ padding-left: 25%; -- Gitblit v1.9.1