| | |
| | | <template> |
| | | <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"> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :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="post_cover right_radius" v-else> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> |
| | | <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"> --> |
| | | </router-link> |
| | | </div> |
| | | <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"> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id}}" 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}} |
| | | </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">{{publishDate}}</time> |
| | | <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="{path:'/articleList',query:{typeId:articleTypeId}}" |
| | | class="article-meta__categories"> |
| | | {{articleTypeName}} |
| | | </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"> |
| | | {{introduce}} |
| | | </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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | NotificationOutlined |
| | | } from '@ant-design/icons-vue'; |
| | | |
| | | import myConstant from "../../config/myConstant.js" |
| | | |
| | | |
| | | export default { |
| | | components: { |
| | | NotificationOutlined |
| | | }, |
| | | data() { |
| | | return { |
| | | 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, |
| | |
| | | "publishDate": { |
| | | default: "", |
| | | }, |
| | | "updateDate": { |
| | | default: "", |
| | | }, |
| | | "coverFileURL": { |
| | | default: "", |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | img404: "this.onerror='';this.src=\"https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg\"", |
| | | // "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 - ..." |
| | | }, |
| | | "isAnyUpdate": { |
| | | default: "", |
| | | }, |
| | | "articleFileType": { |
| | | default: 1, |
| | | }, |
| | | "jumpURL": { |
| | | default: "", |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .recent-post-item { |
| | | position: relative; |
| | | |
| | | a { |
| | | position: initial; |
| | | } |
| | | |
| | | img { |
| | | user-select: none; |
| | | } |
| | | } |
| | | |
| | | .miniTag { |
| | |
| | | transform: rotate(30deg); |
| | | box-shadow: aliceblue; |
| | | } |
| | | |
| | | |
| | | |
| | | // #recent-posts>.recent-post-item:not(:first-child) { |
| | | // margin-top: 1rem; |
| | |
| | | } |
| | | |
| | | #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; |
| | |
| | | order: 3; |
| | | color: #858585; |
| | | font-size: 90%; |
| | | flex-wrap: wrap; |
| | | |
| | | .article-meta-label { |
| | | padding-right: 0.2rem; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | |