update 活动页面内容

TEAMModelOS.SmartTeach/ClientApp/components/resource/activityindex.vue

@@ -24,10 +24,134 @@
       <div class="activity_img"><img src="../../assets/image/resource/flow_img.png" /></div>
       <div class="production_box">
         <div class="production_box_title"><div class="production_box_name">作品样例</div></div>
-        <ul>
-          <li></li>
+        <ul class="production_list">
+          <li>
+            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class07.jpg"></a>
+            <p class="f18 videoName">绿色植物的光合作用<i class="c01">生</i></p>
+            <p class="f14"><a href="javascript:;" class="fr">鲁巷实验小学</a><a class="f14" href="javascript:;">孙云芳</a></p>
+            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
+          </li>
+          <li>
+            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class08.jpg"></a>
+            <p class="f18 videoName">分液漏斗<i class="c02">化</i></p>
+            <p class="f14"><a href="javascript:;" class="fr">武汉市育才第二小学</a><a class="f14" href="javascript:;">侯敏</a></p>
+            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
+          </li>
+          <li class="last">
+            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class09.jpg"></a>
+            <p class="f18 videoName">记单词的方法<i class="c03">英</i></p>
+            <p class="f14"><a href="javascript:;" class="fr">武汉小学</a><a class="f14" href="javascript:;">何炜</a></p>
+            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
+          </li>
         </ul>
       </div>
+      <div class="production_center_img"><img src="../../assets/image/resource/activity_centerimg.png" /></div>
+      <div class="rowWrap py_white_bg pdtb30">
+        <div class="w1200 clearfix">
+          <div class="app-title py_app-title">
+            <a href="/index.php?r=ams/activity/cup/master&amp;id=1" class="title-more">更多</a>
+            <span class="title-text">活动达人</span>
+          </div>
+          <ul class="joiner clearfix">
+            <li>
+              <a target="_blank" href="">
+                <img src="../../assets/image/resource/touxiang_01.jpeg">
+                <p class="t_c f14 c222 mgt5">郭一凡老师</p>
+                <p class="t_c f12 c888">语文</p>
+                <p class="t_c f14" title="">成都树德中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="">
+                <img src="../../assets/image/resource/touxiang_02.jpeg">
+                <p class="t_c f14 c222 mgt5">李汝墨老师</p>
+                <p class="t_c f12 c888">英语</p>
+                <p class="t_c f14" title="">成都四中</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="">
+                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
+                <p class="t_c f14 c222 mgt5">张天华老师</p>
+                <p class="t_c f12 c888">数学</p>
+                <p class="t_c f14" title="">成都四中</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="">
+                <img src="../../assets/image/resource/touxiang_03.jpg">
+                <p class="t_c f14 c222 mgt5">王晓君老师</p>
+                <p class="t_c f12 c888">语文</p>
+                <p class="t_c f14" title="">成都石室中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="">
+                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
+                <p class="t_c f14 c222 mgt5">李庆梅老师</p>
+                <p class="t_c f12 c888">数学</p>
+                <p class="t_c f14" title="">成都外国语小学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="">
+                <img src="../../assets/image/resource/touxiang_04.jpg">
+                <p class="t_c f14 c222 mgt5">陈彬</p>
+                <p class="t_c f12 c888">英语</p>
+                <p class="t_c f14" title="">杭州经济技术...</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=1f0dcd47dc2040a2895818f802f3b536">
+                <img src="../../assets/image/resource/touxiang_05.jpg">
+                <p class="t_c f14 c222 mgt5">王骅</p>
+                <p class="t_c f12 c888">物理</p>
+                <p class="t_c f14" title="">成都树德中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=95d6886408a24fb594e7a71c9ad22702">
+                <img src="../../assets/image/resource/touxiang_06.jpg">
+                <p class="t_c f14 c222 mgt5">鞠光敏</p>
+                <p class="t_c f12 c888">数学</p>
+                <p class="t_c f14" title="">成都师范附小</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=a87d3987bf7448d2b4af62aac432ab00">
+                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
+                <p class="t_c f14 c222 mgt5">陈汝杰</p>
+                <p class="t_c f12 c888">历史</p>
+                <p class="t_c f14" title="">成都树德中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=34a5edf1a1ad4dadad70144c6f9d4e1b">
+                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
+                <p class="t_c f14 c222 mgt5">张小梅</p>
+                <p class="t_c f12 c888">化学</p>
+                <p class="t_c f14" title="">成都树德中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=0755d883b20241b1b0e4f74f035fce25">
+                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
+                <p class="t_c f14 c222 mgt5">陈琼</p>
+                <p class="t_c f12 c888">数学</p>
+                <p class="t_c f14" title="">广安市第一中学</p>
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=c4f9a1c09fea4e0185e523a4ec4891ff">
+                <img src="../../assets/image/resource/touxiang_08.jpg">
+                <p class="t_c f14 c222 mgt5">张亮</p>
+                <p class="t_c f12 c888">英语</p>
+                <p class="t_c f14" title="">成都盐道街中学</p>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -139,7 +263,8 @@
   }
   .production_box_title {
     width: 100%;
-    padding:1%;
+    padding: 1% 1% 0% 1% ;
+    border-bottom: 1px solid #e3e3e3;
   }
   .production_box_name {
     width:8.5%;
@@ -148,4 +273,192 @@
     border-bottom:1px solid #288add;
     margin-left:1%;
   }
+  .production_list {
+    width:100%;
+    height:400px;
+    padding: 20px 0;
+  }
+    .production_list li {
+      width: 348px;
+      float: left;
+      margin-right: 75px;
+      border: 1px solid transparent;
+      list-style:none;
+    }
+      .production_list li:hover {
+        border: 1px solid #e3e3e3;
+        box-shadow: 2px 2px 6px #e3e3e3;
+      }
+  .production_list .imgShow {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+      .production_list .imgShow .icon_tianyu_cup.i01 {
+        display: block;
+        position: absolute;
+        background-position: 0 -496px;
+        width: 68px;
+        height: 68px;
+        left: 50%;
+        top: 50%;
+        margin: -34px 0 0 -34px;
+      }
+  .icon_tianyu_cup {
+    display: inline-block;
+    vertical-align: middle;
+    background: url(../../assets/image/resource/activity_icon.png) no-repeat;
+  }
+  .production_list p {
+    margin: 10px;
+  }
+  .production_list .videoName i {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background: #50c78d;
+    text-align: center;
+    line-height: 18px;
+    color: #fff;
+    font-size: 12px;
+    margin-left: 10px;
+    border-radius: 50%;
+    vertical-align: middle;
+    font-style: normal;
+  }
+    .production_list .videoName i.c01 {
+      background-color: #d4b36f;
+    }
+  .f14 {
+    font-size: 14px;
+  }
+  .production_list p a {
+    color: #6b8fb8;
+  }
+  .example a {
+    cursor: default;
+    text-decoration: none;
+  }
+  .production_list p a {
+    color: #6b8fb8;
+  }
+  .production_list .videoTag {
+    display: inline-block;
+    padding: 0 6px;
+    border: 1px solid #ec6941;
+    color: #d66868;
+    border-radius: 5px;
+    margin-right: 4px;
+  }
+    .production_list .videoTag.style01 {
+      border-color: #ec6941;
+      color: #d66868;
+    }
+    .production_list .videoTag.style02 {
+      border-color: #3ccb50;
+      color: #53b861;
+    }
+    .production_list .videoTag.style03 {
+      border-color: #e0ad32;
+      color: #e0ad32;
+    }
+    .production_list .videoTag.style04 {
+      border-color: #93c5db;
+      color: #6aaae6;
+    }
+    .production_list .videoTag.style05 {
+      border-color: #778bec;
+      color: #fff;
+      background: #778bec;
+    }
+    .last {
+      margin-right:0px !important;
+    }
+  .production_center_img {
+    width:1200px;
+    float:left;
+    padding-bottom:40px;
+    margin:0 auto;
+  }
+  .rowWrap {
+    width: 100%;
+  }
+
+  .pdtb30 {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .w1200 {
+    width: 1200px;
+    margin: 0 auto;
+    float:left;
+  }
+  .app-title.py_app-title {
+    height: 41px;
+    border-bottom: 1px solid #e3e3e3;
+    padding-top: 0;
+  }
+  .app-title .title-more {
+    float: right;
+    height: 21px;
+    overflow: hidden;
+    text-indent: 1000px;
+    margin-top: 20px;
+    margin-right: 20px;
+  }
+  .app-title .title-text {
+    display: inline-block;
+    font-size: 24px;
+    color: #288add;
+    border-bottom: 1px solid #288add;
+    margin-left: 20px;
+    padding: 0 2px 4px;
+  }
+  .joiner li {
+    float: left;
+    margin: 15px 26px;
+    list-style:none;
+  }
+    .joiner li a {
+      width: 147px;
+      height: 165px;
+      border-radius: 10px;
+      position: relative;
+      display: block;
+      overflow: hidden;
+      border: 1px solid #f0f0f0;
+      padding: 15px 20px;
+      background: #f0f0f0;
+      color: #6b8398;
+    }
+      .joiner li a img {
+        width: 60%;
+        height: auto;
+        border-radius: 5px;
+        overflow: hidden;
+        margin-left:20%;
+      }
+  .mgt5 {
+    margin-top: 5px;
+  }
+
+  .t_c {
+    text-align: center;
+  }
+
+  .c222, a.c222 {
+    color: #222;
+  }
+
+  .f14 {
+    font-size: 14px;
+  }
+  .c888, a.c888 {
+    color: #888;
+  }
+  .f12 {
+    font-size: 12px;
+  }
 </style>