@@ -1,215 +1,218 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |||
<meta name="renderer" content="webkit" /> | |||
<meta | |||
name="viewport" | |||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> | |||
<title><%= webpackConfig.name %></title> | |||
<!--[if lt IE 11]> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |||
<meta name="renderer" content="webkit" /> | |||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |||
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css"> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> | |||
<title> | |||
<%= webpackConfig.name %> | |||
</title> | |||
<!--[if lt IE 11]> | |||
<script> | |||
window.location.href = 'html/ie.html'; | |||
</script> | |||
<![endif]--> | |||
<style> | |||
html, | |||
body, | |||
#app { | |||
height: 100%; | |||
margin: 0px; | |||
padding: 0px; | |||
} | |||
.chromeframe { | |||
margin: 0.2em 0; | |||
background: #ccc; | |||
color: #000; | |||
padding: 0.2em 0; | |||
} | |||
#loader-wrapper { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 999999; | |||
} | |||
#loader { | |||
display: block; | |||
position: relative; | |||
left: 50%; | |||
top: 50%; | |||
width: 150px; | |||
height: 150px; | |||
margin: -75px 0 0 -75px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-webkit-animation: spin 2s linear infinite; | |||
-ms-animation: spin 2s linear infinite; | |||
-moz-animation: spin 2s linear infinite; | |||
-o-animation: spin 2s linear infinite; | |||
animation: spin 2s linear infinite; | |||
z-index: 1001; | |||
} | |||
#loader:before { | |||
content: ''; | |||
position: absolute; | |||
top: 5px; | |||
left: 5px; | |||
right: 5px; | |||
bottom: 5px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-webkit-animation: spin 3s linear infinite; | |||
-moz-animation: spin 3s linear infinite; | |||
-o-animation: spin 3s linear infinite; | |||
-ms-animation: spin 3s linear infinite; | |||
animation: spin 3s linear infinite; | |||
} | |||
#loader:after { | |||
content: ''; | |||
position: absolute; | |||
top: 15px; | |||
left: 15px; | |||
right: 15px; | |||
bottom: 15px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-moz-animation: spin 1.5s linear infinite; | |||
-o-animation: spin 1.5s linear infinite; | |||
-ms-animation: spin 1.5s linear infinite; | |||
-webkit-animation: spin 1.5s linear infinite; | |||
animation: spin 1.5s linear infinite; | |||
} | |||
@-webkit-keyframes spin { | |||
0% { | |||
-webkit-transform: rotate(0deg); | |||
-ms-transform: rotate(0deg); | |||
transform: rotate(0deg); | |||
} | |||
100% { | |||
-webkit-transform: rotate(360deg); | |||
-ms-transform: rotate(360deg); | |||
transform: rotate(360deg); | |||
} | |||
} | |||
@keyframes spin { | |||
0% { | |||
-webkit-transform: rotate(0deg); | |||
-ms-transform: rotate(0deg); | |||
transform: rotate(0deg); | |||
} | |||
100% { | |||
-webkit-transform: rotate(360deg); | |||
-ms-transform: rotate(360deg); | |||
transform: rotate(360deg); | |||
} | |||
} | |||
#loader-wrapper .loader-section { | |||
position: fixed; | |||
top: 0; | |||
width: 51%; | |||
height: 100%; | |||
background: #7171c6; | |||
z-index: 1000; | |||
-webkit-transform: translateX(0); | |||
-ms-transform: translateX(0); | |||
transform: translateX(0); | |||
} | |||
#loader-wrapper .loader-section.section-left { | |||
left: 0; | |||
} | |||
#loader-wrapper .loader-section.section-right { | |||
right: 0; | |||
} | |||
.loaded #loader-wrapper .loader-section.section-left { | |||
-webkit-transform: translateX(-100%); | |||
-ms-transform: translateX(-100%); | |||
transform: translateX(-100%); | |||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
} | |||
.loaded #loader-wrapper .loader-section.section-right { | |||
-webkit-transform: translateX(100%); | |||
-ms-transform: translateX(100%); | |||
transform: translateX(100%); | |||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
} | |||
.loaded #loader { | |||
opacity: 0; | |||
-webkit-transition: all 0.3s ease-out; | |||
transition: all 0.3s ease-out; | |||
} | |||
.loaded #loader-wrapper { | |||
visibility: hidden; | |||
-webkit-transform: translateY(-100%); | |||
-ms-transform: translateY(-100%); | |||
transform: translateY(-100%); | |||
-webkit-transition: all 0.3s 1s ease-out; | |||
transition: all 0.3s 1s ease-out; | |||
} | |||
.no-js #loader-wrapper { | |||
display: none; | |||
} | |||
.no-js h1 { | |||
color: #222222; | |||
} | |||
#loader-wrapper .load_title { | |||
font-family: 'Open Sans'; | |||
color: #fff; | |||
font-size: 19px; | |||
width: 100%; | |||
text-align: center; | |||
z-index: 9999999999999; | |||
position: absolute; | |||
top: 60%; | |||
opacity: 1; | |||
line-height: 30px; | |||
} | |||
#loader-wrapper .load_title span { | |||
font-weight: normal; | |||
font-style: italic; | |||
font-size: 13px; | |||
color: #fff; | |||
opacity: 0.5; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="app"> | |||
<div id="loader-wrapper"> | |||
<div id="loader"></div> | |||
<div class="loader-section section-left"></div> | |||
<div class="loader-section section-right"></div> | |||
<div class="load_title">正在加载系统资源,请耐心等待</div> | |||
</div> | |||
<style> | |||
html, | |||
body, | |||
#app { | |||
height: 100%; | |||
margin: 0px; | |||
padding: 0px; | |||
} | |||
.chromeframe { | |||
margin: 0.2em 0; | |||
background: #ccc; | |||
color: #000; | |||
padding: 0.2em 0; | |||
} | |||
#loader-wrapper { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 999999; | |||
} | |||
#loader { | |||
display: block; | |||
position: relative; | |||
left: 50%; | |||
top: 50%; | |||
width: 150px; | |||
height: 150px; | |||
margin: -75px 0 0 -75px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-webkit-animation: spin 2s linear infinite; | |||
-ms-animation: spin 2s linear infinite; | |||
-moz-animation: spin 2s linear infinite; | |||
-o-animation: spin 2s linear infinite; | |||
animation: spin 2s linear infinite; | |||
z-index: 1001; | |||
} | |||
#loader:before { | |||
content: ''; | |||
position: absolute; | |||
top: 5px; | |||
left: 5px; | |||
right: 5px; | |||
bottom: 5px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-webkit-animation: spin 3s linear infinite; | |||
-moz-animation: spin 3s linear infinite; | |||
-o-animation: spin 3s linear infinite; | |||
-ms-animation: spin 3s linear infinite; | |||
animation: spin 3s linear infinite; | |||
} | |||
#loader:after { | |||
content: ''; | |||
position: absolute; | |||
top: 15px; | |||
left: 15px; | |||
right: 15px; | |||
bottom: 15px; | |||
border-radius: 50%; | |||
border: 3px solid transparent; | |||
border-top-color: #fff; | |||
-moz-animation: spin 1.5s linear infinite; | |||
-o-animation: spin 1.5s linear infinite; | |||
-ms-animation: spin 1.5s linear infinite; | |||
-webkit-animation: spin 1.5s linear infinite; | |||
animation: spin 1.5s linear infinite; | |||
} | |||
@-webkit-keyframes spin { | |||
0% { | |||
-webkit-transform: rotate(0deg); | |||
-ms-transform: rotate(0deg); | |||
transform: rotate(0deg); | |||
} | |||
100% { | |||
-webkit-transform: rotate(360deg); | |||
-ms-transform: rotate(360deg); | |||
transform: rotate(360deg); | |||
} | |||
} | |||
@keyframes spin { | |||
0% { | |||
-webkit-transform: rotate(0deg); | |||
-ms-transform: rotate(0deg); | |||
transform: rotate(0deg); | |||
} | |||
100% { | |||
-webkit-transform: rotate(360deg); | |||
-ms-transform: rotate(360deg); | |||
transform: rotate(360deg); | |||
} | |||
} | |||
#loader-wrapper .loader-section { | |||
position: fixed; | |||
top: 0; | |||
width: 51%; | |||
height: 100%; | |||
background: #7171c6; | |||
z-index: 1000; | |||
-webkit-transform: translateX(0); | |||
-ms-transform: translateX(0); | |||
transform: translateX(0); | |||
} | |||
#loader-wrapper .loader-section.section-left { | |||
left: 0; | |||
} | |||
#loader-wrapper .loader-section.section-right { | |||
right: 0; | |||
} | |||
.loaded #loader-wrapper .loader-section.section-left { | |||
-webkit-transform: translateX(-100%); | |||
-ms-transform: translateX(-100%); | |||
transform: translateX(-100%); | |||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
} | |||
.loaded #loader-wrapper .loader-section.section-right { | |||
-webkit-transform: translateX(100%); | |||
-ms-transform: translateX(100%); | |||
transform: translateX(100%); | |||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||
} | |||
.loaded #loader { | |||
opacity: 0; | |||
-webkit-transition: all 0.3s ease-out; | |||
transition: all 0.3s ease-out; | |||
} | |||
.loaded #loader-wrapper { | |||
visibility: hidden; | |||
-webkit-transform: translateY(-100%); | |||
-ms-transform: translateY(-100%); | |||
transform: translateY(-100%); | |||
-webkit-transition: all 0.3s 1s ease-out; | |||
transition: all 0.3s 1s ease-out; | |||
} | |||
.no-js #loader-wrapper { | |||
display: none; | |||
} | |||
.no-js h1 { | |||
color: #222222; | |||
} | |||
#loader-wrapper .load_title { | |||
font-family: 'Open Sans'; | |||
color: #fff; | |||
font-size: 19px; | |||
width: 100%; | |||
text-align: center; | |||
z-index: 9999999999999; | |||
position: absolute; | |||
top: 60%; | |||
opacity: 1; | |||
line-height: 30px; | |||
} | |||
#loader-wrapper .load_title span { | |||
font-weight: normal; | |||
font-style: italic; | |||
font-size: 13px; | |||
color: #fff; | |||
opacity: 0.5; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="app"> | |||
<div id="loader-wrapper"> | |||
<div id="loader"></div> | |||
<div class="loader-section section-left"></div> | |||
<div class="loader-section section-right"></div> | |||
<div class="load_title">正在加载系统资源,请耐心等待</div> | |||
</div> | |||
</body> | |||
</html> | |||
</div> | |||
</body> | |||
</html> |
@@ -0,0 +1,339 @@ | |||
@media print { | |||
body { | |||
margin: 0px; | |||
padding: 0px; | |||
} | |||
} | |||
@page { | |||
margin: 0; | |||
} | |||
.hiprint-printPaper * { | |||
box-sizing: border-box; | |||
-moz-box-sizing: border-box; /* Firefox */ | |||
-webkit-box-sizing: border-box; /* Safari */ | |||
} | |||
.hiprint-printPaper *:focus { | |||
outline: -webkit-focus-ring-color auto 0px; | |||
} | |||
.hiprint-printPaper { | |||
position: relative; | |||
padding: 0 0 0 0; | |||
page-break-after: always; | |||
-webkit-user-select: none; /* Chrome/Safari/Opera */ | |||
-moz-user-select: none; /* Firefox */ | |||
user-select: none; | |||
overflow-x: hidden; | |||
overflow: hidden; | |||
} | |||
.hiprint-printPaper .hiprint-printPaper-content { | |||
position: relative; | |||
} | |||
/* 火狐浏览器打印 第一页过后 重叠问题 */ | |||
@-moz-document url-prefix() { | |||
.hiprint-printPaper .hiprint-printPaper-content { | |||
position: relative; | |||
margin-top: 20px; | |||
top: -20px | |||
} | |||
} | |||
.hiprint-printPaper.design { | |||
overflow: visible; | |||
} | |||
.hiprint-printTemplate .hiprint-printPanel { | |||
page-break-after: always; | |||
} | |||
.hiprint-printPaper, hiprint-printPanel { | |||
box-sizing: border-box; | |||
border: 0px; | |||
} | |||
.hiprint-printPanel .hiprint-printPaper:last-child { | |||
page-break-after: avoid; | |||
} | |||
.hiprint-printTemplate .hiprint-printPanel:last-child { | |||
page-break-after: avoid; | |||
} | |||
.hiprint-printPaper .hideheaderLinetarget { | |||
border-top: 0px dashed rgb(201, 190, 190) !important; | |||
} | |||
.hiprint-printPaper .hidefooterLinetarget { | |||
border-top: 0px dashed rgb(201, 190, 190) !important; | |||
} | |||
.hiprint-printPaper.design { | |||
border: 1px dashed rgba(170, 170, 170, 0.7); | |||
} | |||
.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content { | |||
overflow: hidden; | |||
box-sizing: border-box; | |||
} | |||
.design .resize-panel { | |||
box-sizing: border-box; | |||
border: 1px dotted; | |||
} | |||
.hiprint-printElement-text { | |||
background-color: transparent; | |||
background-repeat: repeat; | |||
padding: 0 0 0 0; | |||
border: 0.75pt none rgb(0, 0, 0); | |||
direction: ltr; | |||
font-family: 'SimSun'; | |||
font-size: 9pt; | |||
font-style: normal; | |||
font-weight: normal; | |||
padding-bottom: 0pt; | |||
padding-left: 0pt; | |||
padding-right: 0pt; | |||
padding-top: 0pt; | |||
text-align: left; | |||
text-decoration: none; | |||
line-height: 9.75pt; | |||
box-sizing: border-box; | |||
word-wrap: break-word; | |||
word-break: break-all; | |||
} | |||
.design .hiprint-printElement-text-content { | |||
border: 1px dashed rgb(206, 188, 188); | |||
box-sizing: border-box; | |||
} | |||
.hiprint-printElement-longText { | |||
background-color: transparent; | |||
background-repeat: repeat; | |||
border: 0.75pt none rgb(0, 0, 0); | |||
direction: ltr; | |||
font-family: 'SimSun'; | |||
font-size: 9pt; | |||
font-style: normal; | |||
font-weight: normal; | |||
padding-bottom: 0pt; | |||
padding-left: 0pt; | |||
padding-right: 0pt; | |||
padding-top: 0pt; | |||
text-align: left; | |||
text-decoration: none; | |||
line-height: 9.75pt; | |||
box-sizing: border-box; | |||
word-wrap: break-word; | |||
word-break: break-all; | |||
/*white-space: pre-wrap*/ | |||
} | |||
.hiprint-printElement-table { | |||
background-color: transparent; | |||
background-repeat: repeat; | |||
color: rgb(0, 0, 0); | |||
border-color: rgb(0, 0, 0); | |||
border-style: none; | |||
direction: ltr; | |||
font-family: 'SimSun'; | |||
font-size: 9pt; | |||
font-style: normal; | |||
font-weight: normal; | |||
padding-bottom: 0pt; | |||
padding-left: 0pt; | |||
padding-right: 0pt; | |||
padding-top: 0pt; | |||
text-align: left; | |||
text-decoration: none; | |||
padding: 0 0 0 0; | |||
box-sizing: border-box; | |||
line-height: 9.75pt; | |||
} | |||
.hiprint-printElement-table thead { | |||
background: #e8e8e8; | |||
font-weight: 700; | |||
} | |||
.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td { | |||
border-color: rgb(0, 0, 0); | |||
/*border-style: none;*/ | |||
/*border: 1px solid rgb(0, 0, 0);*/ | |||
font-weight: normal; | |||
direction: ltr; | |||
padding-bottom: 0pt; | |||
padding-left: 4pt; | |||
padding-right: 4pt; | |||
padding-top: 0pt; | |||
text-decoration: none; | |||
vertical-align: middle; | |||
box-sizing: border-box; | |||
word-wrap: break-word; | |||
word-break: break-all; | |||
/*line-height: 9.75pt; | |||
font-size: 9pt;*/ | |||
} | |||
.hiprint-printElement-tableTarget-border-all { | |||
border: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-none { | |||
border: 0px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-lr { | |||
border-left: 1px solid; | |||
border-right: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-left { | |||
border-left: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-right { | |||
border-right: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-tb { | |||
border-top: 1px solid; | |||
border-bottom: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-top { | |||
border-top: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-bottom { | |||
border-bottom: 1px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-td-none td { | |||
border: 0px solid; | |||
} | |||
.hiprint-printElement-tableTarget-border-td-all td:not(:last-child) { | |||
border-right: 1px solid; | |||
} | |||
/*.hiprint-printElement-tableTarget tr,*/ | |||
.hiprint-printElement-tableTarget td { | |||
height: 18pt; | |||
} | |||
.hiprint-printPaper .hiprint-paperNumber { | |||
font-size: 9pt; | |||
} | |||
.design .hiprint-printElement-table-handle { | |||
position: absolute; | |||
height: 21pt; | |||
width: 21pt; | |||
background: red; | |||
z-index: 1; | |||
} | |||
.hiprint-printPaper .hiprint-paperNumber-disabled { | |||
float: right !important; | |||
right: 0 !important; | |||
color: gainsboro !important; | |||
} | |||
.hiprint-printElement-vline, .hiprint-printElement-hline { | |||
border: 0px none rgb(0, 0, 0); | |||
} | |||
.hiprint-printElement-vline { | |||
border-left: 0.75pt solid #000; | |||
border-right: 0px none rgb(0, 0, 0) !important; | |||
border-bottom: 0px none rgb(0, 0, 0) !important; | |||
border-top: 0px none rgb(0, 0, 0) !important; | |||
} | |||
.hiprint-printElement-hline { | |||
border-top: 0.75pt solid #000; | |||
border-right: 0px none rgb(0, 0, 0) !important; | |||
border-bottom: 0px none rgb(0, 0, 0) !important; | |||
border-left: 0px none rgb(0, 0, 0) !important; | |||
} | |||
.hiprint-printElement-oval, .hiprint-printElement-rect { | |||
border: 0.75pt solid #000; | |||
} | |||
.hiprint-text-content-middle { | |||
} | |||
.hiprint-text-content-middle > div { | |||
display: grid; | |||
align-items: center; | |||
} | |||
.hiprint-text-content-bottom { | |||
} | |||
.hiprint-text-content-bottom > div { | |||
display: grid; | |||
align-items: flex-end; | |||
} | |||
.hiprint-text-content-wrap { | |||
} | |||
.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap { | |||
white-space: nowrap; | |||
} | |||
.hiprint-text-content-wrap .hiprint-text-content-wrap-clip { | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: clip; | |||
} | |||
.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis { | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
/*hi-grid-row */ | |||
.hi-grid-row { | |||
position: relative; | |||
height: auto; | |||
margin-right: 0; | |||
margin-left: 0; | |||
zoom: 1; | |||
display: block; | |||
box-sizing: border-box; | |||
} | |||
.hi-grid-row::after, .hi-grid-row::before { | |||
display: table; | |||
content: ''; | |||
box-sizing: border-box; | |||
} | |||
.hi-grid-col { | |||
display: block; | |||
box-sizing: border-box; | |||
position: relative; | |||
float: left; | |||
flex: 0 0 auto; | |||
} | |||
.table-grid-row { | |||
margin-left: -0pt; | |||
margin-right: -0pt; | |||
} | |||
.tableGridColumnsGutterRow { | |||
padding-left: 0pt; | |||
padding-right: 0pt; | |||
} | |||
.hiprint-gridColumnsFooter { | |||
text-align: left; | |||
clear: both; | |||
} |
@@ -11,14 +11,26 @@ | |||
<NavMenu @action="handleAction" :menu="menu" /> | |||
</section> | |||
<section id="main-panel"> | |||
<section id="left-panel"></section> | |||
<section id="left-panel"> | |||
<h2>组件</h2> | |||
<div id="components"></div> | |||
</section> | |||
<section id="edit-panel"></section> | |||
<section id="right-panel"></section> | |||
<section id="right-panel"> | |||
<h2>设置</h2> | |||
<div id="settings"></div> | |||
</section> | |||
</section> | |||
</div> | |||
</template> | |||
<script> | |||
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint"; | |||
hiprint.init({ | |||
providers: [defaultElementTypeProvider()], | |||
}); | |||
const NavSelector = { | |||
name: 'NavSelector', | |||
props: ['name', 'options'], | |||
@@ -29,12 +41,13 @@ const NavSelector = { | |||
}, | |||
methods: { | |||
handleOpen() { | |||
this.$emit('closeOtherMenu', this) | |||
// this.$emit('closeOtherMenu', this) | |||
// this.$emit('hover', this) | |||
this.open = !this.open; | |||
}, | |||
handleClickItem(e) { | |||
this.$emit('click', e.target.innerText) | |||
}, | |||
handleClickItem(e) { | |||
this.$emit('click', e.target.innerText) | |||
}, | |||
// 暴露一个close方法,供父组件调用 | |||
closeSubMenu() { | |||
this.open = false; | |||
@@ -42,7 +55,7 @@ const NavSelector = { | |||
}, | |||
render: function (h) { | |||
return ( | |||
<li class={'nav-selector__item'} onClick={this.handleOpen}> | |||
<li class={'nav-selector__item'} onMouseenter={this.handleOpen} onMouseleave={this.handleOpen}> | |||
<span class={'nav-selector__name'}>{this.name}</span> | |||
<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}> | |||
{this.options.map((item) => { | |||
@@ -59,20 +72,20 @@ const NavMenu = { | |||
props: ['menu'], | |||
components: { NavSelector }, | |||
data() { | |||
return {} | |||
}, | |||
return {} | |||
}, | |||
methods: { | |||
handleCloseOtherMenu(vueInstance) { | |||
this.$children.forEach(vm => { | |||
if (vm != vueInstance) { | |||
vm.closeSubMenu() | |||
} | |||
}) | |||
}, | |||
handleItemClicked(e) { | |||
this.$emit('action', e); | |||
} | |||
}, | |||
handleCloseOtherMenu(vueInstance) { | |||
this.$children.forEach(vm => { | |||
if (vm != vueInstance) { | |||
vm.closeSubMenu() | |||
} | |||
}) | |||
}, | |||
handleItemClicked(e) { | |||
this.$emit('action', e); | |||
} | |||
}, | |||
render: function (h) { | |||
return ( | |||
<ul class={'nav-menu'}> | |||
@@ -85,11 +98,12 @@ const NavMenu = { | |||
}; | |||
export default { | |||
name: 'PrintDesignPage ', | |||
name: 'PrintDesignPage', | |||
components: { NavMenu }, | |||
props: {}, | |||
data() { | |||
return { | |||
hiprintTemplate: null, | |||
menu: [ | |||
{ | |||
name: '菜单', | |||
@@ -103,11 +117,28 @@ export default { | |||
}; | |||
}, | |||
computed: {}, | |||
mounted() { | |||
this.loadSideBar(); | |||
this.loadDesigner(); | |||
}, | |||
methods: { | |||
handleAction(name) { | |||
console.log('name', name) | |||
} | |||
}, | |||
loadDesigner() { | |||
$("#edit-panel").empty(); | |||
this.hiprintTemplate = new hiprint.PrintTemplate({ | |||
settingContainer: "#settings", | |||
}); | |||
this.hiprintTemplate.design("#edit-panel"); | |||
}, | |||
loadSideBar() { | |||
this.loadProviders(); | |||
this.loadSettings(); | |||
}, | |||
loadProviders() { }, | |||
loadSettings() { }, | |||
handleAction(name) { | |||
console.log('name', name) | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -122,7 +153,7 @@ export default { | |||
height: 1px; | |||
flex: 1; | |||
display: grid; | |||
grid-template-columns: 200px 1fr 200px; | |||
grid-template-columns: 1fr 3fr 1fr; | |||
grid-auto-rows: 1fr; | |||
grid-template-areas: 'left main right'; | |||
} | |||
@@ -133,43 +164,68 @@ export default { | |||
background: #fff; | |||
border-bottom: 1px solid #ccc; | |||
> ul { | |||
>ul { | |||
// background: #32aa32; | |||
padding: 0; | |||
list-style: none; | |||
padding: 6px; | |||
margin: 0; | |||
margin-left: 10px; | |||
display: flex; | |||
li { | |||
padding: 0; | |||
} | |||
} | |||
} | |||
#left-panel { | |||
overflow: auto; | |||
grid-area: left; | |||
background: #f1f1f1; | |||
background: #fff; | |||
h2 { | |||
margin: 0; | |||
font-weight: 400; | |||
padding: 4px 20px; | |||
border-bottom: 1px solid #ccc; | |||
background: #ccc; | |||
} | |||
} | |||
#edit-panel { | |||
padding: 20px; | |||
overflow: auto; | |||
grid-area: main; | |||
background: #e1e1e1; | |||
justify-items: center; | |||
background: #fff; | |||
border-left: 1px solid #ccc; | |||
border-right: 1px solid #ccc; | |||
} | |||
#right-panel { | |||
overflow: auto; | |||
grid-area: right; | |||
background: #f1f1f1; | |||
background: #fff; | |||
h2 { | |||
margin: 0; | |||
font-weight: 400; | |||
padding: 4px 12px; | |||
border-bottom: 1px solid #ccc; | |||
background: #ccc; | |||
} | |||
} | |||
</style> | |||
<style lang="scss"> | |||
// 子组件的样式 | |||
.nav-selector__item { | |||
font-size: 18px; | |||
letter-spacing: 1px; | |||
// font-weight: 600; | |||
padding: 6px 12px; | |||
line-height: 1.25; | |||
position: relative; | |||
cursor: pointer; | |||
&:not(:last-child) { | |||
margin-right: 12px; | |||
&:hover { | |||
background: #f1f1f1; | |||
} | |||
ul { | |||
@@ -177,9 +233,9 @@ export default { | |||
margin: 0; | |||
padding: 0; | |||
position: absolute; | |||
top: 128%; | |||
top: 100%; | |||
min-width: 128px; | |||
left: -6px; | |||
left: 0px; | |||
background: #fff; | |||
border: 1px solid #ccc; | |||
// border-radius: 4px; | |||
@@ -188,8 +244,9 @@ export default { | |||
z-index: 100; | |||
li { | |||
padding: 2px 6px; | |||
padding: 6px 12px; | |||
cursor: pointer; | |||
&:hover { | |||
background: #f1f1f1; | |||
} | |||