甲方确认样式
This commit is contained in:
parent
a2f0d916fb
commit
e61ded75b1
@ -1,21 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<meta name="菜单" id="base_meta_title">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="no">
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<meta name="菜单" id="base_meta_title">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||||
|
<!-- 自定义应用名称 -->
|
||||||
|
<meta name="application-name" content="菜单">
|
||||||
|
<!-- 自定义图标 -->
|
||||||
|
<link rel="apple-touch-icon-precomposed" sizes="167*167" href="../src/assets/coffee1.png">
|
||||||
|
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>
|
||||||
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
BIN
src/assets/两个菜单.jpg
Normal file
BIN
src/assets/两个菜单.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/两个菜单2.jpg
Normal file
BIN
src/assets/两个菜单2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@ -2,17 +2,15 @@
|
|||||||
<div class="index">
|
<div class="index">
|
||||||
|
|
||||||
<div id="page">
|
<div id="page">
|
||||||
<img src="../assets/page1.png" alt="" class="pic">
|
<img src="../assets/两个菜单.jpg" alt="" class="pic">
|
||||||
<img src="../assets/page2.jpg" alt="" class="pic">
|
<img src="../assets/两个菜单2.jpg" alt="" class="pic">
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden hi1"></div>
|
<div class="hidden"></div>
|
||||||
<div class="hidden hi2"></div>
|
|
||||||
<div class="hidden hi3"></div>
|
|
||||||
<div class="hidden hi4"></div>
|
|
||||||
<!-- <div class="hidden hi"></div> -->
|
<!-- <div class="hidden hi"></div> -->
|
||||||
|
|
||||||
<div class="page1 i1-1">
|
<div class="page1 i1-1">
|
||||||
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
||||||
|
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="page1 i1-2">
|
<div class="page1 i1-2">
|
||||||
@ -147,17 +145,15 @@ export default {
|
|||||||
page2 = document.getElementsByClassName('page2')
|
page2 = document.getElementsByClassName('page2')
|
||||||
|
|
||||||
let hidden = document.querySelector('.hidden')
|
let hidden = document.querySelector('.hidden')
|
||||||
let hiddenList = document.querySelectorAll('.hidden')
|
// let hiddenList = document.querySelectorAll('.hidden')
|
||||||
// 给每个商品添加点击事件
|
// 给每个商品添加点击事件
|
||||||
for (let i = 0; i < page1.length; i++) {
|
for (let i = 0; i < page1.length; i++) {
|
||||||
page1[i].addEventListener('click', () => {
|
page1[i].addEventListener('click', () => {
|
||||||
console.log('isActived', isActived)
|
console.log('isActived', isActived)
|
||||||
if (isActived) {
|
if (isActived) {
|
||||||
// 回到主菜单
|
// 回到主菜单
|
||||||
// hidden.classList.remove('hidding')
|
hidden.classList.remove('hidding')
|
||||||
hiddenList.forEach(item => {
|
|
||||||
item.classList.remove('hidding')
|
|
||||||
})
|
|
||||||
activeDiv.classList.remove('parent')
|
activeDiv.classList.remove('parent')
|
||||||
activeDiv.children[0].classList.remove('child')
|
activeDiv.children[0].classList.remove('child')
|
||||||
activeDiv.children[0].classList.add('zIndex10')
|
activeDiv.children[0].classList.add('zIndex10')
|
||||||
@ -165,10 +161,8 @@ export default {
|
|||||||
isActived = false
|
isActived = false
|
||||||
} else {
|
} else {
|
||||||
// 记录当前点击的div，改变样式
|
// 记录当前点击的div，改变样式
|
||||||
// hidden.classList.add('hidding')
|
hidden.classList.add('hidding')
|
||||||
hiddenList.forEach(item => {
|
|
||||||
item.classList.add('hidding')
|
|
||||||
})
|
|
||||||
activeDiv = page1[i]
|
activeDiv = page1[i]
|
||||||
activeDiv.classList.remove('zIndex10')
|
activeDiv.classList.remove('zIndex10')
|
||||||
activeDiv.classList.add('parent')
|
activeDiv.classList.add('parent')
|
||||||
@ -190,17 +184,29 @@ export default {
|
|||||||
}
|
}
|
||||||
for (let i = 0; i < page2.length; i++) {
|
for (let i = 0; i < page2.length; i++) {
|
||||||
page2[i].addEventListener('click', () => {
|
page2[i].addEventListener('click', () => {
|
||||||
isActived = true
|
console.log('isActived', isActived)
|
||||||
// hidden.classList.add('hidding')
|
if (isActived) {
|
||||||
hiddenList.forEach(item => {
|
// 回到主菜单
|
||||||
item.classList.add('hidding')
|
hidden.classList.remove('hidding')
|
||||||
})
|
|
||||||
// 记录当前点击的div，改变样式
|
activeDiv.classList.remove('parent')
|
||||||
activeDiv = page2[i]
|
activeDiv.children[0].classList.remove('child')
|
||||||
activeDiv.classList.add('parent')
|
activeDiv.children[0].classList.add('zIndex10')
|
||||||
activeDiv.children[0].classList.add('child')
|
// hidden.classList.remove('hidding')
|
||||||
activeDiv.classList.remove('zIndex10')
|
isActived = false
|
||||||
|
} else {
|
||||||
|
// 记录当前点击的div，改变样式
|
||||||
|
hidden.classList.add('hidding')
|
||||||
|
|
||||||
|
activeDiv = page2[i]
|
||||||
|
activeDiv.classList.remove('zIndex10')
|
||||||
|
activeDiv.classList.add('parent')
|
||||||
|
activeDiv.children[0].classList.add('child')
|
||||||
|
// hidden.classList.add('hidding')
|
||||||
|
isActived = true
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
// 点击回到主菜单
|
// 点击回到主菜单
|
||||||
document.querySelector('.hidden').addEventListener('click', () => {
|
document.querySelector('.hidden').addEventListener('click', () => {
|
||||||
@ -209,10 +215,8 @@ export default {
|
|||||||
activeDiv.classList.remove('parent')
|
activeDiv.classList.remove('parent')
|
||||||
activeDiv.children[0].classList.remove('child')
|
activeDiv.children[0].classList.remove('child')
|
||||||
activeDiv.children[0].classList.add('zIndex10')
|
activeDiv.children[0].classList.add('zIndex10')
|
||||||
// hidden.classList.remove('hidding')
|
hidden.classList.remove('hidding')
|
||||||
hiddenList.forEach(item => {
|
|
||||||
item.classList.remove('hidding')
|
|
||||||
})
|
|
||||||
isActived = false
|
isActived = false
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -239,9 +243,6 @@ export default {
|
|||||||
turning: function (e, page, view) {
|
turning: function (e, page, view) {
|
||||||
// console.log("turning", e, page, view)
|
// console.log("turning", e, page, view)
|
||||||
// 翻页前触发
|
// 翻页前触发
|
||||||
},
|
|
||||||
turned: function (e, page) {
|
|
||||||
// console.log("turned", e, page)
|
|
||||||
document.querySelector('.index').removeEventListener('touchend', touchendHandle)
|
document.querySelector('.index').removeEventListener('touchend', touchendHandle)
|
||||||
if (page === 2) {
|
if (page === 2) {
|
||||||
for (let i = 0; i < page1.length; i++) {
|
for (let i = 0; i < page1.length; i++) {
|
||||||
@ -274,6 +275,10 @@ export default {
|
|||||||
document.querySelector('.lt').style.zIndex = 99
|
document.querySelector('.lt').style.zIndex = 99
|
||||||
document.querySelector('.lb').style.zIndex = 99
|
document.querySelector('.lb').style.zIndex = 99
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
turned: function (e, page) {
|
||||||
|
// console.log("turned", e, page)
|
||||||
|
|
||||||
// 翻页后触发
|
// 翻页后触发
|
||||||
},
|
},
|
||||||
start: function (e, pageObj) {
|
start: function (e, pageObj) {
|
||||||
@ -362,12 +367,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
/* width: 100%;
|
width: 100%;
|
||||||
height: 100%; */
|
height: 100%;
|
||||||
background-color: rgb(0, 0, 0);
|
background-color: rgb(0, 0, 0);
|
||||||
/* position: absolute;
|
position: absolute;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
left: 0%; */
|
left: 0%;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
@ -375,46 +380,12 @@ export default {
|
|||||||
transition-timing-function: linear;
|
transition-timing-function: linear;
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
}
|
}
|
||||||
.hi{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
left: 0%
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidding {
|
.hidding {
|
||||||
z-index: 50 !important;
|
z-index: 50 !important;
|
||||||
opacity: 0.5 !important;
|
opacity: 0.5 !important;
|
||||||
}
|
}
|
||||||
.hi1{
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
left: 0%;
|
|
||||||
}
|
|
||||||
.hi2{
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
right: 0%;
|
|
||||||
}
|
|
||||||
.hi3{
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
left: 0%;
|
|
||||||
}
|
|
||||||
.hi4{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0%;
|
|
||||||
left: 0%;
|
|
||||||
}
|
|
||||||
.hi1,.hi2{
|
|
||||||
width: 137px;
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
.hi3,.hi4{
|
|
||||||
width: 1366px;
|
|
||||||
height: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pic {
|
.pic {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user