mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update techy-container icons

Browse Source
This commit is contained in:
lb
2022-11-10 09:01:19 +08:00
parent 3567838049
commit 3c29decb72
7 changed files with 437 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/QualityManager/components/TechyHeader.vue
View File

@@ -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">
@@ -33,12 +53,14 @@ const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" ver
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false
}
@@ -48,6 +70,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 +79,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;
@@ -63,30 +97,67 @@ export default {
position: relative;
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
padding: calc(24px * var(--beilv)) 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);
/* background-position: bottom left calc(100vw / 1920 * 40); */
background-position: bottom left calc(32px * var(--beilv));
height: calc(96px * var(--beilv));
}
.logo-img {
width: calc(100vw / 1920 * 24);
width: calc(28px * var(--beilv));
}
.techy-header__title {
display: line-block;
margin-left: calc(12px * var(--beilv));
/* font-size: 29px; */
font-size: calc(29px * var(--beilv));
line-height: calc(41px * var(--beilv));
letter-spacing: calc(2.23px * var(--beilv));
text-shadow: 0px 0px calc(11px * var(--beilv)) 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;
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24);
right: calc(24px * var(--beilv));
top: calc(44px * var(--beilv));
bottom: 0;
}
.fullscreen-btn > span {
display: inline-block;
width: calc(32px * var(--beilv));
height: calc(32px * var(--beilv));
}
</style>