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

<template>
  <div id="app">
    <div class="banner">
      <img src="../../assets/image/gxq_banner.png" />
    </div>
    <div class="details-container">
        <div class="activity-brief center-row">
          <div class="activity-brief-left">
            <img src="../../assets/image/cover.png" width="100%"/>
          </div>
          <div class="activity-brief-right">
            <div class="activity-brief-title">
              <span>2019年高新区智慧课堂 5月份 优课评比 </span>
              <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
              <!--<Button type="primary" size="large">参加活动</Button>-->
            </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">征集中</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 class="items"><p class="item2">0天 0小时 0分</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="content" v-html="activityInfo.requirement"></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="description title-tip" style="margin-top:0">
                <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'
  export default {
    components: {
    },
    data() {
      return {
        reviewAcList: [],
        attachmentsList: [],
        activityInfo: {}
      }
    },

    created() {
      this.attachmentsList = attachmentsList.data.list;
      this.activityInfo = activityInfo.data;
    },
    methods: {

    },
    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: 80px auto;
    margin-top:-50px;
    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;
    }




</style>