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=&quot;/img/404.jpg&quot;" 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>