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

<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>
  .d-roll-item > .d-roll-bar > div {
    line-height: 0.95 !important;
  }
</style>
<style scoped>
  .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;
    list-style:none;
    float:left;
    text-align:center;
    font-size:16px;
  }
    .nav_name:hover {
      background-color: #248dde;
    }
    .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;
  }
</style>