From 15bd39c66eb9c1942b72fb373fbe16865f715f04 Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Tue, 18 Jan 2022 18:51:45 +0800
Subject: [PATCH] 新的文章组件
---
src/components/mini/box10-add.vue | 3
src/components/swichLabel/main2-show.vue | 9
src/components/group/boxRight.vue | 14 +-
src/components/swichLabel/main1-show.vue | 4
src/components/mini/box5-article.vue | 4
src/components/group/tempBoxActicle.vue | 276 ++++++++++++++++++++++++++++++++++++++++++++++
src/components/mini/tagInfo.vue | 4
src/components/group/articleList.vue | 20 +-
8 files changed, 308 insertions(+), 26 deletions(-)
diff --git a/src/components/group/articleList.vue b/src/components/group/articleList.vue
index 7170133..ef8d0da 100644
--- a/src/components/group/articleList.vue
+++ b/src/components/group/articleList.vue
@@ -38,16 +38,16 @@
</script>
<style lang="less">
- .container {
- height: 700px;
- }
+ // .container {
+ // height: 700px;
+ // }
- .content {
- height: 95%;
- overflow-y: scroll;
- }
+ // .content {
+ // height: 95%;
+ // overflow-y: scroll;
+ // }
- .content::-webkit-scrollbar {
- display: none;
- }
+ // .content::-webkit-scrollbar {
+ // display: none;
+ // }
</style>
diff --git a/src/components/group/boxRight.vue b/src/components/group/boxRight.vue
index f7fd762..bc15b90 100644
--- a/src/components/group/boxRight.vue
+++ b/src/components/group/boxRight.vue
@@ -58,17 +58,19 @@
title: "友情链接",
isShowRemark:true,
list: [{
- name: "inleft.com",
+ name: "https://gofor.live",
}, {
- name: "b.inleft.com",
+ name: "blog.inleft.com",
}, {
- name: "Baby Song- 陈奕迅 超超超超 标题",
+ name: "https://blog.ahzoo.cn/",
}, {
- name: "Baby Song- 陈奕迅 超超 标题",
+ name: "https://vian.top/",
}, {
- name: "Baby Song ",
+ name: "https://musenxi.com/",
}, {
- name: "inleft.com",
+ name: "alenc.cn",
+ }, {
+ name: "howshow.tech",
}, {
name: "b.inleft.com",
}, {
diff --git a/src/components/group/tempBoxActicle.vue b/src/components/group/tempBoxActicle.vue
new file mode 100644
index 0000000..fa4a326
--- /dev/null
+++ b/src/components/group/tempBoxActicle.vue
@@ -0,0 +1,276 @@
+<template>
+ <div>
+ <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生成证书">
+ <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>
+ <div class="article-meta-wrap">
+ <span class="post-meta-date">
+ <i class="far fa-calendar-alt"></i>
+ <span class="article-meta-label"></span>
+ <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">2022-01-13</time>
+ </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>
+ </span>
+ </div>
+ <div class="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 - ... -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ components: {},
+ data() {
+ return {}
+ }
+ }
+</script>
+
+<style lang="less">
+ @card-bg: #f5f8fa;
+ @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
+ @ahzoo-proportion: 1;
+ @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
+ @global-font-size: 14px;
+ @font-color: #666;
+ @title-clolr: dimgray;
+
+ #recent-posts>.recent-post-item {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ height: 210px;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ border-radius: 12px 8px 8px 12px;
+ background: var(--card-bg);
+ -webkit-box-shadow: var(--card-box-shadow);
+ box-shadow: var(--card-box-shadow);
+ -webkit-transition: all .3s;
+ -moz-transition: all .3s;
+ -o-transition: all .3s;
+ -ms-transition: all .3s;
+ transition: all .3s;
+
+ background: @card-bg;
+ -webkit-box-shadow: @card-box-shadow;
+ box-shadow: @card-box-shadow;
+
+ }
+
+ .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%;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ border-style: none;
+ }
+ }
+
+ .recent-post-item * {
+ cursor: url(@cursorURL), auto !important;
+ font-size: @global-font-size;
+ color: var(--font-color);
+ }
+
+ * {
+ tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: transparent;
+ box-sizing: border-box;
+ }
+
+ #recent-posts>.recent-post-item .post_cover {
+ width: 33%;
+ position: sticky;
+
+ opacity: .8;
+ padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
+ overflow: hidden;
+ height: 100%;
+ -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
+ }
+
+ #recent-posts>.recent-post-item .left_radius {
+ border-radius: 8px 0 0 8px;
+ }
+
+ .block.left_radius {
+ background: linear-gradient(to right, transparent, @card-bg 98%);
+ position: absolute;
+ width: 100%;
+ height: calc(100% - 2.2rem * @ahzoo-proportion);
+ z-index: 2;
+ top: calc(1.1rem * @ahzoo-proportion);
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg {
+ border-radius: 15px;
+ width: 100%;
+ height: 100%;
+ -webkit-transition: all .6s;
+ -moz-transition: all .6s;
+ -o-transition: all .6s;
+ -ms-transition: all .6s;
+ transition: all .6s;
+ object-fit: cover;
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info {
+ width: 77%;
+ padding: 0px calc(1.2rem * @ahzoo-proportion);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ a {
+ text-decoration: none;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ overflow-wrap: break-word;
+ }
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.article-title {
+ order: 1;
+ font-weight: 600;
+ color: @title-clolr;
+ font-size: 1.6em;
+ // 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;
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
+ order: 3;
+ color: #858585;
+ font-size: 90%;
+
+ .article-meta-label {
+ padding-right: 0.2rem;
+ }
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 0;
+ line-height: .8;
+ transition: all .25s;
+ 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;
+ overflow: hidden;
+ }
+
+ @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);
+
+ //div本体阴影
+ #recent-posts>.recent-post-item:hover {
+ -webkit-box-shadow: @card-hover-box-shadow;
+ box-shadow: @card-hover-box-shadow;
+ }
+
+ // 图片缩放
+ #recent-posts>.recent-post-item:hover img.post_bg {
+ -webkit-transform: scale(.9);
+ -moz-transform: scale(.9);
+ -o-transform: scale(.9);
+ -ms-transform: scale(.9);
+ transform: scale(.9);
+ -webkit-box-shadow: @card-hover-box-shadow;
+ box-shadow: @card-hover-box-shadow;
+ }
+
+ //内容缩放 内容显示
+ #recent-posts>.recent-post-item:hover .recent-post-info .content {
+ opacity: 1;
+ line-height: 1.8;
+ transition: all .25s;
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
+ transform: scale(.9);
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
+ -webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
+ -o-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+</style>
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 1d314e1..f9754d3 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -95,6 +95,9 @@
<a-icon type="upload" /> jpg/png/jpeg..
</a-button>
</a-upload>
+ <span class="myTip">
+ 自动转码,可以传高清图
+ </span>
</a-form-model-item>
<a-form-model-item label="定时">
diff --git a/src/components/mini/box5-article.vue b/src/components/mini/box5-article.vue
index 1a038f1..51abb15 100644
--- a/src/components/mini/box5-article.vue
+++ b/src/components/mini/box5-article.vue
@@ -8,7 +8,7 @@
</a>
</div> -->
- <div class="article-meta">
+ <div class="blog-article-meta">
<h2 class="article-title">{{title}}</h2>
<div class="article-split-line"></div>
<div class="article-summary blog-scroll" v-html="source" />
@@ -107,7 +107,7 @@
/*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
}
- .article-meta {
+ .blog-article-meta {
padding: 30px 30px 10px;
background-color: white;
border-radius: 15px;
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index d738615..717949d 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -18,9 +18,9 @@
<li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
<li>
- <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
+ <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;border-radius: 20px;" />
我的小老弟&御用暖床袋
- <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
+ <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;border-radius: 30px" />
<span style="font-size: 10px;color: #999">(小乖)</span>
</li>
</ul>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 1da01f3..1faa4d6 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -47,7 +47,7 @@
日志
<a-icon type="plus-circle" style="margin-left: 0px;" />
</a-button>
- <!-- <tempFormCheck></tempFormCheck> -->
+ <tempBoxActicle></tempBoxActicle>
<router-view class="fade"></router-view>
</a-col>
@@ -61,6 +61,7 @@
</template>
<script>
+ import tempBoxActicle from "../group/tempBoxActicle.vue"
import tempFormCheck from "../group/tempFormCheck.vue"
import box10 from "../mini/box10-add.vue"
import boxLeft from "../group/boxLeft.vue"
@@ -71,6 +72,7 @@
export default {
components: {
+ tempBoxActicle,
tempFormCheck,
box10,
boxLeft,
diff --git a/src/components/swichLabel/main2-show.vue b/src/components/swichLabel/main2-show.vue
index 5b44b01..a984232 100644
--- a/src/components/swichLabel/main2-show.vue
+++ b/src/components/swichLabel/main2-show.vue
@@ -8,7 +8,7 @@
<box8></box8>
<!-- <boxLeft></boxLeft> -->
</a-col>
-
+
</a-row>
</div>
</template>
@@ -26,7 +26,7 @@
data() {
return {
- searchType:"乐谱搜索",
+ searchType: "乐谱搜索",
colApiLeft: {
xs: 24,
sm: {
@@ -50,7 +50,7 @@
offset: 1,
},
},
-
+
colApiMain: {
xs: {
span: 24,
@@ -82,6 +82,5 @@
}
</script>
-<style lang="less">
-
+<style >
</style>
--
Gitblit v1.9.1