diff --git a/business.html b/business.html
new file mode 100644
index 0000000..feca227
--- /dev/null
+++ b/business.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <link href="./css/business.css" rel="stylesheet">
+  <title>个人中心</title>
+</head>
+<!-- 嵌入头部 -->
+<script src="./js/jquery.js" type="text/javascript"></script>
+<script>
+  $(function () {
+    $("#header").load("./header.html");
+  });
+  $(function () {
+    $("#footer").load("./footer.html");
+  });
+</script>
+<body>
+<div class="secure">
+  <div class="secure-box">
+    <!-- 头部占位 -->
+    <div id="header"></div>
+    <!-- 页面内容 -->
+    <div class="secure-content-wrap">
+      <div class="secure-content" style="display: flex;flex-direction: column;width: 100%;min-height: 200px">
+
+        <h1 style="margin-top: -30px">带分页的网络数据表格</h1>
+
+        <div class="controls">
+          <div>
+            <button id="fetchData">获取数据</button>
+            <!--            <button id="clearData">清空表格</button>-->
+          </div>
+          <div>
+            每页显示:
+            <select id="pageSize" class="page-size-selector">
+              <option value="2">2</option>
+              <option value="5">5</option>
+              <option selected value="10">10</option>
+              <option value="20">20</option>
+              <option value="50">50</option>
+            </select>
+          </div>
+        </div>
+
+        <div id="loading" class="loading" style="display: none;">正在加载数据...</div>
+        <div id="error" class="error" style="display: none;"></div>
+
+        <div id="tableContainer">
+          <table id="dataTable">
+            <thead>
+            <tr>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">序号</th>
+              <th style="background-color: #4CC3A5;text-align: center;color: #ffffff">客户名称</th>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">录入人名称</th>
+              <th style="background-color: #4CC3A5;text-align: center;color: #ffffff">我方签订人</th>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">甲方签订人</th>
+              <th style="background-color: #4CC3A5;text-align: center;color: #ffffff">签定时间</th>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">终止时间</th>
+              <th style="background-color: #4CC3A5;text-align: center;color: #ffffff">合同金额</th>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">发票情况</th>
+              <th style="background-color: #4CC3A5;text-align: center;color: #ffffff">回款情况</th>
+              <th style="background-color: #334863;text-align: center;color: #ffffff">备注</th>
+            </tr>
+            </thead>
+            <tbody id="tableBody" style="background-color: #ffffff">
+            <!-- 数据将通过JavaScript动态插入 -->
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination">
+          <button id="firstPage">首页</button>
+          <button id="prevPage">上一页</button>
+          <span id="pageInfo" class="page-info">第 0 页 / 共 0 页</span>
+          <button id="nextPage">下一页</button>
+          <button id="lastPage">末页</button>
+        </div>
+
+
+      </div>
+    </div>
+  </div>
+  <!-- 底部占位 -->
+  <div id="footer"></div>
+</div>
+
+</body>
+
+
+<script>
+    const fetchBtn = document.getElementById('fetchData');
+    const clearBtn = document.getElementById('clearData');
+    const tableBody = document.getElementById('tableBody');
+    const loadingDiv = document.getElementById('loading');
+    const errorDiv = document.getElementById('error');
+    const pageSizeSelect = document.getElementById('pageSize');
+
+    // 分页按钮
+    const firstPageBtn = document.getElementById('firstPage');
+    const prevPageBtn = document.getElementById('prevPage');
+    const nextPageBtn = document.getElementById('nextPage');
+    const lastPageBtn = document.getElementById('lastPage');
+    const pageInfoSpan = document.getElementById('pageInfo');
+
+    // 分页状态
+    let currentPage = 1;
+    let totalPages = 0;
+    let pageSize = 10;
+    let allData = [];
+
+    // 初始化按钮状态
+    updatePaginationButtons();
+
+    // 获取数据按钮点击事件
+    fetchBtn.addEventListener('click', fetchData);
+
+    // 清空表格按钮点击事件
+    // clearBtn.addEventListener('click', function () {
+    //   tableBody.innerHTML = '';
+    //   errorDiv.style.display = 'none';
+    //   allData = [];
+    //   currentPage = 1;
+    //   totalPages = 0;
+    //   updatePageInfo();
+    //   updatePaginationButtons();
+    // });
+
+    // 分页按钮事件
+    firstPageBtn.addEventListener('click', () => goToPage(1));
+    prevPageBtn.addEventListener('click', () => goToPage(currentPage - 1));
+    nextPageBtn.addEventListener('click', () => goToPage(currentPage + 1));
+    lastPageBtn.addEventListener('click', () => goToPage(totalPages));
+
+    // 每页显示数量变化事件
+    pageSizeSelect.addEventListener('change', function () {
+      pageSize = parseInt(this.value);
+      if (allData.length > 0) {
+        totalPages = Math.ceil(allData.length / pageSize);
+        currentPage = Math.min(currentPage, totalPages);
+        renderTable();
+        updatePageInfo();
+        updatePaginationButtons();
+      }
+    });
+
+    // 获取数据函数
+    function fetchData() {
+      // 显示加载中
+      loadingDiv.style.display = 'block';
+      errorDiv.style.display = 'none';
+
+      // 设置Cookie
+      document.cookie = localStorage.getItem('token');
+
+      $.post('http://aos.yyundong.com/ycsafe/website/contract/list', {
+        'pageIndex': pageSize,
+        'limit': currentPage,
+      }, function(resp) {
+        console.log(">>>>>>>>>>>>>>",resp);
+      });
+
+
+      // 使用JSONPlaceholder API作为示例数据源
+      // fetch('https://jsonplaceholder.typicode.com/users')
+      //   .then(response => {
+      //     if (!response.ok) {
+      //       throw new Error('网络响应不正常');
+      //     }
+      //     return response.json();
+      //   })
+      //   .then(data => {
+      //     allData = data;
+      //     pageSize = parseInt(pageSizeSelect.value);
+      //     totalPages = Math.ceil(allData.length / pageSize);
+      //     currentPage = 1;
+      //
+      //     renderTable();
+      //     updatePageInfo();
+      //     updatePaginationButtons();
+      //
+      //     loadingDiv.style.display = 'none';
+      //   })
+      //   .catch(error => {
+      //     console.error('获取数据出错:', error);
+      //     loadingDiv.style.display = 'none';
+      //     errorDiv.textContent = '获取数据失败: ' + error.message;
+      //     errorDiv.style.display = 'block';
+      //   });
+    }
+
+    // 渲染表格函数
+    function renderTable() {
+      // 清空表格
+      tableBody.innerHTML = '';
+
+      // 计算当前页的数据范围
+      const startIndex = (currentPage - 1) * pageSize;
+      const endIndex = Math.min(startIndex + pageSize, allData.length);
+
+      // 填充当前页的数据到表格
+      for (let i = startIndex; i < endIndex; i++) {
+        const user = allData[i];
+        const row = document.createElement('tr');
+
+        const idCell = document.createElement('td');
+        idCell.textContent = i+1;
+        row.appendChild(idCell);
+
+        const customerName_ = document.createElement('td');
+        customerName_.textContent = user.customerName_;
+        row.appendChild(customerName_);
+
+        const accountName_ = document.createElement('td');
+        accountName_.textContent = user.accountName_;
+        row.appendChild(accountName_);
+
+        const staffName_ = document.createElement('td');
+        staffName_.textContent = user.staffName_;
+        row.appendChild(staffName_);
+
+        const customerSignatory_ = document.createElement('td');
+        customerSignatory_.textContent = user.address.customerSignatory_;
+        row.appendChild(customerSignatory_);
+
+        const signTime = document.createElement('td');
+        signTime.textContent = user.address.signTime;
+        row.appendChild(signTime);
+
+        const endTime = document.createElement('td');
+        endTime.textContent = user.address.endTime;
+        row.appendChild(endTime);
+
+        const amount = document.createElement('td');
+        amount.textContent = user.address.amount;
+        row.appendChild(amount);
+
+        const fapiao = document.createElement('td');
+        fapiao.textContent = user.address.fapiao;
+        row.appendChild(fapiao);
+
+        const dso = document.createElement('td');
+        dso.textContent = user.address.dso;
+        row.appendChild(dso);
+
+        const content = document.createElement('td');
+        content.textContent = user.address.content;
+        row.appendChild(content);
+
+        tableBody.appendChild(row);
+      }
+    }
+
+    // 跳转到指定页
+    function goToPage(page) {
+      console.log("goToPage>>>>>>>",page);
+      console.log("goToPage>>>>>>>",totalPages);
+      console.log("goToPage>>>>>>>",currentPage);
+      if (page < 1 || page > totalPages || page === currentPage) return;
+
+      currentPage = page;
+      renderTable();
+      updatePageInfo();
+      updatePaginationButtons();
+    }
+
+    // 更新分页信息
+    function updatePageInfo() {
+      pageInfoSpan.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
+    }
+
+    // 更新分页按钮状态
+    function updatePaginationButtons() {
+      firstPageBtn.disabled = currentPage === 1 || totalPages === 0;
+      prevPageBtn.disabled = currentPage === 1 || totalPages === 0;
+      nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
+      lastPageBtn.disabled = currentPage === totalPages || totalPages === 0;
+    }
+</script>
+<script>
+  function openPopuptc() {
+    // 判断是否登录
+    // if(!isLogin){
+    //   window.location.href = 'login.html';
+    // }else {
+    //   document.getElementById("tcpopup").style.display = "block";
+    // }
+    document.getElementById("tcpopup").style.display = "block";
+
+  }
+
+  function closePopuptc() {
+    document.getElementById("tcpopup").style.display = "none";
+  }
+
+
+  function openPopup() {
+    document.getElementById("popup").style.display = "block";
+    document.getElementById("mask").style.display = "block";
+    time = Date.now()
+    $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
+      .now());
+  }
+
+  function closePopup() {
+    document.getElementById("popup").style.display = "none";
+    document.getElementById("mask").style.display = "none";
+  }
+
+  // 提交名字函数
+  function submitName() {
+    let name = $('#inputName').val();
+    let telephone = $('#inputPhone').val();
+    let companyName = $('#inputCompany').val();
+    let captcha = $('#inputCode').val();
+
+    $("#inputName").blur(function () {
+      if (!name) {
+        $(this).removeClass("warning");
+      }
+    });
+    $("#inputPhone").blur(function () {
+      if (!telephone) {
+        $(this).removeClass("warning");
+      }
+    });
+    $("#inputCompany").blur(function () {
+      if (!companyName) {
+        $(this).removeClass("warning");
+      }
+    });
+    $("#inputCode").blur(function () {
+      if (!captcha) {
+        $(this).removeClass("warning");
+      }
+    });
+
+    if (!name) {
+      document.getElementById("inputName").classList.add("warning");
+      document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
+    }
+    if (!telephone) {
+      document.getElementById("inputPhone").classList.add("warning");
+      document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
+    }
+    if (!companyName) {
+      document.getElementById("inputCompany").classList.add("warning");
+      document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
+    }
+    if (!captcha) {
+      document.getElementById("inputCode").classList.add("warning");
+      document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
+      return;
+    }
+
+    $.post('http://aos.yyundong.com/ycsafe//business/buy/9', {
+      'name': name,
+      'telephone': telephone,
+      'companyName': companyName,
+      'captcha': captcha,
+      'timestamp': time,
+    }, function (resp) {
+      if (!!resp && !!resp.result) {
+        alert('您的意向信息已提交，我们将尽快与您取得联系！');
+        document.getElementById("popup").style.display = "none";
+        document.getElementById("mask").style.display = "none";
+        document.getElementById("inputName").value = ''
+        document.getElementById("inputPhone").value = ''
+        document.getElementById("inputCompany").value = ''
+        document.getElementById("inputCode").value = ''
+      } else {
+        document.getElementById("inputName").value = ''
+        alert(resp.message);
+      }
+    });
+  }
+
+  function changeCodeImg() {
+    time = Date.now()
+    $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
+      .now());
+  }
+</script>
+</html>
diff --git a/css/business.css b/css/business.css
new file mode 100644
index 0000000..a119e35
--- /dev/null
+++ b/css/business.css
@@ -0,0 +1,447 @@
+/* 公共样式 */
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+/* 整个背景图 */
+.secure {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
+  background: url("../images/bg4.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+/* 右侧图 */
+/* .secure-box {
+   width: 100%;
+  min-height: 100vh;
+  background: url("../images/img2.png");
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-size: contain;
+} */
+.secure-content-wrap{
+  /* padding: 8rem 0; */
+  padding: 5% 0;
+}
+.secure-content {
+  max-width: 90%;
+  display: flex;
+  margin: 0 auto;
+  /* padding: 2rem 0; */
+}
+.secure-content__left{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.secure-content__right{
+  width: 50%;
+  padding: 0 1rem;
+}
+.secure--content__right--image{
+  width:100%;
+}
+.secure-content--title {
+  font-size: 2.25rem;
+  font-weight: bold;
+  color: #333333;
+  line-height: 3.875rem;
+}
+.secure-content--model {
+  font-size: 1.375rem;
+  font-weight: 400;
+  color: #333333;
+  line-height: 3.25rem;
+  margin-top: 2rem;
+  margin-bottom: 5.0625rem;
+}
+.secure-content--model__item {
+  display: flex;
+  align-items: center;
+}
+.secure-content--model__round {
+  width: .4375rem;
+  height: .4375rem;
+  background: #333333;
+  border-radius: 50%;
+  margin-right: 1rem;
+}
+.secure-content--operate {
+  display: flex;
+  justify-content: center;
+  /* margin-top: 5rem; */
+  margin-top: 8%;
+}
+.secure-content--operate__made {
+  width: 17.5rem;
+  height: 3.125rem;
+  line-height: 3.125rem;
+  background: rgba(38, 42, 47, .8);
+  border-radius: .25rem;
+  font-size: 1.125rem;
+  font-weight: 400;
+  text-align: center;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+.secure-content--operate__connect {
+  width: 17.5rem;
+  height: 3.125rem;
+  line-height: 3.125rem;
+  background: #FFFFFF;
+  border-radius: .25rem;
+  border: 3px solid rgba(38, 42, 47, 1);
+  font-size: 1.125rem;
+  font-weight: 400;
+  text-align: center;
+  color: rgba(38, 42, 47, 1);
+  margin-left: 2.4375rem;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.mask{
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,.3);
+  z-index: 1;
+  display: none;
+}
+.secure-popup {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
+  border-radius: 4px;
+  padding: 4.375rem 3.75rem;
+  position: fixed;
+  /* top: 26%;
+  left: 36%; */
+  z-index: 90;
+  width: 32.5rem;
+  left: 50%;
+  margin-left: -16.25rem;
+  height: 35rem;
+  top: 50%;
+  margin-top: -17.5rem;
+  box-sizing: border-box;
+}
+.tc-popup {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
+  border-radius: 4px;
+  padding: 4.375rem 3.75rem;
+  position: fixed;
+  /* top: 26%;
+  left: 36%; */
+  z-index: 90;
+  width: 32.5rem;
+  left: 25%;
+  margin-left: -16.25rem;
+  height: 40rem;
+  top: 50%;
+  margin-top: -17.5rem;
+  box-sizing: border-box;
+}
+.popup-content__item {
+  margin-bottom: 1.25rem;
+}
+.popup-content__item2 {
+  display: flex;
+  justify-content: space-between;
+}
+.popup-content__btn {
+  width: 25rem;
+  height: 3.375rem;
+  background: rgba(38, 42, 47, .8);
+  border-radius: .25rem;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 3.375rem;
+  text-align: center;
+  cursor: pointer;
+}
+.secure-popup__close {
+  position: fixed;
+  position: absolute;
+  right: 1.375rem;
+  top: 1.375rem;
+  cursor: pointer;
+}
+.input {
+  width: 22.4rem;
+  height: 3.375rem;
+  border: 1px solid #999999;
+  border-radius: .25rem;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #333333;
+  padding: 0 1.25rem;
+}
+.input.warning{
+  border-color: red;
+}
+.input.warning::placeholder{
+  color:red;
+}
+.inputCode {
+  width: 10rem;
+  height: 3.375rem;
+  border: 1px solid #999999;
+  border-radius: .25rem;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #333333;
+  padding: 0 1.25rem;
+}
+.inputCode.warning{
+  border-color: red;
+}
+.inputCode.warning::placeholder{
+  color:red;
+}
+#footer{
+  /* margin-top: 12.5rem; */
+  margin-top: 3%;
+}
+
+
+h1 {
+  color: #333;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 20px;
+}
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+th {
+  background-color: #f2f2f2;
+  position: sticky;
+  top: 0;
+}
+tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+tr:hover {
+  background-color: #f1f1f1;
+}
+.loading {
+  text-align: center;
+  padding: 20px;
+  font-style: italic;
+  color: #666;
+}
+.error {
+  color: red;
+  padding: 20px;
+}
+button {
+  padding: 8px 16px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 5px;
+}
+button:hover {
+  background-color: #45a049;
+}
+button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+.pagination button {
+  margin: 0 5px;
+}
+.page-info {
+  margin: 0 15px;
+  line-height: 36px;
+}
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.page-size-selector {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+
+
+/* 适配1360*768的电脑屏幕： */
+/* 适配1366*768的电脑屏幕： */
+/* 适配1440*900的电脑屏幕： */
+/* 适配1400*1050的电脑屏幕： */
+@media screen and (min-width: 1360px) and (max-width: 1440px){
+  /* CSS 样式 */
+  /* .secure-popup {
+    top: 6rem!important;
+  } */
+  /* .secure-content-wrap{
+    padding: 2% 0;
+  } */
+  .secure-content--operate{
+    margin-top: 3%;
+  }
+  /* .secure-content{
+    max-width: 80%;
+  } */
+}
+
+/* 适配1024*768的电脑屏幕 */
+@media only screen and (max-width: 1024px) and (max-height: 768px) {
+  /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
+  .secure-content--title {
+    font-size: 1.7rem;
+    line-height: 0rem;
+  }
+  .secure-content--model {
+    font-size: 1.125rem;
+  }
+  .secure-content {
+    max-width: 60rem;
+    margin: 0 auto;
+  }
+  .secure-content--model {
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+  }
+  .secure-content--operate {
+    display: flex;
+    justify-content: center;
+  }
+  .secure-content--operate__made,
+  .secure-content--operate__connect {
+    width: 12rem!important;
+  }
+  /* .secure-popup {
+    top: 3rem!important;
+  } */
+  #footer {
+    margin-top: 0rem;
+  }
+}
+
+/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
+@media screen and (max-width: 768px) {
+  /* 移动端样式 */
+  .secure-content-wrap{
+    padding: 1rem 0 4rem 0;
+  }
+  .secure-box {
+    background: none!important;
+  }
+  .secure-content {
+    flex-wrap: wrap;
+    width: auto!important;
+    /* margin-top: 2rem!important; */
+    margin-left: 0!important;
+    /* margin-bottom: 6rem!important; */
+    padding-top: 0;
+  }
+  .secure-content__right{
+    width: 90% !important;
+    margin: 0 auto;
+  }
+  .secure-content--title {
+    font-size: 1.5rem!important;
+    /* text-align: center; */
+    padding: 0 1rem;
+  }
+  .secure-content--model {
+    margin-top: 0.5rem!important;
+  }
+  .secure-content--model__item {
+    display: flex;
+    align-items: baseline!important;
+    padding: 0 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-top: 1rem;
+  }
+  .secure-content--operate {
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+  }
+  .popup-content__item {
+    margin-bottom: 1.25rem;
+  }
+  .popup-content__item2 {
+    width: 18.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .popup-content__btn {
+    width: 18.8rem!important;
+    height: 3rem!important;
+    line-height: 3rem!important;
+  }
+  /* .secure-popup{
+    padding: 2.5rem 1.5rem!important;
+    top: 15%!important;
+    left: 4%!important;
+    width: auto;
+    height: auto;
+    margin-left: 0;
+    margin-top: 0;
+  } */
+  .secure-popup {
+    width: 22rem;
+    height: 30rem;
+    FONT-WEIGHT: 200;
+    margin-left: -11rem;
+    margin-top: -15rem;
+    padding: 3rem 1.5rem 0 1.5rem;
+  }
+  .secure-popup__close {
+    top: 1.075rem!important;
+  }
+  .input {
+    width: 16.3rem!important;
+    height: 3rem!important;
+    line-height: 3rem!important;
+    font-size: 1rem;
+  }
+  .inputCode {
+    width: 6.3rem;
+    height: 3rem;
+    height: 3rem!important;
+    border: 1px solid #999999;
+    border-radius: .25rem;
+    font-size: 1rem;
+    font-weight: 400;
+    color: #333333;
+    padding: 0 1.25rem;
+  }
+  .codeImage {
+    width: 8rem;
+    height: 3rem;
+  }
+  .img {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/css/network.css b/css/network.css
index 5896c4a..fb6d55f 100644
--- a/css/network.css
+++ b/css/network.css
@@ -142,7 +142,23 @@ body {
     margin-top: -17.5rem;
     box-sizing: border-box;
 }
-
+.tc-popup {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
+  border-radius: 4px;
+  padding: 4.375rem 3.75rem;
+  position: fixed;
+  /* top: 26%;
+  left: 36%; */
+  z-index: 90;
+  width: 32.5rem;
+  left: 25%;
+  margin-left: -16.25rem;
+  height: 40rem;
+  top: 50%;
+  margin-top: -17.5rem;
+  box-sizing: border-box;
+}
 .popup-content__item {
     margin-bottom: 1.25rem;
 }
@@ -166,11 +182,11 @@ body {
 }
 
 .secure-popup__close {
-    position: fixed;
-    position: absolute;
-    right: 1.375rem;
-    top: 1.375rem;
-    cursor: pointer;
+  position: fixed;
+  position: absolute;
+  right: 1.375rem;
+  top: 1.375rem;
+  cursor: pointer;
 }
 
 .input {
@@ -406,10 +422,9 @@ body {
         margin-top: -15rem;
         padding: 3rem 1.5rem 0 1.5rem;
     }
-
-    .secure-popup__close {
-        top: 1.075rem !important;
-    }
+  .secure-popup__close {
+    top: 1.075rem!important;
+  }
 
     .input {
         width: 16.3rem !important;
@@ -443,4 +458,4 @@ body {
     #footer {
         margin-top: 1rem;
     }
-}
\ No newline at end of file
+}
diff --git a/css/serve.css b/css/serve.css
index ee095ee..9338f11 100644
--- a/css/serve.css
+++ b/css/serve.css
@@ -228,6 +228,23 @@ body {
   margin-top: -17.5rem;
   box-sizing: border-box;
 }
+.tc-popup {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
+  border-radius: 4px;
+  padding: 4.375rem 3.75rem;
+  position: fixed;
+  /* top: 26%;
+  left: 36%; */
+  z-index: 90;
+  width: 32.5rem;
+  left: 25%;
+  margin-left: -16.25rem;
+  height: 40rem;
+  top: 50%;
+  margin-top: -17.5rem;
+  box-sizing: border-box;
+}
 .popup-content__item {
   margin-bottom: 1.25rem;
 }
@@ -429,7 +446,7 @@ body {
     line-height: 1.5 !important;
     padding: 1rem 0 !important;
   }
- 
+
   .serve--secure{
     height: auto !important;
   }
@@ -491,7 +508,7 @@ body {
   .serve-package-wrap{
     padding: 0 !important;
   }
-  .serve-package__left, 
+  .serve-package__left,
   .serve-package__left--desc__price{
     width: auto!important;
     margin: 1.625rem 0!important;
@@ -500,7 +517,7 @@ body {
   }
   .serve-package__left--desc {
     padding-top: 1.5rem;
-  } 
+  }
   .serve-package__left {
     padding: 0 1.5rem!important;
   }
@@ -601,4 +618,4 @@ body {
     height: 100%;
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/header.html b/header.html
index a08ea93..32e0331 100644
--- a/header.html
+++ b/header.html
@@ -43,7 +43,7 @@
     <script>
 
 
-      if (localStorage.getItem('userName')==null){
+      if (localStorage.getItem('userName')){
 
         var name = localStorage.getItem('userName')
         // 获取元素引用
@@ -58,7 +58,7 @@
         // // 方法3: 使用textContent
         // link.textContent = name;
 
-        link.href = "serve.html";
+        link.href = "business.html";
       }
 
     </script>
diff --git a/login.html b/login.html
index 5f3d721..8d4b115 100644
--- a/login.html
+++ b/login.html
@@ -230,9 +230,8 @@
                   // const sessionValue = sessionStorage.getItem('token');
                   // const userName = sessionStorage.getItem('userName');
 
-                var cook =   document.cookie;
                     // 存储数据
-                  localStorage.setItem('token', cook.substring(6, document.cookie.length));
+                  localStorage.setItem('token', document.cookie);
                   localStorage.setItem('userName', resp.enterpriseName+"");
                   localStorage.setItem('isLogin', resp.result);
                 } else {
diff --git a/network.html b/network.html
index aaf86db..73604ed 100644
--- a/network.html
+++ b/network.html
@@ -49,27 +49,27 @@
             </div>
 
             <!-- 弹窗 -->
-            <div id="mask" class="mask"></div>
-            <div id="popup" class="secure-popup" style="display:none;">
-                <div class="secure-popup__close" onclick="closePopup()">
-                    <img src="./images/close.png">
-                </div>
-                <div class="popup-content">
-                    <div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
-                    <div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" />
-                    </div>
-                    <div class="popup-content__item"><input class="input" type="text" placeholder="电话"
-                            id="inputPhone" /></div>
-                    <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
-                            id="inputCompany" /></div>
-                    <div class="popup-content__item popup-content__item2">
-                        <input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
-                        <div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
-                                style="height: 56px"></div>
-                    </div>
-                    <div class="popup-content__btn" onclick="submitName()">提交</div>
-                </div>
-            </div>
+<!--            <div id="mask" class="mask"></div>-->
+<!--            <div id="popup" class="secure-popup" style="display:none;">-->
+<!--                <div class="secure-popup__close" onclick="closePopup()">-->
+<!--                    <img src="./images/close.png">-->
+<!--                </div>-->
+<!--                <div class="popup-content">-->
+<!--                    <div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>-->
+<!--                    <div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" />-->
+<!--                    </div>-->
+<!--                    <div class="popup-content__item"><input class="input" type="text" placeholder="电话"-->
+<!--                            id="inputPhone" /></div>-->
+<!--                    <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"-->
+<!--                            id="inputCompany" /></div>-->
+<!--                    <div class="popup-content__item popup-content__item2">-->
+<!--                        <input class="inputCode" type="text" placeholder="验证码" id="inputCode" />-->
+<!--                        <div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"-->
+<!--                                style="height: 56px"></div>-->
+<!--                    </div>-->
+<!--                    <div class="popup-content__btn" onclick="submitName()">提交</div>-->
+<!--                </div>-->
+<!--            </div>-->
 
           <!-- 弹窗: 定制我的套餐 -->
           <div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
@@ -168,47 +168,76 @@
                   <span style="color: white">提交您的信息</span>
                 </button>
               </div>
-              <!-- <div
-                  style="display: flex;flex-direction: column;justify-content: center;align-content: center;margin-left: 10px;width: 39%">
-                  <div class="modal-body" style="text-align: center">
-                      <div
-                          style="display: flex;flex-direction: column;justify-content: center;align-content: flex-end;">
-                          <span class="control-label" style="width: 100%;">您选择了标准套餐，<span
-                                  class="gongji">0</span>元/月</span>
-                          <span class="control-label" style="width: 100%;">请留下您的联系方式，我们会尽快与您联系</span>
-                      </div>
-                      <form id="myModal2_form" class="form-horizontal" role="form"
-                          onsubmit="return submit_myModal2_btn();">
-                          <div style="margin-top: 10px;width: 100%">
-                              <input type="text" class="form-control" name="name" placeholder="姓名"
-                                  style="height: 45px;width: 80%" />
-                          </div>
-                          <div style="margin-top: 10px;width: 100%">
-                              <input type="text" class="form-control big" name="telephone" placeholder="电话"
-                                  style="height: 45px;width: 80%">
-                          </div>
-                          <div style="margin-top: 10px; margin-bottom: 10px;width: 100%">
-                              <input type="text" class="form-control big" name="companyName" placeholder="公司名称"
-                                  style="height: 45px;width: 80%">
-                          </div>
-                          <div
-                              style="display: flex;flex-direction: row;justify-content: center;align-content: center">
-                              <button type="submit"
-                                  style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
-                                  <span style="color: white">提交您的信息</span>
-                              </button>
-                          </div>
-                      </form>
-                  </div>
-              </div> -->
+
             </div>
           </div>
 
           <!-- 底部占位 -->
           <div id="footer"></div>
-        </div>
+       </div>
+
     </body>
+    <style>
+      table,
+      td,
+      th {
+        text-align: center;
+        border: 1px solid #ddd;
+        border-collapse: collapse;
+      }
 
+      table td {
+        text-align: left;
+        padding-left: 5px;
+      }
+    </style>
+    <script>
+
+      var taocan = 0;
+      $('td.biaozhun-taocan').on('click', function() {
+        if (taocan == 0 || taocan == 2) {
+          $('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
+          taocan = 1;
+        }
+        $('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src',
+          './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+        if ($(this).hasClass('on')) {
+          $(this).removeClass('on').addClass('off');
+          $(this).find('img').attr('src', './images/unchoice.png');
+        } else {
+          $(this).removeClass('off').addClass('on');
+          $(this).find('img').attr('src',
+            './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+        }
+        var gongji = 0;
+        $('td.on').each(function(k, v) {
+          gongji += parseInt($(v).attr('data'));
+        });
+        $('span.gongji').text(gongji);
+      });
+
+      $('td.biaozhun-taocan2').on('click', function() {
+        if (taocan == 0 || taocan == 1) {
+          $('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
+          taocan = 2;
+        }
+        $('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src',
+          './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+        if ($(this).hasClass('on')) {
+          $(this).removeClass('on').addClass('off');
+          $(this).find('img').attr('src', './images/unchoice.png');
+        } else {
+          $(this).removeClass('off').addClass('on');
+          $(this).find('img').attr('src',
+            './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+        }
+        var gongji = 0;
+        $('td.on').each(function(k, v) {
+          gongji += parseInt($(v).attr('data'));
+        });
+        $('span.gongji').text(gongji);
+      });
+    </script>
     <script>
       var isLogin = localStorage.getItem('isLogin')
         function customized() {
@@ -216,13 +245,17 @@
           if(!isLogin){
             window.location.href = 'login.html';
           }else {
-            document.getElementById("popup").style.display = "block";
-            document.getElementById("mask").style.display = "block";
-            $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
+            document.getElementById("tcpopup").style.display = "block";
           }
 
         }
-        function openPopup() {
+
+      function closePopuptc() {
+        document.getElementById("tcpopup").style.display = "none";
+      }
+
+
+      function openPopup() {
             document.getElementById("popup").style.display = "block";
             document.getElementById("mask").style.display = "block";
             $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
diff --git a/secure.html b/secure.html
index 39005dd..53d9a04 100644
--- a/secure.html
+++ b/secure.html
@@ -145,7 +145,7 @@
 
                     <div
                         style="display: flex;flex-direction: row;justify-content: center;align-content: center; margin-top: 20px;">
-                        <button type="submit"
+                        <button  onclick="submit_myModal2_btn()"
                             style="background-color: rgba(21, 170, 125, 1);width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
                             <span style="color: white">提交您的信息</span>
                         </button>
@@ -219,9 +219,10 @@
                     <div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
                 </div>
             </div>
+          <!-- 底部占位 -->
+          <div id="footer"></div>
         </div>
-        <!-- 底部占位 -->
-        <div id="footer"></div>
+
     </body>
     <style>
         table,
@@ -298,31 +299,35 @@
                 fuwu += $(v).attr('fuwu');
             });
             data += '&fuwu=' + fuwu;
-            $.ajax({
-                url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
-                type: "POST",
-                data: data,
-                success: function(result) {
-                    if (result.result) {
-                        alert("您的意向信息已提交，我们将尽快与您取得联系！");
-                        $('#myModal2_form').trigger('reset');
-                        document.getElementById("tcpopup").style.display = "none";
-                    } else {
-                        alert(result.message);
-                    }
-                }
-            });
-            return false;
+
+          console.log("提交>>>>>",data);
+
+            // $.ajax({
+            //     url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
+            //     type: "POST",
+            //     data: data,
+            //     success: function(result) {
+            //         if (result.result) {
+            //             alert("您的意向信息已提交，我们将尽快与您取得联系！");
+            //             $('#myModal2_form').trigger('reset');
+            //             document.getElementById("tcpopup").style.display = "none";
+            //         } else {
+            //             alert(result.message);
+            //         }
+            //     }
+            // });
+            // return false;
         }
     </script>
     <script>
         function openPopuptc() {
               // 判断是否登录
-            if(!isLogin){
-              window.location.href = 'login.html';
-            }else {
-              document.getElementById("tcpopup").style.display = "block";
-            }
+            // if(!isLogin){
+            //   window.location.href = 'login.html';
+            // }else {
+            //   document.getElementById("tcpopup").style.display = "block";
+            // }
+          document.getElementById("tcpopup").style.display = "block";
 
         }
 
diff --git a/serve.html b/serve.html
index a80fade..aeab4f0 100644
--- a/serve.html
+++ b/serve.html
@@ -65,80 +65,6 @@
             </div>
           </div>
         </div>
-      </div>
-      <!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
-      <div class="serve-box">
-        <!-- 第二部分内容 -->
-        <div class="serve-package-wrap">
-
-          <div class="serve-package">
-            <div class="serve-package__left">
-              <div class="serve-package__left--title">标准套餐</div>
-              <div class="serve-package__left--desc">
-                <div class="serve-package__left--desc__item">
-                  <img src="./images/radio.png">
-                  <div class="serve-package__left--desc__item--text">中 间 件 防 护</div>
-                </div>
-                <div class="serve-package__left--desc__item">
-                  <img src="./images/radio.png">
-                  <div class="serve-package__left--desc__item--text">操作系统防护</div>
-                </div>
-                <div class="serve-package__left--desc__item">
-                  <img src="./images/radio.png">
-                  <div class="serve-package__left--desc__item--text">业务逻辑防护</div>
-                </div>
-                <div class="serve-package__left--desc__item">
-                  <img src="./images/radio.png">
-                  <div class="serve-package__left--desc__item--text">应&nbsp;&nbsp;急&nbsp;&nbsp;处&nbsp;&nbsp;理</div>
-                </div>
-                <div class="serve-package__left--desc__price">
-                  <div class="serve-package__left--desc__price--text">每月只需</div>
-                  <div class="serve-package__left--desc__price--num">2000元</div>
-                </div>
-              </div>
-            </div>
-            <div class="serve-package__right">
-              <div class="serve-package__right--title">安全服务套餐 按需定制</div>
-              <div class="serve-package__right--pack">
-                <div class="serve-package__right--pack__item">
-                  <div class="serve-package__right--pack__item--line"></div>
-                  <div class="serve-package__right--pack__item--text">基础防护</div>
-                  <div class="serve-package__right--pack__item--desc">操作系统防护</div>
-                  <div class="serve-package__right--pack__item--desc">中间件防护</div>
-                  <div class="serve-package__right--pack__item--desc">数据库防护</div>
-                  <div class="serve-package__right--pack__item--desc">服务应用防护</div>
-                </div>
-                <div class="serve-package__right--pack__item">
-                  <div class="serve-package__right--pack__item--line"></div>
-                  <div class="serve-package__right--pack__item--text">专业防护</div>
-                  <div class="serve-package__right--pack__item--desc">漏洞防护</div>
-                  <div class="serve-package__right--pack__item--desc">木马防护</div>
-                  <div class="serve-package__right--pack__item--desc">业务逻辑防护</div>
-                </div>
-              </div>
-              <div class="serve-package__right--pack">
-                <div class="serve-package__right--pack__item">
-                  <div class="serve-package__right--pack__item--line"></div>
-                  <div class="serve-package__right--pack__item--text">数据防护</div>
-                  <div class="serve-package__right--pack__item--desc">数据库防护</div>
-                  <div class="serve-package__right--pack__item--desc">数据安全防护</div>
-                </div>
-                <div class="serve-package__right--pack__item">
-                  <div class="serve-package__right--pack__item--line"></div>
-                  <div class="serve-package__right--pack__item--text">应急处理</div>
-                  <div class="serve-package__right--pack__item--desc">应急处理</div>
-                </div>
-              </div>
-
-            </div>
-          </div>
-
-          <div class="serve-box--operate">
-            <div class="serve-box--operate__made"  onclick="customized()" >定制我的套餐</div>
-<!--            <div class="serve-box&#45;&#45;operate__connect"  onclick="openPopup()">联系我们</div>-->
-          </div>
-
-        </div>
 
         <!-- 弹窗: 定制我的套餐 -->
         <div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
@@ -300,11 +226,148 @@
             <div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
           </div>
         </div> -->
+
+
+      </div>
+      <!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
+      <div class="serve-box">
+        <!-- 第二部分内容 -->
+        <div class="serve-package-wrap">
+
+          <div class="serve-package">
+            <div class="serve-package__left">
+              <div class="serve-package__left--title">标准套餐</div>
+              <div class="serve-package__left--desc">
+                <div class="serve-package__left--desc__item">
+                  <img src="./images/radio.png">
+                  <div class="serve-package__left--desc__item--text">中 间 件 防 护</div>
+                </div>
+                <div class="serve-package__left--desc__item">
+                  <img src="./images/radio.png">
+                  <div class="serve-package__left--desc__item--text">操作系统防护</div>
+                </div>
+                <div class="serve-package__left--desc__item">
+                  <img src="./images/radio.png">
+                  <div class="serve-package__left--desc__item--text">业务逻辑防护</div>
+                </div>
+                <div class="serve-package__left--desc__item">
+                  <img src="./images/radio.png">
+                  <div class="serve-package__left--desc__item--text">应&nbsp;&nbsp;急&nbsp;&nbsp;处&nbsp;&nbsp;理</div>
+                </div>
+                <div class="serve-package__left--desc__price">
+                  <div class="serve-package__left--desc__price--text">每月只需</div>
+                  <div class="serve-package__left--desc__price--num">2000元</div>
+                </div>
+              </div>
+            </div>
+            <div class="serve-package__right">
+              <div class="serve-package__right--title">安全服务套餐 按需定制</div>
+              <div class="serve-package__right--pack">
+                <div class="serve-package__right--pack__item">
+                  <div class="serve-package__right--pack__item--line"></div>
+                  <div class="serve-package__right--pack__item--text">基础防护</div>
+                  <div class="serve-package__right--pack__item--desc">操作系统防护</div>
+                  <div class="serve-package__right--pack__item--desc">中间件防护</div>
+                  <div class="serve-package__right--pack__item--desc">数据库防护</div>
+                  <div class="serve-package__right--pack__item--desc">服务应用防护</div>
+                </div>
+                <div class="serve-package__right--pack__item">
+                  <div class="serve-package__right--pack__item--line"></div>
+                  <div class="serve-package__right--pack__item--text">专业防护</div>
+                  <div class="serve-package__right--pack__item--desc">漏洞防护</div>
+                  <div class="serve-package__right--pack__item--desc">木马防护</div>
+                  <div class="serve-package__right--pack__item--desc">业务逻辑防护</div>
+                </div>
+              </div>
+              <div class="serve-package__right--pack">
+                <div class="serve-package__right--pack__item">
+                  <div class="serve-package__right--pack__item--line"></div>
+                  <div class="serve-package__right--pack__item--text">数据防护</div>
+                  <div class="serve-package__right--pack__item--desc">数据库防护</div>
+                  <div class="serve-package__right--pack__item--desc">数据安全防护</div>
+                </div>
+                <div class="serve-package__right--pack__item">
+                  <div class="serve-package__right--pack__item--line"></div>
+                  <div class="serve-package__right--pack__item--text">应急处理</div>
+                  <div class="serve-package__right--pack__item--desc">应急处理</div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <div class="serve-box--operate">
+            <div class="serve-box--operate__made"  onclick="customized()" >定制我的套餐</div>
+<!--            <div class="serve-box&#45;&#45;operate__connect"  onclick="openPopup()">联系我们</div>-->
+          </div>
+
+        </div>
         <!-- 底部占位 -->
         <div id="footer"></div>
-      </div>
+
+    </div>
     </div>
   </body>
+  <style>
+    table,
+    td,
+    th {
+      text-align: center;
+      border: 1px solid #ddd;
+      border-collapse: collapse;
+    }
+
+    table td {
+      text-align: left;
+      padding-left: 5px;
+    }
+  </style>
+  <script>
+    var taocan = 0;
+    $('td.biaozhun-taocan').on('click', function() {
+      if (taocan == 0 || taocan == 2) {
+        $('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
+        taocan = 1;
+      }
+      $('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src',
+        './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+      if ($(this).hasClass('on')) {
+        $(this).removeClass('on').addClass('off');
+        $(this).find('img').attr('src', './images/unchoice.png');
+      } else {
+        $(this).removeClass('off').addClass('on');
+        $(this).find('img').attr('src',
+          './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+      }
+      var gongji = 0;
+      $('td.on').each(function(k, v) {
+        gongji += parseInt($(v).attr('data'));
+      });
+      $('span.gongji').text(gongji);
+    });
+
+    $('td.biaozhun-taocan2').on('click', function() {
+      if (taocan == 0 || taocan == 1) {
+        $('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
+        taocan = 2;
+      }
+      $('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src',
+        './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+      if ($(this).hasClass('on')) {
+        $(this).removeClass('on').addClass('off');
+        $(this).find('img').attr('src', './images/unchoice.png');
+      } else {
+        $(this).removeClass('off').addClass('on');
+        $(this).find('img').attr('src',
+          './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+      }
+      var gongji = 0;
+      $('td.on').each(function(k, v) {
+        gongji += parseInt($(v).attr('data'));
+      });
+      $('span.gongji').text(gongji);
+    });
+  </script>
   <script>
     var isLogin = localStorage.getItem('isLogin')
     function customized() {
@@ -316,6 +379,12 @@
       }
 
     }
+
+    function closePopuptc() {
+      document.getElementById("tcpopup").style.display = "none";
+    }
+
+
     function openPopup() {
       document.getElementById("popup").style.display = "block";
       document.getElementById("mask").style.display = "block";
