From 1b6f1e454fff0187d4d30dcf0d5819d4f57f1787 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 01:05:14 +0800 Subject: [PATCH] 新增iframe 播放页 新增日志编辑页 --- src/components/mini/box-new-article.vue | 222 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 178 insertions(+), 44 deletions(-) diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue index f8fd220..5acd1a9 100644 --- a/src/components/mini/box-new-article.vue +++ b/src/components/mini/box-new-article.vue @@ -1,44 +1,63 @@ <template> - <div> - <div class="recent-posts" id="recent-posts" v-for="(item ,index) in [1,1,1]"> - <div class="recent-post-item"> - - <div class="post_cover left_radius" v-if="index%2==0"> - <router-link to="/mdDetail" :title="title"> - <div class="block left_radius"></div> - <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"> - </router-link> - </div> - - <div class="post_cover right_radius" v-else> - <router-link to="/mdDetail" :title="title"> - <div class="block right_radius"></div> - <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"> - </router-link> - </div> + <div class="recent-posts" id="recent-posts"> + <div class="recent-post-item"> + <div class="miniTag" v-if="isTop==1">置顶</div> + <div class="post_cover left_radius" v-if="index%2==0"> + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> + <div class="block left_radius"></div> + <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> + </a> + </div> - <div class="recent-post-info"> - <router-link to="/mdDetail" class="article-title"> {{title}} </router-link> - <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> --> - <div class="article-meta-wrap" style="display: flex;"> - <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">{{publishTime}}</time> + <div class="post_cover right_radius" v-else> + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> + <div class="block right_radius"></div> + <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> + </a> + </div> + + <div class="recent-post-info"> + + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> + <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> + + <div class="article-meta-wrap" style="display: flex;"> + <span class="post-meta-date" style="margin-right: 7px;"> + <a-icon type="calendar" /> + <span class="article-meta-label"></span> + <span class="article-meta__categories"> {{publishDate}} </span> + </span> + + <span class="article-meta"> + <a-icon type="book" /> + <a @click="routerToTypeList(articleTypeId)" class="article-meta__categories"> + {{articleTypeName}} + </a> + + <span v-if="jumpURL !=null && jumpURL!=''"> + <a-icon type="share-alt" /> + <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a> </span> - <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> - <span class="article-meta"> - <a-icon type="book" /> - <router-link to="/mdDetail" class="article-meta__categories"> {{tag}} </router-link> - <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> --> + <span v-else-if="articleFileType==fileType.fileTypeTalking_9"> + <a-icon type="thunderbolt" /> + <span class="post-meta-date">碎碎念</span> </span> - </div> - <div class="content"> - {{content}} - </div> + + <span v-if="articleFileType==fileType.fileTypeVideo_3"> + <a-icon type="video-camera" /> + <span class="post-meta-date"> + <a @click="routerToPlatform()">视频</a> + </span> + </span> + <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> --> + </span> + </div> + <div class="content"> + {{introduce}} </div> </div> </div> @@ -46,13 +65,103 @@ </template> <script> + import { + NotificationOutlined + } from '@ant-design/icons-vue'; + + import myConstant from "../../config/myConstant.js" + + export default { + components: { + NotificationOutlined + }, data() { return { - "title": "使用KeyStore生成证书", - "publishTime": "2022-01-14", - "tag": "随手记", - "content": "前言Keytool是一个Java数据证书的管理工具 , 在keystore里,包含两种数据: 密钥实体(Key entity):即密钥(secret key)又或者是私钥和配对公钥(采用非对称加密) 可信任的证书实体(trusted certificate entries):即证书(包含公钥) keytool常用命令: genkey 在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg 指定密钥的算法 (如 RSA DSA(如果不指定默认采用DSA)) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass 指定密钥库的密码(获取keystore信息所需的密码) keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如: “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ..." + fileType: myConstant.fileType, + img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"", + } + }, + methods: { + routerJump(id, articleFileType, typeId) { + let routerName = "mdDetail"; + // if (articleFileType == this.fileType.fileTypeVideo_3) { + // routerName = "videoDetail"; + // } + + this.$router.push({ + name: routerName, + query: { + id: id, + articleFileType: articleFileType, + typeId: typeId + }, + // params: { + // id: id, + // articleFileType: articleFileType, + // typeId: typeId + // } + }) + }, + routerToPlatform() { + this.$router.push({ + name: "platformGroup" + }) + }, + routerToTypeList(typeId) { + this.$router.push({ + name: "articleList", + query: { + typeId: typeId, + } + }) + } + }, + props: { + "index": { + default: 0, + }, + "typeId": { + default: "", + }, + "id": { + default: 0, + }, + "articleTypeId": { + default: null + }, + "isTop": { + default: 0, + }, + "authStatus": { + default: 1, + }, + "title": { + default: "", + }, + "articleTypeName": { + default: "", + }, + "introduce": { + default: "", + }, + "publishDate": { + default: "", + }, + "updateDate": { + default: "", + }, + "coverFileURL": { + default: "", + }, + "isAnyUpdate": { + default: "", + }, + "articleFileType": { + default: 1, + }, + "jumpURL": { + default: "", } } } @@ -68,6 +177,28 @@ @title-clolr: dimgray; @card-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); + .recent-post-item { + position: relative; + + a { + position: initial; + } + + img { + user-select: none; + } + } + + .miniTag { + z-index: 1; + position: absolute; + right: 8px; + top: 8px; + transform: rotate(30deg); + box-shadow: aliceblue; + } + + // #recent-posts>.recent-post-item:not(:first-child) { // margin-top: 1rem; @@ -152,9 +283,10 @@ } #recent-posts>.recent-post-item .post_cover { - width: 33%; - position: sticky; + // position: sticky; + position: inherit; + width: 33%; opacity: .8; padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion); overflow: hidden; @@ -255,6 +387,7 @@ order: 3; color: #858585; font-size: 90%; + flex-wrap: wrap; .article-meta-label { padding-right: 0.2rem; @@ -357,9 +490,10 @@ line-height: 1.7; color: #999; display: -webkit-container; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; + min-height: 20px; } } -- Gitblit v1.9.1