From 93717449cbed1573e46a017ef56ffe9834a6ceb1 Mon Sep 17 00:00:00 2001
From: songwc <songwc@dongwu-inc.com>
Date: Fri, 14 Oct 2022 18:06:53 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E6=88=90=E5=85=B3?=
 =?UTF-8?q?=E5=8D=A1=E7=9A=84=E5=88=9B=E5=BB=BA=E5=85=B3=E5=8D=A1=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=20=E5=AE=8C=E6=88=90=E6=9F=A5=E7=9C=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20=E4=BF=AE=E6=94=B9=E5=AD=A6=E5=91=98=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=B8=8B=E6=8B=89=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                 |   2 +-
 src/components/BreadCrumb.vue             |  17 +-
 src/components/NavLeft.vue                |   6 +
 src/views/learningpath/LearningPath.vue   | 341 +++++++++++----------
 src/views/learningpath/LevelAdd.vue       |  28 +-
 src/views/learningpath/LevelAddDetail.vue | 196 +++++++++++-
 src/views/learningpath/LevelCheck.vue     | 354 ++++++++++++++++++++++
 7 files changed, 772 insertions(+), 172 deletions(-)
 create mode 100644 src/views/learningpath/LevelCheck.vue

diff --git a/README.md b/README.md
index 8e7d558b..a75f77fa 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 LearningPath.vue:学习路径页面
 LevelAdd.vue:关卡页面
 LevelAddDetail.vue:创建关卡页面
-
+LevelCheck.vue查看页面
 ```
 
 ### 二、projectcenter:项目文件夹
diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue
index 1832f22a..bad79a1f 100644
--- a/src/components/BreadCrumb.vue
+++ b/src/components/BreadCrumb.vue
@@ -68,6 +68,21 @@ export default {
             },
           ];
         }
+        if (n === "/levelcheck" || n === "/LevelCheck") {
+          state.list = [
+            {
+              name: "学习路径",
+              href: "/learningpath",
+            },
+            {
+              name: "关卡",
+              href: "/leveladd",
+            },
+            {
+              name: "查看",
+            },
+          ];
+        }
         if (n === "/projectmanage" || n === "/ProjectManage") {
           state.list = [
             {
@@ -117,7 +132,7 @@ export default {
             },
             {
               name: "添加任务",
-            }
+            },
           ];
         }
         if (n === "/templatelibrary" || n === "/TemplateLibrary") {
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index 1b3dac35..35a79d85 100644
--- a/src/components/NavLeft.vue
+++ b/src/components/NavLeft.vue
@@ -258,6 +258,12 @@ export default {
           selectedKeys: "sub1",
           pagename: "关卡",
         },
+        {
+          href: "/levelcheck",
+          openKeys: "sub1",
+          selectedKeys: "sub1",
+          pagename: "查看",
+        },
         {
           href: "/leveladddetail",
           openKeys: "sub1",
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index d5d1e5e7..650997b4 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -92,9 +92,9 @@
 
     <a-modal
       :closable="sh"
+      centered="true"
       v-model:visible="out"
       :footer="null"
-      style="margin-top: 400px"
     >
       <div class="out">
         <div class="top">
@@ -572,170 +572,183 @@ export default {
 };
 </script>
 <style lang="scss">
-.out {
-  display: block;
-  position: absolute;
-  top: 90px;
-  width: 680px;
-  // height: 525px;
-  background-color: #fff;
-
-  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  .top {
-    width: 100%;
-    height: 68px;
-
-    background: linear-gradient(
-      rgba(78, 166, 255, 0.2) 0%,
-      rgba(78, 166, 255, 0) 100%
-    );
-    display: flex;
-    align-items: center;
-    .topimg {
-      width: 18px;
-      height: 18px;
-      margin-left: 27px;
-      margin-top: -2px;
-    }
-    .topc {
-      color: #000000;
-      font-size: 16px;
-      margin-left: 8px;
-    }
-  }
-  .mid {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .d {
-      // margin-top: 8px;
-      // color: #ff4e4e;
-      margin-left: -5px;
-    }
-    .name {
-      width: 78%;
-      // background-color: lightcoral;
-      display: flex;
-      margin-top: 20px;
-      align-items: center;
-      height: 40px;
-      // border: 1px solid black;
-
-      .inname {
-        color: #6f6f6f;
-        font-size: 14px;
-        margin-left: 7px;
-      }
-      .in {
-        margin-left: 14px;
-        width: 81%;
-        position: relative;
-        .ant-input {
-          border-radius: 5px;
-          // height: 120%;
-          width: 100%;
-          height: 40px;
-        }
-        .showcount {
-          position: absolute;
-          right: 10px;
-          color: #c7cbd2;
-          bottom: 5px;
-        }
-      }
-    }
-    .bac {
-      width: 78%;
-      // background-color: lightcoral;
-      display: flex;
-      margin-top: 30px;
-      // border: 1px solid black;
-      .d {
-        margin-top: 18px;
-        color: #ff4e4e;
-      }
-      .inname {
-        color: #6f6f6f;
-        font-size: 14px;
-        margin-left: 7px;
-        margin-top: 15px;
-      }
-      .in {
-        margin-left: 14px;
-        width: 81%;
-        height: 110px;
-        // background-color: red;
-        display: flex;
-        justify-content: space-between;
-        .im {
-          border-radius: 8px;
-          width: 140px;
-          height: 110px;
-          cursor: pointer;
-        }
-      }
-    }
-    .info {
-      width: 78%;
-      // background-color: lightcoral;
-      display: flex;
-      margin-top: 30px;
-      // align-items: center;
-      // height: 40px;
-      // border: 1px solid black;
-
-      .inname {
-        color: #6f6f6f;
-        font-size: 14px;
-        margin-left: 26px;
-        margin-top: 15px;
-      }
-      .in {
-        margin-left: 14px;
-        width: 81%;
-        position: relative;
-        .ant-input {
-          border-radius: 5px;
-          // height: 120%;
-          width: 100%;
-          height: 130px;
-          resize: none;
-        }
-        .showcount {
-          position: absolute;
-          right: 10px;
-          color: #c7cbd2;
-          bottom: 5px;
-        }
-      }
-    }
-    .btn {
-      width: 33%;
-      margin-top: 30px;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 30px;
-      .samtn {
-        width: 100px;
-        height: 40px;
-        font-size: 14px;
-        border: 1px solid #4ea6ff;
-        border-radius: 8px;
-        cursor: pointer;
-      }
-      .btn1 {
+.ant-modal {
+  width: 680px !important;
+  height: 528px !important;
+  .ant-modal-content {
+    width: 680px !important;
+    height: 528px !important;
+    .ant-modal-body {
+      width: 680px !important;
+      height: 528px !important;
+      padding: 0 !important;
+      .out {
+        display: block;
+        position: absolute;
+        top: 90px;
+        width: 680px;
+        // height: 525px;
         background-color: #fff;
-        color: #4ea6ff;
-      }
-      .btn2 {
-        background-color: #4ea6ff;
-        color: #fff;
+
+        box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        .top {
+          width: 100%;
+          height: 68px;
+
+          background: linear-gradient(
+            rgba(78, 166, 255, 0.2) 0%,
+            rgba(78, 166, 255, 0) 100%
+          );
+          display: flex;
+          align-items: center;
+          .topimg {
+            width: 18px;
+            height: 18px;
+            margin-left: 27px;
+            margin-top: -2px;
+          }
+          .topc {
+            color: #000000;
+            font-size: 16px;
+            margin-left: 8px;
+          }
+        }
+        .mid {
+          width: 100%;
+          height: 100%;
+          background-color: #fff;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          .d {
+            // margin-top: 8px;
+            // color: #ff4e4e;
+            margin-left: -5px;
+          }
+          .name {
+            width: 78%;
+            // background-color: lightcoral;
+            display: flex;
+            margin-top: 20px;
+            align-items: center;
+            height: 40px;
+            // border: 1px solid black;
+
+            .inname {
+              color: #6f6f6f;
+              font-size: 14px;
+              margin-left: 7px;
+            }
+            .in {
+              margin-left: 14px;
+              width: 81%;
+              position: relative;
+              .ant-input {
+                border-radius: 5px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
+              .showcount {
+                position: absolute;
+                right: 10px;
+                color: #c7cbd2;
+                bottom: 5px;
+              }
+            }
+          }
+          .bac {
+            width: 78%;
+            // background-color: lightcoral;
+            display: flex;
+            margin-top: 30px;
+            // border: 1px solid black;
+            .d {
+              margin-top: 18px;
+              color: #ff4e4e;
+            }
+            .inname {
+              color: #6f6f6f;
+              font-size: 14px;
+              margin-left: 7px;
+              margin-top: 15px;
+            }
+            .in {
+              margin-left: 14px;
+              width: 81%;
+              height: 110px;
+              // background-color: red;
+              display: flex;
+              justify-content: space-between;
+              .im {
+                border-radius: 8px;
+                width: 140px;
+                height: 110px;
+                cursor: pointer;
+              }
+            }
+          }
+          .info {
+            width: 78%;
+            // background-color: lightcoral;
+            display: flex;
+            margin-top: 30px;
+            // align-items: center;
+            // height: 40px;
+            // border: 1px solid black;
+
+            .inname {
+              color: #6f6f6f;
+              font-size: 14px;
+              margin-left: 26px;
+              margin-top: 15px;
+            }
+            .in {
+              margin-left: 14px;
+              width: 81%;
+              position: relative;
+              .ant-input {
+                border-radius: 5px;
+                // height: 120%;
+                width: 100%;
+                height: 130px;
+                resize: none;
+              }
+              .showcount {
+                position: absolute;
+                right: 10px;
+                color: #c7cbd2;
+                bottom: 5px;
+              }
+            }
+          }
+          .btn {
+            width: 33%;
+            margin-top: 30px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30px;
+            .samtn {
+              width: 100px;
+              height: 40px;
+              font-size: 14px;
+              border: 1px solid #4ea6ff;
+              border-radius: 8px;
+              cursor: pointer;
+            }
+            .btn1 {
+              background-color: #fff;
+              color: #4ea6ff;
+            }
+            .btn2 {
+              background-color: #4ea6ff;
+              color: #fff;
+            }
+          }
+        }
       }
     }
   }
diff --git a/src/views/learningpath/LevelAdd.vue b/src/views/learningpath/LevelAdd.vue
index 8091f5af..9a7a4b19 100644
--- a/src/views/learningpath/LevelAdd.vue
+++ b/src/views/learningpath/LevelAdd.vue
@@ -667,16 +667,19 @@ export default {
           width: 110,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
-          customRender: () => {
+          customRender: (text) => {
             return (
               <div class="opa">
                 <div class="opacation">
-                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
-                    查看
-                  </span>
+                  <routerLink to="/levelcheck">
+                    <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
+                      查看
+                    </span>
+                  </routerLink>
                   <span
                     onClick={() => {
                       state.visible = true;
+                      console.log(text.record.cur);
                     }}
                     style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                   >
@@ -719,8 +722,11 @@ export default {
   clear: both;
 }
 .ant-modal {
+  width: 549px !important;
+  height: 245px !important;
   .ant-modal-content {
     width: 549px !important;
+    height: 245px !important;
     .ant-modal-body {
       padding: 0 !important;
       width: 549px !important;
@@ -1317,6 +1323,20 @@ export default {
             cursor: pointer;
             margin-right: 20px;
           }
+          .select {
+            .ant-select {
+              //
+              // border: 0 !important;
+              border-radius: 11px;
+              .ant-select-selector {
+                border: 1px solid #4ea6ff !important;
+                .ant-select-selection-placeholder {
+                  padding-left: 15px;
+                  color: #4ea6ff;
+                }
+              }
+            }
+          }
         }
         .talk {
           margin-top: 24px;
diff --git a/src/views/learningpath/LevelAddDetail.vue b/src/views/learningpath/LevelAddDetail.vue
index 8434286e..ef516830 100644
--- a/src/views/learningpath/LevelAddDetail.vue
+++ b/src/views/learningpath/LevelAddDetail.vue
@@ -5,7 +5,7 @@
         <div class="tit" style="margin-left: 18px">关卡</div>
         <div class="btn btn3" style="margin-left: 19px">
           <div class="search"></div>
-          <div class="btnText">添加关卡</div>
+          <div class="btnText" @click="showModal">添加关卡</div>
         </div>
         <div class="maincon" style="background-color: #fff">
           <div class="item" v-for="item in level" :key="item.id">
@@ -24,6 +24,52 @@
         </div>
       </div>
     </div>
+    <a-modal
+      v-model:visible="modal"
+      centered="true"
+      :footer="null"
+      :closable="clos"
+    >
+      <div class="header">
+        <div class="headmain">
+          <div class="add">添加关卡</div>
+          <div class="img" style="cursor: pointer" @click="closeModal"></div>
+        </div>
+      </div>
+      <div class="main">
+        <div class="inma">
+          <div class="name">
+            <div class="fir">关卡名称：</div>
+            <div class="input">
+              <a-input
+                style="width: 100%"
+                v-model:value="value1"
+                :maxlength="20"
+                placeholder="请输入关卡名称"
+              />
+            </div>
+            <div class="co">{{ value1.length }}/20</div>
+          </div>
+          <div class="name">
+            <div class="fir">关卡说明：</div>
+            <div class="input">
+              <a-textarea
+                style="width: 100%"
+                v-model:value="value2"
+                :maxlength="100"
+                placeholder="请输入关卡说明"
+                :rows="5"
+              />
+            </div>
+            <div class="co1">{{ value2.length }}/100</div>
+          </div>
+          <div class="btn">
+            <button class="btn1">取消</button>
+            <button class="btn2">确定</button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
     <div class="right">
       <div class="addhead">
         <div class="filt">
@@ -587,6 +633,10 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      modal: false,
+      clos: false,
+      value1: "",
+      value2: "",
       selectedRowKeys: [],
     });
     const selectProjectName = (value, index) => {
@@ -596,7 +646,13 @@ export default {
       console.log("value", value, index);
     };
     const showDrawer = () => {
-      state.visible = !state.visible;
+      state.visible = true;
+    };
+    const showModal = () => {
+      state.modal = true;
+    };
+    const closeModal = () => {
+      state.modal = false;
     };
     const afterVisibleChange = (bool) => {
       console.log("visible", bool);
@@ -746,6 +802,8 @@ export default {
       selectProjectName2,
       tableDataFunc,
       showDrawer,
+      showModal,
+      closeModal,
       afterVisibleChange,
       drawercolumns,
       onSelectChange,
@@ -761,7 +819,141 @@ export default {
   display: block;
   clear: both;
 }
+.ant-modal {
+  width: 624px !important;
+  height: 388px !important;
+  .ant-modal-content {
+    width: 624px !important;
+    height: 388px !important;
+    border-radius: 4px !important;
+    .ant-modal-body {
+      // background-color: blue;
+      width: 100% !important;
+      height: 100% !important;
+      padding: 0 !important;
 
+      .header {
+        width: 624px;
+        height: 68px;
+        background: linear-gradient(
+          180deg,
+          rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%
+        );
+        display: flex;
+        justify-content: center;
+        .headmain {
+          width: 90%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .add {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333333;
+          }
+          .img {
+            width: 20px;
+            height: 20px;
+            background-image: url(../../assets/images/basicinfo/close22.png);
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .main {
+        width: 100%;
+        height: calc(100% - 68px);
+        // background-color: #bfa;
+        display: flex;
+        justify-content: center;
+        .inma {
+          width: 75%;
+          height: 100%;
+          // background-color: lightblue;
+          .name {
+            display: flex;
+            position: relative;
+            margin-top: 30px;
+            .fir {
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(0, 0, 0, 0.85);
+              white-space: nowrap;
+              margin-top: 3px;
+            }
+            .input {
+              width: 100%;
+              .ant-input {
+                border-radius: 8px;
+                border: 1px solid #c7cbd2;
+                &::placeholder {
+                  font-size: 12px;
+                  position: absolute;
+                  top: 5px;
+                }
+              }
+              .ant-textarea {
+                border-radius: 8px;
+                border: 1px solid #c7cbd2;
+                &::placeholder {
+                  font-size: 12px;
+                  position: absolute;
+                  top: 5px;
+                }
+              }
+            }
+            .co {
+              position: absolute;
+              right: 10px;
+              top: 4px;
+
+              font-size: 14px;
+              font-weight: 400;
+              color: #c7cbd2;
+            }
+            .co1 {
+              position: absolute;
+              right: 10px;
+              bottom: 8px;
+
+              font-size: 14px;
+              font-weight: 400;
+              color: #c7cbd2;
+            }
+          }
+          .btn {
+            margin-top: 40px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            .btn1 {
+              width: 100px;
+              height: 40px;
+              border-radius: 4px;
+              border: 1px solid #387df7;
+              font-size: 14px;
+              color: #387df7;
+              cursor: pointer;
+              background: #ffffff;
+              margin-right: 20px;
+            }
+            .btn2 {
+              width: 100px;
+              height: 40px;
+              border-radius: 4px;
+              font-size: 14px;
+              color: #fff;
+              cursor: pointer;
+              border: 0;
+              background: #388be1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .drawerStyle {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
diff --git a/src/views/learningpath/LevelCheck.vue b/src/views/learningpath/LevelCheck.vue
new file mode 100644
index 00000000..2e262469
--- /dev/null
+++ b/src/views/learningpath/LevelCheck.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="checkwrapper">
+    <div class="header">
+      <div class="left">
+        <div class="img"></div>
+        <div class="msg">
+          <div class="name">哈哈</div>
+          <div class="cur">产研部门-产品经理</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">进度排行</div>
+          <div class="jinc">
+            <span style="color: #ff90ae">2&nbsp;</span>/&nbsp;10
+          </div>
+        </div>
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">完成必修</div>
+          <div class="jinc">
+            <span style="color: #a497ff">3&nbsp;</span>/&nbsp;5
+          </div>
+        </div>
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">已获取证书</div>
+          <div class="jinc">
+            <span style="color: #ffb64e">1</span>
+          </div>
+        </div>
+        <div class="lne"></div>
+        <div class="return">
+          <div class="im"></div>
+          <div class="fan">返回</div>
+        </div>
+      </div>
+    </div>
+    <div class="pad"></div>
+    <div class="bottom">
+      <div class="padd"></div>
+      <div class="bomcen">
+        <div class="centop">
+          <div class="d"></div>
+          <div class="topinf">产品经理进阶路径</div>
+          <div class="infor">
+            <div class="sy">说明 &nbsp;></div>
+          </div>
+        </div>
+        <div class="item">
+          <div v-for="item in gq" :key="item.id">
+            <div class="minc">
+              <div class="itmtit">关卡{{ item.id }}名称：{{ item.title }}</div>
+            </div>
+            <div :class="item.haschild ? 'show' : 'i'">
+              <div v-for="it in item.child" :key="it.id" class="ite">
+                <div class="title">{{ it.title }}</div>
+                <div class="btn">
+                  <button
+                    :class="it.done ? 'btnoo' : 'btno'"
+                    style="z-index: 999"
+                  >
+                    已完成
+                  </button>
+                  <button :class="it.done ? 'btntt' : 'btnt'">未完成</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="padd"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "LevelCheck",
+  setup() {
+    const state = reactive({
+      gq: [
+        {
+          id: 1,
+          title: "初级产品经理",
+          haschild: true,
+          child: [
+            {
+              id: 1 - 1,
+              done: true,
+              title: "「课程」如何成为一个产品经理",
+            },
+            {
+              id: 1 - 2,
+              done: false,
+              title: "「作业」产品作业",
+            },
+            {
+              id: 1 - 3,
+              done: false,
+              title: "「考试」产品考试",
+            },
+          ],
+        },
+        {
+          id: 2,
+          title: "中级产品经理",
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" >
+.clearfix:before,
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.checkwrapper {
+  width: 100%;
+  height: 100%;
+  .header {
+    display: flex;
+    width: 100%;
+    // background-color: #bfa;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 20px;
+    .left {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      .img {
+        width: 90px;
+        height: 90px;
+        background-color: red;
+        border-radius: 50%;
+        border: 8px solid #e7f2ff;
+        background-image: url(../../assets/px.jpg);
+        background-size: 100% 100%;
+      }
+      .msg {
+        height: 100%;
+        margin-left: 27px;
+        .name {
+          font-size: 16px;
+          font-weight: 500;
+          color: #363636;
+        }
+        .cur {
+          margin-top: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #878b92;
+        }
+      }
+    }
+    .right {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      .lne {
+        width: 1px;
+        height: 82px;
+        background: #e8effa;
+      }
+      .jin {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-left: 50px;
+        margin-right: 50px;
+
+        .jint {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333330;
+        }
+        .jinc {
+          font-size: 18px;
+          font-weight: 600;
+          color: #959595;
+        }
+      }
+      .return {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 30px;
+        margin-right: 40px;
+        .im {
+          width: 42px;
+          height: 42px;
+          background-size: 100% 100%;
+          background-image: url(../../assets/images/leveladd/back.png);
+        }
+        .fan {
+          font-size: 14px;
+          font-weight: 400;
+          color: #4ea6ff;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+  .pad {
+    // #EFF4FC
+    width: 100%;
+    height: 20px;
+    // background-color: #edf0f5;
+    background-image: linear-gradient(90deg, #edf0f5, #eff4fc);
+  }
+  .bottom {
+    width: 100%;
+    height: 100%;
+    // background-color: #bfa;
+    display: flex;
+    .padd {
+      width: 40px;
+      height: 100%;
+    }
+    .bomcen {
+      // 内容区
+      width: 100%;
+      height: 100%;
+      // background-color: lavenderblush;
+      .centop {
+        margin-top: 25px;
+        display: flex;
+        align-items: center;
+        .d {
+          width: 4px;
+          height: 13px;
+          background: #4ea6ff;
+          border-radius: 2px;
+        }
+        .topinf {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+          margin-left: 16px;
+        }
+        .infor {
+          display: flex;
+          margin-top: 4px;
+          margin-left: 17px;
+          cursor: pointer;
+          .sy {
+            font-size: 14px;
+            font-weight: 400;
+            color: #4ea6ff;
+            text-align: center;
+          }
+        }
+      }
+      .item {
+        width: 100%;
+        margin-top: 30px;
+        .minc {
+          width: 100%;
+          height: 50px;
+          background: #eff4fc;
+          display: flex;
+          align-items: center;
+          .itmtit {
+            font-size: 14px;
+            font-weight: 400;
+            color: #409eff;
+            margin-left: 20px;
+          }
+        }
+        .show {
+          .ite {
+            width: 100%;
+            height: 49px;
+            border: 1px solid #f0f4fe;
+            border-top: 0;
+            display: flex;
+            align-items: center;
+            position: relative;
+            .title {
+              font-size: 14px;
+              font-weight: 400;
+              color: #6f6f6f;
+              margin-left: 22px;
+            }
+            .btn {
+              position: absolute;
+              // background-color: red;
+              left: 550px;
+
+              .btno {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                color: #ffffff;
+                background: #5dc988;
+                position: absolute;
+                z-index: 999;
+              }
+              .btnoo {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                color: #ffffff;
+                background: #5dc988;
+                position: absolute;
+                z-index: 998;
+              }
+              .btnt {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                position: absolute;
+                background: #f2f6fc;
+                color: #5dc988;
+                z-index: 999;
+              }
+              .btntt {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                position: absolute;
+                background: #f2f6fc;
+                color: #5dc988;
+                z-index: 998;
+              }
+            }
+          }
+        }
+        .i {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file