界面美化
This commit is contained in:
parent
d29552c455
commit
0b1110cc37
|
|
@ -1,16 +1,17 @@
|
|||
<style type="text/css">
|
||||
#rpPage {
|
||||
padding: 3px 0;
|
||||
border: 1px solid #000;
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="reportMain">
|
||||
<ul class="nav nav-tabs" v-if="showReportList">
|
||||
<li class="nav-item" v-for="m in reportList">
|
||||
<ul class="menu-v reportForm" v-if="showReportList">
|
||||
<li class="menu-item-v reportItem" v-for="m in reportList">
|
||||
<a class="nav-link" href="#" v-on:click="cli(m)">{{m}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="rpPage"></div>
|
||||
<div id="rpPage" v-show="showPage"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var vm = new Vue({
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
url: myjs.urls.files,
|
||||
fileContentUrl: myjs.urls.fileContentUrl,
|
||||
showReportList: true,
|
||||
showPage: false,
|
||||
},
|
||||
created() {
|
||||
$.get(this.url, function (d) {
|
||||
|
|
@ -34,7 +36,8 @@
|
|||
methods: {
|
||||
cli(m) {
|
||||
$.get(this.fileContentUrl, { fileName: m }, function (h) {
|
||||
$("#rpPage").html(h);
|
||||
vm.showPage = true;
|
||||
$("#rpPage").html(h);
|
||||
});
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3 headbar">
|
||||
<div class="container">
|
||||
<img alt="" src="~/images/logo75.png" class="logo" />
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">自定义报表服务</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -24,10 +25,15 @@
|
|||
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">报表</a>
|
||||
<a class="nav-link text-dark" href=".">主页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="userbar nav-link"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="nav pull-right">
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -39,7 +45,11 @@
|
|||
|
||||
<footer class="border-top footer text-muted">
|
||||
<div class="container">
|
||||
<div class="user"></div>
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" target="_blank" href="http://39.105.71.191/ggws_klmy/ReportService/issues">技术支持</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -47,10 +57,23 @@
|
|||
var uid = myjs.getUId();
|
||||
var un = myjs.getUName();
|
||||
if (uid && un) {
|
||||
$("footer .user").html("" + un + "(" + uid + ")");
|
||||
$(".userbar").html("" + un + "(" + uid + ")");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@RenderSection("Scripts",required: false)
|
||||
<style type="text/css">
|
||||
|
||||
.headbar {
|
||||
height: 66px;
|
||||
background-color: #4489CA !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 30px;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,70 +2,107 @@
|
|||
for details on configuring this project to bundle and minify static web assets. */
|
||||
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Provide sufficient contrast against white background */
|
||||
a {
|
||||
color: #0366d6;
|
||||
color: #0366d6;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
color: #fff;
|
||||
background-color: #00AE44;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
html {
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
button.accept-policy {
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
line-height: 60px; /* Vertically center the text there */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
line-height: 30px; /* Vertically center the text there */
|
||||
}
|
||||
|
||||
.reportForm {
|
||||
border: 1px solid #000;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.reportForm .reportItem {
|
||||
background-color: #8FBEE8;
|
||||
border: 1px solid #fff;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.menu-v {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-item-v {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reportFilter {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.reportTable {
|
||||
}
|
||||
|
||||
.reportTable th {
|
||||
}
|
||||
|
||||
.reportTable td {
|
||||
}
|
||||
|
|
|
|||
BIN
ReportService/wwwroot/images/logo75.png
Normal file
BIN
ReportService/wwwroot/images/logo75.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<div id="findPerson">
|
||||
<div id="para">
|
||||
<div id="para" class="reportFilter">
|
||||
<input type="hidden" name="ProcedureName" value="example" />
|
||||
<input type="hidden" name="reportName" value="报表1" />
|
||||
<input type="hidden" name="sqlStr" value="" />
|
||||
|
|
@ -9,11 +9,12 @@
|
|||
<label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label>
|
||||
<label>地址:<input name="address" value="" placeholder="输入地址数据" /></label>
|
||||
<label>地址:<input name="marry" value="" placeholder="是否结婚" /></label>
|
||||
<button v-on:click="find">查询</button>
|
||||
<button v-on:click="print">打印</button>
|
||||
<button class="btn btn-primary" v-on:click="find">查询</button>
|
||||
<button class="btn btn-primary" v-on:click="print">打印</button>
|
||||
<button class="btn btn-primary" v-on:click="print">打印</button>
|
||||
</div>
|
||||
<div id="result" v-if="result.length > 0">
|
||||
<table class="table">
|
||||
<table class="table reportTable" id="resultTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>姓名</td>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
myjs.post(this.url, { sql: sql }, function (d) {
|
||||
findPersonPrint.result = d;
|
||||
});
|
||||
myjs.GetServerTime("yyyy年MM月dd日 HH点", function (r) {
|
||||
myjs.GetServerTime("yyyy年MM月dd日", function (r) {
|
||||
_this.printTime = r;
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user