mirror of
https://gitee.com/wangkang/udf.git
synced 2026-10-29 13:44:03 +00:00
更新
This commit is contained in:
iizmg
+12
-18
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<div v-show="!showSearchInput" class="bellDiv">
|
||||
<el-badge is-dot>
|
||||
<el-button icon="el-icon-bell" size="small" circle></el-button>
|
||||
<el-button :style="bellBtnStyle" icon="el-icon-bell" size="small" circle></el-button>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div v-show="!showSearchInput" class="avatarDiv">
|
||||
@@ -98,6 +98,9 @@
|
||||
registeredBtnStyle: {
|
||||
outline: "none"
|
||||
},
|
||||
bellBtnStyle: {
|
||||
outline: "none"
|
||||
},
|
||||
backtopStyle: {},
|
||||
mainElContainerStyle: {
|
||||
height: 0
|
||||
@@ -224,7 +227,7 @@
|
||||
|
||||
.searchDiv {
|
||||
height: 50px;
|
||||
padding-right: 10px;
|
||||
padding-right: 8px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@@ -234,7 +237,7 @@
|
||||
|
||||
.searchInputDiv {
|
||||
height: 50px;
|
||||
padding-right: 10px;
|
||||
padding-right: 8px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@@ -244,7 +247,7 @@
|
||||
|
||||
.toolDiv {
|
||||
height: 50px;
|
||||
padding-right: 10px;
|
||||
padding-right: 8px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@@ -252,9 +255,9 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-registered-div {
|
||||
.bellDiv {
|
||||
height: 50px;
|
||||
padding-right: 5px;
|
||||
padding-right: 8px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@@ -264,22 +267,13 @@
|
||||
|
||||
.avatarDiv {
|
||||
height: 50px;
|
||||
padding-right: 12px;
|
||||
padding-right: 10px;
|
||||
padding-top: 4px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bellDiv {
|
||||
height: 50px;
|
||||
padding-right: 25px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -295,7 +289,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px 0px 10px 0px;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
padding-top: 20px;
|
||||
padding: 10px 10px 10px 10px;
|
||||
max-width: 1200px;
|
||||
margin: auto !important;
|
||||
|
||||
|
||||
@@ -19,6 +19,24 @@
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
margin: auto !important;
|
||||
padding: 60px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 1px 0px 4px 0px;
|
||||
min-height: 50px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bottom .copyRight {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.top {
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px 0px;
|
||||
height: 50px;
|
||||
@@ -28,17 +46,26 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-fixed {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.top .navbar {
|
||||
max-width: 1200px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: auto !important;
|
||||
height: 50px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.top .navbar .leftbar {
|
||||
height: 50px;
|
||||
/*float: left;*/
|
||||
}
|
||||
|
||||
.top .navbar a {
|
||||
@@ -139,44 +166,158 @@
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-badge {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-badge__content.is-fixed.is-dot {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.el-badge__content.is-dot {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.el-badge__content.is-fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%) translateX(100%);
|
||||
transform: translateY(-50%) translateX(100%);
|
||||
}
|
||||
|
||||
.el-badge__content {
|
||||
background-color: #F56C6C;
|
||||
border-radius: 10px;
|
||||
color: #FFF;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #FFF;
|
||||
}
|
||||
|
||||
.btnTop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: 10px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.btnTop-custom {
|
||||
background: rgb(255, 106, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .12);
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
-webkit-transition: .1s;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border-radius: 50%;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.btnTop-custom-fa {
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
</style>
|
||||
<title>[(${title})]</title>
|
||||
</head>
|
||||
<body>
|
||||
<div th:fragment="top">
|
||||
<div class="top">
|
||||
<div class="top top-fixed">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<a class="navbar-brand-custm align-middle" href="#">ITKK</a>
|
||||
<div class="collapse navbar-collapse"></div>
|
||||
<div class="rightbar">
|
||||
<div class="item">
|
||||
<div class="item header-right-bar-search-div">
|
||||
<button type="button" class="btn btn-custom2">
|
||||
<i class="fa fa-search" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button type="button" class="btn btn-custom2">
|
||||
<i class="fa fa-bell-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="item header-right-bar-search-input-div" style="display:none;">
|
||||
<input type="text" class="form-control" placeholder="请输入要搜索的内容">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item header-right-bar-bell-div">
|
||||
<div class="el-badge">
|
||||
<button type="button" class="btn btn-custom2">
|
||||
<i class="fa fa-bell-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
<sup class="el-badge__content el-badge__content--undefined is-fixed is-dot"></sup>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="item header-right-bar-user-div">
|
||||
<button type="button" class="btn btn-info btn-custom3">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
</button>
|
||||
<!-- <img width="40px" height="40px" src="https://getbootstrap.com/docs/4.4/assets/img/favicons/apple-touch-icon.png" class="img-rounded" alt="头像">-->
|
||||
<!–<img width="40px" height="40px" src="https://getbootstrap.com/docs/4.4/assets/img/favicons/apple-touch-icon.png" class="img-rounded" alt="头像">–>
|
||||
</div>
|
||||
-->
|
||||
<div class="item header-right-bar-login-div">
|
||||
<button type="button" class="btn btn-custom rounded-pill">登陆</button>
|
||||
</div>
|
||||
<div class="item header-right-bar-registered-div">
|
||||
<button type="button" class="btn btn-custom rounded-pill">注册</button>
|
||||
</div>
|
||||
<!-- <div class="item">-->
|
||||
<!-- <button type="button" class="btn btn-custom rounded-pill">登陆</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="item">-->
|
||||
<!-- <button type="button" class="btn btn-custom rounded-pill">注册</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" th:fragment="bottom">
|
||||
底部
|
||||
<div class="bottom">
|
||||
<div class="copyRight text-center">
|
||||
<span>© 2019-2020 itkk.org</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btnTop btnTop-custom">
|
||||
<i class="fa fa-arrow-up btnTop-custom-fa" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:fragment="footer">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"
|
||||
@@ -189,7 +330,52 @@
|
||||
<script type="text/javascript">
|
||||
//页面加载完成
|
||||
$(document).ready(function () {
|
||||
|
||||
//设置main的高度
|
||||
{
|
||||
$('.main').css('max-height', window.innerHeight - 50);
|
||||
$('.main').css('height', window.innerHeight - 50);
|
||||
$(window).on('resize', function () {
|
||||
$('.main').css('max-height', window.innerHeight - 50);
|
||||
$('.main').css('height', window.innerHeight - 50);
|
||||
});
|
||||
}
|
||||
//搜索效果
|
||||
$('.header-right-bar-search-div button').on('click', function () {
|
||||
var v1;
|
||||
var v2;
|
||||
if ($('.header-right-bar-search-input-div').css('display')) {
|
||||
if ($('.header-right-bar-search-input-div').css('display') === 'none') {
|
||||
v1 = 'table-cell';
|
||||
v2 = 'none';
|
||||
} else {
|
||||
v1 = 'none';
|
||||
v2 = 'table-cell';
|
||||
}
|
||||
} else {
|
||||
v1 = 'none';
|
||||
v2 = 'table-cell';
|
||||
}
|
||||
$('.header-right-bar-search-input-div').css('display', v1);
|
||||
$('.header-right-bar-search-input-div').css('width', window.innerWidth - 200 - 10 + 'px');
|
||||
$('.header-right-bar-search-input-div').css('max-width', '400px');
|
||||
$('.header-right-bar-bell-div').css('display', v2);
|
||||
$('.header-right-bar-user-div').css('display', v2);
|
||||
$('.header-right-bar-login-div').css('display', v2);
|
||||
$('.header-right-bar-registered-div').css('display', v2);
|
||||
});
|
||||
// 返回顶部处理
|
||||
{
|
||||
$('.main').on('scroll', function () {
|
||||
if ($(this).scrollTop() > 20) {
|
||||
$('.btnTop').css('display', 'block');
|
||||
} else {
|
||||
$('.btnTop').css('display', 'none');
|
||||
}
|
||||
});
|
||||
$('.btnTop').on('click', function () {
|
||||
$('.main').scrollTop(0);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
</style>
|
||||
<body>
|
||||
<div th:include="common::top"></div>
|
||||
<div class="home">
|
||||
<h1>Hello, world!</h1>
|
||||
<div class="main pre-scrollable">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h1 class="text-center">网站正在建设中</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="common::bottom"></div>
|
||||
<div th:include="common::footer"></div>
|
||||
|
||||
Reference in New Issue
Block a user