TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/RewardDetails.vue

<template>
  <div id="app">
    <div class="details-container">
        <div class="activity-brief center-row">
          <div class="activity-brief-left">
            <img src="http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557306525954"/>
          </div>
          <div class="activity-brief-right">
            <div class="activity-brief-title">
              <span>2019年柯桥区天天智慧课堂 5月份 优课评比 </span>
              <span class="status" style="background: rgb(182, 182, 182);">活动结束</span>
            </div>
            <div class="activity-brief-info center-row">
              <div class="brief-info-left">
                <div class="items"><p class="item">2019.05.01-06.08</p> <span class="tips">活动时间</span></div>
                <div class="items"><p class="item">20</p> <span class="tips">数量</span></div>
              </div>
              <div class="brief-info-left">
                <div class="items"><p class="item">柯桥区教师发展中心</p> <span class="tips">主办方</span></div>
              </div>

            </div>
          </div>
        </div>
        <div class="activity-details center-row">
          <div class="details-left center-col">
            <div class="title-tip">
              <p class="title">奖项设置<span>FORMAT</span></p>
              <div class="award" v-for="(item,index) in rewardSettings" :key="index">
                <p class="award-name">{{item.name}}</p>
                <p class="award-tip">{{item.ratioTip}}</p>
              </div>
            </div>
            <div class="review-attachment">
            <p class="title">活动附件<span>ATTACHMENT</span></p>
            <div class="content">
              <div class="attach attachicon-2" v-for="(item,index) in attachmentsList" :key="index">
                <a :href="item.fileNameUri" :download="item.fileName" :title="item.fileName">{{item.fileName}}</a>
                <span style="float: right; font-size: 13px;">&nbsp;{{item.fileSizeTip}}</span>
              </div>
          </div>
          </div>
          </div>
          <div class="details-right center-col">
            <div class="review-awards" style="margin-top:0">
              <Tabs value="获奖作品" @on-click="tabClick">
                <TabPane label="获奖作品" name="获奖作品"></TabPane>
                <TabPane label="月冠军" name="月冠军"></TabPane>
                <TabPane label="月亚军" name="月亚军"></TabPane>
                <TabPane label="月季军" name="月季军"></TabPane>
                <TabPane label="优课" name="优课"></TabPane>
              </Tabs>
              <Table :columns="columns1" :data="rewardDatas"></Table>
            </div>
              <div class="description title-tip">
                <p class="title">
                  活动介绍
                  <span>INTRODUCE</span>
                </p>
                <div class="content" style="overflow: hidden;" v-html="activityInfo.description">
                </div>
              </div>
              <div class="guide title-tip">
                <p class="title">
                  参赛指南
                  <span>GUIDE</span>
                </p>
                <div class="content" v-html="activityInfo.guide"></div>
              </div>
              <div class="faq title-tip">
                <p class="title">
                  常见问题
                  <span>FAQ</span>
                </p>
                <div class="content" v-html="activityInfo.faq"></div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
    import attachmentsList from '@/static/attachmentsList.json'
    import activityInfo from '@/static/activityDetails.json'
    import rewardList from '@/static/rewardList.json'
  export default {
    components: {
    },
    data() {
      return {
        reviewAcList: [],
        attachmentsList: [],
        rewardSettings:[
            {
                "activityId":16,
                "activityName":"2018年柯桥区天天智慧课堂 12月份 优课评比",
                "applyCount":20,
                "id":46,
                "name":"月冠军",
                "ratio":1,
                "ratioTip":"5.00%/1人",
                "sortNumber":1,
                "type":2
            },
            {
                "activityId":16,
                "activityName":"2018年柯桥区天天智慧课堂 12月份 优课评比",
                "applyCount":20,
                "id":47,
                "name":"月亚军",
                "ratio":1,
                "ratioTip":"5.00%/1人",
                "sortNumber":2,
                "type":2
            },
            {
                "activityId":16,
                "activityName":"2018年柯桥区天天智慧课堂 12月份 优课评比",
                "applyCount":20,
                "id":48,
                "name":"月季军",
                "ratio":1,
                "ratioTip":"5.00%/1人",
                "sortNumber":3,
                "type":2
            },
            {
                "activityId":16,
                "activityName":"2018年柯桥区天天智慧课堂 12月份 优课评比",
                "applyCount":20,
                "id":49,
                "name":"优课",
                "ratio":7,
                "ratioTip":"35.00%/7人",
                "sortNumber":4,
                "type":2
            }
        ],
        activityInfo: {},
        columns1: [
            {
                title: '作品名称',
                key: 'applyName'
            },
            {
                title: '作者',
                key: 'employeeName'
            },
            {
                title: '学校',
                key: 'employeeSchoolName'
            },
            {
                title: '年级',
                key: 'gradeName'
           },
            {
                title: '学科',
                key: 'categoryName'
           },
           {
                title: '奖项',
                key: 'activityAwardName'
            }
        ],
        rewardDatas: []
      }
    },

    created() {
      this.attachmentsList = attachmentsList.data.list;
      this.activityInfo = activityInfo.data;
      this.rewardDatas = rewardList.data.list;
    },
    methods: {
      tabClick(name) {
        this.rewardDatas = name == "获奖作品" ? rewardList.data.list : rewardList.data.list.filter(item => item.activityAwardName == name);
      }
    },
    mounted() {
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(248,248,248) !important;
  }

  .center-row {
    display:flex;
    flex-direction:row;
  }

  .center-col {
    display:flex;
    flex-direction:column;
  }

  .banner {
    width:100%;
    margin-top:80px;
  }

    .banner img {
        width: 100%;
        min-width: 1280px;
    }

  .details-container {
    position:relative;
    width: 1200px;
    margin: 120px auto;
    z-index:999;
    display: flex;
    flex-direction: column;
  }

    .details-container .activity-brief {
      width:100%;
      background:#fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .details-container .activity-brief .activity-brief-left {
      width:30%;
      height:100%;
      padding:20px;
     }

    .details-container .activity-brief .activity-brief-right {
      width:70%;
      height:100%;
      padding:20px;
     }

    .details-container .activity-brief-title {
      font-size:26px;
      font-weight:bolder;
      color:#333;
      padding:5px 20px;
      margin-left:10px;
      border-bottom:1px solid #f6f6f6;
    }

    .details-container .activity-brief-title .status {
      display: inline-block;
      margin-left: 10px;
      font-size: 14px;
      color: #fff;
      padding: 1px 6px;
      vertical-align: top;
      margin-top: 6px;
      background-color: #53c766;
      border-radius: 3px;
    }
    .details-container .activity-brief-title .ivu-btn {
      width:120px;
      height:38px;
      margin-left:20px;
      margin-bottom:10px;
    }

    .details-container .brief-info-left {
      width:50%;
    }

      .details-container .brief-info-left .items {
        margin:30px;
      }

      .details-container .brief-info-left .items .item {
        font-size:20px;
        color:#666;
      }
      .details-container .brief-info-left .items .item2 {
        font-size:20px;
        color:#ffa853;
      }
      .details-container .brief-info-left .items .tips {
        font-size:14px;
        color:#bbb;
      }

    .details-container .activity-details {
      width:100%;
      margin-top:20px;
    }

      .details-container .activity-details .details-left {
        width:30%;
        height:100%;
      }

      .details-container .activity-details .details-right {
        width:70%;
        height:100%;
        margin-left:20px;
      }

      .details-container .activity-details .details-right .title-tip {
        margin-top:20px;
      }

    .details-container .title-tip{
        padding: 20px;
        background: #fff;
    }
    .details-container  .review-attachment{
        padding: 20px;
        margin-top: 20px;
        background: #fff;
    }

    .details-container  .title {
        color: #33aafe;
        font-size: 16px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f6f6f6;
    }
    .details-container  .title span {
        color: #ccc;
        font-size: 14px;
        margin-left: 8px;
    }
    .details-container  .title-tip .content {
        color: #999;
        font-size: 14px;
        margin-top: 15px;
    }

    .details-container .details-left .review-attachment .attach {
        height: 40px;
        line-height: 40px;
        padding-left: 40px;
        margin-bottom: 14px;
        margin-top:10px;
    }
    .details-container .details-left .review-attachment .attach a {
        display: inline-block;
        text-decoration: none;
        font-size: 13px;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 160px;
        text-decoration: underline;
    }
    .details-container .details-left .review-attachment .attachicon-2 {
        background:url("http://hystkj-oss.oss-cn-shenzhen.aliyuncs.com/icon.png") no-repeat;
    }

    .details-container .review-awards {
      background:#fff;
      padding:20px;
    }

    .details-container .review-awards /deep/ .ivu-tabs {
      font-weight:bold;
    }

    .details-container .details-left .award {
      margin:15px;
      letter-spacing:1px;
    }

    .details-container .details-left .award-name {
      font-size:16px;
      color:#666;
      font-weight:bolder;
      margin-bottom:5px;
    }



</style>