修改页头和选择分类UI

src/App.vue

@@ -4,7 +4,7 @@
         <img src="./assets/img/sclogo4.png" alt="">
         <!-- <img src="@/assets/img/szjsxy.png" alt=""> -->
         <div class="homeExitContent">
-          <div>{{ $store.state.userInfo.tname }}</div>
+          <div>你好，{{ $store.state.userInfo.tname }}</div>
           <div class="homeExit" @click="homeExit">退出</div>
         </div>
       </el-header>

src/views/projectApply/projectApplicationApplyMain.vue

@@ -54,7 +54,7 @@
 
       <!-- 选择分类开始 -->
       <el-dialog
-          title="提示"
+          title="选择分类"
           :visible.sync="selectType"
           width="600px"
           class="pageSubmitData"
@@ -63,13 +63,23 @@
           :show-close="false"
           >
           <!-- <div class="addDialogLogo">LOGO</div> -->
-          <div class="" style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
-              <div style="margin-right: 10px;">选择分类</div>
-              <el-cascader v-model="pageType" :options="projectApplicationApply1.sortOptions" clearable></el-cascader>
+          <div class="TypeBox">
+            <div class="selectType" v-for="item in projectApplicationApply1.sortOptions">
+              <el-tooltip class="item" v-for="item2 in item['children']" effect="dark" :content="item.label+'('+item2.label+')'" placement="top">
+              <div class="TypeCard" @click="changeType(item.value,item2.value)">
+                <img src="@/assets/img/file.png" alt="">
+                <span>{{item.label}}</span>
+                <span>({{ item2.label }})</span>
+              </div>
+              </el-tooltip>
+         
+            </div>
+              <!-- <div style="margin-right: 10px;">选择分类</div> -->
+              <!-- <el-cascader v-model="pageType" :options="projectApplicationApply1.sortOptions" clearable></el-cascader> -->
           </div>
 
           <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="selectTypeButton" class="AllDialogBtn">确定</el-button>
+            <!-- <el-button type="primary" @click="selectTypeButton" class="AllDialogBtn">确定</el-button> -->
             <el-button @click="$router.back()" class="AllDialogBtn">取消</el-button>
           </span>
         </el-dialog>
@@ -293,7 +303,10 @@
                       })
             },
             //立项基础信息页面删除功能在它自己页面人员信息
-
+            changeType(type1,type2){//修改分类信息
+              this.pageType = [type1,type2];
+              this.selectType = false;
+            },
 
             init(){
                 //重置
@@ -702,6 +715,43 @@
       }
     }
   // 左边栏结束
+  .TypeBox{
+    display: flex;
+    align-items: flex-start;
+    .selectType{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .TypeCard{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 90px;
+        padding: 10px;
+        cursor: pointer;
+        span{
+          width: 100%;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &:nth-child(3){
+            display: flex;
+            justify-content: center;
+          }
+        }
+        img{
+          width: 50px;
+          height: 50px;
+        }
+        &:hover{
+          background-color: #d4dde1;
+        }
+      }
+    }
+  }
+
 }