大禹新页面

ant-design-vue-jeecg/src/components/menu/Contextmenu.vue

@@ -43,7 +43,9 @@ export default {
   },
   methods: {
     closeMenu (e) {
-      if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
+      if (e.target.href && e.target.href.indexOf('dayu') > 0) {
+        window.open(e.target.href, '_blank')
+      } else if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
         this.$emit('update:visible', false)
       }
     },
@@ -52,7 +54,7 @@ export default {
       this.top = e.clientY
       this.target = e.target
     },
-    handleClick ({key}) {
+    handleClick ({ key }) {
       this.$emit('select', key, this.target)
       this.$emit('update:visible', false)
     }
@@ -61,11 +63,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .contextmenu{
-    position: fixed;
-    z-index: 1;
-    border: 1px solid #9e9e9e;
-    border-radius: 4px;
-    box-shadow: 2px 2px 10px #aaaaaa !important;
-  }
+.contextmenu {
+  position: fixed;
+  z-index: 1;
+  border: 1px solid #9e9e9e;
+  border-radius: 4px;
+  box-shadow: 2px 2px 10px #aaaaaa !important;
+}
 </style>

ant-design-vue-jeecg/src/config/router.config.js

@@ -550,7 +550,7 @@ export const constantRouterMap = [
 
   {
     path: '/atlas',
-     component: () => import(/* webpackChunkName: "fail" */ '@/views/xmtp/SeKnowAtlasList'),
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/xmtp/SeKnowAtlasList'),
   },
 
   //cms首页，免登录，单独访问页面
@@ -568,6 +568,28 @@ export const constantRouterMap = [
     path: '/cms/detail',//这里是你需要设置新窗口打开的页面的路径
     component: () => import('@/views/cms/pages/Detail/DetailView'),
   },
+  {
+    path: '/newLayout/dayu',//这里是你需要设置新窗口打开的页面的路径
+    redirect: '/home/lnfo',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/newLayout/module/Demo4NewLayoutList'),
+    children: [
+      {
+        path: '/home/lnfo',
+        // name: '学生列表',
+        // iconChildClass: 'el-icon-watermelon',
+        component: () => import('@/views/newLayout/module/Main')
+
+      },
+      {
+        path: '/home/lnfos',
+        // name: '列表',
+        // iconChildClass: 'el-icon-watermelon',
+        component: () => import('@/views/newLayout/module/Msg')
+
+      }
+
+    ]
+  },
 
 ]
 

ant-design-vue-jeecg/src/permission.js

@@ -29,6 +29,7 @@ const whiteList = [
   '/cms/home',
   '/cms/major',
   '/cms/detail',
+  '/newLayout/dayu',
 ] // no redirect whitelist
 
 router.beforeEach((to, from, next) => {

ant-design-vue-jeecg/src/views/newLayout/module/Demo4NewLayoutList.vue

@@ -1,13 +1,245 @@
 <template>
-
+  <div class="home">
+    <el-container>
+      <!-- <Menu /> -->
+      <!-- <el-aside width="66px"></el-aside> -->
+      <el-aside :width="isCollapse ? '64px' : '200px'" :class="isCollapse ? 'qian' : 'hou'">
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+          :class="isCollapse ? 'qian' : 'hou'"
+          active-text-color="#2042e3"
+          unique-opened
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          :router="true"
+        >
+          <img
+            src="../../../assets/Group 20@2x.png"
+            :class="isCollapse ? 'toggle-button' : 'toggle-button2'"
+            @click="toggleCollapse"
+            alt=""
+          />
+          <div class="title" v-if="show">大禹项目管理系统</div>
+          <!-- 单级菜单-->
+          <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path">
+            <i :class="'el-icon-' + item.icon" style="color: #cad5f6"></i>
+            <span slot="title">{{ item.label }}</span>
+          </el-menu-item>
+          <div class="logout-button" @click="logout">
+            <i class="el-icon-switch-button" style="color: #2042e3"></i>
+            <span style="color: #121213">退出</span>
+          </div>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <div class="header-left" v-if="show2">
+            <div class="tubiao">
+              <img src="../../../assets/Group 20@2x.png" alt="" />
+            </div>
+            <div class="title">大禹项目管理系统</div>
+          </div>
+          <div class="header-right">
+            <div class="toxiang"></div>
+            <div class="username">用户名</div>
+          </div>
+        </el-header>
+        <el-main>
+          <!-- <Main /> -->
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 
 <script>
+// import Main from '../../newLayout/module/Main.vue'
+// import Menu from './Msg'
 export default {
-  name: "Demo4NewLayoutList.vue"
-}
-</script>
+  name: "Demo4NewLayoutList",
+  data () {
+    return {
+      show2: true,//图标文字的显示状态
+      menus: [],
+      isCollapse: true, //保持折叠状态
+      show: false,//保持文字的隐藏状态
+      asideMenu: [
+        {
+          path: '/home/lnfo', //地址
+          label: '首页', // 菜单标识
+          icon: 'menu', //图标选取的是element图表，然后拼接到上面
+        },
+        {
+          path: "/home/lnfos",
+          label: '视频管理',
+          icon: 'menu'
+        },
+        {
+          path: "/user",
+          label: '用户管理',
+          icon: 'menu'
+        },
+      ]
+    }
+  },
+  methods: {
+    // popTimeline () {
+    //   // 改变show的值true/false
+    //   this.lesteps = !this.lesteps
+    // },
+    handleOpen (key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose (key, keyPath) {
+      console.log(key, keyPath)
+    },
+    toggleCollapse () {
+      this.isCollapse = !this.isCollapse
+      // 改变show的值true/false
+      this.show = !this.show
+      // 改变show2的值true/false
+      this.show2 = !this.show2
+
+    },
+    // 退出功能
+    logout () {
+      console.log('退出')
+      // 清空token
+      // window.sessionStorage.clear()
+      // this.$router.push('/login')
+    },
 
-<style scoped>
 
+  },
+  components: {
+    // Main,
+    // Menu
+  },
+};
+</script>
+<style lang="less">
+// .el-aside {
+//   width: 44px;
+//   height: 1200px;
+//   background-color: #2147fb;
+// }
+.home {
+  width: 100%;
+  height: 100%;
+  .el-header {
+    background-color: #ffffff;
+    height: 44px;
+    line-height: 44px;
+    // display: flex;
+    opacity: 1;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    // border: 0;
+  }
+  .header-left {
+    float: left;
+    width: 200px;
+    height: 60px;
+    img {
+      margin-top: 20px;
+      float: left;
+      width: 32px;
+      height: 23px;
+      // border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+    }
+    .title {
+      width: 150px;
+      height: 60px;
+      font-size: 10px;
+      font-weight: bold;
+      color: #333333;
+      line-height: 60px;
+    }
+  }
+  .header-right {
+    float: right;
+    width: 100px;
+    height: 60px;
+    .toxiang {
+      margin-top: 25px;
+      float: left;
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      background-color: #333333;
+    }
+    .username {
+      width: 60px;
+      height: 60px;
+      font-size: 7px;
+      font-weight: 400;
+      color: rgba(153, 153, 153, 0.94);
+      line-height: 60px;
+    }
+  }
+  .el-main {
+    background-color: #ffffff;
+  }
+}
+.el-aside {
+  height: 1200px;
+  background-color: #2042e3;
+  // border-radius: 0 20px 10px 0;
+  border-right: 1px solid rgba(211, 198, 198, 0.3);
+  .el-menu {
+    border-right: none;
+  }
+}
+.qian {
+  // height: 900px;
+  background-color: #2042e3;
+  color: #fff;
+}
+.hou {
+  // height: 900px;
+  background-color: #fff;
+  color: black;
+}
+
+.toggle-button {
+  // background-color: #2042e3;
+  // font-size: 10px;
+  // line-height: 24px;
+  // color: #fff;
+  // text-align: center;
+  // letter-spacing: 0.2em;
+  cursor: pointer;
+}
+.toggle-button2 {
+  margin-top: 15%;
+  margin-left: 20%;
+  width: 100px;
+  height: 90px;
+  margin-bottom: 30px;
+  cursor: pointer;
+}
+.title {
+  margin-left: 15%;
+  margin-bottom: 30px;
+  width: 150px;
+  height: 60px;
+  font-size: 15px;
+  font-weight: bold;
+  color: #333333;
+  line-height: 60px;
+}
+.logout-button {
+  margin-top: 150px;
+  margin-left: 55px;
+  width: 50px;
+  height: 22px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
 </style>
+

ant-design-vue-jeecg/src/views/newLayout/module/Main.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="main">
+    <el-tabs :tab-position="tabPosition" style="height: 100%; width: 100%; margin-right: 20px" type="card">
+      <el-tab-pane label="大禹项目管理系统">
+        <span slot="label">
+          <span class="span-box">
+            <span>大禹项目管理系统</span>
+            <span class="time">截至时间2023年8月27日</span>
+          </span>
+          <span class="person"
+            >项目成员
+            <i class="el-icon-s-platform" style="margin-left: 20px"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+          </span>
+          <el-progress type="circle" :width="60" :height="60" :percentage="55"></el-progress>
+        </span>
+        <Msg />
+      </el-tab-pane>
+      <el-tab-pane label="服装智能制造">
+        <span slot="label">
+          <span class="span-box">
+            <span>服装智能制造</span>
+            <span class="time">截至时间2023年8月27日</span>
+          </span>
+          <span class="person"
+            >项目成员
+            <i class="el-icon-s-platform" style="margin-left: 20px"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+          </span>
+          <el-progress type="circle" :width="60" :height="60" :percentage="75"></el-progress>
+        </span>
+        服装智能制造
+        <!-- <Msg /> -->
+      </el-tab-pane>
+      <el-tab-pane label="河南省一流专业">
+        <span slot="label">
+          <span class="span-box">
+            <span>河南省一流专业</span>
+            <span class="time">截至时间2023年8月27日</span>
+          </span>
+          <span class="person"
+            >项目成员
+            <i class="el-icon-s-platform" style="margin-left: 20px"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+            <i class="el-icon-s-platform"></i>
+          </span>
+          <el-progress type="circle" :width="60" :height="60" :percentage="100"></el-progress>
+        </span>
+        河南省一流专业
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+// import BasicMsg from '../BasicMsg.vue'
+import Msg from '../../newLayout/module/Msg.vue'
+// import test from '../test.vue'
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Main',
+  data () {
+    return {
+      tabPosition: 'left',
+      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+    }
+  },
+  methods: {
+    handleClick (tab, event) {
+      console.log(tab, event)
+    }
+  },
+  components: {
+    // test,
+    Msg
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+.main {
+  .el-tab-pane {
+    // background-color: rgb(205, 62, 62);
+    margin-left: 60px;
+  }
+  ::v-deep .el-tabs__item {
+    // background-color: rgb(65, 19, 19);
+
+    //  padding: 0 20px ;
+    height: 100px;
+    //   box-sizing: border-box;
+    // line-height: 40px ;
+    // display: inline-block;
+    // list-style: none;
+    // font-size: 18px ;
+    //  font-weight: 500 ;
+    // color: #303133;
+    position: relative;
+    width: 250px;
+    font-size: 8px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 50px;
+  }
+  ::v-deep .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
+    border: 1px solid #e4e7ed;
+    border-left: 4px solid #2147fb;
+    border-bottom: none;
+  }
+
+  ::v-deep .el-progress {
+    position: absolute;
+    right: 5px;
+    top: 20px;
+  }
+
+  ::v-deep .time {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    width: 68px;
+    height: 8px;
+    font-size: 5px;
+    font-weight: 400;
+    color: rgba(153, 153, 153, 0.94);
+    line-height: 50px;
+  }
+  ::v-deep .person {
+    position: absolute;
+    left: 20px;
+    top: 60px;
+    width: 68px;
+    height: 8px;
+    font-size: 5px;
+    font-weight: 400;
+    color: rgba(153, 153, 153, 0.94);
+    // line-height: 50px;
+  }
+}
+</style>

ant-design-vue-jeecg/src/views/newLayout/module/Msg.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="basic">
+    <div class="top">
+      <div class="top-left1">大禹项目管理系统</div>
+      <div class="top-left2">目提要:实现功能一,功能二,功能三等,为XXX服</div>
+      <el-button class="buright" round size="small">编辑</el-button>
+      <el-button class="buright" round size="small">新增</el-button>
+    </div>
+    <el-descriptions :column="3">
+      <!-- 此处 detailDict 是我写的字典  -->
+      <el-descriptions-item v-for="item in detailDict" :key="item.key" :label="item.label">
+        <!-- 此处 detailList 后端返回的数据  -->
+        <!-- {{ detailList[item.key] }} -->
+      </el-descriptions-item>
+      <el-descriptions-item label="状态："> <el-tag size="small">进行中</el-tag></el-descriptions-item>
+      <el-descriptions-item label="项目图片：">无</el-descriptions-item>
+      <el-descriptions-item label="预计完成天数：">100天</el-descriptions-item>
+      <el-descriptions-item label="预计剩余天数：">5天</el-descriptions-item>
+      <el-descriptions-item label="进度：">55%</el-descriptions-item>
+    </el-descriptions>
+    <!-- <el-descriptions>
+      <el-descriptions-item label="计划开始时间："
+        >2023年4月15日</el-descriptions-item
+      >
+      <el-descriptions-item label="计划结束时间："
+        >2023年4月15日</el-descriptions-item
+      >
+      <el-descriptions-item label="状态：">
+        <el-tag size="small">进行中</el-tag></el-descriptions-item
+      >
+      <el-descriptions-item label="预计完成天数：">100天</el-descriptions-item>
+      <el-descriptions-item label="预计剩余天数：">5天</el-descriptions-item>
+      <el-descriptions-item label="进度：">55%</el-descriptions-item>
+    </el-descriptions> -->
+
+    <div class="top">
+      <el-button class="buright1" @click="change(0)" :class="{ newStyle: 0 === number }" round size="small"
+        >项目动态</el-button
+      >
+      <el-button class="buright1" @click="change(1)" :class="{ newStyle: 1 === number }" round size="small"
+        >模块管理</el-button
+      >
+      <el-button class="buright1" @click="change(2)" :class="{ newStyle: 2 === number }" round size="small"
+        >项目成品</el-button
+      >
+      <el-button class="buright1" @click="change(3)" :class="{ newStyle: 3 === number }" round size="small"
+        >甘特图</el-button
+      >
+    </div>
+    <div v-show="0 === number">
+      项目描述：<br />
+      <textarea class="area" style="resize: none">行政事务</textarea>
+    </div>
+    <div v-show="1 === number">
+      <el-collapse accordion>
+        <el-collapse-item v-for="(item, index) in companyList" :key="index">
+          <template slot="title">
+            <div class="top">
+              <i class="el-icon-s-fold" style="margin-right: 15px"></i>
+              <span class="mkuai-text" style="margin-right: 15px">{{ item.name }}</span>
+              <i class="el-icon-user" style="background-color: #2147fb; margin-right: 15px; color: #ffffff"></i>
+              <i
+                class="el-icon-office-building"
+                @click="dialogFormVisible = true"
+                style="background-color: #2147fb; margin-right: 15px; color: #ffffff"
+              ></i>
+              <i class="el-icon-coin" style="background-color: #2147fb; margin-right: 15px; color: #ffffff"></i>
+              <span class="mkuai-text2">{{ item.text1 }}</span>
+              <div class="top-right">
+                <div class="toxiang" style="margin-right: 10px"></div>
+                <span class="zhangsan" style="margin-right: 15px">{{ item.text2 }}</span>
+                <span class="zhangsan">{{ item.text3 }}</span>
+
+                <div class="top-right2">
+                  <i class="el-icon-edit" style="margin-right: 5px"></i>
+                  <i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>
+                  <i class="el-icon-chat-dot-round" @click="dialogKuiVisible = true" style="margin-right: 15px"></i>
+                </div>
+                <img src="../../../assets/Group 14@2x.png" alt="" />
+              </div>
+            </div>
+          </template>
+          <div class="top">
+            <i class="el-icon-s-fold" style="margin-left: 15px"></i>
+            <span class="mkuai-text" style="margin-left: 15px">子模块2.1 账号管理</span>
+            <i class="el-icon-user" style="background-color: #2147fb; margin-left: 15px; color: #ffffff"></i>
+            <i class="el-icon-office-building" style="background-color: #2147fb; margin-left: 15px; color: #ffffff"></i>
+            <i class="el-icon-coin" style="background-color: #2147fb; margin-left: 15px; color: #ffffff"></i>
+            <span class="mkuai-text2" style="margin-left: 15px">难度等级</span>
+            <div class="top-right">
+              <div class="toxiang" style="margin-right: 10px"></div>
+              <span class="zhangsan" style="margin-right: 15px">张三</span>
+              <span class="zhangsan">截至时间2023年8月27日</span>
+
+              <div class="top-right2">
+                <i class="el-icon-edit" style="margin-right: 5px"></i>
+                <i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>
+                <i class="el-icon-chat-dot-round" @click="dialogKuiVisible = true" style="margin-right: 15px"></i>
+              </div>
+              <img src="../../../assets/Group 14@2x1.png" alt="" />
+            </div>
+          </div>
+          <el-collapse accordion>
+            <el-collapse-item v-for="item in items" :key="item.id">
+              <template slot="title">
+                <span class="gongn">{{ item.text1 }}</span>
+              </template>
+              <div v-for="item in gongns" :key="item.id">
+                <div class="top-right1">
+                  <img
+                    src="../../../assets/Frame@2x.png"
+                    @click="dialogTableVisible = true"
+                    style="margin-right: 5px"
+                    alt=""
+                  />
+                </div>
+                <span class="gongn">{{ item.text1 }}</span>
+                <span class="gongn-text">{{ item.text2 }}</span>
+                <div class="top-right2">
+                  <i class="el-icon-edit" style="margin-right: 5px"></i>
+                  <i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>
+                  <i class="el-icon-chat-dot-round" style="margin-right: 15px"></i>
+                </div>
+              </div>
+              <div>
+                <div class="wt">
+                  <div class="top-left1">
+                    <span class="gongn">问题:</span>
+                    <span class="gongn-text2"
+                      >测试时发现本功能或规则的问题，如果是功能整体的问题，列到所有规则的最后，如果是某项规则的问题，则显示在规则下面</span
+                    >
+                  </div>
+                  <div class="top-right2">
+                    <!-- <img :src="item.url" alt="" style="margin-right: 5px" /> -->
+                    <i class="el-icon-edit" style="margin-right: 5px"></i>
+                    <i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>
+                    <i class="el-icon-chat-dot-round" style="margin-right: 15px"></i>
+                  </div>
+
+                  <div class="wt-buttom">
+                    <el-radio v-model="radio" style="margin-right: 15px; transform: scale(0.7)" label="1"
+                      >已解决</el-radio
+                    >
+                    <el-radio v-model="radio" label="2" style="transform: scale(0.7)">无法解决</el-radio>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div v-show="2 === number">项目成品</div>
+    <div v-show="3 === number">甘特图</div>
+
+    <!-- 展示表格  Dialog-->
+    <el-dialog title="字段" :visible.sync="dialogTableVisible" width="80%">
+      <el-table :data="gridData">
+        <el-table-column width="80" property="name" label="模块名"></el-table-column>
+        <el-table-column width="80" property="function" label="功能"></el-table-column>
+        <el-table-column width="100" property="EnglishName" label="字段英文名"></el-table-column>
+        <el-table-column width="100" property="ChineseName" label="字段中文名"></el-table-column>
+        <el-table-column width="80" property="FieldType" label="字段类型"></el-table-column>
+        <el-table-column width="80" property="length" label="长度"></el-table-column>
+        <el-table-column width="80" property="empty" label="空"></el-table-column>
+        <el-table-column width="80" property="repeat" label="重复"></el-table-column>
+        <el-table-column width="80" property="pk" label="PK"></el-table-column>
+        <el-table-column width="80" property="fk" label="FK"></el-table-column>
+        <el-table-column width="80" property="AssociateTables" label="关联表"></el-table-column>
+        <el-table-column width="100" property="person" label="负责人"><a href="#">publish</a></el-table-column>
+      </el-table>
+      <el-pagination :hide-on-single-page="value" :total="5" layout="prev, pager, next"> </el-pagination>
+    </el-dialog>
+
+    <!-- 展示表单 原型  Dialog-->
+    <el-dialog title="上传/查看原型图" :visible.sync="dialogFormVisible">
+      <div class="yuanxing">
+        <div class="yuanxing-left">
+          <el-image :src="src"></el-image>
+          <div class="yuanxing-buttom">原型主图示意</div>
+        </div>
+        <div class="yuanxing-right">
+          <el-form :model="form">
+            <el-form-item label="上传图片" :label-width="formLabelWidth">
+              <el-upload action="#" list-type="picture-card" :auto-upload="false"
+                >上传原型图
+                <div slot="file" slot-scope="{ file }">
+                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                  <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                      <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+                      <i class="el-icon-download"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                      <i class="el-icon-delete"></i>
+                    </span>
+                  </span>
+                </div>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="页面名称" :label-width="formLabelWidth">
+              <el-input v-model="form.name" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="蓝湖网址" :label-width="formLabelWidth">
+              <el-input v-model="form.name" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="其他页面" :label-width="formLabelWidth">
+              <el-upload action="#" list-type="picture-card" :auto-upload="false">
+                <i slot="default" class="el-icon-plus"></i>
+                <div slot="file" slot-scope="{ file }">
+                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                  <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                      <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+                      <i class="el-icon-download"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                      <i class="el-icon-delete"></i>
+                    </span>
+                  </span>
+                </div>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item label="上级页面" :label-width="formLabelWidth">
+              <el-upload action="#" list-type="picture-card" :auto-upload="false">
+                <i slot="default" class="el-icon-plus"></i>
+                <div slot="file" slot-scope="{ file }">
+                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                  <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                      <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+                      <i class="el-icon-download"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                      <i class="el-icon-delete"></i>
+                    </span>
+                  </span>
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 反馈 -->
+    <el-dialog title="反馈" :visible.sync="dialogKuiVisible">
+      <!-- <input class="yuanxing-text" type="textarea"></div> -->
+      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="textarea"> </el-input>
+      <!-- <input type="textarea" /> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogKuiVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogKuiVisible = false">提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script>
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Msg',
+  data () {
+    return {
+      // 自己定义的字典，通过v-for把描述列表循环出来
+      // lable是这个列表描述列表要显示的lable
+      // key是后端返回的数据中的字段
+      detailDict: [
+        { label: '项目中文名称', key: 'projectName' },
+        { label: '项目英文名称', key: 'projectEnName' },
+        { label: '项目编码', key: 'projectCode' },
+        { label: '项目网址', key: 'projectUrl' },
+        { label: '计划开始时间', key: 'startTime' },
+        { label: '计划完成时间', key: 'completeTime' },
+        { label: '复制来源', key: 'sourceProjectId' },
+        // { label: '项目状态', key: 'projectStatus' },
+        // 无
+        // { label: '项目图片', key: 'projectPhotos' },
+        // { label: '预计完成天数', key: 'expectedDays' },
+        // { label: '预计剩余天数', key: 'remainingDays' },
+        // { label: '进度', key: 'progression' },
+      ],
+
+      items: [{
+        id: 1,
+        text1: '功能(1)新增',
+        url: require('@/assets/Group 14@2x2.png')
+
+
+      }, {
+        id: 2,
+        text1: '功能(2)删除',
+        url: require('@/assets/Group 37@2x3.png')
+      }
+      ],
+      gongns: [{
+        id: 1,
+        text1: '规则1:',
+        text2: '(规则可以按字段的类型、规则等自动生成)比如关键字、非空、长度、状态)XXXXXXXXXXXXXXXXXXX',
+      }, {
+        id: 2,
+        text1: '规则2:',
+        text2: '(规则可以按字段的类型、规则等自动生成)比如关键字、非空、长度、状态)XXXXXXXXXXXXXXXXXXX',
+      }
+      ],
+      companyList: [
+        {
+          id: 1,
+          name: '子模块2 用户管理',
+          text1: '难度等级',
+          text2: '张三',
+          text3: '截至时间2023年8月27日'
+
+        },
+        // {
+        //   id: 2,
+        //   name: '子模块2 用户管理',
+        //   text1: '难度等级',
+        //   text2: '张三',
+        //   text3: '截至时间2023年8月27日'
+
+        // }
+      ],
+      textarea: '',
+      // 反馈
+      dialogKuiVisible: false,
+      // 原型上传图片
+      handleRemove (file) {
+        console.log(file)
+      },
+      handlePictureCardPreview (file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      },
+      handleDownload (file) {
+        console.log(file)
+      },
+      // 占位图片
+      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+      //带表单
+      dialogFormVisible: false,
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '120px',
+      // 带表格
+      dialogTableVisible: false,
+      // 默认显示内容
+      number: 1,
+      // 分页 当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。
+      value: false,
+      // 弹窗
+      gridData: [{
+        name: 'Screem',
+        function: '功能1',
+        EnglishName: 'id',
+        ChineseName: '内部id',
+        FieldType: 'Jack',
+        length: 36,
+        empty: '非',
+        repeat: '',
+        pk: 'pk',
+        fk: '',
+        AssociateTables: '',
+        person: 'publish'
+      }, {
+        name: 'Screem',
+        function: '功能2',
+        EnglishName: 'pid',
+        ChineseName: '父级节点',
+        FieldType: 'Jack',
+        length: 5,
+        empty: '非',
+        repeat: '',
+        pk: '',
+        fk: 'Fk',
+        AssociateTables: '用户表:ID',
+        person: 'publish'
+      }, {
+        name: 'Screem',
+        function: '功能3',
+        EnglishName: 'name',
+        ChineseName: '栏目名称',
+        FieldType: 'Jack',
+        length: 100,
+        empty: '非',
+        repeat: '否',
+        pk: '',
+        fk: '',
+        AssociateTables: '36',
+        person: 'publish'
+      }
+      ],
+      // 单选项
+      radio: '2',
+      // tab标签
+      tabPosition: 'left',
+    }
+  },
+  methods: {
+    change: function (index) {
+      this.number = index
+    },
+    // 获取所有的数据
+    // async getList () {
+    //   const { data: res } = await this.$http.get('menus')
+    //   if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
+    //   this.detailDict = res.data
+    //   console.log(res)
+    // },
+  },
+
+}
+  </script>
+  
+<style lang="less" scoped>
+.top {
+  margin-top: 15px;
+  width: 100%;
+  height: 40px;
+  margin-bottom: 15px;
+  // background-color: red;
+  .top-left1 {
+    width: 223px;
+    height: 34px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 30px;
+  }
+  .top-left2 {
+    margin-top: 5px;
+    width: 240px;
+    height: 9px;
+    font-size: 7px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 8px;
+  }
+  .buright {
+    // margin-top: 5px;
+    // margin-left: 800px;
+    float: right;
+    background-color: #2147fb;
+    color: #ffffff;
+  }
+  .buright1 {
+    margin-right: 60px;
+    float: left;
+  }
+  .newStyle {
+    background-color: #2147fb;
+    color: #ffffff;
+  }
+  .mkuai-text {
+    width: 181px;
+    height: 19px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 23px;
+  }
+  .mkuai-text2 {
+    width: 51px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #000000;
+    line-height: 14px;
+  }
+  .top-right {
+    float: right;
+    width: 350px;
+    height: 40px;
+    // text-align: center;
+    line-height: 40px;
+    // background-color: rgb(161, 68, 68);
+  }
+  .toxiang {
+    margin-top: 8px;
+    float: left;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    background-color: #d9d9d9;
+    // line-height: 60px;
+    opacity: 1;
+    border: 1px solid #ffffff;
+  }
+  .zhangsan {
+    width: 75px;
+    height: 5px;
+    font-size: 6px;
+    font-weight: 400;
+    color: rgba(153, 153, 153, 0.94);
+    line-height: 7px;
+  }
+  img {
+    float: right;
+    width: 30px;
+    height: 40px;
+    margin-right: 10px;
+  }
+  .top-right2 {
+    float: right;
+  }
+}
+.gongn {
+  // width: 100px;
+  margin-right: 15px;
+  height: 11px;
+  font-size: 8px;
+  font-weight: bold;
+  color: #333333;
+  line-height: 11px;
+}
+.gongn-text {
+  width: 960px;
+  height: 540px;
+  background: #ffffff;
+  border-radius: 0px 0px 0px 0px;
+}
+.gongn-text2 {
+  width: 393px;
+  height: 19px;
+  font-size: 8px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 9px;
+}
+.wt {
+  position: relative;
+  margin-top: 15px;
+  width: 100%;
+  height: 100px;
+  // background-color: red;
+  .top-left1 {
+    position: absolute;
+    height: 50px;
+    // background-color: green;
+  }
+  .wt-buttom {
+    position: absolute;
+    top: 50px;
+    left: 40px;
+    width: 200px;
+    height: 50px;
+    line-height: 60px;
+  }
+  .top-right2 {
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 40px;
+    line-height: 40px;
+    img {
+      float: left;
+      width: 30px;
+      height: 40px;
+    }
+  }
+}
+.top-right1 {
+  img {
+    float: left;
+  }
+}
+.top-right2 {
+  float: right;
+}
+// /deep/ {
+//   // 原型对话
+//   .el-dialog__header {
+//     padding: 0;
+//     // background: #002a52;
+//     text-align: center;
+//     height: 60px;
+//     width: 100%;
+//     // height: 28px;
+//     background: linear-gradient(to right, #607cff, #9a92fe, #8cbaff, #2147fb);
+//     border-radius: 0px 0px 0px 0px;
+//     opacity: 1;
+//   }
+//   .el-dialog__title {
+//     width: 60px;
+//     height: 60px;
+//     font-size: 8px;
+//     font-weight: normal;
+//     color: #ffffff;
+//     line-height: 60px;
+//   }
+//   // 四个按钮
+//   .el-radio {
+//     //添加边框
+//     // border: 1px solid rgb(207, 204, 204);
+//     //选中时边框的颜色
+//     // &.is-checked {
+//     //   border: 1px solid #28d4c1 !important;
+//     // }
+//     //鼠标滑过改变字体和小圆圈边框的样式
+//     &:hover {
+//       border-color: #2147fb !important;
+//       color: #2147fb !important;
+//       //鼠标滑过时小圆点边框显示
+//       // .el-radio__inner {
+//       //   border-color: #28d4c1;
+//       // }
+//     }
+//     .el-radio__input {
+//       // margin-bottom: px(5);
+//       //选中时的样式
+//       &.is-checked {
+//         .el-radio__inner {
+//           //选中时小圆圈的的颜色
+//           background-color: red;
+//           // border-color: #28d4c1;
+//         }
+//         // + .el-radio__label {
+//         //   //选中时字体的颜色
+//         //   color: #28d4c1 !important;
+//         // }
+//       }
+//       .el-radio__inner {
+//         // 鼠标滑过小圆点时的样式
+//         &:hover {
+//           border-color: red;
+//         }
+//       }
+//     }
+//   }
+// }
+// 折叠面板下的线条
+.el-collapse,
+.el-collapse-item__wrap,
+.el-collapse-item__content {
+  border: none;
+}
+
+.yuanxing {
+  .yuanxing-left {
+    float: left;
+    width: 30%;
+    height: 600px;
+    // background-color: red;
+    .el-image {
+      margin-left: 50px;
+      width: 100px;
+      height: 100px;
+    }
+    .yuanxing-buttom {
+      margin-top: 10px;
+      width: 100%;
+      height: 40px;
+      background-color: #dae5ff;
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      text-align: center;
+      line-height: 40px;
+      font-size: 6px;
+      font-weight: 400;
+      color: #3e75e6;
+    }
+  }
+  .yuanxing-right {
+    float: right;
+    width: 70%;
+    height: 600px;
+    // background-color: blue;
+  }
+}
+// .yuanxing-text {
+//   width: 100%;
+//   height: 600px;
+//   border: 1;
+// }
+.area {
+  margin-top: 20px;
+  width: 800px;
+  height: 200px;
+}
+</style>