TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/TeacherWork.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="content-info">
      <Tabs type="card" size="default" :animated="false">
        <TabPane label="默认栏目" icon="logo-apple">
          <div class="info">
            <ul class="first">
              <li  v-for="item in info">
                <p @click="viewDetails">
                  <span class="title" title="高中物理高效课堂应重视培养学生的创新意识">
                    {{item.title}}
                  </span>
                  <span class="user">{{item.name}}</span>
                  <span class="date">{{item.data}}</span>
                  <span>浏览{{item.num}}</span>
                </p>
              </li>
            </ul>

          </div>
        </TabPane>
        <TabPane label="保健安康" icon="ios-text-outline">
          <div class="info">
            <ul class="first" >
              <li v-for="item in info">
                <p @click="viewDetails">
                  <span class="title" title="高中物理高效课堂应重视培养学生的创新意识">
                    {{item.title}}
                  </span>
                  <span class="user">{{item.name}}</span>
                  <span class="date">{{item.data}}</span>
                  <span>浏览{{item.num}}</span>
                </p>
              </li>
            </ul>

          </div>
        </TabPane>
        <TabPane label="工作室相册" icon="ios-text-outline">
          <div class="info">
            <ul class="first" >
              <li v-for="item in info">
                <p @click="viewDetails">
                  <span class="title" title="高中物理高效课堂应重视培养学生的创新意识">
                    {{item.title}}
                  </span>
                  <span class="user">{{item.name}}</span>
                  <span class="date">{{item.data}}</span>
                  <span>浏览{{item.num}}</span>
                </p>
              </li>
            </ul>

          </div>
        </TabPane>
        <TabPane label="工作室建设" icon="ios-text-outline">
          <div class="info">
            <ul class="first">
              <li  v-for="item in info">
                <p @click="viewDetails">
                  <span class="title" title="高中物理高效课堂应重视培养学生的创新意识">
                    {{item.title}}
                  </span>
                  <span class="user">{{item.name}}</span>
                  <span class="date">{{item.data}}</span>
                  <span>浏览{{item.num}}</span>
                </p>
              </li>
            </ul>

          </div>
        </TabPane>
        <TabPane label="班主任工作" icon="ios-text-outline">
          <div class="info">
            <ul class="first" >
              <li v-for="item in info">
                <p @click="viewDetails">
                  <span class="title" title="高中物理高效课堂应重视培养学生的创新意识">
                    {{item.title}}
                  </span>
                  <span class="user">{{item.name}}</span>
                  <span class="date">{{item.data}}</span>
                  <span>浏览{{item.num}}</span>
                </p>
              </li>
            </ul>

          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        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' })

      }
    }
  }
</script>
<style scoped>
  .home {
    width: 59%;
    height: 500px;
    position: absolute;
    top: 69%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }

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

    .title p {
      display: inline;
    }

  .content-info {
    margin-top: 10px;
  }

  .info {
    width: 100%;
    height: 400px;
    border: 1px solid #666;
    background-color: #ffffff;
    overflow: scroll;
  }

    .info .first {
      padding-right: 20px;
    }

  .mgt20 {
    margin-top: 20px;
  }

  .info ul {
    list-style: none;
  }

  .info li p {
    display: block;
    height: 50px;
    border-bottom: 1px dashed #dfdfdf;
    padding-left: 10px;
  }

  .first p:hover {
    background: #f7f7f7;
    text-decoration: none;
    cursor: pointer;
  }

  .first span {
    display: inline-block;
    color: #555;
    /* text-align: left; */
    line-height: 60px;
    width: 440px;
  }

  .first .user {
    width: 75px;
  }

  .first .date {
    width: 105px;
  }
</style>