75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<template>
|
|
<div id="PlanTitleBar">
|
|
<img class="logo" :src="logoImg" />
|
|
<span> {{mapName}}  </span>
|
|
<span v-if="runPlanName">({{runPlanName}})</span>
|
|
<span class="system-close el-icon-close" @click="back"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import logo_ from '@/assets/logo_.png';
|
|
import { getPublishMapInfo } from '@/api/jmap/map';
|
|
|
|
export default {
|
|
name: 'PlanTitleBar',
|
|
data() {
|
|
return {
|
|
mapName: '',
|
|
logoImg: logo_
|
|
}
|
|
},
|
|
computed: {
|
|
runPlanName() {
|
|
return this.$route.query.planName || '';
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.mapId) {
|
|
getPublishMapInfo(this.$route.query.mapId).then(resp => {
|
|
this.mapName = resp.data.name;
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
this.$emit('back');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped rel="stylesheet/scss" lang="scss" scoped>
|
|
@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> |