Explorar el Código

头部菜单样式调整,底部菜单添加任务申请弹窗。

DESKTOP-6LTVLN7\Liumouren hace 2 años
padre
commit
b3c5cdab81

+ 35 - 6
src/components/common/BottomMenus.vue

@@ -2,6 +2,17 @@
   <div id="bottomMenus">
     <!-- 底部菜单动态SVG底座 -->
     <BottomMenuSvg id="svgBox" @changeShowBottomMenusStatus="changeShowBottomMenusStatus()" />
+    <!-- 申请任务弹窗 -->
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <span>这是一段信息</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 我的任务弹窗 -->
+    <!-- 同屏对比弹窗 -->
+    <!-- 上传数据 -->
     <!-- 底部菜单主体 -->
     <div
       id="menusBox"
@@ -57,6 +68,8 @@ export default {
   components: { BottomMenuSvg },
   data() {
     return {
+      // 申请任务弹窗显示状态
+      dialogVisible: false,
       // 菜单主体显示状态(默认false)
       showBottomMenusStatus: false,
       // 底部菜单对象
@@ -66,7 +79,7 @@ export default {
           width: "164px",
           title: "任务申请",
           subMenu: [
-            { index: 0, title: "申请任务", bgImage: "sqrw" },
+            { index: 0, title: "申请任务", bgImage: "sqrw",clickEmit: "sqrw" },
             { index: 1, title: "我的任务", bgImage: "wdrw" }
           ]
         },
@@ -98,7 +111,14 @@ export default {
       ]
     };
   },
-  mounted() {},
+  mounted() {
+    // 申请任务事件监听
+    this.$bus.$on("sqrw",()=>{this.dialogVisible  = !this.dialogVisible});
+  },
+  destroy() {
+    // 当容器销毁时,需要停止监听该事件
+    this.$bus.$off("sqrw");
+  },
   /**
    * title: 标题(必填)
    */
@@ -127,6 +147,14 @@ export default {
     // 当用户点击svg底座时,切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
       this.showBottomMenusStatus = !this.showBottomMenusStatus;
+    },
+    // 申请任务
+    handleClose(done) {
+      this.$confirm("确认关闭?")
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
     }
   },
   watch: {}
@@ -139,6 +167,7 @@ export default {
 // 底部菜单
 #bottomMenus {
   position: absolute;
+  bottom: 20px;
   display: flex;
   flex-direction: column-reverse;
   align-content: center;
@@ -249,7 +278,7 @@ export default {
             height: 110%;
             border-radius: 10px;
             z-index: 999;
-            box-shadow: 0px 0px 5px 1px #00F5FF;
+            box-shadow: 0px 0px 5px 1px #00f5ff;
           }
           .BtuMenu {
             display: none;
@@ -257,8 +286,8 @@ export default {
           .BtuMenu_hover {
             display: block;
           }
-          .BtuMenu_title{
-            color: #00F5FF;
+          .BtuMenu_title {
+            color: #00f5ff;
           }
         }
         .colBtuMenuShadow {
@@ -268,7 +297,7 @@ export default {
           height: 110%;
           border-radius: 10px;
           z-index: 999;
-          box-shadow: 0px 0px 5px 3px #00F5FF;
+          box-shadow: 0px 0px 5px 3px #00f5ff;
         }
         .BtuMenu,
         .BtuMenu_hover {

+ 2 - 0
src/components/common/TagCard.vue

@@ -84,6 +84,7 @@ export default {
     display: flex;
     span:nth-child(1) {
       font-family: zhihun181;
+      padding-right: 0.25rem;
       font-weight: bold;
       color: @tagValueColor;
       line-height: 30px;
@@ -91,6 +92,7 @@ export default {
     }
     span:nth-child(2) {
       font-size: 12px;
+      padding-left: 0.25rem;
       font-weight: bold;
       color: @tagValueColor;
       line-height: 30px;

+ 16 - 8
src/components/layout/Header.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="layoutHeader">
     <el-row>
-      <el-col :span="9" v-show="$store.state.windowsSize.width >= 1300" class="logoBox">
+      <el-col :span="8" v-if="$store.state.windowsSize.width >= 1300" class="logoBox">
         <div class="logo"></div>
         <div class="title">浦东新区资源环境智慧审计平台</div>
       </el-col>
-      <el-col :span="9" v-show="$store.state.windowsSize.width < 1300" class="logoBox">
+      <el-col :span="2" v-if="$store.state.windowsSize.width < 1300" class="logoBox">
         <div class="logo"></div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="$store.state.windowsSize.width < 1300 ? 18 : 13">
         <el-menu
           :default-active="getActiveIndex()"
           class="el-menu-demo"
@@ -136,17 +136,25 @@ export default {
     background: url("../../assets/home/header_title_icon.png") no-repeat center;
   }
   .title {
-    padding-left: 1rem;
+    width: 30vw;
+    padding-left: 1.5rem;
     transform: skew(45deg);
     line-height: 60px;
-    font-size: 28px;
+    font-size: 32px;
     text-indent: 50px;
-    font-weight: bold;
-    font-family: pingfangSC;
+    font-weight: 400;
+    font-family: YouSheBiaoTiHei;
+    letter-spacing: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
   }
 }
 
-.el-menu-demo /deep/ .el-menu-item,.el-submenu {
+.el-menu-demo /deep/ .el-menu-item,
+.el-submenu {
   padding: 0 30px;
   font-size: 24px;
   font-family: pingfangSC;