diff --git a/src/assets/px.jpg b/src/assets/px.jpg
new file mode 100644
index 00000000..abfad90d
Binary files /dev/null and b/src/assets/px.jpg differ
diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue
index 44c64758..2ef66aed 100644
--- a/src/components/NavLeft.vue
+++ b/src/components/NavLeft.vue
@@ -335,31 +335,46 @@ export default {
           }
         });
         let openpages = store.state.openpages;
-        for (let i = 0; i < openpages.length; i++) {
-          openpages[i].active = false;
-        }
-        for (let i = 0; i < openpages.length; i++) {
-          openpages[i].active = false;
-          if (n.toLowerCase() === openpages[i].href) {
-            console.log("已存在", openpages[i]);
-            openpages[i].active = true;
-            break;
-          } else {
-            if (i === openpages.length - 1) {
-              let pagename = state.keysList.filter((a) => {
-                return a.href === n.toLowerCase();
-              });
-              if (pagename && pagename.length !== 0) {
-                let obj = {
-                  pagename: pagename[0].pagename,
-                  href: n.toLowerCase(),
-                  active: true,
-                };
-                openpages.push(obj);
+        if (openpages.length === 0) {
+          let pagename = state.keysList.filter((a) => {
+            return a.href === n.toLowerCase();
+          });
+          if (pagename && pagename.length !== 0) {
+            let obj = {
+              pagename: pagename[0].pagename,
+              href: n.toLowerCase(),
+              active: true,
+            };
+            openpages.push(obj);
+          }
+        } else {
+          for (let i = 0; i < openpages.length; i++) {
+            openpages[i].active = false;
+          }
+          for (let i = 0; i < openpages.length; i++) {
+            openpages[i].active = false;
+            if (n.toLowerCase() === openpages[i].href) {
+              console.log("已存在", openpages[i]);
+              openpages[i].active = true;
+              break;
+            } else {
+              if (i === openpages.length - 1) {
+                let pagename = state.keysList.filter((a) => {
+                  return a.href === n.toLowerCase();
+                });
+                if (pagename && pagename.length !== 0) {
+                  let obj = {
+                    pagename: pagename[0].pagename,
+                    href: n.toLowerCase(),
+                    active: true,
+                  };
+                  openpages.push(obj);
+                }
               }
             }
           }
         }
+
         localStorage.setItem("openpages", JSON.stringify(openpages));
         store.commit("chengeOpenpages", openpages);
 
diff --git a/src/components/OpenPages.vue b/src/components/OpenPages.vue
index 769dcb8c..c8a1bad1 100644
--- a/src/components/OpenPages.vue
+++ b/src/components/OpenPages.vue
@@ -44,16 +44,19 @@ export default {
       state.openList.map((item, key) => {
         if (item.href === value.href) {
           if (state.openList.length === 1) {
-            state.openList.splice(key, 1);
-            $router.push({ path: "/learningpath" });
-          } else {
-            if (key === state.openList.length - 1) {
-              $router.push({ path: state.openList[key - 1].href });
-              state.openList.splice(key, 1);
-            } else {
-              $router.push({ path: state.openList[key + 1].href });
+            if (state.openList[0].href !== "/learningpath") {
               state.openList.splice(key, 1);
             }
+            $router.push({ path: "/learningpath" });
+          } else {
+            if (value.active) {
+              if (key === state.openList.length - 1) {
+                $router.push({ path: state.openList[key - 1].href });
+              } else {
+                $router.push({ path: state.openList[key + 1].href });
+              }
+            }
+            state.openList.splice(key, 1);
           }
         }
       });
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index 589a986c..e8f0f522 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -8,24 +8,14 @@
           <a-select
             v-model:value="projectName"
             style="width: 270px"
-            placeholder="请输入项目名称"
-            :options="projectNameList"
-            @change="selectProjectName"
-            allowClear
-            showSearch
-          ></a-select>
-        </div>
-        <div class="select">
-          <a-select
-            v-model:value="projectName"
-            style="width: 270px"
-            placeholder="请输入项目经理"
+            placeholder="请输入路径名称"
             :options="projectNameList"
             @change="selectProjectName"
             allowClear
             showSearch
           ></a-select>
         </div>
+
         <div class="select">
           <a-select
             v-model:value="projectName"
@@ -38,11 +28,16 @@
           ></a-select>
         </div>
         <div class="select">
-          <a-date-picker
+          <!-- <a-date-picker
             v-model="selectTime"
             type="date"
-            placeholder="创建时间"
+            placeholder="时间"
             style="width: 270px"
+          /> -->
+          <a-range-picker
+            v-model:value="value2"
+            separator="至"
+            :placeholder="['开始时间', '结束时间']"
           />
         </div>
       </div>
@@ -55,121 +50,107 @@
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
-        <router-link to="/projectadd">
+        <!-- <router-link to="/projectadd">
           <div class="btn btn3">
             <div class="search"></div>
-            <div class="btnText">创建项目</div>
+            <div class="btnText">创建路径</div>
           </div>
-        </router-link>
+        </router-link> -->
+        <div class="btn btn3" @click="handleOut">
+          <div class="search"></div>
+          <div class="btnText">创建路径</div>
+        </div>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
     <!-- 表格 -->
     <div class="tableBox">
       <a-table
-        :columns="columns"
+        style="border: 1px solid #f2f6fe"
+        :columns="tableDataFunc()"
         :data-source="tableData"
         :loading="tableDataTotal === -1 ? true : false"
-        :scroll="{ x: 700, y: 800 }"
         expandRowByClick="true"
         @expand="expandTable"
-        :pagination="{
-          showSizeChanger: true,
-          showQuickJumper: true,
-          hideOnSinglePage: true,
-          pageSizeOptions: [],
-          pageSize: pageSize,
-          current: currentPage,
-          total: tableDataTotal,
-          onChange: (page, pageSize) => {
-            currentPage = page;
-            // console.log('page', page)
-            // 加翻页查找代码
-            // 	this.setState({
-            // 		currentPage: page,
-            // 	}, () => {
-            // 		this.getMilitaryDeployment()
-            // 	})
-          },
-        }"
+        :pagination="
+          tableDataTotal > 10
+            ? false
+            : {
+                // disabled: true,
+                display: false,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                hideOnSinglePage: true,
+                pageSizeOptions: [],
+                pageSize: pageSize,
+                current: currentPage,
+                total: tableDataTotal,
+                onChange: (page, pageSize) => {
+                  currentPage = page;
+                  // console.log('page', page)
+                  // 加翻页查找代码
+                  // 	this.setState({
+                  // 		currentPage: page,
+                  // 	}, () => {
+                  // 		this.getMilitaryDeployment()
+                  // 	})
+                },
+              }
+        "
       />
     </div>
     <!-- 表格 -->
+    <div :class="out ? 'out' : 'unout'">
+      <div class="top">
+        <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+        <div class="topc">创建路径</div>
+        <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
+          x
+        </div>
+      </div>
+      <div class="mid clearfix">
+        <div class="name">
+          <div class="d">*</div>
+          <div class="inname">路径图名称</div>
+          <div class="in">
+            <a-input v-model:value="valueE" />
+          </div>
+        </div>
+        <div class="bac">
+          <div class="d">*</div>
+          <div class="inname">路径图背景</div>
+          <div class="in">
+            <!-- <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" /> -->
+            <div
+              @click="chooseImg(item.id)"
+              v-for="item in imgData"
+              :key="item.key"
+            >
+              <img class="im" :src="item.source" />
+            </div>
+          </div>
+        </div>
+        <div class="info">
+          <div class="inname">路径说明</div>
+          <div class="in">
+            <a-textarea v-model:value="valuei" />
+          </div>
+        </div>
+        <div class="btn">
+          <button class="samtn btn1" @click="handleOut">取消</button>
+          <button class="samtn btn2" @click="handleOut">确定</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onMounted } from "vue";
-const columns = [
-  {
-    title: "项目名称",
-    dataIndex: "projectName",
-    key: "projectName",
-    width: 280,
-    // align: "center",
-    ellipsis: true,
-    // scopedSlots: { customRender: "action" }, //引入的插槽
-    // customRender: (text, record) => {
-    //   console.log(text, record);
-    //   return <span>{text.text}</span>;
-    // },
-  },
-  {
-    title: "项目经理",
-    dataIndex: "manager",
-    key: "manager",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "状态",
-    dataIndex: "state",
-    // width: "30%",
-    key: "state",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "创建人",
-    dataIndex: "creater",
-    // width: "30%",
-    key: "creater",
-    width: 100,
-    align: "center",
-  },
-  {
-    title: "创建时间",
-    dataIndex: "time",
-    key: "time",
-    width: 180,
-    align: "center",
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: 300,
-    align: "center",
-    scopedSlots: { customRender: "action" }, //引入的插槽
-    customRender: () => {
-      // console.log(text);
-      return (
-        <div class="opacation">
-          <span>编辑</span>
-          <span style={{ "margin-left": "21px" }}>创建子项目</span>
-          <span style={{ "margin-left": "21px" }} class="more">
-            <span>更多</span>
-            <div class="moreArrow"></div>
-            <div class="moreItems"></div>
-          </span>
-        </div>
-      );
-    },
-  },
-];
+import { reactive, toRefs, onMounted, ref } from "vue";
 
 export default {
   name: "learningPath",
-
   setup() {
     const state = reactive({
       projectNameList: [
@@ -194,251 +175,173 @@ export default {
           label: "项目四",
         },
       ],
-      projectName: null,
+      out: false,
+      number: null,
       selectTime: null,
-
       tableData: [
         {
           key: 1,
-          projectName:
-            "管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          children: [
-            {
-              key: 5,
-              projectName: "管理者进阶5",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-              children: [
-                {
-                  key: 7,
-                  projectName:
-                    "管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-                {
-                  key: 8,
-                  projectName: "管理者进阶8",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-              ],
-            },
-            {
-              key: 6,
-              projectName: "管理者进阶6",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-            },
-          ],
+          number: 1,
+          manager: "产品经理上升路径",
+          state: "已发布",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: false,
         },
         {
           key: 2,
-          projectName: "管理者进阶2",
-          manager: "黄华  刘俊",
+          number: 2,
+          manager: "程序员升级路径",
           state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: true,
         },
         {
           key: 3,
-          projectName: "管理者进阶3",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-          hasChildren: true,
-          children: [
-            {
-              key: 35,
-              projectName: "管理者进阶35",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-              children: [
-                {
-                  key: 37,
-                  projectName: "管理者进阶37",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-                {
-                  key: 38,
-                  projectName: "管理者进阶38",
-                  manager: "黄华  刘俊",
-                  state: "草稿",
-                  creater: "毛继禹",
-                  time: "2022-07-20 14:00:03",
-                },
-              ],
-            },
-            {
-              key: 36,
-              projectName: "管理者进阶36",
-              manager: "黄华  刘俊",
-              state: "草稿",
-              creater: "毛继禹",
-              time: "2022-07-20 14:00:03",
-            },
-          ],
+          number: 3,
+          manager: "ui成长之路",
+          state: "已停用",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: false,
         },
         {
           key: 4,
-          projectName: "管理者进阶4",
-          manager: "黄华  刘俊",
+          number: 4,
+          manager: "ui成长之路",
           state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          creater: "管理员",
+          pubtime: "2022-07-20 14:00:03",
+          cretime: "2022-07-20 14:00:03",
+          haspub: true,
+        },
+      ],
+      imgData: [
+        {
+          id: 1,
+          source: require("../../assets/px.jpg"),
         },
         {
-          key: 4,
-          projectName: "管理者进阶5",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          id: 2,
+          source: require("../../assets/px.jpg"),
         },
         {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
-        },
-        {
-          key: 4,
-          projectName: "管理者进阶",
-          manager: "黄华  刘俊",
-          state: "草稿",
-          creater: "毛继禹",
-          time: "2022-07-20 14:00:03",
+          id: 3,
+          source: require("../../assets/px.jpg"),
         },
       ],
       currentPage: 1,
       tableDataTotal: 20,
       pageSize: 10,
+      value1: " ",
+      value2: ref(),
+      valueE: ref(" "),
+      valueEE: ref(" "),
+      valuei: ref(" "),
     });
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "序号",
+          dataIndex: "number",
+          key: "number",
+          width: 100,
+          align: "center",
+          className: "h",
+          // ellipsis: true,
+          // scopedSlots: { customRender: "action" }, //引入的插槽
+          // customRender: (text, record) => {
+          //   console.log(text, record);
+          //   return <span>{text.text}</span>;
+          // },
+        },
+        {
+          title: "路径图名称",
+          dataIndex: "manager",
+          key: "manager",
+          width: 100,
+          align: "center",
+          ellipsis: true,
+          className: "h",
+        },
+        {
+          title: "状态",
+          dataIndex: "state",
+          // width: "30%",
+          key: "state",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "创建人",
+          dataIndex: "creater",
+          // width: "30%",
+          key: "creater",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "发布时间",
+          dataIndex: "pubtime",
+          key: "pubtime",
+          width: 180,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "创建时间",
+          dataIndex: "cretime",
+          key: "cretime",
+          width: 180,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 200,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text);
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span class={text.record.haspub ? "activecls" : "errorCls"}>
+                    发布
+                  </span>
+                  <span style={{ "margin-left": "25px" }}>编辑</span>
+                  <span style={{ "margin-left": "25px" }}>关卡</span>
+                  <span style={{ "margin-left": "25px" }} class="more">
+                    <span>授权</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
 
+                  <span
+                    style={{ "margin-left": "21px", "margin-right": "30px" }}
+                    class="more"
+                  >
+                    <span>更多</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
     onMounted(() => {
       // console.log("执行");
     });
@@ -449,21 +352,36 @@ export default {
       // console.log("惦记了");
       console.log("e", e, a);
     };
+    const handleOut = () => {
+      state.out = !state.out;
+    };
+    const chooseImg = (id) => {
+      console.log(id);
+    };
     return {
       ...toRefs(state),
-      columns,
       selectProjectName,
       expandTable,
+      handleOut,
+      tableDataFunc,
+      chooseImg,
     };
   },
 };
 </script>
 <style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
 .learningPath {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+  // position: relative;
   .filter {
     margin-left: 38px;
     margin-right: 38px;
@@ -493,6 +411,7 @@ export default {
         justify-content: center;
         margin-right: 14px;
         flex-shrink: 0;
+        cursor: pointer;
         .search {
           background-size: 100%;
         }
@@ -557,42 +476,216 @@ export default {
   }
   .tableBox {
     margin: 20px 38px 30px;
+    th.h {
+      background-color: #eff4fc !important;
+    }
+
+    .ant-table-tbody
+      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+      > td {
+      background: #f6f9fd;
+    }
   }
-  .opacation {
-    font-size: 14px;
-    font-weight: 400;
-    color: #4ea6ff;
-    // line-height: 36px;
-    .more {
-      position: relative;
-      .moreArrow {
-        width: 13px;
-        height: 7px;
+  .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;
+      }
+      .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;
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        height: 40px;
+        // border: 1px solid black;
+        .d {
+          margin-top: 8px;
+          color: #ff4e4e;
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+      }
+      .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%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 130px;
+            resize: none;
+          }
+        }
+      }
+      .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;
+        }
+      }
+    }
+  }
+  .unout {
+    display: none;
+  }
+
+  .opa {
+    display: flex;
+    justify-content: right;
+    .opacation {
+      font-size: 14px;
+      font-weight: 400;
+      color: #4ea6ff;
+      // line-height: 36px;
+      .activecls {
         display: inline-block;
-        background-image: url("../../assets/images/navtop/down.png");
-        background-size: 100%;
-        margin: 2px;
-        margin-left: 7px;
       }
-      .moreItems {
-        width: 80px;
-        height: 70px;
+      .errorCls {
         display: none;
-        background: #ffffff;
-        box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-        border-radius: 3px;
-        border: 0px solid #dcdcdc;
-        position: absolute;
-        left: 0px;
-        top: 18px;
-        z-index: 100;
       }
-    }
-    .more:hover .moreArrow {
-      background-image: url("../../assets/images/navtop/up.png");
-    }
-    .more:hover .moreItems {
-      display: block;
+      .more {
+        position: relative;
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 7px;
+        }
+        .moreItems {
+          width: 80px;
+          height: 70px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: 0px;
+          top: 18px;
+          z-index: 100;
+        }
+      }
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
+      }
     }
   }
 }