1 month ago · b80f5d89c2
--- a/README.md
+++ b/README.md
@@ -0,0 +1,2 @@
 
				+### 项目介绍

			
 
				+本项目为基于原生的万账房查账页面

			
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -0,0 +1,48 @@
 
				+@keyframes fadeIn {

			
 
				+  from {

			
 
				+    display: block;

			
 
				+    opacity: 0;

			
 
				+  }

			
 
				+  to {

			
 
				+    opacity: 1;

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+@keyframes fadeOut {

			
 
				+  from {

			
 
				+    opacity:1;

			
 
				+  }

			
 
				+  to {

			
 
				+    opacity: 0;

			
 
				+    display: none;

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.dialog-container {

			
 
				+  position: fixed;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  display: none;

			
 
				+  width: 100vw;

			
 
				+  height: 100vh;

			
 
				+  opacity: 0;

			
 
				+  z-index: 10;

			
 
				+}

			
 
				+

			
 
				+.dialog-container.opacity-1 {

			
 
				+  opacity: 1;

			
 
				+}

			
 
				+

			
 
				+.dialog-container.fade-in {

			
 
				+  animation: fadeIn 0.5s ease-in-out;

			
 
				+}

			
 
				+

			
 
				+.dialog-container.fade-out {

			
 
				+  animation: fadeOut 0.5s ease-in-out;

			
 
				+}

			
 
				+

			
 
				+.dialog-container .mark {

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+  background-color: rgba(0, 0, 0, 0.5);

			
 
				+}
			
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,10 @@
 
				+body, html, p, h3, h6 {

			
 
				+  margin: 0;

			
 
				+  padding: 0;

			
 
				+}

			
 
				+

			
 
				+.cwzb-container {

			
 
				+  width: 100px;

			
 
				+  height: 100px;

			
 
				+  background-color: black;

			
 
				+}
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,28 @@
 
				+<html lang="en">

			
 
				+<head>

			
 
				+  <meta charset="UTF-8">

			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+  <title>查账</title>

			
 
				+

			
 
				+  <link rel="stylesheet" href="./css/index.css">

			
 
				+  <link rel="stylesheet" href="./css/dialog.css">

			
 
				+</head>

			
 
				+<body>

			
 
				+  <header class="header-container"></header>

			
 
				+  <section class="cwzb-container"></section>

			
 
				+  <section class="szqk-container"></section>

			
 
				+  <section class="nsqk-container"></section>

			
 
				+

			
 
				+  <div class="dialog-container fade-in">

			
 
				+    <div class="mark"></div>

			
 
				+    <div class="dialog-content"></div>

			
 
				+  </div>

			
 
				+

			
 
				+  <script src="./js/echarts.min.js"></script>

			
 
				+  <script src="./js/index.js"></script>

			
 
				+

			
 
				+  <script>

			
 
				+    init()

			
 
				+  </script>

			
 
				+</body>

			
 
				+</html>
			
--- a/js/echarts.min.js
+++ b/js/echarts.min.js
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,38 @@
 
				+const dialogCon = document.querySelector('.dialog-container')

			
 
				+

			
 
				+function init() {

			
 
				+  showCwzbClickFunc()

			
 
				+}

			
 
				+

			
 
				+function showCwzbClickFunc() {

			
 
				+  const cwzbCon = document.querySelector('.cwzb-container')

			
 
				+  cwzbCon.addEventListener('click', showDialog)

			
 
				+}

			
 
				+

			
 
				+function showDialog() {

			
 
				+  console.log('showDialog')

			
 
				+  dialogCon.style.display = 'block'

			
 
				+  dialogCon.classList.add('opacity-1')

			
 
				+  setTimeout(() => {

			
 
				+    // dialogCon.classList.remove('fade-in')

			
 
				+    // dialogCon.classList.add('opacity-1')

			
 
				+    // dialogCon.classList.add('fade-out')

			
 
				+    // dialogCon.classList.add('opacity-1')

			
 
				+  }, 600)

			
 
				+  addCloseDialogEvent()

			
 
				+}

			
 
				+

			
 
				+function addCloseDialogEvent() {

			
 
				+  const mark = document.querySelector('.dialog-container .mark')

			
 
				+  mark.addEventListener('click', closeDialog)

			
 
				+}

			
 
				+

			
 
				+function closeDialog() {

			
 
				+  dialogCon.classList.remove('fade-in')

			
 
				+  dialogCon.classList.add('fade-out')

			
 
				+

			
 
				+  setTimeout(() => {

			
 
				+    dialogCon.classList.remove('opacity-1')

			
 
				+    dialogCon.style.display = 'none'

			
 
				+  }, 500)

			
 
				+}