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/tempFriendBox.vue | 176 +++++++++++++++++++++++++++++
src/components/swichLabel/main1-show.vue | 9 +
src/components/mini/box5-article.vue | 4
src/components/group/tempBoxActicle.vue | 134 ++++++++++++++++-----
4 files changed, 287 insertions(+), 36 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>
diff --git a/src/components/group/tempFriendBox.vue b/src/components/group/tempFriendBox.vue
new file mode 100644
index 0000000..aa097bd
--- /dev/null
+++ b/src/components/group/tempFriendBox.vue
@@ -0,0 +1,176 @@
+<template>
+ <div style="display: flex;" class="link-box">
+ <!-- <a href="#" target="_blank" class="no-underline"> -->
+ <a href="#" class="no-underline">
+ <div class="thumb">
+ <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
+ </div>
+ <div class="content">
+ <p class="title">
+ 长野 の BLOG
+ </p>
+ </div>
+ </a>
+ <a href="#" class="no-underline">
+ <div class="thumb">
+ <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
+ </div>
+ <div class="content">
+ <p class="title">
+ 长野 の BLOG
+ </p>
+ </div>
+ </a>
+ <a href="#" class="no-underline">
+ <div class="thumb">
+ <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
+ </div>
+ <div class="content">
+ <p class="title">
+ 长野 の BLOG
+ </p>
+ </div>
+ </a>
+
+ </div>
+</template>
+
+<script>
+ export default {}
+</script>
+
+</script>
+
+<style lang="less">
+ .myFriend {
+ a {
+ padding: 10px;
+ }
+ }
+
+ .link-box a {
+ width: 33.75rem;
+ background: #fff;
+ float: left;
+ margin: 0 0 4.375rem;
+ color: #2E2E2E;
+ text-decoration: none;
+ border-bottom: none;
+ border-radius: .25rem;
+ overflow: hidden;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
+ -moz-box-shadow: 0 3px 0.0625rem #0000001a;
+ box-shadow: 0 3px 0.0625rem #0000001a;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transition: .3s;
+ -moz-transition: .3s;
+ -ms-transition: .3s;
+ -o-transition: .3s;
+ transition: .3s;
+ }
+
+ .link-box a:hover:after {
+ left: 0;
+ width: 100%;
+ -webkit-transition: width 350ms;
+ -moz-transition: width 350ms;
+ -ms-transition: width 350ms;
+ -o-transition: width 350ms;
+ transition: width 350ms;
+ }
+
+ .link-box a .thumb {
+ font-size: 0;
+ overflow: hidden;
+ background-color: #fff;
+ margin: 0;
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
+ }
+
+ .link-box a .thumb img {
+ width: 100%;
+ height: auto;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ -webkit-transition: .4s;
+ -moz-transition: .4s;
+ -ms-transition: .4s;
+ -o-transition: .4s;
+ transition: .4s;
+ }
+
+ .link-box a .content {
+ text-align: center;
+ background-color: #fff;
+ }
+
+ .link-box a .content .title {
+ text-align: center;
+ padding: 1rem .25rem;
+ font-weight: 500;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ }
+
+ .link-box a:hover,
+ .link-box a:active {
+ -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ -webkit-transform: translateY(-0.25rem);
+ -moz-transform: translateY(-0.25rem);
+ -ms-transform: translateY(-0.25rem);
+ -o-transform: translateY(-0.25rem);
+ transform: translateY(-0.25rem);
+ -moz-transform: none;
+ }
+
+ @media screen and (min-width: 1600px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(200% / 5 - 1.875rem);
+ width: calc(200% / 5 - 1.875rem);
+ }
+ }
+
+ @media screen and (max-width: 1599px) and (min-width: 768px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(150% / 4 - 1.875rem);
+ width: calc(150% / 4 - 1.875rem);
+ }
+ }
+
+
+
+ @media screen and (max-width: 500px) and (min-width: 319px) {
+ .link-box a {
+ margin: 0 0.75rem 1.5rem;
+ width: -webkit-calc(50% - 1.5rem);
+ width: calc(50% - 1.5rem);
+ }
+ }
+
+ @media screen and (max-width: 767px) and (min-width: 501px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(100% / 3 - 1.875rem);
+ width: calc(100% / 3 - 1.875rem);
+ }
+ }
+</style>
diff --git a/src/components/mini/box5-article.vue b/src/components/mini/box5-article.vue
index 51abb15..7590f59 100644
--- a/src/components/mini/box5-article.vue
+++ b/src/components/mini/box5-article.vue
@@ -9,7 +9,7 @@
</div> -->
<div class="blog-article-meta">
- <h2 class="article-title">{{title}}</h2>
+ <h2 class="blog-article-title">{{title}}</h2>
<div class="article-split-line"></div>
<div class="article-summary blog-scroll" v-html="source" />
<div class="article-split-line"></div>
@@ -113,7 +113,7 @@
border-radius: 15px;
}
- .article-title {
+ .blog-article-title {
color: #555;
font-size: 14px;
line-height: 14px;
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 1faa4d6..6af6b69 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -17,6 +17,9 @@
<div class="myModal">
<a-modal v-model="visible" title="日志添加" on-ok="handleOk">
<template slot="footer">
+ <a-button key="reset" @click="reset" type="danger">
+ 擦掉重来
+ </a-button>
<a-button key="back" @click="handleCancel">
歇会
</a-button>
@@ -47,6 +50,7 @@
日志
<a-icon type="plus-circle" style="margin-left: 0px;" />
</a-button>
+ <tempFriendBox></tempFriendBox>
<tempBoxActicle></tempBoxActicle>
<router-view class="fade"></router-view>
</a-col>
@@ -61,6 +65,7 @@
</template>
<script>
+ import tempFriendBox from "../group/tempFriendBox.vue"
import tempBoxActicle from "../group/tempBoxActicle.vue"
import tempFormCheck from "../group/tempFormCheck.vue"
import box10 from "../mini/box10-add.vue"
@@ -72,6 +77,7 @@
export default {
components: {
+ tempFriendBox,
tempBoxActicle,
tempFormCheck,
box10,
@@ -111,6 +117,9 @@
this.loading = false;
}, 3000);
},
+ reset(e) {
+ var res=this.$refs.modalBox.$refs.myForm.resetFields()
+ },
handleCancel(e) {
this.visible = false;
},
--
Gitblit v1.9.1