活动页面相应内容

TEAMModelOS.SmartTeach/ClientApp/common/footer.vue

@@ -95,4 +95,13 @@
       padding-left: 50px;
       line-height: 24px;
     }
+  .fr {
+    float: right;
+  }
+  .w_footer .bot-nav dl dd a {
+    color: #777;
+  }
+  a, a:visited {
+    text-decoration: none;
+  }
 </style>

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

@@ -0,0 +1,162 @@
+<template>
+  <div class="activitycommon_box">
+    <div class="banner_img"><img src="../../assets/image/resource/activity_banner.png" /></div>
+    <div class="nav_list_box">
+      <div class="nav_list">
+        <ul class="activity_navlist">
+          <li class="nav_name" v-for="item in navname"><a href="" style="color:#fff">{{item.title}}</a></li>
+        </ul>
+        <div class="join">
+          <img src="../../assets/image/resource/btn_join.png" />
+        </div>
+      </div>
+    </div>
+    <div class="information_box">
+      <ul class="information_list">
+        <li class="information">
+          <div class="information_list_data">
+            <Icon type="md-paper" size="28" class="information_icon" /><div class="information_title">已有作品</div><div class="information_num"><DigitRoll :rollDigits="digits1" /></div>
+          </div>
+        </li>
+        <li class="informatio_two">
+          <div class="information_list_data">
+            <Icon type="md-contacts" size="28" class="information_icon" /><div class="information_title">参与人数</div><div class="information_num"><DigitRoll :rollDigits="digits2" /></div>
+          </div>
+        </li>
+        <li class="informatio_three">
+          <div class="information_list_data">
+            <Icon type="md-desktop" size="28" class="information_icon" /><div class="information_title">访问人数</div><div class="information_num"><DigitRoll :rollDigits="digits3" /></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+  import DigitRoll from '@huoyu/vue-digitroll';
+  export default {
+    components: { DigitRoll },
+    data() {
+      return {
+        digits1:11053,
+        digits2:9835,
+        digits3:23156,
+        navname: [
+          { "id": 1, "title": '活动首页', "url": '', },
+          { "id": 2, "title": '活动指南', "url": '', },
+          { "id": 3, "title": '作品展示', "url": '', },
+          { "id": 4, "title": '活动排行', "url": '', },
+          { "id": 5, "title": '活动奖项', "url": '', },
+          { "id": 6, "title": '课题证书', "url": '', }
+        ],
+      }
+    }
+  }
+</script>
+<style>
+  .activitycommon_box {
+    width:100%;
+    height:auto;
+  }
+  .banner_img {
+    width: 100%;
+    height:330px;
+  }
+    .banner_img img {
+      width:100%;
+    }
+    .nav_list_box {
+      width: 100%;
+      height: 54px;
+      padding: 0px 2px 2px 2px;
+      background: #309aeb;
+    }
+  .nav_list {
+    width:1200px;
+    height:54px;
+    margin:0 auto;
+  }
+  .activity_navlist {
+    width:80%;
+    height:54px;
+    float:left;
+  }
+  .nav_name {
+    width: 10%;
+    height: 54px;
+    line-height:54px;
+    color:#fff;
+  }
+  .join {
+    width:20%;
+    float:left;
+  }
+    .join img {
+      width:48%;
+      margin-top:4px;
+    }
+  .information_box {
+    width:1200px;
+    height:90px;
+    margin:0 auto;
+  }
+  .information_list {
+    width:100%;
+    height:90px;
+    list-style:none;
+  }
+  .information {
+    width: 25%;
+    height: 70px;
+    line-height: 70px;
+    margin: 8px;
+    float: left;
+    background-color: #f0f8fe;
+    margin-left:2%;
+  }
+  .informatio_two {
+    width: 25%;
+    height: 70px;
+    line-height: 70px;
+    margin: 8px;
+    float: left;
+    background-color: #f7f3fe;
+    margin-left:8%;
+  }
+  .informatio_three {
+    width: 25%;
+    height: 70px;
+    line-height: 70px;
+    margin: 8px;
+    float: left;
+    background-color: #edfcfd;
+    margin-left: 10%;
+  }
+  .information_list_data {
+    float: left;
+    width: 100%;
+    height: 70px;
+    line-height: 70px;
+  }
+  .information_title, .information_icon {
+    float: left;
+  }
+  .information_icon {
+    margin-top:20px;
+    margin-left:30px;
+  }
+  .information_title {
+    font-size:16px;
+    color:#555;
+    padding-left:15px;
+    padding-right:20px;
+  }
+  .information_num {
+    font-size: 32px;
+    color: #248dde;
+    height:70px;
+  }
+  .d-roll-item > .d-roll-bar > div {
+    line-height:0.95 !important;
+  }
+</style>

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="index_box">
+    <div class="index_top">
+      <div class="index_top_left">
+        <Carousel autoplay v-model="value2" loop>
+          <CarouselItem>
+            <div class="demo-carousel"><img src="../../assets/image/resource/activity_banner_01.jpg" /></div>
+          </CarouselItem>
+          <CarouselItem>
+            <div class="demo-carousel"><img src="../../assets/image/resource/activity_banner_02.png" /></div>
+          </CarouselItem>
+        </Carousel>
+        <span class="tit">
+          <em class="bg"></em>
+          <p>2018年创新杯首届全国信息化教学创新大赛正式启动</p>
+        </span>
+      </div>
+      <div class="index_top_right">
+        <div class="index_top_title"><div class="right_title">活动报道</div></div>
+        <ul class="index_top_list">
+          <li class="index_top_data" v-for="item in listdata"><a href="" style="color:#555"><div class="index_top_data_title"><Icon type="ios-ribbon" size="24" />{{item.title}}</div><div class="index_top_data_time">{{item.time}}</div></a></li>
+        </ul>
+      </div>
+      <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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value2: 0,
+        listdata: [
+          { "id": 1, "title": '成都市小学数学“高效课堂”教学研讨活动', "time": '2018-09-16' },
+          { "id": 2, "title": '在看、说、读、演中感悟“博爱”', "time": '2018-09-02' },
+          { "id": 3, "title": '幸福课堂，让学生真正享受语文学习的快乐', "time": '2018-08-20' },
+          { "id": 4, "title": '成都市小学语文阅读教学中信息技术运用研讨', "time": '2018-05-12' },
+          { "id": 5, "title": 'IPAD进课堂，华科附小美术课堂新体验', "time": '2018-02-19' },
+          { "id": 6, "title": '在看、说、读、演中感悟“博爱”', "time": '2018-01-02' },
+          { "id": 7, "title": '幸福课堂，让学生真正享受语文学习的快乐', "time": '2018-01-07' },
+          { "id": 8, "title": '成都市小学语文阅读教学中信息技术运用研讨', "time": '2017-12-25' },
+        ],
+      }
+    }
+  }
+</script>
+<style>
+  .index_box {
+    width:100%;
+    height:auto;
+  }
+  .index_top {
+    width:1200px;
+    height:350px;
+    margin:0 auto;
+    padding-top:20px;
+  }
+  .index_top_left {
+    width:405px;
+    height:288px;
+    float:left;
+    position:relative
+  }
+  .index_top_right{
+    width: 750px;
+    height: 290px;
+    float: left;
+    margin-left:30px;
+  }
+  .tit {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 15px;
+    color: #fff;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+  }
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .1;
+    filter: alpha(opacity=10);
+    z-index: 0;
+  }
+  .index_top_title {
+    width: 100%;
+    height: 37px;
+    border-bottom: 1px solid #e3e3e3;
+  }
+  .right_title {
+    width:13%;
+    font-size: 24px;
+    color: #288add;
+    border-bottom: 1px solid #288add;
+  }
+  .index_top_list {
+    width:100%;
+    height:250px;
+    list-style:none;
+  }
+  .index_top_data {
+    width:100%;
+    padding:1%  3% 3% 0%;
+  }
+  .index_top_data_title {
+    width: 70%;
+    float: left;
+    font-size: 14px;
+  }
+  .index_top_data_time {
+    width:20%;
+    float:right;
+    font-size:12px;
+  }
+  .activity_img {
+    width:1200px;
+    margin-top:7%;
+    float:left;
+  }
+  .production_box {
+    width: 1200px;
+    float: left;
+    margin: 0 auto;
+    margin-top: 5%;
+  }
+  .production_box_title {
+    width: 100%;
+    padding:1%;
+  }
+  .production_box_name {
+    width:8.5%;
+    font-size: 24px;
+    color: #288add;
+    border-bottom:1px solid #288add;
+    margin-left:1%;
+  }
+</style>

TEAMModelOS.SmartTeach/ClientApp/router/routes.js

@@ -2,12 +2,14 @@
 //import ServerSideLogin from '@/view/serverside/login'
 // import HTTP404 from '@/view/404'
 import Index from '@/view/resource/index'
+import Activity from '@/view/resource/activity'
 import HomePage from '@/view/resource/HomePage'
 import Teacher from '@/view/resource/Teacher'
 import { resolve } from 'url';
 
 export const routes = [  
   { name: 'index', path: '', component: Index },
+  { name: 'activity', path: '/activity', component: Activity},
   { name: 'HomePage', path: '/HomePage', component: HomePage },
   { name: 'Teacher', path: '/Teacher', component: Teacher },
 ]

TEAMModelOS.SmartTeach/ClientApp/view/resource/activity.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="activity_container">
+    <Header></Header>
+    <Activitycommon></Activitycommon>
+    <Activityindex></Activityindex>
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+import Header from '@/common/headers.vue'
+  import Footer from '@/common/footer.vue'
+  import Activitycommon from '@/components/resource/activitycommon.vue'
+  import Activityindex from '@/components/resource/activityindex.vue'
+  export default {
+    components: {
+      Header,
+      Footer,
+      Activitycommon,
+      Activityindex
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+<style>
+  .activity_container {
+    width: 100%;
+    height: auto;
+    background-color: #fff;
+  }
+
+</style>

TEAMModelOS.SmartTeach/package.json

@@ -17,6 +17,7 @@
     "update-packages": "npx npm-check -u"
   },
   "dependencies": {
+    "@huoyu/vue-digitroll": "^1.0.4",
     "animate.css": "^3.7.0",
     "axios": "^0.18.0",
     "bcryptjs": "^2.4.3",