<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>西门星空乐园管理后台</title>

  <script src="../vue_js/vue.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            display: flex; /* 添加这一行 */
        }
        [v-cloak] {
            /* 元素隐藏 */
            display: none;
        }
        .container {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .left_tab_container {
            width: 150px;
            background-color:#2C3039;
            /*background-color:#FF0000;*/
            /*background-color:#FF69B4;*/
            height: 100%;
            overflow: auto;
        }

        /*<!--logo显示部分-->*/
        .logo_container{
            height:40px;
            min-height: 40px;
            width: 100%;
            background-color: white;
            align-items: center;
            justify-content: center;
            display: flex;
            background-color: white;
            padding: 10px;
        }

        .logo_img{
            height: 60px;
            width: 100%;
        }
        /*<!--系统名字-->*/
        .sys_name_container{
            width:calc(100% - 20px);
            height:auto;
            align-items: center;
            justify-content: center;
            display: flex;
            font-weight: 700;
            background-color:#2C3039;
            /*background-color:#FF0000;*/
            /*background-color:#FF69B4;*/
            padding: 10px;
            color: white;
            margin-bottom: 10px;
        }
        /*<!--主菜单栏-->*/
        .main_tab_container{
            width:100%;
            /*background-color: #667eea;*/
            height:60px;
            align-items: center;
            justify-content: flex-start;
            display: flex;
        }

        .tab_main_name_container{
            color:white;
            font-weight: 700;
            display: flex;
        }


        /*<!--左侧留白-->*/
        .main_tab_left_space_container{
            width: 30px;
            height: 60px;
            /*background-color: #FF0000;*/
            align-items: center;
            justify-content:flex-end;
            display: flex;
        }

        /*<!--指针-->*/
        .tab_main_selected_img{
            width:18px;
            height: 18px;
        }

        /*<!--右侧显示-->*/
        .main_tab_right_show_container {
            flex-grow: 1;
            padding-left: 20px;
            height: 60px;
            /*background-color:yellow;*/
            align-items: center;
            justify-content:flex-start;
            display: flex;
        }
        .tab_main_img{
            width:25px;
            height: 25px;
        }

        /*<!--第二层导航tab-->*/
        .second_tab_list_container{
            width:calc(100% - 20px);
            height:60px;
            /*background-color: #667eea;*/
            align-items: center;
            justify-content:center;
            display: flex;
            padding-right: 20px;
        }
        .second_tab_no_selected{
            color: white;
        }
        .second_tab_selected{
            color:#34A9FF;
            font-weight: 700;
            width: 100%;
            height: 100%;
            /*background-color: #4CAF50;*/
            align-items: center;
            justify-content:center;
            display: flex;
            background-position-y: center;
            background-image: url("../images/selected_target.png");
            background-size: 20px;
            background-repeat: no-repeat;
        }









        /*<!--tab列表-->*/
        .tab_list_container{
            width: 100%;
            height: auto;
            /*background-color: blue;*/
            cursor: pointer;
        }



        .right_content_container {
            flex-grow: 1;
            height: 100%;
            /*background-color: #FF69B4;*/
            overflow: auto;
        }
        .data_list_container{
            width:100%;
            height: auto;
        }

        /*<!--数据项-->*/
        .data_count_container{
            width:100%;
            height:50%;
            /*background-color: #764ba2;*/
            align-items: flex-end;
            justify-content:center;
            display: flex;
            font-size: 20px;
            font-weight: 700;

        }



        /*<!--搜索框显示容器-->*/
        .search_container {
            width:calc(100% - 20px);
            padding-left: 20px;
            height:100px;
            /*background-color: aqua;*/
            align-items: center;
            justify-content:flex-start;
            display: flex;
        }


        .search-input {
            padding: 10px;
            padding-left: 30px; /* 确保文本不会覆盖图标 */
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
            /*background-image: url('https://xmkjsoft.com/imgs/logo_img.png'); !* 替换为您的图标路径 *!*/
            background-size: 20px; /* 调整图标大小 */
            background-position: 10px center; /* 调整图标位置 */
            background-repeat: no-repeat;
        }

        .search-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
        .search-btn {
            padding: 8px 12px;
            background-color: #007bff;
            color: #fff;
            border: 1px solid #007bff;
            border-radius: 4px;
            cursor: pointer;
        }


        /* 表格样式 */
        table {
            width: 100%;
            border: 1px solid #ddd; /* 添加表格边框 */
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            font-size: 14px;

        }

        th, td {
            padding: 5px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd; /* 添加单元格右边框 */
        }

        th {
            width: auto;
            background-color: #f2f2f2;
            font-weight: bold;
            white-space: nowrap; /* 防止内容换行 */
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        .operation_delete{
            color: red;
            text-decoration: underline;
            cursor: pointer; /* 让鼠标在链接上显示为手型 */
        }

        .operation_set_complete{
            color: green;
            text-decoration: underline;
            cursor: pointer; /* 让鼠标在链接上显示为手型 */
        }
        .operation_set_waiting{
            color: gray;
            text-decoration: underline;
            cursor: pointer; /* 让鼠标在链接上显示为手型 */
        }
        .operation_edit{
            color: blue;
            text-decoration: underline;
            cursor: pointer; /* 让鼠标在链接上显示为手型 */
        }

        .pagination {
            margin-top: 10px;
        }



        /*<!--账号管理:修改密码+退出登录-->*/
        .account_manage_container{
            width:calc(100% - 20px);
            height:60px;
            /*background-color: #FF0000;*/
            margin-top: 30px;
            border-bottom: 1px solid #eeecec;
            margin: 10px;
            position: relative;
        }

        /*<!--账号头像-->*/
        .account_image_container{
            width:30%;
            height: 100%;
            float: left;
            /*background-color: #764ba2;*/
            align-items: center;
            justify-content: center;display: flex;
        }
        .account_image{
            width:80%;
            height:80%;
            border-radius: 50%;
        }

        /*<!--账号-->*/
        .account_container{
            width:50%;
            height: 100%;
            float: left;
            /*background-color: #32cd80;*/
            align-items: center;
            justify-content: center;display: flex;
            color:white;
        }



        /*<!--操作指示箭头-->*/
        .operation_icon_container{
            width:20%;
            height: 100%;
            float: left;
            /*background-color: #a0f8f5;*/
            align-items: center;
            justify-content: center;display: flex;
            cursor: pointer; /* 添加这一行 */
            position: relative; /* 添加这一行 */
        }
        .operation_icon{
            width:20px;
            height: 20px;
        }




        .account_operation_alert {
            display: none;
            position: fixed; /* 改为 fixed */
            top: 0;
            left: 0;
            width: 200px;
            height: 100px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 99999; /* 设置更大的层级 */
        }
        /*<!--修改密码-->*/
        .edit_password_container{
            width: 100%;
            height:50px;
            /*background-color: #0f7973;*/
            align-items: center;
            justify-content: center;display: flex;
        }
        .edit_password_btn{
            width:80%;
            height: 80%;
            cursor: pointer;
        }
        /*<!--退出登录-->*/
        .exit_login_container{
            width: 100%;
            height:50px;
            /*background-color: #764ba2;*/
            align-items: center;
            justify-content: center;display: flex;
        }
        .exit_login_btn{
            width:80%;
            height: 80%;
            color: red;
            cursor: pointer;
        }


        .account_icon_container:hover .account_operation_alert {
            display: block; /* 添加这一行 */
        }




        /*加载等待动画*/

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-spinner {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


    </style>
</head>
<body>
  <div id="app" class="container" v-cloak>
      <!--左侧导航-->
      <div class="left_tab_container">
          <!--logo显示部分-->
          <div class="logo_container">
              <!--logo居中-->
              <img class="logo_img" :src="logo_path">
          </div>

          <!--系统名字-->
          <div class="sys_name_container">
            {{system_name}}
          </div>


          <!--tab列表-->
          <div class="tab_list_container" v-for="item1 in tab_array" :key="item1.id">
              <!--主菜单栏-->
              <div class="main_tab_container">

                  <!--右侧显示-->
                  <div class="main_tab_right_show_container"  @click="main_tab_click(item1.id,item1.tab_main_name)">
                      <img  class="tab_main_img" :src="item1.img"><p class="tab_main_name_container">{{item1.tab_main_name}}</p>
                  </div>
              </div>


              <!--第二层导航tab-->
              <div class="second_tab_list_container" v-for="item2 in item1.tab_second_array" :key="item2.id" v-if="item1.selected===true" @click="second_tab_click(item2.id,item2.name)">
                  <p class="second_tab_selected" v-if="item2.selected===true" >{{item2.name}}</p>
                  <p class="second_tab_no_selected"  v-if="item2.selected===false">{{item2.name}}</p>
              </div>
          </div>

      </div>


      <!--右侧内容显示容器-->
      <div class="right_content_container">

      </div>

  </div>
  <script>
      new Vue({
          el: '#app', // Element to mount the Vue instance
          data: {
              logo_path:"images/logo.png",
              select_target_icon:"images/selected_target.png",
              system_name:"西门星空乐园管理后台",
              tab_array:[


                  {id:2,tab_main_name:"控制台",selected:true,img:"images/list.png",tab_second_array:[
                          {id:1,name:"数据中心",selected:true}, {id:2,name:"发布审核",selected:false},{id:3,name:"商品管理",selected:false},{id:4,name:"游戏管理",selected:false}
                          ,{id:5,name:"用户管理",selected:false},{id:6,name:"公告管理",selected:false}
                      ]},
              ],
          },
          computed: {
              totalPages() {
                  return Math.ceil(this.totalItems / this.itemsPerPage);
              }
          },
          methods:{



              main_tab_click(clickedId,tab_main_name) {
                  // 遍历主菜单项
                  this.tab_array.forEach(item1 => {
                      // 设置点击项的selected为true,其他项为false
                      item1.selected = (item1.id === clickedId);

                      // 遍历第二层导航项
                      item1.tab_second_array.forEach(item2 => {
                          // 设置第二层导航项的selected
                          item2.selected = (item1.id === clickedId && item2.id === 1); // 判断是否是第二层的第一个项
                      });
                  });
                  switch (tab_main_name){
                      case "首页":
                          window.location.href="management_index.html";
                          break;
                      case "客户数据":
                          window.location.href="customer_all_data.html";
                          break;
                      case "新增客户":
                          window.location.href="push_new_customer.html";
                          break;
                      case "授权管理":
                          window.location.href="permission_manage.html";
                          break;
                      case "成交审核":
                          window.location.href="customer_audit.html";
                          break;
                      case "设置":
                          window.location.href="setting.html";
                          break;
                  }
              },
              second_tab_click(item2Id,tab_second_name) {
                  this.tab_array.forEach(item1 => {
                      item1.tab_second_array.forEach(item2 => {
                          // 设置点击项的selected为true,其他项为false
                          item2.selected = (item2.id === item2Id);
                      });
                  });
                  switch (tab_second_name){
                      case "全部数据":
                          window.location.href="customer_all_data.html";
                          break;
                      case "待成交":
                          window.location.href="customer_waiting_data.html";
                          break;
                      case "跟进中":
                          window.location.href="customer_running_data.html";
                          break;
                      case "已成交":
                          window.location.href="customer_over_data.html";
                          break;
                      case "红娘管理":
                          window.location.href="permission_manage.html";
                          break;
                      case "新增红娘":
                          window.location.href="permission_new_hn.html";
                          break;
                      case "待审核":
                          window.location.href="customer_audit.html";
                          break;
                      case "已通过":
                          window.location.href="customer_pass.html";
                          break;
                      case "未通过":
                          window.location.href="customer_no_pass.html";
                          break;
                  }
              },




          },
          mounted(){

          }
      });
  </script>
</body>
</html>
05-10 01:13