rt-sim-training-client/src/views/planMonitor/newEditTool/titleBar.vue

75 lines
1.8 KiB
Vue
Raw Normal View History

2020-08-14 18:30:04 +08:00
<template>
<div id="PlanTitleBar">
<img class="logo" :src="logoImg">
<span> {{ mapName }} &ensp;</span>
<span v-if="runPlanName">({{ runPlanName }})</span>
<span class="system-close el-icon-close" @click="back" />
</div>
</template>
<script>
import logo_ from '@/assets/logo_.png';
import { getPublishMapInfo } from '@/api/jmap/map';
import { UrlConfig } from '@/scripts/ConstDic';
export default {
name: 'PlanTitleBar',
data() {
return {
mapName: '',
logoImg: logo_
};
},
computed: {
runPlanName() {
return this.$route.query.planName || '';
}
},
mounted() {
getPublishMapInfo(this.$route.query.mapId).then(resp => {
this.mapName = resp.data.name;
});
},
methods: {
back() {
this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
$width: 25px;
$height: 25px;
#PlanTitleBar {
z-index: 10;
display: flex;
position: absolute;
width: 100%;
height: $height;
line-height: $height;
background: -webkit-linear-gradient(#0055E8, #0099F8);
background: -o-linear-gradient(#0055E8, #0099F8);
background: -moz-linear-gradient(#0055E8, #0099F8);
background: linear-gradient(#0055E8, #0099F8);
color: white;
font: bold;
font-size: 16px;
.logo {
display: inline-block;
width: $width;
height: $height;
padding-right: 5px;
}
.system-close {
width: 25px;
height: 25px;
position: absolute;
right: 1px;
}
}
</style>