From b4f6a53cc4815471c6b936cd462bb4500883a2f6 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 19 Jan 2022 02:11:40 +0800
Subject: [PATCH] 新增友链卡片
---
src/components/group/tempBoxActicle.vue | 134 +++++++++++++++++++++++++++++++++-----------
1 files changed, 100 insertions(+), 34 deletions(-)
diff --git a/src/components/group/tempBoxActicle.vue b/src/components/group/tempBoxActicle.vue
index fa4a326..9af73bb 100644
--- a/src/components/group/tempBoxActicle.vue
+++ b/src/components/group/tempBoxActicle.vue
@@ -3,14 +3,14 @@
<div class="recent-posts" id="recent-posts">
<div class="recent-post-item">
<div class="post_cover left_radius">
- <a href="/p/s211131.html" title="使用KeyStore生成证书">
+ <a href="#" title="使用KeyStore生成证书">
<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="使用KeyStore生成证书">
</a>
</div>
<div class="recent-post-info">
- <a class="article-title" href="/p/s211131.html" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
+ <a class="article-title" href="#" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
<div class="article-meta-wrap">
<span class="post-meta-date">
<i class="far fa-calendar-alt"></i>
@@ -19,19 +19,18 @@
</span>
<span class="article-meta">
<span class="article-meta__separator">|</span>
- <i class="fas fa-inbox"></i><a class="article-meta__categories"
- href="/categories/Java%E5%BC%80%E5%8F%91/%E9%9A%8F%E6%89%8B%E8%AE%B0/">随手记</a>
+ <i class="fas fa-inbox"></i><a class="article-meta__categories" href="#">随手记</a>
</span>
</div>
<div class="content">
前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret...
- <!--key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey
+ 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 - ... -->
+ “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ...
</div>
</div>
</div>
@@ -41,10 +40,6 @@
<script>
export default {
- components: {},
- data() {
- return {}
- }
}
</script>
@@ -56,6 +51,7 @@
@global-font-size: 14px;
@font-color: #666;
@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-posts>.recent-post-item {
display: -webkit-box;
@@ -64,7 +60,6 @@
display: -ms-flexbox;
display: box;
display: flex;
- height: 210px;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
@@ -93,24 +88,24 @@
}
+ .recent-post-item a {
+ color: #99a9bf;
+ text-decoration: none;
+ word-wrap: break-word;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ overflow-wrap: break-word;
+ background-color: transparent;
+ }
+
.recent-post-item {
padding-left: calc(1.2rem * @ahzoo-proportion) !important;
padding-right: calc(1.2rem * @ahzoo-proportion) !important;
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
line-height: 2;
-
- a {
- color: #99a9bf;
- text-decoration: none;
- word-wrap: break-word;
- -webkit-transition: all .2s;
- -moz-transition: all .2s;
- -o-transition: all .2s;
- -ms-transition: all .2s;
- transition: all .2s;
- overflow-wrap: break-word;
- background-color: transparent;
- }
img {
max-width: 100%;
@@ -194,21 +189,23 @@
font-weight: 600;
color: @title-clolr;
font-size: 1.6em;
- // margin-bottom: 0.3rem;
+ margin-bottom: 0.3rem;
line-height: 1.4;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
- -webkit-line-clamp: 2;
- }
- #recent-posts>.recent-post-item>.recent-post-info>.article-title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
+ /* autoprefixer: off */
+ -webkit-line-clamp: 2;
+ /* autoprefixer: on */
}
+
+
#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
order: 3;
@@ -227,16 +224,23 @@
color: #999;
margin-bottom: 19px;
text-overflow: ellipsis;
- overflow: hidden;
order: 2;
margin: 0;
- // display: -webkit-box;
- // -webkit-line-clamp: 2;
- // -webkit-box-orient: vertical;
+
+ display: -webkit-box;
overflow: hidden;
+ -webkit-box-orient: vertical;
+ /* autoprefixer: off */
+ -webkit-line-clamp: 3;
+ /* autoprefixer: on */
+
}
- @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-posts>.recent-post-item>.recent-post-info>.article-title:hover {
+ color: #448aff;
+ }
+
+
//div本体阴影
#recent-posts>.recent-post-item:hover {
@@ -273,4 +277,66 @@
-ms-transform: scale(1.1);
transform: scale(1.1);
}
+
+ @media screen and (max-width:768px) {
+ #recent-posts .recent-post-item .recent-post-info .article-title {
+ font-size: 1.32em !important;
+ margin-bottom: 0 !important;
+ }
+ }
+
+ @media screen and (min-width: 769px) {
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 0;
+ line-height: .8;
+ transition: all .25s;
+ color: #999;
+ margin-bottom: 10px;
+ display: -webkit-container;
+ -webkit-line-clamp: 3;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts>.recent-post-item>.recent-post-info {
+ width: 69%;
+ font-size: 12px !important;
+ margin: .7rem 0;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 1;
+ line-height: 1.7;
+ color: #999;
+ display: -webkit-container;
+ -webkit-line-clamp: 3;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+
+ @media screen and (min-width: 769px) {
+ #recent-posts>.recent-post-item {
+ height: 15em;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item {
+ height: 12em !important;
+ padding: 0;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+ }
+
+ @media only screen and (max-width: 768px) {
+ @ahzoo-proportion: 0.65;
+ @global-font-size: 12px;
+ }
</style>
--
Gitblit v1.9.1