style:增加学习路径图

README.md

@@ -1,24 +1,29 @@
-# jdfstudy
+# fe-stu
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

src/router/index.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import routesConfig from './config';
-console.log('routesConfig', routesConfig)
+// console.log('routesConfig', routesConfig)
 
 const routes = [
 	{

src/views/roadmap/LearnPath.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="LearnPath">
+    <div class="content">
+      <div class="title">
+        <div class="titleL">
+          <div class="text">学习路径图</div>
+          <div class="info" style="margin-right: 14px">
+            <img
+              style="width: 20px; height: 18px; margin-right: 10px"
+              src="../../assets/image/pm.png"
+            />
+            <div style="margin-top: 1px">产品经理</div>
+          </div>
+          <div class="info">
+            <img
+              style="width: 18px; height: 17px; margin-right: 11px"
+              src="../../assets/image/band.png"
+            />
+            <div style="margin-top: 2px">Band8</div>
+          </div>
+        </div>
+        <div class="titleR">进入未完成任务</div>
+      </div>
+      <div class="head">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column
+            prop="img"
+            label="缩略图"
+            #default="scope"
+            align="center"
+            width="255"
+          >
+            <img :src="scope.row.img" style="width: 230px; height: 155px" />
+          </el-table-column>
+          <el-table-column
+            align="center"
+            class-name="name"
+            prop="name"
+            label="路径名称"
+          />
+          <el-table-column
+            align="center"
+            class-name="introduce"
+            prop="introduce"
+            label="路径介绍"
+          />
+          <el-table-column
+            align="center"
+            class-name="target"
+            prop="target"
+            label="目标人群"
+          />
+          <el-table-column
+            #default="scope"
+            align="center"
+            class-name="state"
+            width="110"
+            prop="state"
+            label="状态"
+          >
+            <img
+              :src="
+                scope.row.state === 0
+                  ? require('../../assets/image/nostarted.png')
+                  : scope.row.state === 1
+                  ? require('../../assets/image/completed.png')
+                  : require('../../assets/image/ongoing.png')
+              "
+              style="width: 99px; height: 99px"
+            />
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "LearnPath",
+  setup() {
+    const state = reactive({
+      tableData: [
+        {
+          img: require("../../assets/image/roadmap1.png"),
+          name: "产品经理学习路径图",
+          introduce:
+            "为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……",
+          target: "Band8-Band12",
+          state: 1,
+        },
+        {
+          img: require("../../assets/image/roadmap2.png"),
+          name: "管理者进阶学习路径图",
+          introduce:
+            "为了XXXXX，集团CHRO组织为各级管理者配置了统一的学习成长路径……",
+          target: "Band8-Band12",
+          state: 0,
+        },
+      ],
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style lang="scss">
+.LearnPath {
+  width: 100%;
+  min-height: 734px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 1);
+  display: flex;
+  .content {
+    width: 100%;
+    // flex: 1;
+    margin-top: 43px;
+    // background-color: pink;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 53px;
+      margin-right: 54px;
+    }
+    .title .titleL {
+      display: flex;
+      align-items: center;
+    }
+    .title .titleL .text {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333333;
+      line-height: 24px;
+      margin-right: 26px;
+    }
+    .title .titleL .info {
+      display: flex;
+      // align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #387df7;
+    }
+    .title .titleR {
+      width: 157px;
+      height: 48px;
+      border: 2px solid #0060ff;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: bold;
+      color: #0060ff;
+    }
+    .head {
+      // height: 50px;
+      background: #f9f9f9;
+      margin-top: 50px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      margin-left: 53px;
+      margin-right: 54px;
+      width: calc(100% - 107px);
+    }
+  }
+}
+</style>