src/components/layouts/box4.vue

@@ -1,10 +1,10 @@
<template>
   <div class="blog-right-side-container">
   <div class="blog-container ">
      <div>
         <span class="blog-right-side-portion-title">{{title}}</span>
         <span class="blog-right-side-portion-title title-remark">{{title}}</span>
      </div>
      <div class="blog-right-side-scroll-portion">
         <div class="blog-right-side-meta" v-for="item in list">
      <div class="blog-scroll show-line">
         <div class="blog-right-side-meta " v-for="item in list">
            <div>
               <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
            </div>
@@ -22,7 +22,7 @@
      },
      data() {
         return {
				

         }
      }
   }
@@ -32,11 +32,26 @@

<style lang="less">
   /*右边的部分*/
	
   .blog-right-side-portion-title {
       display: block;
       font-size: 15px;
       padding-bottom: 8px;
	
   }
	
   span.title-remark::after {
       content: "(按字母索引)";
       color: #999;
       font-size: 10px;
   }
	
   .blog-right-side-meta span {
      /*word-break: keep-all;*/
      /*word-wrap: break-word;*/
      color: #999;
      font-size: 13px;
      line-height: 17px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
@@ -45,14 +60,14 @@
      /* normal文本换行*/

      word-break: keep-all;
      transition-property: background-color;
      transition-duration: .2s;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
      // transition-property: background-color;
      // transition-duration: .2s;
      // transition-timing-function: ease-in-out;
      // transition-delay: 0s;
   }

   div .blog-right-side-meta a span:hover {
      background: #5FB878;
      background: #262a30;;
      color: #fff;
      white-space: normal;
      word-break: break-word;