|
|
@@ -1,17 +1,36 @@ |
|
|
|
<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> |
|
|
|
<img class="logo-img" src="./logo.png" alt="cnbm" /> |
|
|
|
<span class="techy-header__title">{{ headTitle }}</span> |
|
|
|
|
|
|
|
<span class="fullscreen-btn" @click="handleClick('fullscreen')"> |
|
|
|
<span v-if="isFullScreen" v-html="unfullScreenSvg" /> |
|
|
|
<span v-else v-html="fullScreenSvg" /> |
|
|
|
</span> |
|
|
|
<!-- <div class="date">2022.10.14</div> |
|
|
|
<div class="time">20:12:24</div> --> |
|
|
|
|
|
|
|
<div class="fullscreen-btn"> |
|
|
|
<!-- <span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" /> --> |
|
|
|
<span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" /> |
|
|
|
<span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" /> |
|
|
|
</div> |
|
|
|
</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"> |
|
|
|
// const homeSvg = `<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"> |
|
|
|
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
|
|
|
<title>首页</title> |
|
|
|
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> |
|
|
|
<g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero"> |
|
|
|
<g id="首页" transform="translate(1824.000000, 46.000000)"> |
|
|
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect> |
|
|
|
<path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path> |
|
|
|
<path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path> |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</svg>` |
|
|
|
|
|
|
|
// 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"> |
|
|
|
const fullScreenSvg = `<svg style="width: 100%; height: 100%" 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)"> |
|
|
@@ -23,7 +42,8 @@ const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" versi |
|
|
|
</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"> |
|
|
|
// 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"> |
|
|
|
const unfullScreenSvg = `<svg style="width: 100%; height: 100%" 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"> |
|
|
@@ -32,13 +52,13 @@ const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" ver |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</svg>` |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'TechyHeader', |
|
|
|
props: ['headTitle'], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
fullScreenSvg, |
|
|
|
homeSvg, |
|
|
|
unfullScreenSvg, |
|
|
|
isFullScreen: false |
|
|
|
} |
|
|
@@ -48,6 +68,8 @@ export default { |
|
|
|
if (source === 'fullscreen') { |
|
|
|
this.isFullScreen = !this.isFullScreen |
|
|
|
this.$emit('toggle-full-screen', { full: this.isFullScreen }) |
|
|
|
} else if (source === 'home') { |
|
|
|
this.$router.push('/') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@@ -55,6 +77,16 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* @font-face { |
|
|
|
font-family: 'zcoolqingkehuangyouti'; |
|
|
|
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'), |
|
|
|
url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'), |
|
|
|
url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype'); |
|
|
|
font-weight: normal; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} */ |
|
|
|
|
|
|
|
.techy-header { |
|
|
|
background: transparent; |
|
|
|
display: flex; |
|
|
@@ -64,29 +96,70 @@ export default { |
|
|
|
color: white; |
|
|
|
/* font-size: 24px; */ |
|
|
|
font-size: 2vh; |
|
|
|
padding: calc(100vw / 1920 * 16) 0; |
|
|
|
padding: calc(100vw / 1920 * 32) 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); */ |
|
|
|
background-position: bottom left calc(100vw / 1920 * 40); |
|
|
|
height: calc(100vw / 1920 * 80); |
|
|
|
height: calc(100vmin / 1920 * 128); |
|
|
|
} |
|
|
|
|
|
|
|
.logo-img { |
|
|
|
width: calc(100vw / 1920 * 24); |
|
|
|
width: calc(100vmin / 1920 * 48); |
|
|
|
} |
|
|
|
|
|
|
|
.techy-header__title { |
|
|
|
display: line-block; |
|
|
|
margin-left: calc(100vmin / 1920 * 12); |
|
|
|
/* font-size: 29px; */ |
|
|
|
font-size: calc(100vmin / 1920 * 48); |
|
|
|
line-height: 41px; |
|
|
|
letter-spacing: 4px; |
|
|
|
text-shadow: 0px 0px 11px rgba(221, 237, 255, 0.34); |
|
|
|
} |
|
|
|
|
|
|
|
.date, |
|
|
|
.time { |
|
|
|
/* font-family: zcoolqingkehuangyouti, sans-serif; */ |
|
|
|
font-size: calc(100vmin / 1920 * 42); |
|
|
|
line-height: 1.5; |
|
|
|
/* font-size: 28px; |
|
|
|
line-height: 36px; */ |
|
|
|
color: #49e1de; |
|
|
|
letter-spacing: 0.8px; |
|
|
|
position: absolute; |
|
|
|
bottom: calc(100vmin / 1920 * 14); |
|
|
|
} |
|
|
|
|
|
|
|
.date { |
|
|
|
/* left: 72px; */ |
|
|
|
left: calc(100vmin / 1920 * 72); |
|
|
|
} |
|
|
|
|
|
|
|
.time { |
|
|
|
/* right: 128px; */ |
|
|
|
right: calc(100vmin / 1920 * 186); |
|
|
|
} |
|
|
|
|
|
|
|
.fullscreen-btn { |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
/* height: 32px; */ |
|
|
|
cursor: pointer; |
|
|
|
position: absolute; |
|
|
|
/* right: 24px; */ |
|
|
|
/** techy-body 的内部 padding 值 */ |
|
|
|
right: calc(100vw / 1920 * 24); |
|
|
|
right: calc(100vmin / 1920 * 32); |
|
|
|
/* top: 42px; */ |
|
|
|
top: calc(100vmin / 1920 * 64); |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.fullscreen-btn > span { |
|
|
|
display: inline-block; |
|
|
|
width: calc(100vmin / 1920 * 52); |
|
|
|
height: calc(100vmin / 1920 * 52); |
|
|
|
} |
|
|
|
</style> |