20251113炳辰版本

src/components/TaskManagement/manage/TPManage.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="TPcontainer">
+    <el-container style="height: 100%">
+      <el-aside class="MyAside">
+        <el-menu
+          background-color="#F7F8F1"
+          text-color="rgb(38,70,114)"
+          active-text-color="#3A87F9"
+          :default-active="this.$route.path"
+          router
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-folder-opened"></i>任务管理
+            </template>
+            <el-menu-item-group>
+              <el-menu-item :index="'/main'">任务管理</el-menu-item>
+              <el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
+              <el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-menu-item
+            :index="'/usermanage'"
+            style="padding-left: 10px !important"
+          >
+            <i class="el-icon-user-solid"></i>用户管理
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-main class="tpcontent">
+          <router-view class="view" style="padding: 20px"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  method: {},
+};
+</script>
+<style scoped>
+.MyAside {
+  width: 255px !important;
+  opacity: 0.9;
+  background-color: #f7f8f1;
+  color: #333;
+  text-align: left;
+  line-height: 200px;
+  z-index: 10;
+  bottom: 0;
+  position: absolute;
+  top: 0;
+}
+.tpcontent {
+  position: absolute;
+  left: 255px;
+  right: 0px;
+  width: calc(100% - 255px);
+  padding: 0px;
+  background: #fff;
+}
+.MyAside .usermp {
+  padding-left: 10px !important;
+}
+
+@media screen and (min-width: 840px) and (max-width: 1401px) {
+  .tpcontent {
+    position: absolute;
+    left: 255px;
+    width: calc(100% - 255px);
+  }
+}
+
+@media (min-width: 420px) and (max-width: 840px) {
+  .MyAside {
+    width: 160px !important;
+  }
+  .tpcontent {
+    position: absolute;
+    left: 160px;
+    width: calc(100% - 160px);
+  }
+}
+@media all and (max-width: 420px) {
+  .MyAside {
+    width: 120px !important;
+  }
+  .tpcontent {
+    position: absolute;
+    left: 120px;
+    width: calc(100% - 120px);
+  }
+}
+</style>