Skip to content

Commit

Permalink
首页的移动端样式写好了，改掉了mouseover　MORE图标时报错的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuiRong
shuiRong committed Jun 27, 2017
1 parent e4d71f8 commit 0467f0d
Show file tree
Hide file tree
Showing 9 changed files with 255 additions and 174 deletions.
Binary file added Eva_SSR/BackEnd/public/images/link.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 35 additions & 17 deletions Eva_SSR/BackEnd/public/javascripts/home.js
View file
@@ -1,44 +1,62 @@
(function() {
document.getElementsByClassName('bg')[0].style.height = `${document.documentElement.clientHeight}px`;
var $ = function(arr) {
return document.getElementsByClassName(arr)[0]
}


$('bg').style.height = `${document.documentElement.clientHeight}px`;

window.onload = function() {
window.onresize = function temp() {
document.getElementsByClassName('bg')[0].style.height = `${document.documentElement.clientHeight}px`;
$('bg').style.height = `${document.documentElement.clientHeight}px`;
};
}

// more 的hover样式
document.getElementsByClassName('more')[0].addEventListener('mouseover', function() {
document.getElementsByClassName('more')[0].style.background = 'white'
$('more').addEventListener('mouseover', function() {
$('more').style.background = 'white'

let arr = document.getElementsByClassName('dot')
for (let i in arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].style.background = '#8492A6'
}
}, false)

// more 的hover样式
document.getElementsByClassName('more')[0].addEventListener('mouseleave', function() {
document.getElementsByClassName('more')[0].style.background = 'transparent'
$('more').addEventListener('mouseleave', function() {
$('more').style.background = 'transparent'

let arr = document.getElementsByClassName('dot')
for (let i in arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].style.background = 'white'
}
}, false)

document.getElementsByClassName('more')[0].addEventListener('click', function() {
document.getElementsByClassName('dialog')[0].style.display = 'block'
document.getElementsByClassName('cover')[0].style.display = 'block'
$('more').addEventListener('click', function() {
$('dialog').style.display = 'block'
$('cover').style.display = 'block'
}, false)

$('cancel').addEventListener('click', function() {
$('dialog').style.display = 'none'
$('cover').style.display = 'none'
}, false)

document.getElementsByClassName('cancel')[0].addEventListener('click', function() {
document.getElementsByClassName('dialog')[0].style.display = 'none'
document.getElementsByClassName('cover')[0].style.display = 'none'
$('cover').addEventListener('click', function() {
$('dialog').style.display = 'none'
$('cover').style.display = 'none'
}, false)

// －－－－－－－－－－－－移动端函数－－－－－－－－－－－

// 隐藏链接页，通过点击空白处
$('phone-dialog').addEventListener('click', function(e) {
if (e.target.className === 'phone-dialog') {
$('phone-dialog').style.display = 'none'
}
}, false)

document.getElementsByClassName('cover')[0].addEventListener('click', function() {
document.getElementsByClassName('dialog')[0].style.display = 'none'
document.getElementsByClassName('cover')[0].style.display = 'none'
$('phone-header-icon').addEventListener('click', function() {
$('phone-dialog').style.display = 'flex'
}, false)
})()
241 changes: 117 additions & 124 deletions Eva_SSR/BackEnd/public/stylesheets/home.css
View file
Expand Up @@ -2,11 +2,6 @@
--main-font-size: 20px;
}

body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: var(--main-font-size);
}

span,
div,
p,
Expand All @@ -19,125 +14,123 @@ body {
margin: 0;
}

.bg {
background: url('/images/girl-min.jpg');
position: fixed;
top: 0;
left: 0;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 600px;
opacity: 0.8;
z-index: -10;
}

a {
color: #1F2D3D;
text-decoration: none;
}

.container {
margin-left: 10%;
margin-top: 2rem;
}

.mainSec {
width: 50%;
min-height: 20rem;
}

.list {
background: white;
opacity: 0.7;
margin-bottom: 1rem;
padding: 1rem;
min-height: 2rem;
}

.list a {
font-size: 25px;
}

.list .tag {
display: inline-block;
font-size: 15px;
background: #e4e8f1;
color: #48576a;
margin: 0.5rem 0.5rem 0 0;
padding: 0.1rem 0.3rem;
border-radius: 5px;
}

.more {
position: absolute;
background: transparent;
top: 2rem;
right: 5rem;
z-index: 10;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.more span {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: white;
margin: 0 2px;
}

.cover {
background: black;
opacity: 0.3;
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 999px;
z-index: 100;
display: none;
}

.dialog {
background: white;
width: 30%;
padding: 1rem;
height: 6rem;
position: absolute;
top: 10rem;
margin-left: 35%;
z-index: 200;
display: none;
}

.dialog .cancel {
position: absolute;
top: 1rem;
right: 1rem;
color: #475669;
}

.dialog p {
color: #8492A6;
}

.dialog .link {
margin-top: 1rem;
font-size: 25px;
color: #475669;
body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: var(--main-font-size);
}

.dialog .motto {
width: fit-content;
color: #99A9BF;
letter-spacing: 2px;
position: absolute;
bottom: 1rem;
right: 2rem;
@media (min-width: 769px) {
/*隐藏移动端才需要的div*/
.phone-header,
.phone-dialog {
display: none;
}
.bg {
background: url('/images/girl-min.jpg');
position: fixed;
top: 0;
left: 0;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 600px;
opacity: 0.8;
z-index: -10;
}
a {
color: #1F2D3D;
text-decoration: none;
}
.container {
margin-left: 10%;
margin-top: 2rem;
}
.mainSec {
width: 50%;
min-height: 20rem;
}
.list {
background: white;
opacity: 0.7;
margin-bottom: 1rem;
padding: 1rem;
min-height: 2rem;
}
.list a {
font-size: 25px;
}
.list .tag {
display: inline-block;
font-size: 15px;
background: #e4e8f1;
color: #48576a;
margin: 0.5rem 0.5rem 0 0;
padding: 0.1rem 0.3rem;
border-radius: 5px;
}
.more {
position: absolute;
background: transparent;
top: 2rem;
right: 5rem;
z-index: 10;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.more span {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: white;
margin: 0 2px;
}
.cover {
background: black;
opacity: 0.3;
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 100;
display: none;
}
.dialog {
background: white;
width: 30%;
padding: 1rem;
height: 6rem;
position: absolute;
top: 10rem;
margin-left: 35%;
z-index: 200;
display: none;
}
.dialog .cancel {
position: absolute;
top: 1rem;
right: 1rem;
color: #475669;
}
.dialog p {
color: #8492A6;
}
.dialog .link {
margin-top: 1rem;
font-size: 25px;
color: #475669;
}
.dialog .motto {
width: fit-content;
color: #99A9BF;
letter-spacing: 2px;
position: absolute;
bottom: 1rem;
right: 2rem;
}
}

0 comments on commit 0467f0d

Please sign in to comment.