Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-website

src/views/live/technical/index.vue

@@ -3,75 +3,229 @@
     <div class="w_0100">
       <div class="w_1200">
         <div class="technicalmain">
-          <div class="technical_left">
-            <div class="technical_left_title">
-              <span style="margin: 10px;">集中培训</span>
-              <span class="more">MORE </span>
+          <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="train">
-              <li>
-                <p>2020-05-01</p>
-                <p>吉林省计算中心科技平台网站使用集中培训</p>
-                <p>
-                  吉林省计算中心科技平台网站将于2020-05-10正式上线，为了各企业及专家可正常使用网站进行各项操作，吉林省计算中心决定于2020-05-01举行吉林省计算中心科技平台网站使用集中培训，各位与会人员请按时参加
-                </p>
-              </li>
-              <li>
-                <p>2020-05-01</p>
-                <p>六条数据</p>
-                <p>
-                  吉林省计算中心科技平台网站将于2020-05-10正式上线，为了各企业及专家可正常使用网站进行各项操作，吉林省计算中心决定于2020-05-01举行吉林省计算中心科技平台网站使用集中培训，各位与会人员请按时参加
-                </p>
-              </li>
-            </ul>
           </div>
-          <div class="technical_right">
-            <div class="technical_right_title">
-              <span style="margin: 10px;">技术指导</span>
-              <span class="more">MORE</span>
+          <div class="inforight">
+            <div class="lefttop"><span class="title"> |</span> 技术问答<span class="MORE">MORE</span></div>
+            <div>
+              <ul>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+              </ul>
             </div>
-            <ul class="guide" style="list-style-type:square">
-              <li>
-                <span>专家成功对企业进行技术指导</span>
-                <span>2020-05-02</span>
-              </li>
-              <li>
-                <span>十四条数据</span>
-                <span>2020-05-02</span>
-              </li>
-            </ul>
           </div>
-          <div class="technical_right" style="float:left;">
-            <div class="technical_right_title">
-              <span style="margin: 10px;">技术指导</span>
-              <span class="more">MORE</span>
+          <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="guide" style="list-style-type:square">
-              <li>
-                <span>专家成功对企业进行技术指导</span>
-                <span>2020-05-02</span>
-              </li>
-              <li>
-                <span>十四条数据</span>
-                <span>2020-05-02</span>
-              </li>
-            </ul>
           </div>
-          <div class="technical_right">
-            <div class="technical_right_title">
-              <span style="margin: 10px;">技术指导</span>
-              <span class="more">MORE</span>
+          <div class="inforight">
+            <div class="lefttop"><span class="title"> |</span> 技术问答<span class="MORE">MORE</span></div>
+            <div>
+              <ul>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+                <li>
+                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
+                  <p class="righttime">2020-05-05</p>
+                </li>
+              </ul>
             </div>
-            <ul class="guide" style="list-style-type:square">
-              <li>
-                <span>专家成功对企业进行技术指导</span>
-                <span>2020-05-02</span>
-              </li>
-              <li>
-                <span>十四条数据</span>
-                <span>2020-05-02</span>
-              </li>
-            </ul>
           </div>
         </div>
       </div>
@@ -102,4 +256,117 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.infoleft {
+  width: 589px;
+  float: left;
+  margin: 10px 0 10px 2px;
+  min-height: 650px;
+  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%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px 10px 10px 10px;
+}
+.title {
+  padding: 0px 0 1px 1px;
+  background: #005293;
+}
+.MORE {
+  float: right;
+}
+.times {
+  float: left;
+  background: none;
+  color: #8c7a9c;
+  width: 60px;
+  padding: 0 10px 0 10px;
+}
+.times span {
+  font-size: 30px;
+  font-weight: bold;
+  display: block;
+  line-height: 32px;
+  text-align: center;
+}
+.infoleft li {
+  border-bottom: 1px solid #dcdcdc;
+  padding: 10px 0;
+  height: 65px;
+  margin: 10px;
+  color: #666;
+}
+
+.inforight li {
+  text-indent: 5px;
+  padding: 10px 0;
+  height: 19px;
+  margin: 10px;
+  font-size: 18px;
+  color: #666;
+}
+
+.infotitle {
+  width: 472px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 18px;
+}
+.infotitle:hover {
+  -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;
+}
+
+.infocontext {
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.rightspan {
+  float: left;
+  width: 460px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.righttime {
+  float: right;
+}
+
+.rightspan:hover {
+  -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;
+}
+</style>