<template>
  <div class="navbar" style="height: 48px;background-color: white;color: white!important;">
    <div class="logo" v-if="isShowKbossCharge">
      <img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
      <span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
    </div>
    <!--          v-show="!role.includes('客户')" -->
    <!--    v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"-->
    <hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;"
      id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <breadcrumb style="color:white!important;display: flex;justify-content: center;align-items: center;height: 100%;"
      id="breadcrumb-container" class="breadcrumb-container" />
    <div class="right-menu"
      style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
      <template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
        <span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
          class="right-menu-item hover-effect "
          style="font-size: 16px;display: flex;justify-content: center;align-items: center">
          <b style="display: flex;justify-content: center;align-items: center">
            回到首页
          </b>
        </span>
        <!--        <el-button @click="openChou" type="text">全部产品</el-button>-->
        <el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
          <span class="right-menu-item hover-effect"
            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
            <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
          </span>
        </el-tooltip>
        <!--        <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">-->
        <!--          <span class="right-menu-item hover-effect "-->
        <!--                style="font-size: 26px;display: flex;justify-content: center;align-items: center">-->
        <!--            <b style="display: flex;justify-content: center;align-items: center">-->
        <!--              <i style="color: #262626;font-weight: bold;font-size: 16px;"-->
        <!--                 class="el-icon-shopping-cart-2 shopCar"-->
        <!--                 @click="goShopping()"></i>-->
        <!--            </b>-->
        <!--          </span>-->
        <!--        </el-tooltip>-->
        <el-tooltip class="item" effect="dark" content="信息" placement="bottom">
          <span class="right-menu-item hover-effect"
            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
            <el-badge :value="count == 0 ? '' : count" :max="9" class="badge"
              style="height: 35px;display: flex;justify-content: center;align-items: center">
              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom" />
            </el-badge>
          </span>
        </el-tooltip>
        <el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
          <span class="right-menu-item hover-effect"
            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
            <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
          </span>
        </el-tooltip>

        <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip> -->
      </template>
      <!-- <el-tooltip class="item" effect="dark" content="操作" placement="bottom"> -->
      <el-dropdown @visible-change="handleShow" class="avatar-container right-menu-item hover-effect nick-name-style"
        style="margin-right: 0" trigger="click">
        <div class="avatar-wrapper">
          <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
          <i
            style="font-size: 18px; color: #262626;font-weight: 400;display: flex;justify-content: flex-start;align-items: center">
            <div class="imgUser">{{ nick_name.charAt(0) }}</div>
            {{ nick_name }}
            <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
            <!--            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->

          </i>
          <!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
        </div>
        <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
          <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
            <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
            <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
              <span ref="contentToCopy">
                {{
                  userId
                }}

              </span>
              <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                width="12" height="12" style="fill: #1019ab;">
                <path
                  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
                  p-id="1521"></path>
              </svg>
            </span>
          </div>
          <el-divider style="margin: 0!important;"></el-divider>
          <div v-if="role.includes('客户')"
            style="padding: 0 18px;  width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">

            <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
                style="display: block;margin-bottom: 5px">余额</span>{{
                  mybalance ? mybalance : initMybalance()
                }} ￥</span>
            <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
              style="padding: 8px; ">
              充值
            </el-button>
          </div>
          <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
            <span style="display: block">个人中心</span>
          </el-dropdown-item>
          <!--           channelManagementShow=true-->
          <!--          v-if="role.includes('客户')"-->
          <!--          <el-dropdown-item v-if="role.includes('客户')"-->
          <!--                            @click.native="channelFirstBtn">-->
          <!--            <span style="display: block">渠道管理</span>-->
          <!--          </el-dropdown-item>-->
          <!--          <el-dropdown-item v-if="role.includes('客户')">-->
          <!--            <span style="display: block" @click="showCode">促销邀请码</span>-->
          <!--          </el-dropdown-item>-->
          <el-dropdown-item @click.native="edituserPassword()">
            <span style="display: block">修改密码</span>
          </el-dropdown-item>

          <!-- <el-dropdown-item @click.native="personalMessage" v-if="org_type == 2 || org_type == 3">
            <span style="display: block">个人信息</span>
          </el-dropdown-item> -->
          <el-dropdown-item @click.native="logout">
            <span style="display: block">退出登录</span>
          </el-dropdown-item>
          <!--          <el-dropdown-item v-if="isLocalhost" @click.native="logout1">-->
          <!--            <span style="display: block">退登</span>-->
          <!--          </el-dropdown-item>-->

        </el-dropdown-menu>
      </el-dropdown>
      <!-- </el-tooltip> -->
    </div>

    <!-- 移动端通知弹框 -->
    <el-drawer :visible.sync="drawer" v-if="isMobile" :direction="direction" :withHeader="false" size="90%"
      class="drawerMobile">
      <el-container class="container">
        <el-aside width="95px" class="aside">
          <div class="header">消息中心</div>
          <div class="title">
            <div @click="tab(1)" class="info">全部消息</div>
            <div @click="tab(2)" class="info">未读消息</div>
            <div @click="tab(3)" class="info">已读消息</div>
          </div>
        </el-aside>
        <el-container class="content_box">
          <el-header class="header">| {{ this.tabTitle }}</el-header>
          <el-main class="content">
            <!-- 全部信息 -->
            <div v-if="this.tab_index == 1" class="allinfo">
              <div class="button">
                <el-button size="mini" type="primary" @click="readMassage">已读</el-button>
                <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table :header-cell-style="rowClass" @expand-change="expandChangeHandler" ref="table"
                @row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle"
                :data="alliInformationList ? alliInformationList : []" height="680" tooltip-effect="dark"
                @selection-change="handleSelectionChange">
                <el-table-column type="expand" width="30px">
                  <template slot-scope="props">
                    <div class="msgtext">
                      {{ props.row.msgtext }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>

              </el-table>
            </div>

            <!-- 未读信息 -->
            <div v-if="this.tab_index == 2" class="noreadinfo">
              <div class="button">
                <el-button size="mini" type="primary" @click="readMassage">已读</el-button>
                <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table"
                @expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680"
                tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="expand" width="30px">
                  <template slot-scope="props">
                    <div class="msgtext">
                      {{ props.row.msgtext }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>

              </el-table>
            </div>

            <!-- 已读信息 -->
            <div v-if="this.tab_index == 3" class="readinfo">
              <div class="button">
                <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table :header-cell-style="rowClass" ref="table" class="table" @row-click="expandChangeHandler2"
                @expand-change="expandChangeHandler" @selection-change="handleSelectionChange"
                :row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark">
                <el-table-column type="expand" width="30px">
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>
              </el-table>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-drawer>

    <!-- 通知弹框 -->
    <el-drawer @close="closeMesssageWindow" :visible.sync="drawer" v-else :direction="direction" :withHeader="false"
      size="70%" class="drawer">
      <el-container style="height: 100vh">
        <el-aside width="200px" class="aside">
          <div class="header" style="font-size:16px;">消息中心</div>
          <div class="title">
            <div @click="tab(1)" style="font-size:16px;">全部消息</div>
            <div @click="tab(2)" style="font-size:16px;">未读消息</div>
            <div @click="tab(3)" style="font-size:16px;">已读消息</div>
          </div>
        </el-aside>
        <el-container class="content_box">
          <el-header class="header">| {{ this.tabTitle }}</el-header>
          <el-main class="content">
            <!-- 全部信息 -->
            <div v-if="this.tab_index == 1">
              <div class="button" style="display:flex;">
                <el-button size="small" type="primary" @click="readMassage">已读</el-button>
                <el-button size="small" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table @expand-change="expandChangeHandler" ref="table" @row-click="expandChangeHandler1" class="table"
                :row-class-name="rowStyle" :data="alliInformationList ? alliInformationList : []" height="780"
                tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="expand" width="30px">
                  <template slot-scope="props">
                    <div class="msgtext">
                      {{ props.row.msgtext }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>

              </el-table>
            </div>

            <!-- 未读信息 -->
            <div v-if="this.tab_index == 2">
              <div class="button" style="display:flex;">
                <el-button size="small" type="primary" @click="readMassage">已读</el-button>
                <el-button size="small" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table @row-click="expandChangeHandler1" ref="table" @expand-change="expandChangeHandler"
                :row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark"
                style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="expand" width="30px">
                  <template slot-scope="props">
                    <div class="msgtext">
                      {{ props.row.msgtext }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>

              </el-table>
            </div>

            <!-- 已读信息 -->
            <div v-if="this.tab_index == 3">
              <div class="button" style="display:flex;">
                <el-button size="small" type="danger" @click="delMessage">删除</el-button>
              </div>
              <el-table ref="table" @row-click="expandChangeHandler2" @expand-change="expandChangeHandler"
                @selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList"
                height="780" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="expand" width="30px">
                </el-table-column>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sendtime" label="接收时间">
                </el-table-column>

              </el-table>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-drawer>


    <!-- 修改密码弹窗 -->
    <el-dialog title="修改密码" :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
      custom-class="password-dialog" class="password-dialog-wrapper">
      <el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
        <el-form-item label="旧密码:" prop="password">
          <el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword">
          <el-input v-model="passwordForm.newpassword" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="configPassword">
          <el-input v-model="passwordForm.configPassword" placeholder="请确认新密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPassword()" size="small">取 消</el-button>
        <el-button size="small" type="primary" @click="onsubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改个人信息弹窗 -->
    <el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2"
      style="width: 80%" class="userInfoDialog">
      <el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%"
        :rules="editRules">
        <el-form-item label="昵称:" prop="">
          <el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="邮件地址:" prop="">
          <el-input v-model="editUserInfoForm.email" placeholder="请输入邮件地址"></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="">
          <el-input v-model="editUserInfoForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="mobile">
          <el-input v-model="editUserInfoForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="二维码名片:" prop="">
          <div class="upload-box">
            <el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" :on-change="handleAvatarSuccess">
              <img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit()" size="small">取 消</el-button>
        <el-button size="small" type="primary" @click="editOnsubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates"
      class="themeBtn">
      <img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;">
    </el-button>

    <el-dialog title="图表主题设置" :visible.sync="dialogFormVisible" class="themeStyle">
      <el-form :model="form">
        <el-form-item label="柱状图:" :label-width="formLabelWidth">
          <!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
          <div class="gridForm">
            图表的颜色:
            <el-color-picker v-model="newGridObj.bar.color"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="同比折线图:" :label-width="formLabelWidth">
          <div class="gridForm">
            折线的颜色:
            <el-color-picker v-model="newGridObj.lineTong.color"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="环比折线图:" :label-width="formLabelWidth">
          <div class="gridForm">
            折线的颜色:
            <el-color-picker v-model="newGridObj.lineHuan.color"></el-color-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeColor">确 定</el-button>
      </div>
    </el-dialog>
    <!--    促销邀请码-->
    <el-dialog title="促销邀请码" :visible.sync="cuxiaoIsShow" custom-class="cuxiao-style">
      <promotional-invitation-code @acceptSonMessage="acceptSonMessage"></promotional-invitation-code>
    </el-dialog>
    <!--    渠道管理-->

    <el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
      <span
        class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="channelManagementShow = false">取 消</el-button>
        <el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
      </span>
    </el-dialog>

    <!--    searhcDiaolog-->

    <el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
      :before-close="handleClose">
      <el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
        <el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length > 0">
        <li v-for="(item, index) in searchResultList" :key="index">
          <span class="title" @click="goProductPage(item)">
            <div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
              src="./images/京东云.svg" alt="">
            <img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
          </span>
          <span class="description">{{ item.description }}</span>
          <!--          <span class="tags">123</span>-->
        </li>
      </ul>
      <div v-loading="searchLoading" class="searchEmpty" v-else>
        <img style="width: 200px;height: 200px;" src="./images/empty.svg" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
    <el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
      :visible.sync="drawerPro" :with-header="false">
      <div style="width: 100%;height: 100%;background: white">
        <ul class="allProStyle">
          <li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
          <li @click="goHomePage"><img src="./img/b.svg" alt="">百度智能云</li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import InForm from "@/components/Inform";
import barObj from "@/views/operation/variable";
import {
  getUserInfoAPI,
  editUserInfoAPI,
  logoutAPI,
  editPasswordAPI,
  getTimeAPI,
  getUnreadmsgAPI,
  getMsgAPI,
  getReadmsgAPI,
  upMsgAPI,
  delMsgAPI,
  addPictureAPI,
  getPictureAPI,
  getOpictureAPI,
  addOpictureAPI
} from "@/api/login";
import messagedrawer from "@/layout/components/inFram/message";
import store from "@/store";
import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue";
import { reqApplyChannel } from "@/api/customer/channel";
import { reqSearchProductList } from "@/api/product/product";
import { bdProducts, jdProducts } from "@/views/product/productionData";
import { getHomePath } from "@/views/setting/tools";

export default {
  data() {
    return {
      drawerPro: false,
      searchLoading: false,
      searchResultList: [],
      searchValue: '',
      searchDialogVisible: false,
      channelManagementShow: false,//渠道管理
      isMobileScreen: false,
      cuxiaoIsShow: false,
      isShowKbossCharge: false,//判断是否在充值页面
      isUpdate: false,//检测用户是否“已读”
      isLocalhost: false,
      // 获取用户代理字P串
      userAgent: window.navigator.userAgent,
      // 判断是否为移动设备
      isMobile: false,
      imageUrl: '',
      alliInformationList: [],//全部消息
      unreadMessageList: [],//未读信息
      readInformationList: [],//已读信息
      readIdList: [],
      count: null,
      userInfoList: [],
      editUserInfoForm: { //修改个人信息表单
        nick_name: "",
        email: "",
        address: "",
        mobile: "",
      },
      passwordForm: {
        //修改密码表单
        password: "",
        newpassword: "",
        configPassword: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newpassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        configPassword: [
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],
      },
      editRules: {
        mobile: [
          {
            pattern:
              /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
            message: "请输入有效的手机号",
          },
          { message: "请输入有效的手机号", trigger: "change" },
        ],
      },
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      passwordDialog: false,
      editUserInfoDialog: false,
      //通知
      drawer: false,
      direction: "rtl",
      nick_name: JSON.parse(localStorage.getItem('user_info')).username,
      userId: sessionStorage.getItem("userId"),
      org_type: sessionStorage.getItem("org_type"),
      role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
      tabTitle: "消息中心",
      tab_index: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      color1: '#409EFF',
      color2: null,
      themeState: '',
      newGridObj: {
        bar: {
          color: '#0798DB'
        },
        lineTong: {
          color: '#D2EB2D'
        },
        lineHuan: {
          color: '#F51515'
        },
      },
      oneId: '',
      isOne: false,
      currentFile: null
    };
  },
  components: {
    PromotionalInvitationCode,
    Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    InForm,
    messagedrawer,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,

    })
  },
  created() {
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);

    this.getUserInfo();
    // this.autoShuaXin();
    this.themeState = sessionStorage.getItem('themeState')
    this.getUnreadmsg()
    this.handleResize()
  },
  methods: {
    goHomePage() {
      this.$router.push('/homePage/index')
      this.$store.commit('setShowHomeNav', true)
    },
    openChou() {
      this.drawerPro = true
    },
    handleClose() {
      this.searchDialogVisible = false
      this.searchValue = ''
      this.searchResultList = []
    },
    goProductPage(item) {
      this.searchValue = ''
      this.searchResultList = []
      this.searchDialogVisible = false
      console.log(item)
      if (item.type === "bd") {
        if (bdProducts['网络'].includes(item.product_name)) {
          console.log("对等连接~~")
          this.$router.push({
            path: '/product/baiduProduct',
            query: { product_name: '网络' }
          })
        } else if (bdProducts['存储'].includes(item.product_name)) {
          this.$router.push({
            path: 'baiduProduct',
            query: { product_name: '存储' }
          })
        } else if (bdProducts['云与业务安全'].includes(item.product_name)) {
          this.$router.push({
            path: 'baiduProduct',
            query: { product_name: '云与业务安全' }
          })
        } else if (bdProducts['计算'].includes(item.product_name)) {
          console.log("跳转了")
          this.$router.push({
            path: 'baiduProduct',
            query: { product_name: '计算' }
          })
        } else if (bdProducts['数据库'].includes(item.product_name)) {
          this.$router.push({
            path: 'baiduProduct',
            query: { product_name: '数据库' }
          })
        } else {
          this.$router.push({
            path: 'baiduProduct',
            query: { product_name: 'AI能力引擎' }
          })
        }
      } else if (item.type === "jd") {
        if (jdProducts['网络与CDN'].includes(item.product_name)) {
          this.$router.push({
            name: 'jdProduct',
            params: { product_name: '网络与CDN' }
          })
        } else if (jdProducts['存储'].includes(item.product_name)) {
          this.$router.push({
            name: 'jdProduct',
            params: { product_name: '存储' }
          })
        } else if (jdProducts['安全'].includes(item.product_name)) {
          this.$router.push({
            name: 'jdProduct',
            params: { product_name: '安全' }
          })
        } else if (jdProducts['弹性计算'].includes(item.product_name)) {
          this.$router.push({
            name: 'jdProduct',
            params: { product_name: '弹性计算' }
          })
        } else if (jdProducts['数据库'].includes(item.product_name)) {
          this.$router.push({
            name: 'jdProduct',
            params: { product_name: '数据库' }
          })
        } else {
          // console.log("走了京哦else")
          this.$router.push('/product/jdProduct')
        }
      } else if (item.type === "sdzx") {
        this.$router.push('/gpu/createGpu')
      } else if (item.type === "ucloud") {
        this.$router.push('/product/ucloudProduct/createCloudHost')
      }
    },
    searchBtn() {
      if (!this.searchValue) {
        return
      }
      this.searchLoading = true
      // setTimeout(() => {
      //   this.searchLoading = false
      // }, 300)
      reqSearchProductList({ name: this.searchValue }).then(res => {
        this.searchLoading = false
        if (res.status) {
          this.searchResultList = res.data
        } else {
          this.searchResultList = []
        }
      })
    },
    showSearch() {
      this.searchDialogVisible = true
    },
    goScreen() {
      window.open('https://www.kaiyuancloud.cn/dev/#/screen/k8sRescource', '_blank');
      // const newWindow = window.open('https://www.kaiyuancloud.cn/dev/#/screen/index', '_blank');
      // const newWindow = window.open('http://localhost:9527/#/screen/index', '_blank');
      // // 确保窗口已经打开
      // newWindow.onload = function () {
      //   // 这需要用户的交互才能全屏
      //   if (newWindow.document.documentElement.requestFullscreen) {
      //     console.log("走了if")
      //     newWindow.document.documentElement.requestFullscreen();
      //   } else if (newWindow.document.documentElement.mozRequestFullScreen) { // Firefox
      //     newWindow.document.documentElement.mozRequestFullScreen();
      //   } else if (newWindow.document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
      //     console.log("走了if谷歌")
      //     newWindow.document.documentElement.webkitRequestFullscreen();
      //   } else if (newWindow.document.documentElement.msRequestFullscreen) { // IE/Edge
      //     newWindow.document.documentElement.msRequestFullscreen();
      //   }
      // };

    },
    channelFirstBtn() {
      reqApplyChannel({ user_id: this.userId }).then(res => {
        if (res.code == "100" || res.code == "210") {
          this.$message.success(res.msg)
        } else if (res.code == "300") {
          this.channelManagementShow = true
        } else if (res.code == "200") {
          this.$router.push('/customer/channelMangement')
        }
      })
    },
    ChannelConfirmBtn() {//渠道确定按钮
      reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => {
        if (res.status) {
          this.$message.success("申请渠道成功，后续会有相关人员和您沟通~")
          this.channelManagementShow = false
        } else {
          this.$message.error("申请渠道失败~")
        }
      })

    },
    // 屏幕宽度变化时触发的方法
    handleResize() {
      if (window.matchMedia('(max-width: 760px)').matches) {
        this.isMobileScreen = true;
      } else {
        this.isMobileScreen = false;
      }
    },
    beforeDestroy() {
      // 在组件销毁前移除监听器
      window.removeEventListener('resize', this.handleResize);
    },
    //接受子组件信息
    acceptSonMessage(value) {
      this.cuxiaoIsShow = value
    },
    showCode() {
      this.cuxiaoIsShow = true
    },
    handleShow(isShow) {
      let resverNode = document.getElementById('resverIcon')

      if (isShow) {
        if (this.role.includes('客户')) {
          this.$store.dispatch('user/getCustmoersMoney')
        }

        resverNode.style.transform = 'rotate(180deg)'
      } else {
        resverNode.style.transform = 'rotate(0)'
      }
    },
    initMybalance() {
      return sessionStorage.getItem('mybalance')
    },
    copyBtn() {//个人信息复制id
      const textToCopy = this.$refs.contentToCopy.innerText;
      navigator.clipboard.writeText(textToCopy).then(() => {
        this.$message.success('复制成功！')

      }).catch((error) => {
        console.error('复制失败', error);
      });

    },
    closeMesssageWindow() {//抽屉关闭的回调

      this.getUnreadmsg()
      if (this.isUpdate) {


      } else {

      }

    },
    rowClass() {
      return "font-size:14px;"
    },
    handleAvatarSuccess(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.currentFile = file;
    },
    personalMessage() {//进入个人信息页面
      this.$router.push('/customer/customerInformation')
    },
    getUnreadmsg() {//获取未读信息
      getUnreadmsgAPI().then(res => {
        if (res.status) {
          this.count = res.count
          this.unreadMessageList = res.messages
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    getReadmsg() {//获取已读信息
      getReadmsgAPI().then(res => {
        if (res.status) {
          this.readInformationList = res.msg
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    rowStyle({ row, rowIndex }) {//改变表格某一行样式
      if (this.isOne == true && row.id == this.oneId) {
        return 'unReadColor';
      } else if (row.msgstatus == 1) {
        return 'unReadColor';
      }
      return '';
    },

    handleSelectionChange(selection) {//获取选择的数据的id
      if (selection) {
        this.readIdList = []
        selection.forEach(item => {
          this.readIdList.push(item.id)
        })
      }
    },
    infrom() { // 通知
      this.isUpdate = false
      this.drawer = true;
      this.getMsg()
    },
    getMsg() {//获取所有信息
      getMsgAPI({ userid: this.userId }).then(res => {
        if (res.status && res.msg) {
          this.alliInformationList = res.msg
        }
      })
    },
    readMassage() {//一键已读
      this.isUpdate = true
      if (this.readIdList.length) {
        this.upMsg(this.readIdList)
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    upMsg(data) {//更改消息状态
      let params = {
        msgids: data
      }
      upMsgAPI(params).then(res => {
        if (res.status) {
          this.$message({
            message: "一键已读成功",
            type: "success",
          });
          if (this.tab_index == 1) {
            this.getMsg()
          } else if (this.tab_index == 2) {
            this.getUnreadmsg()
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    delMsg(data) {//删除消息
      let params = {
        id: data
      }
      delMsgAPI(params).then(res => {
        if (res.status) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          if (this.tab_index == 1) {
            this.getMsg()
          } else if (this.tab_index == 2) {
            this.getUnreadmsg()
          } else if (this.tab_index == 3) {
            this.getReadmsg()
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    delMessage() {//一键删除
      if (this.readIdList.length) {
        this.delMsg(this.readIdList)
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    expandChangeHandler(row) {//表格每一行展开时
      this.isOne = true
      this.oneId = row.id
      let params = {
        msgids: [row.id]
      }
      upMsgAPI(params).then(res => {
        if (res.status) {
          this.rowStyle(row)

        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })

    },
    expandChangeHandler1(row) {
      this.isUpdate = true
      this.$refs.table.toggleRowExpansion(row);
      this.expandChangeHandler(row)
    },
    expandChangeHandler2(row) {
      this.$refs.table.toggleRowExpansion(row);
    },
    change(row, expanded) {
      // console.log(row);
      // console.log(expanded);

    },
    tab(i) {//通知切换
      this.tab_index = i;
      if (i == 1) {
        this.tabTitle = "全部消息";
        this.getMsg()
      } else if (i == 2) {
        this.tabTitle = "未读消息";
        this.getUnreadmsg()

      } else {
        this.tabTitle = "已读消息";
        this.getReadmsg()
      }
    },
    autoShuaXin() {  // 自动刷新
      setInterval(() => {
        getTimeAPI().then((res) => {
          // console.log(res);
        });
        // 时间间隔
      }, 100000);
    },
    async getUserInfo() {  //获取个人信息
      getUserInfoAPI({ id: this.userId }).then((res) => {
        if (res.status == true) {
          // this.nick_name = res.data[0].username;
          this.userInfoList = res.data;
          sessionStorage.setItem("orgid", res.data[0].orgid);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    goShopping() { //跳转购物车
      // this.$router.push("/shoppingManagement");
      this.$router.push("/product/shoppingCart");
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    edituserPassword() {//修改密码
      this.passwordDialog = true;
    },
    onsubmit() { //修改密码
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          if (
            this.passwordForm.newpassword == this.passwordForm.configPassword
          ) {
            let params = {
              id: this.userId,
              password: this.passwordForm.password,
              newpassword: this.passwordForm.newpassword,
            };
            editPasswordAPI(params).then((res) => {
              if (res.status == true) {
                this.$message({
                  message: "密码修改成功",
                  type: "success",
                });
                this.passwordDialog = false;
                this.$router.push({ name: "Login" });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            this.$message({
              message: "新旧密码不一致",
              type: "error",
            });
          }
        }
      });
    },
    async edituser() { //修改个人信息
      this.editUserInfoDialog = true;
      if (this.role == '运营') {
        this.getOpicture()
      } else {
        this.getPicture()
      }
      await this.getUserInfo();
      this.editUserInfoForm.email = this.userInfoList[0].email;
      this.editUserInfoForm.address = this.userInfoList[0].address;
      this.editUserInfoForm.mobile = this.userInfoList[0].mobile;
      // this.editUserInfoForm.nick_name = this.userInfoList[0].username;
    },
    getPicture() {
      let params = {
        userid: this.userId
      }
      getPictureAPI(params).then(res => {
        this.imageUrl = res.picture_url ? res.picture_url : null;
      })
    },
    getOpicture() {//仅运营角色用
      let params = {
        userid: this.userId
      }
      getOpictureAPI(params).then(res => {
        this.imageUrl = res.data ? res.data : null;
      })
    },

    editOnsubmit() {  //修改个人信息
      this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile;
      editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then(
        (res) => {
          if (res.status == true) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getUserInfo();
            this.editUserInfoDialog = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        }
      );
      let params = {
        userid: this.userId
      }
      let formData = this.getFormData(params);
      formData.append("picture", this.currentFile.raw);
      if (this.role == '运营') {
        addOpictureAPI(formData).then(res => {
          if (res.status) {

          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      } else {
        addPictureAPI(formData).then(res => {
          if (res.status) {

          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      }

    },
    handleClose1() {
      this.$refs.passwordForm.resetFields();
      this.passwordDialog = false;
    },
    handleClose2() {
      this.$refs.editUserInfoForm.resetFields();
      this.editUserInfoDialog = false;
    },
    cancelPassword() {
      this.passwordDialog = false;
    },
    cancelEdit() {
      this.$refs.editUserInfoForm.resetFields();
      this.editUserInfoDialog = false;
    },
    async logout() {//退出登录

      // logout() {
      // await this.$store.dispatch('auth/removeToken')
      // logoutAPI().then((res) => {
      //   // console.log(res);
      // });

      //获取当前url
      let url = window.location.href;
      //判断url中是否包含domain_name字段
      // if (!url.includes('domain_name')) {
      //   //跳转到https://www.opencomputing.cn/
      //   window.location.href = 'https://www.opencomputing.cn/';
      //
      // } else {
      //   await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`);
      // }


      // if (this.logoutUrl) {
      //   window.location.href = this.logoutUrl
      // } else {mo
      //   window.location.href = 'https://www.opencomputing.cn/';
      // }

      store.commit('tagsView/resetBreadcrumbState');
      sessionStorage.removeItem("auths");
      sessionStorage.removeItem("routes");
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("userId");
      sessionStorage.removeItem("org_type")
      localStorage.removeItem('userId')


      localStorage.removeItem("auths");
      localStorage.removeItem("routes");
      localStorage.removeItem("user");
      localStorage.removeItem("userId");
      localStorage.removeItem("org_type")
      sessionStorage.removeItem('userId')
      this.$store.commit('setLoginState', false)

      await this.$router.push(getHomePath());
      // window.location.reload()
    },

    async logout1() {//退出登录

      // logout() {
      // await this.$store.dispatch('auth/removeToken')
      logoutAPI().then((res) => {
        // console.log(res);
      });

      //获取当前url
      let url = window.location.href;
      //判断url中是否包含domain_name字段
      await this.$router.push(`/login`);
      store.commit('tagsView/resetBreadcrumbState');
      sessionStorage.removeItem("auths");
      sessionStorage.removeItem("routes");
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("userId");
    },
    //改变图表颜色
    changeColor() {
      this.dialogFormVisible = false
      this.$store.commit('operationAnalysis/setGridObj', this.newGridObj)
      localStorage.setItem('gridObj', JSON.stringify(this.newGridObj))
    },
    getFormData(object) {//转换参数为formdata格式
      const formData = new FormData();
      Object.keys(object).forEach((key) => {
        const value = object[key];
        if (Array.isArray(value)) {
          value.forEach((subValue, i) => {
            formData.append(key + `[${i}]`, subValue);
          });
        } else {
          formData.append(key, object[key]);
        }
      });
      return formData;
    },
  },
  watch: {
    // gridObj(newValue, oldValue) {
    //   this.themeState = newValue
    //   console.log("gridObj原先是", oldValue)
    //   console.log("gridObj现在是", newValue)
    //   console.log("tgridObj", this.gridObj)
    // },
    gridObj: {
      handler(newValue, oldValue) {
        // console.log("gridObj原先是", oldValue)
        // console.log("gridObj现在是", newValue)
        // console.log("tgridObj", this.gridObj)
      }
    }
  },
  mounted() {
    this.role = sessionStorage.getItem("jueseNew")
    if (this.role.includes('客户')) {
      // this.$store.commit('app/closeSiderBtn')
    }

    //判断是否在充值也展示
    if (window.location.href.includes('kbossCharge')) {
      this.isShowKbossCharge = true
    }
    if (JSON.parse(localStorage.getItem('gridObj')) != {}) {
      // this.newGridObj.bar.color = JSON.parse(localStorage.getItem('gridObj')).bar.color
      // this.newGridObj.lineHuan.color =  JSON.parse(localStorage.getItem('gridObj')).lineHuan.color
      // this.newGridObj.lineTong.color =  JSON.parse(localStorage.getItem('gridObj')).lineTong.color
      // console.log("grid",this.gridObj)
    }
    this.isLocalhost = window.location.href.includes('localhost') || window.location.href.includes('xterm')
  },
};
</script>
<style lang="less">
::v-deep .password-dialog {
  display: flex;
  align-items: center;
  justify-content: center;

  .el-dialog {
    margin: 0 auto !important;
    position: relative;
    top: 0;

    @media screen and (max-width: 1200px) {
      width: 70% !important;
    }

    @media screen and (max-width: 768px) {
      width: 90% !important;
    }
  }

  .el-dialog__header {
    text-align: center;
  }

  .el-dialog__body {
    padding: 20px;
  }
}

.password-dialog-wrapper {
  ::v-deep .el-dialog {
    margin-top: 0 !important;
    top: 50%;
    transform: translateY(-50%);
  }
}
.channel-dialog-style {
  position: relative;
  width: 700px;
  height: 350px;

  .indent {
    line-height: 35px;
  }

  .el-dialog__footer {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.indent {
  display: block;
  /* 将 span 元素转换为块级元素 */
  text-indent: 2em;
  /* 设置首行缩进的大小为 2 个字符 */
  line-height: 25px;
}

.el-divider--horizontal {
  margin: 0;
}

.navbar {
  .userInfoDialog {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      height: 60px;
      width: 60px;
      line-height: 60px;
      text-align: center;
      border: 1px solid #d9d9d9;
    }
  }

  .drawer {
    .el-table .readColor {
      color: rgb(146, 192, 146) !important;
    }

    .el-table .unReadColor {
      color: rgb(175, 179, 175) !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.logo {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 45px;
    height: 45px;
    cursor: pointer;
  }

}

//.resverIcon:hover {
//  transform: rotate(180deg);
//  border: 1px solid red;
//}

.nick-name-style:hover .resverIcon {
  //transition: transform 250ms ease; /* 设置初始过渡时间为250毫秒 */
  //transform: rotate(180deg);
  //transform: rotate(180deg);
}


.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    .shopCar {
      //   padding-top: 19px;
    }

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      .badge {
        //   margin-top: 10px;
        //margin-right: 10px;
      }

      &.hover-effect {

        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }

  .drawerMobile {
    .container {
      height: 100vh;

      .aside {
        .header {
          font-size: 12px;
        }

        .title {
          .info {
            font-size: 10px;
          }
        }
      }

      .content_box {
        .header {
          font-size: 12px;
        }

        .content {
          .allinfo {
            .button {
              display: flex;
            }

            .table {
              width: 100%;
            }
          }

          .readinfo {
            .button {
              display: flex;
            }

            .table {
              width: 100%;
            }
          }

          .noreadinfo {
            .button {
              display: flex;
            }

            .table {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

//通知框样式
//tatle背景色设置
::v-deep .el-drawer {
  background: #d9dee4;
  color: black;
}

.aside {
  padding: 0;
  margin: 0;

  .header {
    padding-left: 20px;
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background-color: #d9dee4;
  }

  .title div {
    padding-left: 35px;
    height: 50px;
    line-height: 50px;
  }

  .title div:hover {
    background-color: #f4f6f8;
  }
}

.content_box {
  background-color: #fff;
  padding: 0 10px;

  .header {
    font-size: 22px;
    line-height: 60px;
    border-bottom: 1px solid rgb(65, 65, 65);
  }

  .msgtext {
    // height: 100px;
  }

  .button {
    padding-bottom: 10px;
  }
}

.themeStyle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.themeBtn {
  position: absolute;
  right: 250px;
  top: 0;
  margin-right: 5px;
}

.gridForm {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dropdown-menu__item--divided {
  border-top: 0;
}

.copy-btn {
  margin-left: 5px;

  &:hover {
    fill: #7f7dda !important;
    cursor: pointer;
  }
}

.moneyNow {
  &:hover {
    text-underline: black;
  }
}

@media screen and (max-width: 760px) {
  .logo {
    display: none;
  }

  .hamburger-container {
    display: block;
  }
}

.el-dropdown-menu {
  background-color: #ffffff;
  padding-top: 0;
}

::v-deep .el-popper .popper__arrow::after {
  top: 1px;
  margin-left: -6px;
  border-top-width: 0;
  border-bottom-color: #255fd5 !important;
}

.searchUl,
.searchEmpty {

  height: 250px;
  width: 100%;

  * {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

.searchEmpty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchUl {
  overflow-y: auto;
  padding-top: 10px;

  li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;

    .title {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      font-weight: 700;
      font-size: 15px;
      transition: all .3s ease-in-out;

      &:hover {
        transition: all .3s ease-in-out;
        color: blue;
        cursor: pointer;
      }
    }

    .description {
      color: #949498;
      display: inline-block;
      font-size: 13px;
      margin-top: 3px;
      line-height: 18px;
    }
  }
}
</style>
<style>
.cuxiao-style {
  width: 500px;
  height: 250px;

}

@media screen and (max-width: 760px) {
  .logo {
    display: none;
  }

  .cuxiao-style {
    width: 95% !important;
  }
}

.allProStyle {
  padding: 15px;

  li {
    width: fit-content;
    margin: 15px 0;
    font-size: 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease-in-out;

    &:hover {
      color: #1b5bff;
    }

    img {
      margin-right: 5px;
      width: 25px;
      height: 25px;
    }
  }

}

::v-deep .ltr {
  width: 100% !important;
}

.imgUser {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #081020;
  color: white;
}
</style>
<style>
::v-deep .myDrawer {
  width: 100% !important;
}
</style>
