student-h5/src/views/projectdetails/ProjectPath.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-19 11:28:11
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-02-11 09:47:29
 * @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="projectPath">
    <!-- 搜索 -->
    <div class="search">
      <div style="width: 90%">
        <el-input
          placeholder="搜索"
          prefix-icon="el-icon-search"
          v-model="searchContent"
        >
        </el-input>
      </div>
    </div>
    <!-- 搜索 -->
    <!-- 导航 -->
    <div class="tabsMain" style="">
      <el-tabs v-model="selectTab" @tab-click="handleClick">
        <el-tab-pane label="进行中" name="1">
          <!-- 上次学到 -->
          <div class="contentMain">
            <div class="text">上次学到</div>
            <div class="items" @click="goDetails">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 上次学到 -->
          <!-- 我的任务 -->
          <div class="contentMain">
            <div class="text">我的任务</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 我的任务 -->
          <!-- 其他课程 -->
          <div class="contentMain">
            <div class="text">其他课程</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 其他课程 -->
        </el-tab-pane>
        <el-tab-pane label="待开始" name="2">
          <!-- 我的任务 -->
          <div class="contentMain">
            <div class="text">我的任务</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 我的任务 -->
          <!-- 其他课程 -->
          <div class="contentMain">
            <div class="text">其他课程</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 其他课程 -->
        </el-tab-pane>
        <el-tab-pane label="已完成" name="3">
          <!-- 我的任务 -->
          <div class="contentMain">
            <div class="text">我的任务</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 我的任务 -->
          <!-- 其他课程 -->
          <div class="contentMain">
            <div class="text">其他课程</div>
            <div class="items">
              <img
                style="width: 100px; height: 56px"
                src="../../assets/image/pathmap/firstclass.png"
              />
              <div class="titlePro">
                <div class="title">
                  BOE端到端体系 - 第七章 文字不可超出第二行…
                </div>
                <div style="margin-top: 5px">
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <!-- 其他课程 -->
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 导航 -->
  </div>
</template>

<script setup>
import { computed, reactive, toRefs, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const searchContent = ref(""); //搜索内容
const selectTab = ref("1");
const handleClick = (tab, event) => {
  console.log("选择tab", tab, event);
  console.log("selectTab", selectTab.value);
};
const goDetails = () => {
  router.push({
    path: "/pathmappage",
    query: { routerId: 290 },
  });
  // router.push({
  //   path: "/projectdetails",
  //   query: { projectId: 485 },
  // });
};
</script>

<style lang="scss">
.projectPath {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .search {
    width: 100%;
    height: 52px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabsMain {
    width: 100%;
    height: 45px;
    background-color: #fff;
    #tab-1 {
      margin-left: 10%;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__item {
      height: 45px;
    }
    .el-tabs__header {
      margin: 0;
    }
    .contentMain {
      width: 90%;
      background-color: #ffffff;
      margin-top: 10px;
      padding-left: 5%;
      padding-right: 5%;
      min-height: 200px;
      padding-top: 17px;
      .text {
        font-size: 18px;
        font-weight: 500;
        color: #0d233a;
        line-height: 25px;
      }
      .items {
        width: 100%;
        margin-top: 16px;
        display: flex;
        align-items: center;
        .titlePro {
          margin-left: 10px;
          .title {
            font-size: 15px;
            font-weight: 500;
            color: #04243c;
            line-height: 20px;
          }
          .el-progress__text {
            min-width: 0px !important;
            color: #277aff;
          }
          .el-progress-bar__inner {
            background: linear-gradient(180deg, #5093ff 0%, #2478ff 100%);
          }
        }
      }
    }
  }
}
</style>