TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/TeachTopic.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>
      <Tabs class="list" value="name1">
        <TabPane label="不限" name="name1">暂无话题</TabPane>
        <TabPane label="进行中" name="name2">暂无话题</TabPane>
        <TabPane label="已结束" name="name3">暂无话题</TabPane>
      </Tabs>
    </div>
    <div class="content-info">
      <h1 class="list-title">最新话题</h1>
      <p>暂无话题</p>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

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

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

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

    .title p {
      display: inline;
    }

  .list-info {
    margin-top: 35px;
    width: 50%;
    background: #fff;
    /* float: left; */
    margin-left: -24%;
    height: 200px;
    border: 1px solid #ededed;
  }

  .list-title {
    float: left;
    height: 57px;
    line-height: 57px;
    font-size: 20px;
    margin-left: 10px;
    color: #288add;
    border-bottom: 1px solid #288add;
  }

  .list {
    margin-top: 10%;
    margin-left: 1%;
    font-size: 15px;
  }

  .content-info {
    width: 25%;
    height: 200px;
    border: 1px solid #ededed;
    margin-top: 3%;
    margin-left: 4%;
    background-color: #ffffff;
  }

    .content-info p {
      margin-top: 25%;
      font-size: 15px;
      margin-left: 10px;
    }
</style>