<!--
 * @Author: ysh
 * @Date: 2025-03-05 14:00:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-27 09:16:49
-->
<template>
  <div>
    <study-head></study-head>
    <div class="main app-container">
      <el-row>
        <el-col :md="12" :sm="24" class="left">
          <div class="title">
            我的学习记录
            <div class="line"></div>
          </div>
          <study-left ref="studyLeft"></study-left>
        </el-col>
        <el-col :md="12" :sm="24" class="right">
          <div class="title">
            学习资料库
            <div class="line"></div>
          </div>
          <study-right ref="studyRight" @refreshList="getStudyList"></study-right>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import StudyHead from './components/studyHead.vue'
import StudyLeft from './components/studyLeft.vue'
import StudyRight from './components/studyRight.vue'
export default {
  name: 'myStudy',
  components: { StudyHead, StudyLeft, StudyRight },
  methods: {
    getStudyList() {
      this.$refs.studyLeft.getRecordsList();
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin-top: 50px;

  .left {
    padding: 10px;
    border-right: 1px solid #ececec;
  }

  .center {
    padding: 10px;
    border-right: 1px solid #ececec;
  }

  .right {
    padding: 10px;
  }
}


.title {
  position: relative;
  font-weight: bold;
  font-size: 18px;
  padding-left: 40px;
  padding-bottom: 20px;

  .line {
    position: absolute;
    left: 22px;
    top: 3px;
    width: 5px;
    height: 20px;
    border-radius: 10px;
    background-color: #2893e5;
  }
}
</style>