From 3a5d6662fbeb80426d9708a5d4684bdd5c1f072f Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Tue, 02 Aug 2022 17:37:00 +0800 Subject: [PATCH] 优化卡片外链,碎碎念标志 --- src/components/mini/box13-reply.vue | 4 +- src/components/mini/box-new-article.vue | 64 ++++++++++++++++++++++++++++--- src/components/group/articleListScorll.vue | 2 + 3 files changed, 61 insertions(+), 9 deletions(-) diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue index b59c978..d7d4aa5 100644 --- a/src/components/group/articleListScorll.vue +++ b/src/components/group/articleListScorll.vue @@ -34,6 +34,8 @@ queryBlogArticleList } from '../../api/blogArticle.js' + + export default { components: { box5, diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue index b06bece..7c7b909 100644 --- a/src/components/mini/box-new-article.vue +++ b/src/components/mini/box-new-article.vue @@ -3,14 +3,25 @@ <div class="recent-post-item"> <div class="miniTag" v-if="isTop==1">置顶</div> <div class="post_cover left_radius" v-if="index%2==0"> - <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> + + <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5" + @click="showMsg(articleFileType,jumpURL)"> + <div class="block left_radius"></div> + <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> + </a> + <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else> <div class="block left_radius"></div> <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> </router-link> </div> <div class="post_cover right_radius" v-else> - <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> + <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5" + @click="showMsg(articleFileType,jumpURL)"> + <div class="block left_radius"></div> + <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> + </a> + <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else> <div class="block right_radius"></div> <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title"> --> @@ -18,7 +29,16 @@ </div> <div class="recent-post-info"> - <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title"> + + <a :href="jumpURL" target="_blank" class="article-title" v-if="articleFileType==5" + @click="showMsg(articleFileType,jumpURL)"> + <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> + <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> + {{title}} + <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge> + </a> + + <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title" v-else> <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> {{title}} @@ -29,15 +49,30 @@ <span class="post-meta-date"> <a-icon type="calendar" /> <span class="article-meta-label"></span> - <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">{{publishDate}}</time> + <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00"> {{publishDate}} </time> </span> <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> + <span class="article-meta"> <a-icon type="book" /> <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}" - class="article-meta__categories"> - {{articleTypeName}} - </router-link> + class="article-meta__categories"> {{articleTypeName}}</router-link> + <span v-if="articleFileType==5"> + <span v-if="jumpURL !=null && jumpURL!=''"> + <span class="article-meta__separator" style="margin: 0px 3px ;">|</span> + <span class="post-meta-date"> + <a-icon type="share-alt" /> + <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a> + </span> + </span> + + <span v-else> + <span class="article-meta__separator" style="margin: 0px 3px ;">|</span> + <span class="post-meta-date"> + <a-icon type="thunderbolt" />碎碎念 + </span> + </span> + </span> <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> --> </span> </div> @@ -55,6 +90,14 @@ } from '@ant-design/icons-vue'; export default { + methods: { + showMsg(articleFileType, jumpURL) { + if (articleFileType == 5 && (jumpURL == null || jumpURL == "")) { + this.$message.info('这只是一句碎碎念,没有更多内容啦', 3); + return + } + } + }, components: { NotificationOutlined }, @@ -93,6 +136,12 @@ default: "", }, "isAnyUpdate": { + default: "", + }, + "articleFileType": { + default: 1, + }, + "jumpURL": { default: "", } }, @@ -318,6 +367,7 @@ order: 3; color: #858585; font-size: 90%; + flex-wrap: wrap; .article-meta-label { padding-right: 0.2rem; diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue index 4b2c896..c5ef6b2 100644 --- a/src/components/mini/box13-reply.vue +++ b/src/components/mini/box13-reply.vue @@ -15,11 +15,11 @@ <a-input v-model="form.homePage" placeholder="https:// or http://"> </a-input> </a-form-model-item> - <a-form-model-item label="马甲认证" + <a-form-model-item label="认证" v-show="form.nickName=='inleft'||form.nickName=='笔墨'||form.nickName=='阿墨'"> <a-input-password v-model="form.authCode" autocomplete='new-password' type="password" placeholder="我的授权码"> - <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> + <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/> </a-input-password> </a-form-model-item> </a-form-model> -- Gitblit v1.9.1