|
@@ -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 {
|