Skip to content

Z
ZhongWeiXin
Commit d8e7e9c6 by 邓丽
Options

fixbug

parent 4a0c1cfb
Showing with 492 additions and 128 deletions
dist/assets/js/amazeui.js
......@@ -4971,9 +4971,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.scrollbarWidth = 0;
this.$used = $([]);
};
/*onclick="$("#contact").removeClass("am-active"); $(".am-nav").find("li").eq(n).addClass("am-active")"*/
Dimmer.DEFAULTS = {
tpl: '<div class="am-dimmer" data-am-dimmer></div>'
tpl: '<div class="am-dimmer" data-am-dimmer onclick="activeStyle()"></div>'
};
Dimmer.prototype.init = function() {
......
dist/assets/js/amazeui.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/style.css
......@@ -471,14 +471,18 @@ body {
line-height: 50px!important;
height: auto;
}
.am-slider .am-slides div.imgMask {
width: 100%;
display: block;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.am-slider .am-slides img {
width: 100%;
display: block;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: relative;
z-index: 3;
}
/*biography页面*/
.cd-timeline-block {
......@@ -715,9 +719,9 @@ a.cd-read-more:hover {
font-size: 1.8rem;
}
.am-topbar-nav > li > a:after {
width: 83%;
width: 80%;
position: absolute;
left: 0.7rem;
left: 11%;
margin-left: 0;
bottom: 15px;
content: "";
......@@ -1020,9 +1024,13 @@ a.cd-read-more:hover {
color: #9b9b9b;
line-height: 25px;
word-spacing: 2px;
height: 680px;
max-height: 600px;
overflow: auto;
}
/* #entry{
width:100%;
position: absolute;
}*/
.bgImg {
position: absolute;
top: 0;
......@@ -1032,18 +1040,16 @@ a.cd-read-more:hover {
height: 100%;
width: 100%;
z-index: 8;
}
.bgImg img {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.title {
color: #fff;
position: absolute;
top: 45%;
z-index: 10;
top: 43%;
width: 100%;
text-align: center;
/* background: rgba(0,0,0,0.2);*/
}
.title h2 {
font-size: 2.8rem;
......@@ -1053,12 +1059,18 @@ a.cd-read-more:hover {
letter-spacing: 6px;
word-spacing: 6px;
font-weight: 400;
width: 100%;
/* position: absolute;
top: 43%*/
}
.title p {
font-size: 2.0rem;
line-height: 25px;
word-spacing: 6px;
letter-spacing: 2px;
width: 100%;
/* position: absolute;
top: 50%;*/
}
.title p a {
color: #c9c9c9;
......@@ -1070,7 +1082,7 @@ a.cd-read-more:hover {
}
/*新闻页博客效果*/
#news ul li {
width: 50%;
width: 47%;
margin: 0 auto 30px;
padding: 30px;
background: #fff;
......@@ -1084,7 +1096,7 @@ a.cd-read-more:hover {
text-align: left;
line-height: 30px;
margin: 0px 0px 15px 0px;
color: #ccc;
color: #666;
height: 30px;
overflow: hidden;
white-space: nowrap;
......@@ -1113,18 +1125,18 @@ a.cd-read-more:hover {
width: 70%;
overflow: hidden;
}
#news ul li .blog .brief a:hover {
color: #666;
}
#news ul li .blog .brief p {
padding: 50px;
line-height: 35px;
padding: 35px;
line-height: 30px;
font-size: 16px;
text-align: left;
margin: 0px 0px 15px 0px;
text-overflow: ellipsis;
overflow: hidden;
height: 70%;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
color: #666;
text-indent: 32px;
}
#news ul li .blog .brief .moreBtn {
display: block;
......@@ -1137,6 +1149,9 @@ a.cd-read-more:hover {
border-radius: 4px;
font-size: 14px;
}
#news ul li .blog .brief .moreBtn:hover {
color: #e9e9e9;
}
/*模态框效果*/
.am-modal {
left: 30%;
......@@ -1290,9 +1305,10 @@ a.cd-read-more:hover {
#news ul li {
margin: 0 auto 25px;
padding: 25px;
width: 55%;
}
#news ul li .blog h2 {
font-size: 20px;
font-size: 18px;
margin: 0px 0px 13px 0px;
}
#news ul li .blog .date {
......@@ -1300,22 +1316,23 @@ a.cd-read-more:hover {
font-size: 15px;
}
#news ul li .blog .brief p {
line-height: 22px;
font-size: 14px;
padding: 35px;
line-height: 28px;
font-size: 15px;
padding: 25px;
text-indent: 30px;
}
#news ul li .blog .brief .moreBtn {
bottom: 10px;
bottom: 12px;
right: 18px;
padding: 7px 10px;
padding: 6px 9px;
border-radius: 4px;
font-size: 12px;
}
/*模态框效果*/
.am-modal {
left: 20%;
left: 25%;
top: 20%;
width: 60%;
width: 50%;
margin-left: 0px;
}
}
......@@ -1327,7 +1344,7 @@ a.cd-read-more:hover {
width: 25%;
text-align: center;
float: left;
font-size: 1.6rem;
font-size: 18px;
height: 100px;
line-height: 100px;
word-spacing: 0rem;
......@@ -1348,20 +1365,16 @@ a.cd-read-more:hover {
margin: 0rem;
color: #8a8a8a;
font-weight: bold;
font-size: 1.3rem;
font-size: 15px;
padding: 0 4px;
}
.language {
width: auto;
text-align: center;
color: #d4d4d4;
font-size: 1.2rem;
font-size: 12px;
padding: 0 10px;
}
.am-topbar-nav > li > a:after {
width: 77%;
left: 0.6rem;
}
.imgIntro {
width: 25%;
margin: 10px 70px;
......@@ -1377,9 +1390,12 @@ a.cd-read-more:hover {
color: #9b9b9b;
line-height: 20px;
word-spacing: 1px;
height: 500px;
/* height: 500px;*/
overflow: auto;
}
.am-topbar-collapse.am-collapse {
width: 74%;
}
.am-slider-default .am-direction-nav a:before {
font-size: 40px!important;
line-height: 40px!important;
......@@ -1439,10 +1455,10 @@ a.cd-read-more:hover {
#news ul li {
margin: 0 auto 20px;
padding: 20px;
width: 60%;
width: 65%;
}
#news ul li .blog h2 {
font-size: 20px;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
#news ul li .blog .date {
......@@ -1452,13 +1468,14 @@ a.cd-read-more:hover {
#news ul li .blog .brief p {
line-height: 25px;
font-size: 14px;
padding: 20px;
padding: 15px;
text-indent: 28px;
}
#news ul li .blog .brief .moreBtn {
bottom: 10px;
bottom: 11px;
right: 18px;
padding: 3px 6px;
border-radius: 2px;
padding: 4px 7px;
border-radius: 4px;
font-size: 12px;
}
/*模态框效果*/
......@@ -1470,9 +1487,95 @@ a.cd-read-more:hover {
}
}
@media (min-width: 640px) and (max-width: 850px) {
.am-with-topbar-fixed-top {
padding-top: 100px;
}
.am-topbar-brand {
width: 26%;
text-align: center;
float: left;
font-size: 18px;
height: 100px;
line-height: 100px;
word-spacing: 0rem;
padding: 0;
font-weight: bold;
letter-spacing: 1px;
}
.am-nav-pills > li {
height: 100px;
line-height: 100px;
float: left;
}
.am-nav-pills > li + li {
margin-left: 0px;
margin-top: 0;
}
.am-topbar-nav > li > a {
margin: 0rem;
color: #8a8a8a;
font-weight: bold;
font-size: 14px;
padding: 0 4px;
}
.language {
display: none;
}
.am-topbar-nav > li > a:after {
width: 77%;
left: 12%;
}
.imgIntro {
width: 25%;
margin: 10px 70px;
}
.imgIntro h3 {
font-size: 1.8rem;
line-height: 26px;
color: #e5e5e5;
margin-bottom: 3rem;
}
.imgIntro p {
font-size: 1.4rem;
color: #9b9b9b;
line-height: 20px;
word-spacing: 1px;
/* height: 500px;*/
overflow: auto;
}
.am-topbar-collapse.am-collapse {
width: 74%;
}
.am-slider-default .am-direction-nav a:before {
font-size: 40px!important;
line-height: 40px!important;
}
#news ul li {
margin: 0 auto 20px;
padding: 20px;
width: 80%;
}
#news ul li .blog h2 {
font-size: 14px;
margin: 0px 0px 10px 0px;
}
#news ul li .blog .date {
top: 5px;
font-size: 14px;
}
#news ul li .blog .brief p {
line-height: 23px;
font-size: 13px;
padding: 12px;
text-indent: 26px;
}
#news ul li .blog .brief .moreBtn {
bottom: 10px;
right: 10px;
padding: 4px 7px;
border-radius: 4px;
font-size: 12px;
}
}
/*移动端媒体样式*/
@media only screen and (max-width: 640px) {
......@@ -1515,6 +1618,7 @@ a.cd-read-more:hover {
margin: 10px 0;
}
#portfolioDel {
height: 100%;
position: absolute;
left: 0px;
}
......@@ -1711,6 +1815,10 @@ a.cd-read-more:hover {
max-height: 300px;
overflow: hidden;
}
.mobileTop #entry {
width: 100%;
position: absolute;
}
.mobileTop .title {
color: #fff;
position: absolute;
......@@ -1742,6 +1850,7 @@ a.cd-read-more:hover {
bottom: 0;
height: 102%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
.sileTop {
margin-top: 70px;
......@@ -1917,6 +2026,7 @@ a.cd-read-more:hover {
font-size: 14px;
text-align: left;
padding: 15px 15px 0px 15px;
text-indent: 28px;
}
#news ul li .blog .brief .moreBtn {
display: inline-block;
......
dist/html/biography.html
......@@ -81,7 +81,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -95,7 +95,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="am-container">
<section class="cd-container bg-timeline">
......
dist/html/exhibition.html
......@@ -78,7 +78,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -92,7 +92,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="am-container">
<ul class="am-gallery am-avg-sm-1 am-avg-md-2 am-avg-lg-2 am-gallery-overlay" id="exhibitionsUl" data-am-gallery="{ pureview: true }" >
......
dist/html/index.html
......@@ -49,7 +49,7 @@
<div class="am-container">
<div class="am-slider am-slider-default mobileTop" data-am-flexslider="{playAfterPaused: 8000}">
<div>
<div class="bgImg"><img src="../images/maskBg.png"/></div>
<div class="bgImg"></div>
<div class="title">
<h2>ZHONG WEIXING</h2>
<P><a>中文</a> | <a>English</a></P>
......@@ -57,30 +57,30 @@
</div>
<ul class="am-slides indexSlide" id="portfolioDel">
<li>
<div>
<div class="">
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<div class="">
<img src="../images/testImg4.png" />
</div>
</li>
<li>
<div>
<div class="">
<img src="../images/testImg2.png" />
</div>
</li>
<li>
<!-- <li>
<div>
<img src="../images/testImg3.png" />
<img src="../images/testImg31.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg4.png" />
<img src="../images/testImg41.png" />
</div>
</li>
</li>-->
</ul>
</div>
</div>
......
dist/html/news.html
......@@ -80,7 +80,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -94,7 +94,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="am-container">
<div id="news" >
......@@ -108,8 +112,8 @@
<img src="../images/testImg2.png" alt=""/>
</div>
<div class="right brief">
<p>网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。动手机WEB应用。般用于展示以时间为主线般用于展示以时间为主线 <b>...</b></p>
<p class="cut_str">网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可yyyyyyyyyyyyyy以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
网页4444时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。般用于展示以时间为主线般用于展示以时间为主线 </p>
<a href="./publicationsDetail.html" class="moreBtn"> more >> </a>
</div>
</div>
......@@ -124,7 +128,7 @@
<img src="../images/testImg4.png" alt=""/>
</div>
<div class="right brief">
<p>网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。<b>...</b></p>
<p class="cut_str">连日来，兰州交通大学的新生陆续开学报到，但网爆新生自行购买被褥入住桃海公寓遭拒引发学生不满和网友关注。8月31日，兰州交通大学回应西部商报记者采访称，经了解，当事学生从私人处购买无正规发票的被品入住桃海学生公寓，已经协调退回，桃海公寓并非不让学生自带被品入住，而是防止“黑心棉”流入学生宿舍，危害学生身体健康。 </p>
<a href="./publicationsDetail.html" class="moreBtn"> more >> </a>
</div>
</div>
......@@ -142,6 +146,48 @@
</a>
</div>
<input id="linkTitle" value="news" />
<script>
function cutString(str, len) {
//length属性读出来的汉字长度为1
if(str.length*2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for(var i = 0;i < str.length; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if(strlen >= len){
return s.substring(0,s.length-1) + "...";
}
} else {
strlen = strlen + 1;
if(strlen >= len){
return s.substring(0,s.length-2) + "...";
}
}
}
return s;
}
var winWidth = document.documentElement.clientWidth;
$(window).resize(function() {
fontAuto();
})
$(function(){
fontAuto();
})
function fontAuto(){
var p=$(".cut_str");
for(var i=0; i< p.size(); i++){
var str= p.eq(i).text();
var s=cutString(str,200);
p.eq(i).text(s);
}
}
</script>
</body>
</html>
\ No newline at end of file
dist/html/portfolio.html
......@@ -76,7 +76,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -90,7 +90,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="clear"></div>
<div class="am-container">
......
dist/html/portfolioDetail.html
......@@ -57,12 +57,12 @@
</div>
<div class="am-container">
<div class="am-slider am-slider-default" data-am-flexslider="{playAfterPaused: 8000}">
<!-- <div class="bgImg"><img src="../images/maskBg.png"/></div>-->
<ul class="am-slides" id="portfolioDel">
<li>
<div>
<img src="../images/testImg4.png" />
</div>
<div class="bgImg"></div>
<div class="imgIntro">
<h3>Front Cover: 3D Visualization for the Coastal Shallow Strata</h3>
<p>g with a little CSS to make it look nicer, it includes the album cover images, and the album names link to the Wikipedia pages for those albums.
......@@ -82,6 +82,7 @@
<div>
<img src="../images/testImg1.png" />
</div>
<div class="bgImg"></div>
<div class="imgIntro">
<h3>Front Cover: 3D Visualization for the Coastal Shallow Strata</h3>
<p>g with a little CSS to make it look nicer, it includes the album cover images, and the album names link to the Wikipedia pages for those albums.</p>
......
dist/html/project.html
......@@ -79,7 +79,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -93,7 +93,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="am-container">
......
dist/html/publications.html
......@@ -78,7 +78,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -92,7 +92,11 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
<div class="am-container">
......
dist/js/public.js
......@@ -20,6 +20,9 @@ function autoHeight2(obj,bi){
imgHeight=parseInt(Width*bi);
$(obj).parents('li').height(imgHeight);
}
function entryH(obj){
$(obj).height(winHeight);
}
$(function(){
/*导航条选中样式切换*/
var title= $("#linkTitle").val();
......@@ -48,12 +51,16 @@ $(function(){
autoHeight('#publicationsUl',1.35);
newsHeight("#news",1);
autoHeight2('.imgShow',1);
/*
var portfolioDelH=$(".am-viewport").height();
alert(portfolioDelH);
$("#entry").height(portfolioDelH);*/
}
/*portfolioDetail和index页面高度满屏*/
if(winWidth>414){
$("#portfolioDel li").css("max-height",winHeight-20);
}
/* if(winWidth>414){
$("#portfolioDel li").css("max-height",winHeight-20);
}*/
$(".indexSlide li").css("max-height",winHeight);
})
......@@ -66,6 +73,10 @@ $(window).resize(function() {
autoHeight('#publicationsUl',1.35);
newsHeight("#news",1);
autoHeight2('.imgShow',1);
/* var portfolioDelH=$(".am-viewport").height();
alert(portfolioDelH);
$("#entry").height(portfolioDelH);*/
}
});
......
src/js/public.js
......@@ -20,6 +20,9 @@ function autoHeight2(obj,bi){
imgHeight=parseInt(Width*bi);
$(obj).parents('li').height(imgHeight);
}
function entryH(obj){
$(obj).height(winHeight);
}
$(function(){
/*导航条选中样式切换*/
var title= $("#linkTitle").val();
......@@ -48,12 +51,16 @@ $(function(){
autoHeight('#publicationsUl',1.35);
newsHeight("#news",1);
autoHeight2('.imgShow',1);
var portfolioDelH=$("#portfolioDel").height();
alert(portfolioDelH);
$("#entry").height(portfolioDelH);
}
/*portfolioDetail和index页面高度满屏*/
if(winWidth>414){
$("#portfolioDel li").css("max-height",winHeight-20);
}
/* if(winWidth>414){
$("#portfolioDel li").css("max-height",winHeight-20);
}*/
$(".indexSlide li").css("max-height",winHeight);
})
......@@ -66,6 +73,10 @@ $(window).resize(function() {
autoHeight('#publicationsUl',1.35);
newsHeight("#news",1);
autoHeight2('.imgShow',1);
var portfolioDelH=$("#portfolioDel").height();
alert(portfolioDelH);
$("#entry").height(portfolioDelH);
}
});
......
src/less/style.less
......@@ -114,14 +114,18 @@ body{
line-height: 50px!important;
height: auto;
}
.am-slider .am-slides div.imgMask{
width: 100%;
display: block;
height: 100%;
background: rgba(0,0,0,0.20);
}
.am-slider .am-slides img {
width: 100%;
display: block;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: relative;
z-index: 3;
}
/*biography页面*/
......@@ -359,9 +363,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
font-size: 1.8rem;
}
.am-topbar-nav>li>a:after {
width: 83%;
width: 80%;
position: absolute;
left: 0.7rem;
left: 11%;
margin-left: 0;
bottom: 15px;
content: "";
......@@ -673,10 +677,14 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
color: #9b9b9b;
line-height: 25px;
word-spacing: 2px;
height: 680px;
max-height: 600px;
overflow: auto;
}
}
/* #entry{
width:100%;
position: absolute;
}*/
.bgImg{
position: absolute;
top: 0;
......@@ -686,18 +694,16 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
height: 100%;
width: 100%;
z-index: 8;
img{
width:100%;
height:100%;
}
background: rgba(0,0,0,0.2);
}
.title{
color: #fff;
position: absolute;
top: 45%;
z-index: 10;
top: 43%;
width: 100%;
text-align: center;
/* background: rgba(0,0,0,0.2);*/
h2{
font-size: 2.8rem;
line-height: 30px;
......@@ -706,12 +712,18 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
letter-spacing: 6px;
word-spacing: 6px;
font-weight: 400;
width:100%;
/* position: absolute;
top: 43%*/;
}
p{
font-size: 2.0rem;
line-height: 25px;
word-spacing: 6px;
letter-spacing: 2px;
width:100%;
/* position: absolute;
top: 50%;*/
a{
color: #c9c9c9;
}
......@@ -725,7 +737,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
/*新闻页博客效果*/
#news{
ul li{
width: 50%;
width: 47%;
margin: 0 auto 30px;
padding: 30px;
background: #fff;
......@@ -737,7 +749,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
text-align: left;
line-height: 30px;
margin: 0px 0px 15px 0px;
color: #ccc;
color: #666;
height: 30px;
overflow: hidden;
white-space: nowrap;
......@@ -765,18 +777,18 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
background: #eee;
width: 70%;
overflow: hidden;
a:hover{
color:#666;
}
p{
padding:50px;
line-height: 35px;
padding:35px;
line-height: 30px;
font-size: 16px;
text-align: left;
margin: 0px 0px 15px 0px;
text-overflow: ellipsis;
overflow: hidden;
height: 70%;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
color: #666;
text-indent: 32px;
}
.moreBtn{
display: block;
......@@ -788,6 +800,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
padding: 7px 13px;
border-radius: 4px;
font-size: 14px;
&:hover{
color:#e9e9e9;
}
}
}
}
......@@ -947,9 +962,10 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
ul li{
margin: 0 auto 25px;
padding: 25px;
width:55%;
.blog{
h2{
font-size: 20px;
font-size: 18px;
margin: 0px 0px 13px 0px;
}
.date{
......@@ -958,14 +974,15 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
.brief{
p{
line-height: 22px;
font-size: 14px;
padding: 35px;
line-height: 28px;
font-size: 15px;
padding: 25px;
text-indent: 30px;
}
.moreBtn{
bottom: 10px;
bottom: 12px;
right: 18px;
padding: 7px 10px;
padding: 6px 9px;
border-radius: 4px;
font-size: 12px;
}
......@@ -975,9 +992,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
/*模态框效果*/
.am-modal {
left: 20%;
left: 25%;
top: 20%;
width: 60%;
width: 50%;
margin-left: 0px;
}
}
......@@ -990,7 +1007,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
width: 25%;
text-align: center;
float: left;
font-size: 1.6rem;
font-size: 18px;
height: 100px;
line-height: 100px;
word-spacing: 0rem;
......@@ -1011,20 +1028,16 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
margin: 0rem;
color: #8a8a8a;
font-weight: bold;
font-size: 1.3rem;
font-size: 15px;
padding: 0 4px;
}
.language {
width: auto;
text-align: center;
color: #d4d4d4;
font-size: 1.2rem;
font-size: 12px;
padding: 0 10px;
}
.am-topbar-nav > li > a:after {
width: 77%;
left: 0.6rem;
}
.imgIntro {
width: 25%;
margin: 10px 70px;
......@@ -1039,10 +1052,13 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
color: #9b9b9b;
line-height: 20px;
word-spacing: 1px;
height: 500px;
/* height: 500px;*/
overflow: auto;
}
}
.am-topbar-collapse.am-collapse {
width: 74%;
}
.am-slider-default .am-direction-nav a:before {
font-size: 40px!important;
line-height: 40px!important;
......@@ -1104,10 +1120,10 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
ul li{
margin: 0 auto 20px;
padding: 20px;
width:60%;
width:65%;
.blog{
h2{
font-size: 20px;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.date{
......@@ -1118,13 +1134,14 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
p{
line-height: 25px;
font-size: 14px;
padding: 20px;
padding: 15px;
text-indent: 28px;
}
.moreBtn{
bottom: 10px;
bottom: 11px;
right: 18px;
padding: 3px 6px;
border-radius: 2px;
padding: 4px 7px;
border-radius: 4px;
font-size: 12px;
}
}
......@@ -1140,9 +1157,101 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
}
@media (min-width: 640px) and (max-width:850px){
.am-with-topbar-fixed-top {
padding-top: 100px;
}
.am-topbar-brand {
width: 26%;
text-align: center;
float: left;
font-size: 18px;
height: 100px;
line-height: 100px;
word-spacing: 0rem;
padding: 0;
font-weight: bold;
letter-spacing: 1px;
}
.am-nav-pills > li {
height: 100px;
line-height: 100px;
float: left;
}
.am-nav-pills>li+li {
margin-left: 0px;
margin-top: 0;
}
.am-topbar-nav > li > a {
margin: 0rem;
color: #8a8a8a;
font-weight: bold;
font-size: 14px;
padding: 0 4px;
}
.language {
display: none;
}
.am-topbar-nav > li > a:after {
width: 77%;
left: 12%;
}
.imgIntro {
width: 25%;
margin: 10px 70px;
h3{
font-size: 1.8rem;
line-height: 26px;
color: #e5e5e5;
margin-bottom: 3rem;
}
p{
font-size: 1.4rem;
color: #9b9b9b;
line-height: 20px;
word-spacing: 1px;
/* height: 500px;*/
overflow: auto;
}
}
.am-topbar-collapse.am-collapse {
width: 74%;
}
.am-slider-default .am-direction-nav a:before {
font-size: 40px!important;
line-height: 40px!important;
}
#news{
ul li{
margin: 0 auto 20px;
padding: 20px;
width:80%;
.blog{
h2{
font-size: 14px;
margin: 0px 0px 10px 0px;
}
.date{
top: 5px;
font-size: 14px;
}
.brief{
p{
line-height: 23px;
font-size: 13px;
padding: 12px;
text-indent: 26px;
}
.moreBtn{
bottom: 10px;
right: 10px;
padding: 4px 7px;
border-radius: 4px;
font-size: 12px;
}
}
}
}
}
}
/*移动端媒体样式*/
......@@ -1184,6 +1293,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
margin: 10px 0;
}
#portfolioDel{
height: 100%;
position: absolute;
left: 0px;
}
......@@ -1383,6 +1493,10 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
margin-top: 46%;
max-height: 300px;
overflow: hidden;
#entry{
width:100%;
position: absolute;
}
.title{
color: #fff;
position: absolute;
......@@ -1415,6 +1529,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
bottom: 0;
height: 102%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
.sileTop{
margin-top:70px;
......@@ -1589,6 +1704,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
font-size: 14px;
text-align: left;
padding:15px 15px 0px 15px;
text-indent: 28px;
}
.moreBtn{
display: inline-block;
......
src/pages/components/header.html
......@@ -30,7 +30,7 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="contact-modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">Contact
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');" >&times;</a>
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close onclick="activeStyle()" >&times;</a>
</div>
<div class="am-modal-bd">
<p>Tel: <b>15236999412</b></p>
......@@ -44,4 +44,8 @@
</div>
</div>
</div>
<script>
function activeStyle(){
$('#contact').removeClass('am-active');$('.am-nav').find('li').eq(n).addClass('am-active');
}
</script>
src/pages/index.ejs
......@@ -15,7 +15,7 @@
<div class="am-container">
<div class="am-slider am-slider-default mobileTop" data-am-flexslider="{playAfterPaused: 8000}">
<div>
<div class="bgImg"><img src="../images/maskBg.png"/></div>
<div class="bgImg"></div>
<div class="title">
<h2>ZHONG WEIXING</h2>
<P><a>中文</a> | <a>English</a></P>
......@@ -23,30 +23,30 @@
</div>
<ul class="am-slides indexSlide" id="portfolioDel">
<li>
<div>
<div class="">
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<div class="">
<img src="../images/testImg4.png" />
</div>
</li>
<li>
<div>
<div class="">
<img src="../images/testImg2.png" />
</div>
</li>
<li>
<!-- <li>
<div>
<img src="../images/testImg3.png" />
<img src="../images/testImg31.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg4.png" />
<img src="../images/testImg41.png" />
</div>
</li>
</li>-->
</ul>
</div>
</div>
......
src/pages/news.ejs
......@@ -27,8 +27,8 @@
<img src="../images/testImg2.png" alt=""/>
</div>
<div class="right brief">
<p>网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。动手机WEB应用。般用于展示以时间为主线般用于展示以时间为主线 <b>...</b></p>
<p class="cut_str">网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可yyyyyyyyyyyyyy以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
网页4444时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。般用于展示以时间为主线般用于展示以时间为主线 </p>
<a href="./publicationsDetail.html" class="moreBtn"> more >> </a>
</div>
</div>
......@@ -43,7 +43,7 @@
<img src="../images/testImg4.png" alt=""/>
</div>
<div class="right brief">
<p>网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。<b>...</b></p>
<p class="cut_str">连日来，兰州交通大学的新生陆续开学报到，但网爆新生自行购买被褥入住桃海公寓遭拒引发学生不满和网友关注。8月31日，兰州交通大学回应西部商报记者采访称，经了解，当事学生从私人处购买无正规发票的被品入住桃海学生公寓，已经协调退回，桃海公寓并非不让学生自带被品入住，而是防止“黑心棉”流入学生宿舍，危害学生身体健康。 </p>
<a href="./publicationsDetail.html" class="moreBtn"> more >> </a>
</div>
</div>
......@@ -55,6 +55,48 @@
<% include ./components/goTop.html %>
<input id="linkTitle" value="news" />
<script>
function cutString(str, len) {
//length属性读出来的汉字长度为1
if(str.length*2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for(var i = 0;i < str.length; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if(strlen >= len){
return s.substring(0,s.length-1) + "...";
}
} else {
strlen = strlen + 1;
if(strlen >= len){
return s.substring(0,s.length-2) + "...";
}
}
}
return s;
}
var winWidth = document.documentElement.clientWidth;
$(window).resize(function() {
fontAuto();
})
$(function(){
fontAuto();
})
function fontAuto(){
var p=$(".cut_str");
for(var i=0; i< p.size(); i++){
var str= p.eq(i).text();
var s=cutString(str,200);
p.eq(i).text(s);
}
}
</script>
</body>
</html>
\ No newline at end of file
src/pages/portfolioDetail.ejs
......@@ -23,12 +23,12 @@
</div>
<div class="am-container">
<div class="am-slider am-slider-default" data-am-flexslider="{playAfterPaused: 8000}">
<!-- <div class="bgImg"><img src="../images/maskBg.png"/></div>-->
<ul class="am-slides" id="portfolioDel">
<li>
<div>
<img src="../images/testImg4.png" />
</div>
<div class="bgImg"></div>
<div class="imgIntro">
<h3>Front Cover: 3D Visualization for the Coastal Shallow Strata</h3>
<p>g with a little CSS to make it look nicer, it includes the album cover images, and the album names link to the Wikipedia pages for those albums.
......@@ -48,6 +48,7 @@
<div>
<img src="../images/testImg1.png" />
</div>
<div class="bgImg"></div>
<div class="imgIntro">
<h3>Front Cover: 3D Visualization for the Coastal Shallow Strata</h3>
<p>g with a little CSS to make it look nicer, it includes the album cover images, and the album names link to the Wikipedia pages for those albums.</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment