TEAMModelOS/TEAMModelOS.TeachZone/ClientApp/view/teachTask.vue

<template>
  <div id="app">
    <Header></Header>
    <WorkMaster></WorkMaster>
    <div class="wrap ov bodyContent">
      <!--<workLeft></workLeft>-->
      <RecomLeft></RecomLeft>
      <div class="main fr">
        <h4 ><a href="/">首页</a> > 课后作业</h4>
        <div class="content ov bgf pad20">
          <Screen></Screen>
          <Sort></Sort>
          <ul class="workSourceList" v-for="item in list">
            <li :class="item.type">
              <div class="ov">
                <h2 class="fl"><a :href="'/'+item.src">{{item.title}}</a></h2>
                <!--<p class="fr">-->
                <!--<Rate show-text allow-half disabled v-model="item.star">-->
                <!--<span>{{ item.star }}分</span>-->
                <!--</Rate>-->
                <!--</p>-->
                <div class="fr" style="width: 150px;">
                  <Progress :percent="(item.done/item.all)*100"/>
                </div>
              </div>
              <div class="ov">
                <ol class="fl">
                  <li>大小：{{item.size}}</li>
                  <li>来源：{{item.source}}</li>
                  <li>时间：{{item.date}}</li>
                </ol>
                <ol class="fr woekOper">
                  <!--<li><a :href="'/'+item.src"><Icon type="md-eye"/> 预览({{item.preview}})</a></li>-->
                  <!--<li><a href=""><Icon type="ios-heart"/> 收藏({{item.collect}})</a></li>-->
                  <!--<li><a href=""><Icon type="md-download"/> 下载</a></li>-->
                  <!--<li><a href=""><Icon type="md-person"/> 参与人数：0/38</a></li>-->
                </ol>

                <p class="fr"><a href=""><Icon type="md-person"/> 参与人数：{{item.done}}/{{item.all}}</a></p>
              </div>
            </li>
          </ul>
          <Page :total="100"  size="small" show-total class="fr" />
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from '@/common/header.vue'
  import WorkMaster from '@/common/workMaster.vue'
  import WorkLeft from '@/common/workLeft.vue'
  import RecomLeft from '@/common/recomLeft.vue'
  import Screen from '@/common/screen.vue'
  import Textbook from '@/common/textbook.vue'
  import Sort from '@/common/screenSort.vue'
  import Footer from '@/common/footer.vue'
  import ScoreList from '@/components/scoreList.vue'
  export default {
    components: {
      Header,
      WorkMaster,
      WorkLeft,
      RecomLeft,
      Screen,
      Textbook,
      Sort,
      Footer,
      ScoreList
    },
    data () {
      return {
        valueText: 5,
        modal1: false,
        formItem: {
          select: 'sel1',
          select2: 'sel2',
          input: '',
          textarea: '',
        },
        list:[
          {
            type:'hunhe',
            src:'teachTaskDetail',
            title:'第四单元——章节练习',
            star:5,
            size:'1.32MB',
            source:'陆杰',
            date:'2019-04-21',
            percent:55,
            all:100,
            done:20,
          },
          {
            type:'hunhe',
            src:'teachTaskDetail',
            title:'第三单元——章节练习',
            star:5,
            size:'1.12MB',
            source:'陆杰',
            date:'2019-04-08',
            percent:55,
            all:100,
            done:50,
          },
          {
            type:'hunhe',
            src:'teachTaskDetail',
            title:'第二单元——章节练习',
            star:5,
            size:'1.89MB',
            source:'陆杰',
            date:'2019-03-15',
            percent:55,
            all:100,
            done:100,
          },
          {
            type:'hunhe',
            src:'teachTaskDetail',
            title:'第一单元——章节练习',
            star:5,
            size:'1.56MB',
            source:'陆杰',
            date:'2019-03-02',
            percent:55,
            all:100,
            done:80,
          },
        ]
      }
    },
    creted(){

    },
    methods: {
      ok () {
        this.$Message.info('发布成功');
      },
      // cancel () {
      //   this.$Message.info('');
      // }
      yes () {
        this.modal1 = false;
        this.$Message.success('发布成功');
      },
      cancel () {
        this.modal1 = false;
      }
    }
  }
</script>