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

<template>
  <div class="home">
    <div class="title">
      <Icon type="ios-home-outline" size="22" />
      <p><router-link to="/TeacherZone/ZonesHome">工作室首页</router-link></p><span>>资源列表</span>
    </div>
    <div class="list-info">
      <h1 class="list-title">资源列表</h1>
      <div class="list">
        <Tree :data="data2" @on-select-change="chooseTab"></Tree>
      </div>
    </div>
    <div class="content-info">
      <h1 class="list-title">全部资源</h1>
      <ul class="source-title" >
        <li v-for="item in info">
          <a class="titles">
            <span class="doc">
              {{item.title}}
            </span>
          </a>
          <span class="style">ppt</span>
          <span class="peo">
            <a title="陈海波"   style="border:none">
              {{item.name}}
            </a>
          </span>
          <span class="date">{{item.data}}</span>
          <p class="download"><Icon type="ios-cloud-download-outline "size="22"/></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: [
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
          {
            title: '16-17版 第1部分 专题6 机械能守恒定律　功能关系',
            name: '刘国元',
            data: '2018-05-16',
          },
        ],
        data2: [
          {
            title: '根目录',
            expand: true,
            children: [
              {
                title: '必修一',
                expand: true,
                render: (h, { root, node, data }) => {
                  return h('span', {
                    style: {
                      display: 'inline-block',
                      width: '40%'
                    }
                  }, [
                      h('span', [
                        h('Icon', {
                          props: {
                            type: 'md-folder-open',
                            size:'15',
                            color:'blue'
                          },
                          style: {
                            marginRight: '8px',
                            width: '20px',
                          }
                        }),
                        h('span', data.title)
                      ]),
                    ]);
                },
                children: [
                  {
                    title: '教学学案'
                  },
                  {
                    title: '教学资源'
                  }
                ]
              },
              {
                title: '必修二',
                expand: true,
                render: (h, { root, node, data }) => {
                  return h('span', {
                    style: {
                      display: 'inline-block',
                      width: '40%'
                    }
                  }, [
                      h('span', [
                        h('Icon', {
                          props: {
                            type: 'md-folder-open',
                            size: '15',
                            color: 'blue'
                          },
                          style: {
                            marginRight: '8px',
                            width: '20px',
                          }
                        }),
                        h('span', data.title)
                      ]),
                    ]);
                },
                children: [
                  {
                    title: '教学学案'
                  },
                  {
                    title: '教学资源'
                  }
                ]
              },
              {
                title: '必修三',
                expand: true,
                render: (h, { root, node, data }) => {
                  return h('span', {
                    style: {
                      display: 'inline-block',
                      width: '40%'
                    }
                  }, [
                      h('span', [
                        h('Icon', {
                          props: {
                            type: 'md-folder-open',
                            size: '15',
                            color: 'blue'
                          },
                          style: {
                            marginRight: '8px',
                            width: '20px',
                          }
                        }),
                        h('span', data.title)
                      ]),
                    ]);
                },
                children: [
                  {
                    title: '教学学案'
                  },
                  {
                    title: '教学资源'
                  }
                ]
              },
              {
                title: '必修四',
                expand: true,
                render: (h, { root, node, data }) => {
                  return h('span', {
                    style: {
                      display: 'inline-block',
                      width: '40%'
                    }
                  }, [
                      h('span', [
                        h('Icon', {
                          props: {
                            type: 'md-folder-open',
                            size: '15',
                            color: 'blue'
                          },
                          style: {
                            marginRight: '8px',
                            width: '20px',
                          }
                        }),
                        h('span', data.title)
                      ]),
                    ]);
                },
                children: [
                  {
                    title: '教学学案'
                  },
                  {
                    title: '教学资源'
                  }
                ]
              },
              {
                title: '必修五',
                expand: true,
                render: (h, { root, node, data }) => {
                  return h('span', {
                    style: {
                      display: 'inline-block',
                      width: '40%'
                    }
                  }, [
                      h('span', [
                        h('Icon', {
                          props: {
                            type: 'md-folder-open',
                            size: '15',
                            color: 'blue'
                          },
                          style: {
                            marginRight: '8px',
                            width: '20px',
                          }
                        }),
                        h('span', data.title)
                      ]),
                    ]);
                },
                children: [
                  {
                    title: '教学学案'
                  },
                  {
                    title: '教学资源'
                  }
                ]
              },
            ]
          }
        ],
        info: [
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },
          {
            title: '高中物理高效课堂应重视培养学生的创新意识',
            name: '张一啊',
            data: '2018-02-26',
            num: '25',
          },

        ]
      }
    },
    methods: {
      viewDetails() {
        this.$router.push({ path: '/TeacherZone/TeachDetails' })

      },
      chooseTab() {
        this.info = this.data;
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 65%;
    height: 500px;
    position: absolute;
    top: 69%;
    left: 53%;
    transform: translate(-50%,-50%);
    float:left;
    display:inline-flex;
  }

  .title {
    font-size: 16px;
    text-align: left;
    font-weight: 600;
  }

    .title p {
      display: inline;
    }
  .list-info {
    margin-top: 35px;
    width: 260px;
    background: #fff;
    /* float: left; */
    margin-left: -16%;
    height: 600px;
    border: 1px solid #ededed;
  }
  .list-title {
    float: left;
    height: 57px;
    line-height: 57px;
    font-size: 20px;
    color: #288add;
    border-bottom: 1px solid #288add;
  }
  .list{
    width:80%;
    height:400px;
    float:left;
    margin-left:20px;
    overflow:scroll;
  }
  .list >>> .ivu-tree ul li {
    text-align: left;
    margin-left: -10px;
    font-size: 14px;
    font-weight: 600;
  }
  .content-info {
    width: 75%;
    height: 800px;
    border: 1px solid #ededed;
    margin-top: 3%;
    margin-left: 4%;
    background-color:#ffffff;
    /* float: right; */
    /* display: inline; */
    overflow:scroll;
  }
  .source-title{
    margin-top:10%;
  }
  .source-title  li{
    display: block;
    line-height: 56px;
    height: 56px;
    margin-left:20px;
    border-bottom: 1px dashed #dfdfdf;
  }
  .source-title  li:hover {
    background-color: #f7f7f7;
    text-decoration: none;
  }
  .doc {
    font-size: 14px;
    background: url(../../assets/image/resource/ppt_small.jpg) no-repeat left center;
    padding: 3px 0 3px 23px;
  }
    
    .source-title .style {
      margin-left: 30px;
      font-size: 15px;
    }
    .source-title .peo {
      border: none;
      margin-left: 30px;
      font-size: 15px;
    }
    .source-title .date {
      margin-left: 50px;
      font-size: 16px;
    }
    .source-title .download {
      font-size: 16px;
      display: inline;
      /* width: 50px; */
      margin-left: 100px;
    }

</style>