更新

src/views/technical/index.vue

@@ -5,62 +5,17 @@
         <div class="technicalmain">
           <div class="infoleft">
             <div class="lefttop"><span class="title"> |</span> 专题研讨<span class="MORE">MORE</span></div>
-            <div>
-              <ul>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
-                </li>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
-                </li>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
-                </li>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
-                </li>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
-                </li>
-                <li>
-                  <div class="times">
-                    <span><font>17</font></span
-                    ><font>2020.04</font>
-                  </div>
-                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
-                  <div class="infocontext">
-                    副校长杨斌参加机副校长杨斌参加副校长杨杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合
-                  </div>
-                </li>
-              </ul>
-            </div>
+            <ul class="infoleftInfo">
+              <li v-for="(item, index) in zhuantiList" :key="index">
+                <p>{{ item.date }}</p>
+                <p>
+                  <span class="textOver">{{ item.title }}</span>
+                  <span>{{ item.brief }}</span>
+                </p>
+              </li>
+            </ul>
           </div>
-          <div class="inforight">
+          <!-- <div class="inforight">
             <div class="lefttop"><span class="title"> |</span> 技术问答<span class="MORE">MORE</span></div>
             <div>
               <ul>
@@ -226,7 +181,7 @@
                 </li>
               </ul>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -240,7 +195,40 @@ export default {
   props: {},
   components: {},
   data: () => {
-    return {};
+    return {
+      zhuantiList: [
+        {
+          date: '2020-02-02',
+          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
+          brief:
+            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+        {
+          date: '2020-02-02',
+          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
+          brief:
+            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+        {
+          date: '2020-02-02',
+          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
+          brief:
+            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+        {
+          date: '2020-02-02',
+          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
+          brief:
+            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+        {
+          date: '2020-02-02',
+          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
+          brief:
+            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -261,18 +249,10 @@ export default {
   width: 589px;
   float: left;
   margin: 10px 0 10px 2px;
-  min-height: 650px;
+  min-height: 585px;
   box-shadow: 0 0 10px #2d64b3;
   overflow: hidden;
 }
-.inforight {
-  min-height: 650px;
-  box-shadow: 0 0 10px #2d64b3;
-  width: 590px;
-  float: left;
-  margin: 10px 0 10px 15px;
-  overflow: hidden;
-}
 .lefttop {
   font-size: 18px;
   width: 96%;
@@ -283,35 +263,58 @@ export default {
   bottom: 1px;
   margin: 10px 10px 10px 10px;
 }
-.title {
-  padding: 0px 0 1px 1px;
-  background: #005293;
-}
-.MORE {
-  float: right;
+.infoleftInfo {
+  padding: 0 10px;
 }
-.times {
+.infoleftInfo li {
   float: left;
-  background: none;
-  color: #8c7a9c;
-  width: 60px;
-  padding: 0 10px 0 10px;
+  width: 100%;
+  border-bottom: 1px dashed #ccc;
+  padding: 15px 0 15px 0;
 }
-.times span {
-  font-size: 30px;
-  font-weight: bold;
-  display: block;
-  line-height: 32px;
+.infoleftInfo li:hover p:last-child span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+}
+.infoleftInfo li p:first-child {
+  float: left;
+  width: 17%;
+  font-size: 16px;
+  background: red;
   text-align: center;
+  color: #fff;
+  font-weight: bold;
+  padding: 4px 0px;
 }
-.infoleft li {
-  border-bottom: 1px solid #dcdcdc;
-  padding: 10px 0;
-  height: 65px;
-  margin: 10px;
+.infoleftInfo li p:last-child {
+  float: left;
+  width: 80%;
+  padding: 0 0 0 15px;
+}
+.infoleftInfo li p:last-child span:first-child {
+  float: left;
+  width: 100%;
+  font-size: 18px;
+}
+.infoleftInfo li p:last-child span:last-child {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 5px 0 0 0;
   color: #666;
 }
-
 .inforight li {
   text-indent: 5px;
   padding: 10px 0;