inleft
2022-02-18 7b98c8999087b7551d2e2e32daf12dd10a0d9713
日志详情加锁页
9 files modified
185 ■■■■ changed files
package.json 2 ●●● patch | view | raw | blame | history
src/components/fixed/header.vue 2 ●●● patch | view | raw | blame | history
src/components/mini/Aplayer.vue 35 ●●●● patch | view | raw | blame | history
src/components/mini/box-friend.vue 30 ●●●●● patch | view | raw | blame | history
src/components/mini/box10-add.vue 8 ●●●● patch | view | raw | blame | history
src/components/mini/box3-archive.vue 6 ●●●● patch | view | raw | blame | history
src/components/mini/box4-minibox.vue 4 ●●● patch | view | raw | blame | history
src/components/mini/mdDetail.vue 96 ●●●● patch | view | raw | blame | history
src/components/swichLabel/main1-show.vue 2 ●●● patch | view | raw | blame | history
package.json
@@ -1,5 +1,5 @@
{
    "name": "default",
    "name": "loading..",
    "version": "0.1.0",
    "private": true,
    "scripts": {
src/components/fixed/header.vue
@@ -66,7 +66,7 @@
            return {
                search: {
                    placeholder: "ctrl+shift+f/enter",
                    allowClear: true,
                    // allowClear: true,
                    // autoFocus: true,
                    backfill: true,
                    value: '',
src/components/mini/Aplayer.vue
@@ -1,24 +1,49 @@
<template>
    <div class="fade">
        <aplayer :audio="audio"  fixed  style="z-index: 10;" :preload="preload"/>
        <aplayer :audio="audio" fixed style="z-index: 10;" :preload="preload" />
        <!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
        :maskClosable="false"    :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">
            <p>{{secondsToGo}}秒后关闭</p>
        </a-modal> -->
    </div>
</template>
<script>
    import APlayer from '@moefe/vue-aplayer';
    export default {
        data() {
            return {
                preload:"none",
                modal1Visible: true,
                secondsToGo: 5,
                preload: "none",
                audio: {
                    name: 'Moonwisher',
                    artist: 'Kan R. Gao',
                    // url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    url: '/moon.mp3',
                    url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    // url: '/moon.mp3',
                    cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130',
                },
            };
        },
        created() {
            // const interval = setInterval(() => {
            //     this.secondsToGo -= 1;
            // }, 1000);
            // setTimeout(() => {
            //     clearInterval(interval);
            //     this.modal1Visible = false
            // }, 5000);
        },
        methods: {
            setModal1Visible(modal1Visible) {
                this.modal1Visible = modal1Visible;
            },
        },
    };
    // var ap = new APlayer({
src/components/mini/box-friend.vue
@@ -3,18 +3,19 @@
        <div v-for="temp in list">
            <h1>{{temp.groupName}}</h1>
            <hr>
            <div class="link-box"  >
            <div class="link-box">
                <!-- <a href="#" target="_blank" class="no-underline"> -->
                <a :href="listTemp.url" target="_blank" class="no-underline" v-for="listTemp in temp.linkVoList">
                    <div class="thumb">
                        <img width="200" height="200"
                         :src="listTemp.avatar" :onerror="img404"
                            :alt="listTemp.name">
                    </div>
                    <div class="content">
                        <p class="title">
                            {{listTemp.name}}
                        </p>
                    <div class="myFlex">
                        <div class="thumb">
                            <img width="200" height="200" :src="listTemp.avatar" :onerror="img404" :alt="listTemp.name">
                        </div>
                        <div class="content">
                            <p class="title">
                                {{listTemp.name}}
                            </p>
                        </div>
                    </div>
                </a>
            </div>
@@ -34,7 +35,7 @@
        },
        data() {
            return {
                img404:"this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
                img404: "this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
                list: []
            }
        }
@@ -44,6 +45,13 @@
</script>
<style lang="less">
    .myFlex {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .myFriend {
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        padding: 10px 30px 0px;
src/components/mini/box10-add.vue
@@ -125,14 +125,14 @@
                        :getCalendarContainer="getCalendarContainer()" />
                </a-form-model-item>
                <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;">
                <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
                    <a-form-model-item label="置顶">
                        <a-switch v-model="form.top" />
                    </a-form-model-item>
                    <div v-show="form.top">
                        <a-form-model-item label="权重">
                            <a-slider v-model="form.sliderValue" :default-value="80" :step="5"
                            <a-slider v-model="form.sliderValue" :default-value="50" :step="5"
                                :getTooltipPopupContainer="getCalendarContainer()" />
                            <span class="myTip">
                                越小越靠前
@@ -164,10 +164,10 @@
                        </a-form-model-item>
                        <a-form-model-item label="授权密码" v-show="form.auth=='password'">
                            <a-input v-model="form.password" autocomplete='new-password' type="password"
                            <a-input-password v-model="form.password" autocomplete='new-password' type="password"
                                placeholder="独立密码">
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                            </a-input-password>
                        </a-form-model-item>
                    </div>
src/components/mini/box3-archive.vue
@@ -11,13 +11,13 @@
                    <p class="blog-pigeonhole-p">{{yearData.year}}年</p>
                </router-link>
                <div class="blog-pigeonhole-list">
                    <div class="blog-pigeonhole-item" v-for="item in yearData.list">
                        <router-link to="/tagTime?type=3">
                            <span>{{item.month}}月</span>
                        </router-link>
                        <span>{{item.count}}篇</span>
                            <span>{{item.count}}篇</span>
                    </div>
                </div>
            </div>
src/components/mini/box4-minibox.vue
@@ -16,9 +16,7 @@
        <div class="blog-scroll show-line ">
            <div class="blog-right-side-meta " v-for="item in list">
                <div>
                    <router-link to="/box1">
                        <span class="blog-display-hide-content">{{item.name}}</span>
                    </router-link>
                    <span class="blog-display-hide-content">{{item.name}}</span>
                </div>
            </div>
        </div>
src/components/mini/mdDetail.vue
@@ -1,13 +1,33 @@
<template>
    <div class="article-meta ">
        <a-button @click="back" style="position: absolute;">
            <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>
            <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() {
@@ -43,6 +110,15 @@
<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),
src/components/swichLabel/main1-show.vue
@@ -26,7 +26,7 @@
                    <a-col v-bind="colMini" :style="{'position':'absolute','right':'30px'}">
                        <a-affix :offset-top="550">
                            <a-button @click="showDrawer1">
                                抽屉1
                                more
                            </a-button>
                        </a-affix>
                    </a-col>