93 lines
10 KiB
Vue
93 lines
10 KiB
Vue
|
<template>
|
||
|
|
<header class="techy-header">
|
||
|
|
<img class="logo-img" src="./logo.png" alt="cnbm">
|
||
|
|
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
|
||
|
|
|
||
|
|
<span class="fullscreen-btn" @click="handleClick('fullscreen')">
|
||
|
|
<span v-if="isFullScreen" v-html="unfullScreenSvg" />
|
||
|
|
<span v-else v-html="fullScreenSvg" />
|
||
|
|
</span>
|
||
|
|
</header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
|
|
<title>编组 54备份</title>
|
||
|
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
|
|
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
|
||
|
|
<g id="编组-54备份" transform="translate(1864.000000, 162.000000)">
|
||
|
|
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
|
||
|
|
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M6.64116798,17.2700375 L6.74890704,17.2784355 C7.20902464,17.3410097 7.56504512,17.7372269 7.56504512,18.2121946 L7.56504512,18.2121946 L7.56504512,23.06998 L12.2154875,18.4195377 L12.3038841,18.341579 C12.6723846,18.0557307 13.2096238,18.0817169 13.5474445,18.4195377 C13.9134169,18.7855101 13.9134169,19.3855223 13.5474445,19.7514947 L13.5474445,19.7514947 L8.86035653,24.4349549 L13.6953555,24.4349549 L13.8090001,24.4414765 C14.2937488,24.4974586 14.6711425,24.9068233 14.6639054,25.3965331 C14.6534571,25.9083109 14.2345395,26.3191724 13.7217698,26.3191724 L13.7217698,26.3191724 L6.64604887,26.3191724 L6.53329365,26.3126932 C6.05255502,26.2570589 5.68082765,25.8499062 5.68082765,25.3539511 L5.68082765,25.3539511 L5.68082765,18.2353071 L5.68737703,18.1218678 C5.74358847,17.6379293 6.15445128,17.2603996 6.64116798,17.2700375 L6.64116798,17.2700375 Z M25.3605547,5.68082765 L25.4723738,5.68728667 C25.9492196,5.74274215 26.3191724,6.14846553 26.3191724,6.6394453 L26.3191724,6.6394453 L26.3191724,13.7613912 L26.312623,13.8748304 C26.2564115,14.3587689 25.8455487,14.7362986 25.358832,14.7266607 C24.8478544,14.716179 24.4349549,14.2960073 24.4349549,13.7845036 L24.4349549,13.7845036 L24.4349549,8.93001999 L19.7845125,13.5804623 L19.6961159,13.658421 C19.3276154,13.9442693 18.7903762,13.9182831 18.4525555,13.5804623 C18.0865831,13.2144899 18.0865831,12.6144777 18.4525555,12.2485053 L18.4525555,12.2485053 L23.1360157,7.56504512 L18.3013427,7.56504512 L18.1876721,7.55852521 C17.7028859,7.50255928 17.3264448,7.09334546 17.3360737,6.60468076 C17.3465429,6.0916891 17.7654605,5.68082765 18.2782302,5.68082765 L18.2782302,5.68082765 L25.3605547,5.68082765 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>`
|
||
|
|
|
||
|
|
const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
|
|
<title>编组 54备份 2</title>
|
||
|
|
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
|
|
<g id="编组-54备份-2">
|
||
|
|
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
|
||
|
|
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>`
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'TechyHeader',
|
||
|
|
props: ['headTitle'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fullScreenSvg,
|
||
|
|
unfullScreenSvg,
|
||
|
|
isFullScreen: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(source) {
|
||
|
|
if (source === 'fullscreen') {
|
||
|
|
this.isFullScreen = !this.isFullScreen
|
||
|
|
this.$emit('toggle-full-screen', { full: this.isFullScreen })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.techy-header {
|
||
|
|
background: transparent;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
color: white;
|
||
|
|
/* font-size: 24px; */
|
||
|
|
font-size: 2vh;
|
||
|
|
padding: calc(100vw / 1920 * 16) 0;
|
||
|
|
line-height: 1;
|
||
|
|
background: url(./header-new.png) no-repeat;
|
||
|
|
/** 背景图片好像左右不对称 : */
|
||
|
|
/* background-position: bottom left 40px; */
|
||
|
|
/* background-size: cover; */
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-position: bottom left calc(100vw / 1920 * 40);
|
||
|
|
height: calc(100vw / 1920 * 80);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-img {
|
||
|
|
width: calc(100vw / 1920 * 24);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fullscreen-btn {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
/* right: 24px; */
|
||
|
|
/** techy-body 的内部 padding 值 */
|
||
|
|
right: calc(100vw / 1920 * 24);
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
</style>
|