From 9ea92e9717d233b54797ed6655a4ab399c614dcd Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Tue, 13 Dec 2022 18:22:38 +0800
Subject: [PATCH] =?UTF-8?q?style:=E6=9B=B4=E6=8D=A2=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E5=8F=8A=E5=8E=BB=E6=8E=89padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  16 ++--
 src/views/roadmap/LearnPath.vue | 138 +++++++++++++++++---------------
 2 files changed, 82 insertions(+), 72 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ac98fc0..58c155e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2022-11-21 17:28:10
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2022-12-11 20:19:39
+ * @LastEditTime: 2022-12-13 18:20:41
  * @FilePath: /fe-stu/src/App.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -40,10 +40,10 @@ export default defineComponent({
 
     const currentRouteName = computed(() => route.name);
 
-    localStorage.setItem(
-      "token",
-      "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2NzA3NjExNzIsImV4cCI6MTY3MDc2ODM3MiwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.9e8c4d3933c3a6d9b660e0b849940c813e1c245b3d17646ff7a793100640bc42"
-    );
+    // localStorage.setItem(
+    //   "token",
+    //   "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2NzA3NjExNzIsImV4cCI6MTY3MDc2ODM3MiwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.9e8c4d3933c3a6d9b660e0b849940c813e1c245b3d17646ff7a793100640bc42"
+    // );
     return {
       routes,
       name: currentRouteName,
@@ -67,8 +67,8 @@ export default defineComponent({
   display: flex;
   width: 100%;
   min-height: 100%;
-  // background-color: rgba(242, 245, 247, 1);
-  background-color: #ccc;
+  background-color: rgba(242, 245, 247, 1);
+  // background-color: #ccc;
   #nav {
     width: 220px;
     height: 100%;
@@ -101,7 +101,7 @@ export default defineComponent({
   main {
     flex: 1;
     width: 100%;
-    padding: 30px;
+    // padding: 30px;
     box-sizing: border-box;
   }
 }
diff --git a/src/views/roadmap/LearnPath.vue b/src/views/roadmap/LearnPath.vue
index 553ed8c..d6797f2 100644
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -5,14 +5,16 @@
         <div class="titleL">
           <div @click="returnfun" class="text">学习路径图</div>
           <div class="info" style="margin-right: 14px">
-            <img style="width: 20px; height: 18px; margin-right: 10px"
-                 src="../../assets/image/pm.png"
+            <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"
+            <img
+              style="width: 18px; height: 17px; margin-right: 11px"
+              src="../../assets/image/band.png"
             />
             <div style="margin-top: 2px">Band8</div>
           </div>
@@ -21,16 +23,18 @@
           <el-popover width="475px" trigger="hover" popper-class="lppopover">
             <div>
               <div class="finish">
-                <img src="../../assets/image/circle.png"
-                     style="width: 20px; height: 20px"
+                <img
+                  src="../../assets/image/circle.png"
+                  style="width: 20px; height: 20px"
                 />
                 <div class="text">未完成</div>
                 <div class="box"></div>
               </div>
-              <div v-for="(value, index) in unCompleteTaskList"
-                   :key="index"
-                   class="tasks"
-                   :style="{
+              <div
+                v-for="(value, index) in unCompleteTaskList"
+                :key="index"
+                class="tasks"
+                :style="{
                   'border-bottom':
                     index === unCompleteTaskList.length - 1
                       ? null
@@ -41,9 +45,9 @@
                   {{ value.name }}
                 </div>
                 <img
-                    style="width: 20px; height: 20px"
-                    src="../../assets/image/go.png"
-                    @click="toUnTask(chapterId)"
+                  style="width: 20px; height: 20px"
+                  src="../../assets/image/go.png"
+                  @click="toUnTask(chapterId)"
                 />
               </div>
             </div>
@@ -54,9 +58,9 @@
           </el-popover>
         </div>
         <div
-            :style="{ display: showmapdetail ? 'flex' : 'none' }"
-            class="titleR"
-            @click="returnfun"
+          :style="{ display: showmapdetail ? 'flex' : 'none' }"
+          class="titleR"
+          @click="returnfun"
         >
           返回列表
         </div>
@@ -66,27 +70,30 @@
         <div style="min-width: 770px; width: 100%">
           <el-table :data="data" style="width: 100%" @row-click="gofun">
             <el-table-column
-                prop="img"
-                label="缩略图"
-                #default="scope"
-                align="center"
-                width="255"
+              prop="img"
+              label="缩略图"
+              #default="scope"
+              align="center"
+              width="255"
             >
-              <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
+              <img
+                :src="scope.row.picUrl"
+                style="width: 230px; height: 155px"
+              />
             </el-table-column>
-            <el-table-column align="center" prop="name" label="路径名称"/>
+            <el-table-column align="center" prop="name" label="路径名称" />
             <el-table-column
-                align="center"
-                prop="introduce"
-                label="路径介绍"
-                #default="scope"
+              align="center"
+              prop="introduce"
+              label="路径介绍"
+              #default="scope"
             >
               <el-popover
-                  placement="top-start"
-                  title="路径介绍"
-                  :width="350"
-                  trigger="hover"
-                  :content="scope.row.remark"
+                placement="top-start"
+                title="路径介绍"
+                :width="350"
+                trigger="hover"
+                :content="scope.row.remark"
               >
                 <template #reference>
                   <div>{{ scope.row.remark }}</div>
@@ -94,16 +101,19 @@
               </el-popover>
             </el-table-column>
 
-            <el-table-column align="center" prop="target" label="目标人群"/>
+            <el-table-column align="center" prop="target" label="目标人群" />
             <el-table-column
-                #default="scope"
-                align="center"
-                width="110"
-                prop="state"
-                label="状态"
+              #default="scope"
+              align="center"
+              width="110"
+              prop="state"
+              label="状态"
             >
-              <img :src="{0:nostarted,1:completed,2:ongoing}[scope.row.status]"
-                   style="width: 99px; height: 99px"
+              <img
+                :src="
+                  { 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]
+                "
+                style="width: 99px; height: 99px"
               />
             </el-table-column>
           </el-table>
@@ -112,11 +122,11 @@
       <!-- 路径列表-->
       <!-- 路径详情图 -->
       <div
-          :style="{ display: showmapdetail ? 'flex' : 'none' }"
-          class="mapdetail"
+        :style="{ display: showmapdetail ? 'flex' : 'none' }"
+        class="mapdetail"
       >
-        <div v-for="(item,i) in detail?.rows">
-          <img :src="useImage(`222_0${i+2}.png`)">
+        <div v-for="(item, i) in detail?.rows" :key="i">
+          <img :src="useImage(`222_0${i + 2}.png`)" />
         </div>
         <!--        <div class="modal"-->
         <!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
@@ -127,46 +137,46 @@
   </div>
 </template>
 <script setup>
-import {reactive, toRefs, ref} from "vue";
-import nostarted from '../../assets/image/nostarted.png'
-import completed from '../../assets/image/completed.png'
-import ongoing from '../../assets/image/ongoing.png'
-import {request, usePage, useRequest} from "@/api/request";
-import {ROUTER_CHAPTER_LIST, ROUTER_LIST, ROUTER_UNCOMPLETE_LIST} from "@/api/api";
-import {useImage} from "@/api/utils";
-import {useRouter} from "vue-router";
+import { reactive, toRefs, ref } from "vue";
+import nostarted from "../../assets/image/nostarted.png";
+import completed from "../../assets/image/completed.png";
+import ongoing from "../../assets/image/ongoing.png";
+import { request, usePage, useRequest } from "@/api/request";
+import {
+  ROUTER_CHAPTER_LIST,
+  ROUTER_LIST,
+  ROUTER_UNCOMPLETE_LIST,
+} from "@/api/api";
+import { useImage } from "@/api/utils";
+import { useRouter } from "vue-router";
 
-const detail = ref()
-const {data} = usePage(ROUTER_LIST, {})
+const detail = ref();
+const { data } = usePage(ROUTER_LIST, {});
 
-const router = useRouter()
+const router = useRouter();
 
-const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {})
+const { unCompleteTaskList } = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 const state = reactive({
   showmapdetail: false,
 });
-const {showmapdetail} = toRefs(state)
+const { showmapdetail } = toRefs(state);
 
 const returnfun = () => {
   state.showmapdetail = false;
 };
 
-async function gofun({routerId}) {
+async function gofun({ routerId }) {
   // console.log(routerId)
   // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
   // detail.value = data.data
   // state.showmapdetail = true;
-  router.push({path: '/pathdetails', query: {routerId}})
-}
-
-function toUnTask() {
-
+  router.push({ path: "/pathdetails", query: { routerId } });
 }
 
+function toUnTask() {}
 </script>
 <style lang="scss">
 .modal {
-
 }
 
 .modal:after {