adminBigData/src/views/school/index.vue

<template>
  <div class="main_container" @scroll="OnScroll" ref="scrollContainer">
    <div class="user_num_content">
      <div class="user_item all">
        <div class="item_left">
          <img src="@/assets/icon/user_all.svg" alt="">
          <p>全部用户</p>
        </div>
        <div class="item_right">{{ userNumber.allUser }}</div>
      </div>
      <div class="user_item blue">    
        <div class="item_left">
          <img src="@/assets/icon/user_blue.svg" alt="">
          <p>正式用户</p>
        </div>
        <div class="item_right">{{ userNumber.officialUser }}</div>
      </div>
      <div class="user_item green">
        <div class="item_left">
          <img src="@/assets/icon/user_green.svg" alt="">
          <p>体验用户</p>
        </div>
        <div class="item_right">{{ userNumber.experienceUser }}</div>
      </div>
      <div class="user_item orange">
        <div class="item_left">
          <img src="@/assets/icon/user_orange.svg" alt="">
          <p>冻结用户</p>
        </div>
        <div class="item_right">{{ userNumber.freezeUser }}</div>
      </div>
    </div>

    <div ref="filterRef" class="filter_area">
      <!-- <SearchMain @FnSearch="FnSearch" /> -->
      <div class="page_item">
        <div class="tag_group" v-if="searchList.provinceNode.length > 1">
          <div class="tag_group_title">省份：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in searchList.provinceNode" :key="item.provinceCode" @click="selectItem(item.provinceCode, 'provinceCode', item)" :class="item.provinceCode === searchData.provinceCode ? 'active' : ''">
              {{ item.provinceName }}
            </div>
          </div>
        </div>
        <div class="tag_group" v-if="cityNode.length > 0">
          <div class="tag_group_title">城市：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in cityNode" :key="item.cityCode" @click="selectItem(item.cityCode, 'cityCode', item)" :class="item.cityCode === searchData.cityCode ? 'active' : ''">
              {{ item.cityName }}
            </div>
          </div>
        </div>
        <div class="tag_group" v-if="districtNode.length > 0">
          <div class="tag_group_title">区/县：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in districtNode" :key="item.districtCode" @click="selectItem(item.districtCode, 'districtCode', item)" :class="item.districtCode === searchData.districtCode ? 'active' : ''">
              {{ item.districtName }}
            </div>
          </div>
        </div>
        <div class="tag_group" v-if="searchList.userInfo.length > 1">
          <div class="tag_group_title">运维：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in searchList.userInfo" :key="item.userId" @click="selectItem(item.userId, 'userId', item)" :class="item.userId === searchData.userId ? 'active' : ''">
              {{ item.nickname }}
            </div>
          </div>
        </div>
        <div class="tag_group" v-if="searchList.typeNode.length > 1">
          <div class="tag_group_title">类型：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in searchList.typeNode" :key="item.type" @click="selectItem(item.type, 'type', item)" :class="item.type === searchData.type ? 'active' : ''">
              {{ item.typeName }}
            </div>
          </div>
        </div>
        <div class="tag_group" v-if="searchList.statusNodes.length > 1">
          <div class="tag_group_title">状态：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in searchList.statusNodes" :key="item.status" @click="selectItem(item.status, 'status', item)" :class="item.status === searchData.status ? 'active' : ''">
              {{ item.statusName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_item">
      <div class="page_search">
        <div class="search_content" ref="searchContentRef">
          <div class="content_left">
            <div class="simple_filter" v-if="isShowSimpleFilter">
              <el-select v-model="searchData.provinceCode" @change="ChangeRegion('provinceCode')" v-if="searchList.provinceNode && searchList.provinceNode.length > 1">
                <el-option v-for="item in searchList.provinceNode" :key="item.provinceCode" :value="item.provinceCode" :label="item.provinceName == '全部' ? '全部省份' : item.provinceName"></el-option>
              </el-select>
              <el-select v-model="searchData.cityCode" @change="ChangeRegion('cityCode')" v-if="cityNode && cityNode.length > 1">
                <el-option v-for="item in cityNode" :key="item.cityCode" :value="item.cityCode" :label="item.cityName == '全部' ? '全部城市' : item.cityName"></el-option>
              </el-select>
              <el-select v-model="searchData.districtCode" @change="ChangeRegion('districtCode')" v-if="districtNode && districtNode.length > 1">
                <el-option v-for="item in districtNode" :key="item.districtCode" :value="item.districtCode" :label="item.districtName == '全部' ? '全部区县' : item.districtName"></el-option>
              </el-select>
              <el-select v-model="searchData.userId" @change="SearchChange" v-if="searchList.userInfo && searchList.userInfo.length > 1">
                <el-option v-for="item in searchList.userInfo" :key="item.userId" :value="item.userId" :label="item.nickname == '全部' ? '全部运维' : item.nickname"></el-option>
              </el-select>
              <el-select v-model="searchData.type" @change="SearchChange" v-if="searchList.typeNode && searchList.typeNode.length > 1">
                <el-option v-for="item in searchList.typeNode" :key="item.type" :value="item.type" :label="item.typeName == '全部' ? '全部类型' : item.typeName"></el-option>
              </el-select>
              <el-select v-model="searchData.status" @change="SearchChange" v-if="searchList.statusNodes && searchList.statusNodes.length > 1">
                <el-option v-for="item in searchList.statusNodes" :key="item.status" :value="item.status" :label="item.statusName == '全部' ? '全部状态' : item.statusName"></el-option>
              </el-select>
            </div>
            <el-select v-model="schoolTypeSelect" @change="SearchChange">
              <el-option label="全部类型" value="all"></el-option>
              <el-option label="单校" :value="0"></el-option>
              <el-option label="联考" :value="1"></el-option>
            </el-select>
            <el-input v-model="schoolNameCode" placeholder="请输入学校名称或编号" @input="SearchChange">
              <template #append>
              <el-button :icon="Search" @click="SearchChange" />
              </template>
            </el-input>
          </div>
          <div class="content_right">
            <!-- <el-button class="button_refresh" @click="Refresh">
              <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
            </el-button> -->
            <el-button class="button_border" @click="OpenSubject" v-if="permissions.includes('schoolOpenSubjects')">开通科目</el-button>
            <el-button class="button_background" @click="addUser" v-if="permissions.includes('schoolCreate')">新增用户</el-button>
          </div>
        </div>
      </div>
      <div class="page_jg_20"></div>
      <div class="page_table">
        <el-table :data="tableData" stripe v-loading="tableLoading" element-loading-text="拼命加载中……" :height="tableHeight"
          element-loading-spinner="el-icon-loading" element-loading-background="#ffffff">
            <el-table-column prop="index" label="序号" fixed="left" align="center" />
            <el-table-column prop="tenantCode" label="学校编号" width="80" fixed="left" align="center" show-overflow-tooltip />
            <el-table-column prop="tenantName" label="学校名称" min-width="160" fixed="left" align="center" show-overflow-tooltip>
              <template #default="{row}">
                <span @click="GoTeach(row)" :class="row.status == 0 || row.dateDiffDayS==0 || !permissions.includes('UserInfo') ? '' : 'text_color_blue'">{{ row.tenantName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="abbreviation" label="学校简称" width="120" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.abbreviation ||  '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="cityAndAreaName" label="区域" width="160" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.cityAndAreaName ||  '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="schoolType" label="账号类型" width="100" align="center">
              <template #default="{ row }">
                {{ row.schoolType == 0 ? '单校版' : row.schoolType == 1 ? '联考版' :  '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="startDate" label="开始时间" width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="endDate" label="结束时间" width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="dateDiffDayS" label="剩余天数" width="100" align="center" />
            <el-table-column prop="type" label="状态" width="80" align="center">
              <template #default="{ row }">
                <div class="table_row_status">
                  <!-- 冻结 -->
                  <div class="no_release_icon" v-if="row.status==0"></div>
                  <!-- 正式 -->
                  <div class="need_summary_icon" v-if="row.status==1 && row.type==1"></div>
                  <!-- 体验 -->
                  <div class="yes_release_icon" v-if="row.status==1 && row.type==0"></div>
                  <!-- {{ row.statusLabel }} -->
                  {{ row.status == 0 ? '冻结' : row.type == 1 ? '正式' : row.type == 0 ? '体验' : '-' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sysUserName" width="120" label="运维人员" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.sysUserName ||  '-' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" fixed="right" align="center">
              <template #default="{ row }">
                <div class="table_row_option">
                  <span v-if="row.status == 0 && permissions.includes('schoolFreeze')" class="button_delete" @click="ChangeStatus(row, '解冻')">
                    解冻
                  </span>
                  <span v-if="row.status != 0 && permissions.includes('schoolFreeze')" class="button_editor text_color_orange" @click="ChangeStatus(row, '冻结')">
                    冻结
                  </span>
                  <span class="button_editor" @click="EditUser(row)" v-if="permissions.includes('schoolUpdate')">编辑</span>
                  <span class="button_editor" @click="OpenAuth(row)" v-if="permissions.includes('schoolPermission')">权限</span>
                  <span class="button_editor" @click="resetPassWord(row)" v-if="permissions.includes('schoolPassword')">重置密码</span>
                  <span class="button_editor" :class="row.status == 0 || row.dateDiffDayS==0 ? 'disabled_text' : ''" @click="GoTeach(row)" v-if="permissions.includes('UserInfo') ">进入学校</span>
                </div>
              </template>
            </el-table-column>
        </el-table>
        <div class="page_pagination">
          <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]" background layout="sizes, prev, pager, next" :total="total" 
            @current-change="HandleCurrentChange" @size-change="HandleSizeChange" />
        </div>
      </div>
    </div>

    <div class="page_dialog">
      <AddUser v-if="showDialog" @AddUser="RefTable" /> 
      <AuthConfig v-if="authData.showDialog" />
      <SubjectList v-if="subjectShowDialog" />
      <ResetPassword v-if="passwordDialog.dialogShow" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import SearchMain from '@/views/school/SearchMain.vue'
import AddUser from '@/views/school/addUser.vue'
import AuthConfig from '@/views/school/authConfig.vue'
import SubjectList from '@/views/school/subjectList.vue'
import ResetPassword from '@/components/resetPassword.vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, reactive, provide, onMounted, nextTick, onUnmounted } from 'vue'
import { getSchoolNumber, getSchoolList, changeStatus ,getTicket, getSearchList} from '@/api/school'
import { throttle } from 'lodash';

interface UserNumber {
  allUser: number
  officialUser: number
  experienceUser: number
  freezeUser: number
}
const userNumber = ref<UserNumber>({
  allUser: 0,
  officialUser: 0,
  experienceUser: 0,
  freezeUser: 0
})

const searchData = ref({
  provinceCode: 'all',
  cityCode: 'all',
  districtCode: 'all',
  type: 'all',
  userId: 'all',
  status: 'all',
})

interface Province {
  provinceCode: string;
  provinceName: string;
  children?: City[]; // 如果有子级城市数据的话
}
interface City {
  cityCode:  string
  cityName:  string
  children?: District[]; // 如果有子级区县数据的话
}
interface District {
  districtCode:  string
  districtName:  string
}
const cityNode = ref<City[]>([])
const districtNode = ref<District[]>([])

interface TypeNode {
  type: string;
  typeName: string;
}

interface UserInfo {
  userId: string;
  nickname: string;
}

interface StatusNodes {
  status: string;
  statusName: string;
}

interface SearchList {
  examTypes: any[]; 
  provinceNode: Province[];
  cityNode: City[];
  districtNode: District[];
  typeNode: TypeNode[];
  userInfo: UserInfo[];
  statusNodes: StatusNodes[];
}
const searchList = ref<SearchList>({
  examTypes: [],
  provinceNode: [],
  cityNode: [],
  districtNode: [],
  typeNode: [],
  userInfo: [],
  statusNodes: []
})
// const emit = defineEmits(['FnSearch'])

type SearchDataKey = 'provinceCode' | 'cityCode' | 'districtCode' | 'type' | 'userId' | 'status'
const selectItem = (value: string, str: SearchDataKey, item: any) => {
  searchData.value[str] = value
  let arr = []
  if(str == 'provinceCode') {
    if(value && value != 'all') {
      arr = [...item.children]
      arr.splice(0, 0, { cityCode: "all", cityName: "全部" })
      cityNode.value = arr
      searchData.value.cityCode = 'all'
      districtNode.value = []
      searchData.value.districtCode = 'all'
    }else {
      cityNode.value = []
      searchData.value.cityCode = 'all'
      districtNode.value = []
      searchData.value.districtCode = 'all'
    }
  }
  if(str == 'cityCode') {
    if(value && value != 'all') {
      arr = [...item.children]
      arr.splice(0, 0, { districtCode: "all", districtName: "全部" })
      districtNode.value = arr
      searchData.value.districtCode = 'all'
    }else {
      districtNode.value = []
      searchData.value.districtCode = 'all'
    }
  }
  FnSearch(searchData)

  // emit('FnSearch', searchData);
}
const ChangeRegion = (str: SearchDataKey) => {
  let arr = []
  if(str == 'provinceCode') {
    if(searchData.value.provinceCode && searchData.value.provinceCode != 'all') {
      arr = [...searchList.value.provinceNode.find(item => item.provinceCode == searchData.value.provinceCode).children]
      arr.splice(0, 0, { cityCode: "all", cityName: "全部" })
      cityNode.value = arr
      console.log(cityNode.value)
      searchData.value.cityCode = 'all'
      districtNode.value = []
      searchData.value.districtCode = 'all'
    } else {
      cityNode.value = []
      searchData.value.cityCode = 'all'
      districtNode.value = []
      searchData.value.districtCode = 'all'
    }
  }
  if(str == 'cityCode') {
    if(searchData.value.cityCode && searchData.value.cityCode != 'all') {
      arr = [...cityNode.value.find(item => item.cityCode == searchData.value.cityCode).children]
      arr.splice(0, 0, { districtCode: "all", districtName: "全部" })
      districtNode.value = arr
      searchData.value.districtCode = 'all'
    }else {
      districtNode.value = []
      searchData.value.districtCode = 'all'
    }
  }
  SearchChange()
}

const GetSearchList = () => {
  getSearchList().then((res: any) => {
    console.log(res)
    if(res.code == 200) {
      const { data } = res
      for(let i in data) {
        if(i == 'provinceNode') {
          data[i].splice(0, 0, { provinceCode: "all", provinceName: "全部" })
        }else if(i == 'cityNode') {
          data[i].splice(0, 0, { cityCode: "all", cityName: "全部" })
        }else if(i == 'districtNode') {
          data[i].splice(0, 0, { districtCode: "all", districtName: "全部" })
        }else if( i == 'typeNode') {
          data[i].splice(0, 0, { type: "all", typeName: "全部" })
        }else if( i == 'userInfo') {
          data[i].splice(0, 0, { userId: "all", nickname: "全部" })
        }else if( i == 'statusNodes') {
          data[i].splice(0, 0, { status: "all", statusName: "全部" })
        }
      }
      searchList.value = data
      console.log(searchList.value)
    }
  })
}
// 定义列表数据类型
interface User {
  index: number;
  tenantCode: String;
  tenantName: String;
  status: number;
  statusLabel: String;
  schoolType: String;
  abbreviation: String;
  dateDiffDayS: String;
  startDate:  String;
  endDate:  String;
  sysUserId: String;
  sysUserName:  String;
  cityAndAreaName:  String;
}
// 初始化列表数据
const tableData = ref<User[]>([])

const schoolTypeSelect = ref<string>("all")
const schoolNameCode = ref('')
const pageNum = ref(1)
const pageSize = ref(20)
const total = ref(0)
const tableLoading = ref(false)
const showDialog = ref(false)
const dialogData = reactive({
  id: '',
  pageType: '',
  isChild: false,
  tenantName: ''
})
const subjectShowDialog = ref(false)
// 编辑权限传递参数
const authData = reactive({
  showDialog: false,
  id: '',
  schoolName: '',
  tenantCode: ''
})
// 重置密码弹窗数据
const passwordDialog = reactive({
  dialogShow: false,
  id: '', // 学校id
  type: '', // 学校状态
  name: '', // 学校名称
  label: '', // 名称label
  remark: '' // 提示语
}) // 重置密码弹窗数据
const permissions = ref([]) // 权限列表
provide('showDialog', showDialog) // 新增用户弹窗是否展示
provide('dialogData', dialogData) // 新增用户弹窗数据
provide('authData', authData) // 设置权限弹窗数据
provide('subjectShowDialog', subjectShowDialog) // 开通科目弹窗数据
provide('passwordDialog', passwordDialog) // 重置密码弹窗数据
onMounted(() => {
  permissions.value = JSON.parse(localStorage.getItem('permissions'))

  GetSearchList()
  GetSchoolNumber()
  GetSchoolList()
  nextTick(() => {
    SetTableHeight()
  })
  window.addEventListener('resize', HandleResize);
})
onUnmounted(() => {
  window.removeEventListener('resize', HandleResize);
});
// 新增用户
const addUser = () => {
  showDialog.value = true
  dialogData.isChild = false
  dialogData.pageType = 'add'
}
// 编辑
const EditUser =  (row: any) => {
  console.log(row)
  showDialog.value = true
  dialogData.pageType = 'edit'
  dialogData.id = row.id
  dialogData.isChild = row.isChild
  dialogData.tenantName = row.tenantName
}
// 设置权限
const OpenAuth = (row: any) => {  
  authData.id = row.id
  authData.schoolName = row.tenantName
  authData.tenantCode = row.tenantCode
  authData.showDialog = true
}
// 开通科目
const OpenSubject = () => {
  console.log('OpenSubject')
  subjectShowDialog.value = true
}
// 筛选项查询
const FnSearch = (data: any) => {
  searchData.value = data.value
  pageNum.value = 1
  GetSchoolList()
}
// 表格上面筛选查询
const SearchChange = () => {
  pageNum.value = 1
  GetSchoolList()
}
// 获取用户数量
const GetSchoolNumber = () => {
  getSchoolNumber().then((res: any) => {
    if(res.code == 200 && res.data) {
      userNumber.value = res.data
    }
  })
}
// 获取学校列表
const GetSchoolList = () => {
  let params = {
    type: searchData.value.type == 'all' ? '' : searchData.value.type,
    status: searchData.value.status == 'all' ? '' : searchData.value.status,
    userId: searchData.value.userId == 'all' ? '' : searchData.value.userId,
    cityCode: searchData.value.cityCode == 'all' ? '' : searchData.value.cityCode,
    provinceCode: searchData.value.provinceCode == 'all' ? '' : searchData.value.provinceCode,
    schoolType:  schoolTypeSelect.value == 'all' ? '' : schoolTypeSelect.value,
    queryStr: schoolNameCode.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  tableLoading.value = true
  getSchoolList(params).then((res: any) => {
    if(res.code == 200 && res.data) {
      tableData.value = res.data.records
      total.value = parseInt(res.data.total)
      tableData.value.map((item, index) => {
        item.index = (pageNum.value - 1) * pageSize.value + index + 1
      })
    }
    tableLoading.value = false
  }).catch(() => {
    tableLoading.value = false
  })
}
// 切换分页页码
const HandleCurrentChange = (val) => {
  pageNum.value = val
  GetSchoolList()
}
const HandleSizeChange = (val) => {
  pageSize.value = val
  pageNum.value = 1
  GetSchoolList()
}
// 新增/修改学校信息后刷新列表
const RefTable = (val: any) => {
  showDialog.value = val
  GetSearchList()
  GetSchoolNumber()
  GetSchoolList()
}
// 改变用户状态
const ChangeStatus = (row: any, text: String) => {
  console.log(row)
  ElMessageBox.confirm(`是否${text}${row.tenantName}？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    changeStatus({
      id: row.id,
      status: row.status == 0 ? 1 : 0
    }).then((res: any) => {
      if(res.code == 200) {
        ElMessage.success(res.msg)
        GetSearchList()
        GetSchoolNumber()
        GetSchoolList()
      }
    })
  })
}
// 进入学校
const GoTeach = (row: any) => {
  //剩余天数为0的禁止进入学校
  if(row.status == 0 || row.dateDiffDayS==0) 
  {
    if(row.dateDiffDayS==0)
    {
      ElMessage.error('该学校已到期，请续费！')
    }
    
    return
  }

  console.log("打印row",row)
   let params = {
    schoolId: row.id,
  }
  
  getTicket(params).then((res: any) => {
    console.log("打印获取票据接口返回res",res)
    if(res.code == 200 && res.data) 
    {
      let ticket = res.data;
      let url=`https://www.k12100.com/#/otherLogin?schoolId=${row.id}&ticket=${ticket}`;//正式环境
      // let url=`https://dev3.k12100.net/#/otherLogin?schoolId=${row.id}&ticket=${ticket}`;//测试环境
      console.log("打印获取票据接口返回ticket",ticket)
      console.log("打印第三方登录地址",url);
      // window.open(`https://www.k12100.com/#/otherLogin?schoolId=${row.id}&ticket=${ticket}`)
       window.open(url)
    }
    
  }).catch(() => {
   
  })
  
}
// 重置密码
const resetPassWord = (row: any) => {
  passwordDialog.dialogShow = true
  passwordDialog.id = row.id
  passwordDialog.type = '2'
  passwordDialog.name = row.tenantName
  passwordDialog.label = '学校名称'
  passwordDialog.remark = '学校编号'
}
// 刷新
const Refresh = () => {
  schoolTypeSelect.value = " "
  schoolNameCode.value = ""
  GetSchoolList()
}

const filterRef = ref<HTMLDivElement | null>(null)
const scrollContainer = ref<HTMLElement | null>(null);
const isShowSimpleFilter = ref(false);

// 监听页面滚动
const OnScroll = () => {
  nextTick(() => {
    const filterElement = filterRef.value.$el || filterRef.value // 获取 DOM 元素
    if (!filterElement) return

    const filterElementHeight = filterElement.getBoundingClientRect().height
    const scrollTop = scrollContainer.value?.scrollTop || window.scrollY
    // console.log('筛选区域高度', filterElementHeight)
    // console.log('scrolltop滑动距离', scrollTop)
    // 判断是否滚动到了筛选区域的底部
    if (scrollTop > filterElementHeight + 60) {
      isShowSimpleFilter.value = true
      SetTableHeight()
    } else {
      isShowSimpleFilter.value = false
    }
  })
};
const tableHeight = ref(0)
const searchContentRef = ref<HTMLDivElement | null>(null);
const SetTableHeight = () => {
  const clientHeight = scrollContainer.value?.clientHeight || document.documentElement.clientHeight;
  const searchContentHeight = searchContentRef.value?.clientHeight || document.documentElement.clientHeight;

  tableHeight.value = clientHeight - searchContentHeight - 148

}
// 监听窗口大小变化，重新计算表格高度 使用节流防止频繁改变窗口大小导致计算量过大而页面卡顿
const HandleResize = throttle(() => {
  SetTableHeight();
}, 500) // 节流 500 毫秒内最多执行一次
</script>

<style lang="scss" scoped>
.simple_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search_content {
  align-items: flex-start !important;
}
.user_num_content {
  width: 100%;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .user_item {
    flex-grow: 1;
    height: 80px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    font-weight: 500;
    .item_left {
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
    &.all {
      background: #2E64FA;
      color: #fff;
      .item_right {
        color: #fff;
      }
    }
    &.blue {
      border: 1px solid #2E64FA;
      background: #EAF0FF;
      color: #333;
      .item_right {
        color: #2E64FA;
      }
    }
    &.green {
      border: 1px solid #2BC644;
      background: #EAF9EC;
      color: #333;
      .item_right {
        color: #2BC644;
      }
    }
    &.orange {
      border: 1px solid #FB9F34;
      background: #FFF5EB;
      color: #333;
      .item_right {
        color: #FB9F34;
      }
    }
    .item_right {
      font-size: 24px;
      font-weight: 700;
    }
  }
}
.button_editor.text_color_orange {
  color: #FB9F34;
}
.button_delete {
  margin-right: 5px;
}
.button_editor.text_color_red {
  color: #F56C6C;
}
.text_color_blue {
  color: #2E64FA;
  cursor: pointer;
}
.disabled_text {
  color: #ccc; 
  cursor: not-allowed;
}


.filter_area .page_item {
  padding: 10px 20px !important;
}
.tag_group{
  padding:8px 0;
  display: flex;
  justify-content: flex-start;
  .tag_group_title {
    // width: auto;
    width: 50px;
    height: auto;
    margin-right: 8px;
    color: #303133;
    font-size: 14px;
    text-align: right;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: 0em;
  }
  .tag_group_content {
    width: calc(100% - 80px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .tag_item {
      padding: 0 8px;
      line-height: 30px;
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
      color: #999999;
      cursor: pointer;
      &.active {
        background: rgba(71,113,203,0.1);
        color: #2E64FA;
      }
      &:hover {
        color: #2E64FA;
      }
    }
  }
}

</style>