13 Commits
036f294942
...
c8eda3f15d
| Author | SHA1 | Message | Date |
|---|---|---|---|
hongxilin
|
c8eda3f15d |
恢复打包文件中的文件名
|
5 days ago |
|
hongxilin
|
aba4f16ac4 |
把打包的包名添加进gitignore
|
5 days ago |
|
hongxilin
|
3a8b2f35b7 |
打包配置
|
5 days ago |
|
hongxilin
|
b28d43b0e8 |
行情期限页面加上来源字段，添加来源和注册时间的搜索条件
|
5 days ago |
|
hongxilin
|
692771ffac |
注册时间周期非空判断
|
1 week ago |
|
hongxilin
|
eaeafec5c9 |
规定注册时间格式
|
1 week ago |
|
hongxilin
|
aee24b4184 |
添加来源字段，添加来源和注册时间搜索条件
|
1 week ago |
|
hongxilin
|
282bbd883d |
模块期限页面，Deepmate页面：分页条往上调一下
|
1 week ago |
|
hongxilin
|
100cb57737 |
表头添加手机区号名称
|
1 week ago |
|
hongxilin
|
83cd0e61cc |
增加总部权限账号
|
1 week ago |
|
hongxilin
|
da9d3f61d3 |
添加测试环境打包指令
|
1 week ago |
|
hongxilin
|
5680500d9f |
添加回车搜索功能，使用pinia管理权限，在模块期限的DeepMate和深度探索表格中添加归属字段，新添加查看归属页面，区分总部和市场权限。
我不小心整理了一下代码，可能会出现大量冲突。 |
1 week ago |
|
hongxilin
|
ef48cd5130 |
打开ip链接
|
1 week ago |
12 changed files with 1313 additions and 167 deletions
-
2.gitignore
-
136package-lock.json
-
4package.json
-
36src/api/userPermissions.js
-
171src/layout/Layout.vue
-
2src/main.js
-
6src/router/index.js
-
19src/store/permission.js
-
122src/views/UserPermissions/Market.vue
-
50src/views/UserPermissions/Module.vue
-
802src/views/UserPermissions/invitedLook.vue
-
10vite.config.js
@ -0,0 +1,19 @@ |
|||||
|
/** @format */ |
||||
|
|
||||
|
import { defineStore } from "pinia"; |
||||
|
import { ref } from "vue"; |
||||
|
import { getPermissionApi } from "../api/userPermissions"; |
||||
|
export const usePermissionStore = defineStore("permission", () => { |
||||
|
//permission
|
||||
|
const permission = ref("-1"); |
||||
|
|
||||
|
async function getPermission() { |
||||
|
// token
|
||||
|
const token = localStorage.getItem("token"); |
||||
|
const result = await getPermissionApi({ token: token }); |
||||
|
permission.value = result.permission_level; |
||||
|
return permission.value; |
||||
|
} |
||||
|
|
||||
|
return { permission, getPermission }; |
||||
|
}); |
||||
@ -0,0 +1,802 @@ |
|||||
|
<!-- @format --> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="page-container"> |
||||
|
<!-- 搜索区域 --> |
||||
|
<div class="search-container" @keyup.enter="search"> |
||||
|
<div class="search-form"> |
||||
|
<div class="search-group"> |
||||
|
<div class="search-group1"> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">账号</span> |
||||
|
<el-input v-model="searchForm.invitee" placeholder="请输入账号" clearable style="height: 36px; width: 140px" /> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">姓名</span> |
||||
|
<el-input v-model="searchForm.username" placeholder="请输入姓名" clearable style="height: 36px; width: 180px" /> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">手机号</span> |
||||
|
<el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable style="height: 36px; width: 200px" /> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">邮箱</span> |
||||
|
<el-input v-model="searchForm.email" placeholder="请输入邮箱" clearable style="height: 36px; width: 200px" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="search-group2"> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">归属</span> |
||||
|
<el-input v-model="searchForm.inviter" placeholder="请输入归属账号" :disabled="permission != '2'" clearable style="height: 36px; width: 140px" /> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">来源</span> |
||||
|
<el-select v-model="searchForm.origin_id" placeholder="请选择来源" clearable filterable style="height: 36px; width: 160px" :loading="isOriginLoading"> |
||||
|
<el-option v-for="origin in originList" :key="origin.origin_id" :label="origin.origin_name" :value="origin.origin_id" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">客户类型</span> |
||||
|
<el-select v-model="searchForm.user_role" placeholder="请选择客户类型" clearable style="height: 36px; width: 160px"> |
||||
|
<el-option label="非网" value="2" /> |
||||
|
<el-option label="会员" value="1" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">地区</span> |
||||
|
<el-select v-model="searchForm.country" placeholder="请选择地区" clearable filterable style="height: 36px; width: 160px" :loading="isRegionLoading"> |
||||
|
<el-option v-for="region in regionList" :key="region.ID" :label="region.Name" :value="region.ID" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="search-group3"> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">注册时间</span> |
||||
|
<el-date-picker v-model="searchDate" type="datetimerange" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="button-group"> |
||||
|
<el-button type="primary" @click="search">搜索</el-button> |
||||
|
<el-button type="success" @click="exportExcel">导出Excel列表</el-button> |
||||
|
<el-button color="#626aef" @click="exportList">查看导出列表</el-button> |
||||
|
<el-button type="primary" @click="resetBn">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据 --> |
||||
|
<el-table :data="tableData" style="width: 100%; margin-top: 20px" header-cell-class-name="table-header" class="table-rounded" :loading="tableLoading"> |
||||
|
<el-table-column prop="id" label="序号" align="center" header-align="center" width="80"> |
||||
|
<template #default="scope"> |
||||
|
{{ (currentPage - 1) * pageSizeDM + scope.$index + 1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="invitee" label="账号" align="center" header-align="center" /> |
||||
|
<el-table-column prop="username" label="姓名" align="center" header-align="center" /> |
||||
|
<el-table-column prop="inviter" label="归属" align="center" header-align="center" /> |
||||
|
<el-table-column prop="origin_name" label="来源" align="center" header-align="center" /> |
||||
|
<el-table-column prop="email" label="邮箱" align="center" header-align="center" width="200"> |
||||
|
<template #default="scope"> |
||||
|
<el-tooltip effect="dark" :content="scope.row.email" placement="top"> |
||||
|
<span class="ellipsis-text">{{ scope.row.email }}</span> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="dialing_code" label="手机区号" align="center" header-align="center" /> |
||||
|
<el-table-column prop="phone" label="手机号" align="center" header-align="center" /> |
||||
|
<el-table-column prop="country" label="地区" align="center" header-align="center" /> |
||||
|
<el-table-column prop="regtime" label="注册时间" align="center" header-align="center" width="250" /> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<div class="demo-pagination-block"> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChangeDM" |
||||
|
@current-change="handleCurrentChangeDM" |
||||
|
:current-page="currentPage" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
:page-size="pageSizeDM" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="datatotalDM" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, reactive, onMounted, computed } from "vue"; |
||||
|
import { ElMessage } from "element-plus"; |
||||
|
import { getInvitedListApi, exportInvitedApi, marketListApi, getOriginListApi } from "../../api/userPermissions"; |
||||
|
import router from "../../router"; |
||||
|
import { useRoute } from "vue-router"; |
||||
|
import { usePermissionStore } from "../../store/permission"; |
||||
|
const permissionStore = usePermissionStore(); |
||||
|
|
||||
|
// token |
||||
|
const token = localStorage.getItem("token"); |
||||
|
//permission |
||||
|
const permission = ref("-1"); |
||||
|
|
||||
|
// 获取路由实例 |
||||
|
const route = useRoute(); |
||||
|
|
||||
|
// 组件挂载时：获取地区列表 + 初始化表格数据 |
||||
|
onMounted(async () => { |
||||
|
permission.value = permissionStore.permission; |
||||
|
fetchOriginList(); |
||||
|
fetchRegionList(); |
||||
|
getTableData(); |
||||
|
}); |
||||
|
|
||||
|
const shortcuts = [ |
||||
|
{ |
||||
|
text: "最近7天", |
||||
|
value: () => { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setDate(start.getDate() - 7); |
||||
|
return [start, end]; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近1个月", |
||||
|
value: () => { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setMonth(start.getMonth() - 1); |
||||
|
return [start, end]; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近3个月", |
||||
|
value: () => { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setMonth(start.getMonth() - 3); |
||||
|
return [start, end]; |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
// 地区下拉框 |
||||
|
const regionList = ref([]); |
||||
|
const isRegionLoading = ref(false); |
||||
|
|
||||
|
// 获取地区列表 |
||||
|
const fetchRegionList = async () => { |
||||
|
try { |
||||
|
isRegionLoading.value = true; |
||||
|
const data = await marketListApi({ |
||||
|
token: token, |
||||
|
app_form: "en", |
||||
|
}); |
||||
|
regionList.value = data.list; |
||||
|
} catch (error) { |
||||
|
console.error("获取地区列表失败：", error); |
||||
|
regionList.value = []; |
||||
|
} finally { |
||||
|
isRegionLoading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 来源下拉框 |
||||
|
const originList = ref([]); |
||||
|
const isOriginLoading = ref(false); |
||||
|
|
||||
|
// 获取来源下拉框 |
||||
|
const fetchOriginList = async () => { |
||||
|
try { |
||||
|
isOriginLoading.value = true; |
||||
|
const data = await getOriginListApi({ |
||||
|
token: token, |
||||
|
app_form: "en", |
||||
|
}); |
||||
|
originList.value = data.list; |
||||
|
} catch (error) { |
||||
|
console.error("获取来源下拉框失败：", error); |
||||
|
originList.value = []; |
||||
|
} finally { |
||||
|
isOriginLoading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 搜索表单 |
||||
|
const searchForm = reactive({ |
||||
|
invitee: "", |
||||
|
username: "", |
||||
|
phone: "", |
||||
|
email: "", |
||||
|
inviter: "", |
||||
|
origin_id: "", |
||||
|
user_role: "", |
||||
|
country: "", |
||||
|
}); |
||||
|
|
||||
|
const searchDate = ref([]); |
||||
|
|
||||
|
// 排序参数 |
||||
|
const sortOrder = ref(null); |
||||
|
|
||||
|
// 表格数据 |
||||
|
const tableData = ref([]); |
||||
|
const tableLoading = ref(false); |
||||
|
const datatotalDM = ref(0); |
||||
|
|
||||
|
// 分页参数 |
||||
|
const currentPage = ref(1); |
||||
|
const pageSizeDM = ref(10); |
||||
|
|
||||
|
// 获取表格数据 |
||||
|
const getTableData = async () => { |
||||
|
try { |
||||
|
tableLoading.value = true; |
||||
|
const requestParams = { |
||||
|
token: token, |
||||
|
invitee: searchForm.invitee, |
||||
|
username: searchForm.username, |
||||
|
phone: searchForm.phone, |
||||
|
email: searchForm.email, |
||||
|
inviter: searchForm.inviter, |
||||
|
origin_id: searchForm.origin_id, |
||||
|
user_role: searchForm.user_role, |
||||
|
country: searchForm.country, |
||||
|
start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "", |
||||
|
end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "", |
||||
|
page: currentPage.value, |
||||
|
page_size: pageSizeDM.value, |
||||
|
}; |
||||
|
const data = await getInvitedListApi(requestParams); |
||||
|
tableData.value = data.list; |
||||
|
datatotalDM.value = data.total; |
||||
|
} catch (error) { |
||||
|
console.error("获取表格数据失败：", error); |
||||
|
tableData.value = []; |
||||
|
datatotalDM.value = 0; |
||||
|
} finally { |
||||
|
tableLoading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 分页方法 |
||||
|
const handleSizeChangeDM = (val) => { |
||||
|
pageSizeDM.value = val; |
||||
|
getTableData(); |
||||
|
console.log(`每页 ${val} 条`); |
||||
|
}; |
||||
|
|
||||
|
const handleCurrentChangeDM = (val) => { |
||||
|
currentPage.value = val; |
||||
|
getTableData(); |
||||
|
console.log(`当前页: ${val}`); |
||||
|
}; |
||||
|
|
||||
|
// 搜索按钮 |
||||
|
const search = () => { |
||||
|
currentPage.value = 1; |
||||
|
getTableData(); |
||||
|
}; |
||||
|
|
||||
|
// 重置按钮 |
||||
|
const resetBn = () => { |
||||
|
searchForm.invitee = ""; |
||||
|
searchForm.username = ""; |
||||
|
searchForm.phone = ""; |
||||
|
searchForm.email = ""; |
||||
|
searchForm.inviter = ""; |
||||
|
searchForm.origin_id = ""; |
||||
|
searchForm.user_role = ""; |
||||
|
searchForm.country = ""; |
||||
|
searchDate.value = []; |
||||
|
|
||||
|
currentPage.value = 1; |
||||
|
pageSizeDM.value = 10; |
||||
|
getTableData(); |
||||
|
}; |
||||
|
|
||||
|
// 导出Excel列表按钮 |
||||
|
const exportExcel = async () => { |
||||
|
const requestParams = { |
||||
|
token: token, |
||||
|
invitee: searchForm.invitee, |
||||
|
username: searchForm.username, |
||||
|
phone: searchForm.phone, |
||||
|
email: searchForm.email, |
||||
|
inviter: searchForm.inviter, |
||||
|
origin_id: searchForm.origin_id, |
||||
|
user_role: searchForm.user_role, |
||||
|
start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "", |
||||
|
end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "", |
||||
|
country: searchForm.country, |
||||
|
}; |
||||
|
const data = await exportInvitedApi(requestParams); |
||||
|
if (data != "") { |
||||
|
ElMessage.success("已导出"); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 查看导出列表按钮 |
||||
|
const exportList = () => { |
||||
|
router.push({ |
||||
|
path: "/userPermissions/export", |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 格式化日期 |
||||
|
const formatDate = (date) => { |
||||
|
if (!date) return ""; |
||||
|
const year = date.getFullYear(); |
||||
|
const month = String(date.getMonth() + 1).padStart(2, "0"); |
||||
|
const day = String(date.getDate()).padStart(2, "0"); |
||||
|
return `${year}/${month}/${day}`; |
||||
|
}; |
||||
|
|
||||
|
// 校验指标 |
||||
|
const checkmodel = () => { |
||||
|
if (indicator_id.value.length === 0) { |
||||
|
ElMessage.error("请至少选择一个指标"); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
// 校验时间 |
||||
|
const checkTime = () => { |
||||
|
if (timeType.value === "expire") { |
||||
|
// 到期时间 |
||||
|
if (!expireTime.value) { |
||||
|
ElMessage.error("请选择到期时间"); |
||||
|
return false; |
||||
|
} |
||||
|
} else if (timeType.value === "delay") { |
||||
|
// 延期时间 |
||||
|
if (!delayValue.value || !delayUnit.value) { |
||||
|
ElMessage.error("延期时间必须填写完整(数值+单位)"); |
||||
|
return false; |
||||
|
} |
||||
|
const delayNum = Number(delayValue.value); |
||||
|
if (isNaN(delayNum) || delayNum < 0) { |
||||
|
ElMessage.error("延期时间不能为负数，请输入有效正数"); |
||||
|
return false; |
||||
|
} |
||||
|
if (delayNum === 0) { |
||||
|
ElMessage.error("延期时间不能为0，请输入有效正数"); |
||||
|
return false; |
||||
|
} |
||||
|
} else { |
||||
|
ElMessage.error("请设置权限时间"); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
// 校验备注 |
||||
|
const checkRemark = () => { |
||||
|
if (!remark.value.trim()) { |
||||
|
ElMessage.error("请输入备注"); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 父容器 */ |
||||
|
.page-container { |
||||
|
position: relative; |
||||
|
min-height: 600px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域 */ |
||||
|
.search-container { |
||||
|
display: flex; |
||||
|
height: 170px; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
gap: 10px; |
||||
|
align-self: stretch; |
||||
|
border-radius: 8px; |
||||
|
background: #fefaf9; |
||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); |
||||
|
padding: 0 15px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索表单 */ |
||||
|
.search-form { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
gap: 15px; |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.search-group { |
||||
|
} |
||||
|
|
||||
|
.search-group1 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.search-group2 { |
||||
|
display: flex; |
||||
|
margin-top: 15px; |
||||
|
align-items: center; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.search-group3 { |
||||
|
display: flex; |
||||
|
margin-top: 15px; |
||||
|
align-items: center; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
/* 单个搜索项 */ |
||||
|
.search-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索标签文字 */ |
||||
|
.form-label { |
||||
|
font-weight: 800 !important; |
||||
|
font-size: 15px; |
||||
|
text-align: left; |
||||
|
color: #333; |
||||
|
margin-top: 13px; |
||||
|
font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif !important; |
||||
|
} |
||||
|
|
||||
|
/* 按钮组 */ |
||||
|
.button-group { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 0px !important; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
/* 按钮样式 */ |
||||
|
.button-group .el-button { |
||||
|
padding: 6px 10px !important; |
||||
|
font-size: 14px !important; |
||||
|
height: 36px !important; |
||||
|
} |
||||
|
|
||||
|
/* 表格样式 */ |
||||
|
.table-rounded { |
||||
|
border-radius: 12px !important; |
||||
|
overflow: hidden !important; |
||||
|
border: 1px solid #e4e7ed !important; |
||||
|
height: 650px; |
||||
|
} |
||||
|
|
||||
|
.table-roundedDE { |
||||
|
border-radius: 12px !important; |
||||
|
overflow: hidden !important; |
||||
|
border: 1px solid #e4e7ed !important; |
||||
|
min-height: 650px; |
||||
|
} |
||||
|
|
||||
|
.table-header { |
||||
|
text-align: center !important; |
||||
|
font-weight: 800 !important; |
||||
|
font-size: 15px !important; |
||||
|
color: #333 !important; |
||||
|
background-color: #f8f9fa !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__cell { |
||||
|
border-right: none !important; |
||||
|
border-bottom: 1px solid #e4e7ed !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__header th.el-table__cell { |
||||
|
border-right: none !important; |
||||
|
border-bottom: 1px solid #e4e7ed !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__row:hover .el-table__cell { |
||||
|
background-color: #fafafa !important; |
||||
|
} |
||||
|
|
||||
|
/* 分页组件样式 */ |
||||
|
.demo-pagination-block { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 44px; |
||||
|
padding: 0 16px; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
position: absolute; |
||||
|
margin-top: 10px; |
||||
|
border-radius: 0 0 3px 3px; |
||||
|
border-top: 1px solid #eaeaea; |
||||
|
background: #fefbfb; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 添加/修改样式 */ |
||||
|
.form-item { |
||||
|
margin-bottom: 24px; |
||||
|
padding-left: 20px; |
||||
|
padding-right: 20px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.form-label { |
||||
|
display: block; |
||||
|
margin-bottom: 8px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.radio-group { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.radio-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.radio-item span { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.tip { |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 16px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.inline-form-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.inline-form-item .form-label { |
||||
|
display: inline-block; |
||||
|
margin-bottom: 0; |
||||
|
width: 60px; |
||||
|
text-align: left; |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.info-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 40px; |
||||
|
padding: 0 20px 18px; |
||||
|
color: #333; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* Tab容器 */ |
||||
|
.tab-group { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
justify-content: flex-start; |
||||
|
margin: 4px 0; |
||||
|
padding-left: 2px; |
||||
|
} |
||||
|
|
||||
|
/* Tab按钮 */ |
||||
|
.tab-btn { |
||||
|
width: 120px; |
||||
|
padding: 6px 0; |
||||
|
text-align: center; |
||||
|
border: 1px solid #ff0000; |
||||
|
border-radius: 4px; |
||||
|
background-color: #ffffff; |
||||
|
color: #ff0000; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
/* Tab选中样式 */ |
||||
|
.tab-btn.active { |
||||
|
background-color: #ff0000; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
/* hover效果优化 */ |
||||
|
.tab-btn:not(.active):hover { |
||||
|
background-color: #fff5f5; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域（深度探索） */ |
||||
|
.search-containerDE { |
||||
|
display: flex; |
||||
|
height: auto; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
gap: 12px; |
||||
|
align-self: stretch; |
||||
|
border-radius: 8px; |
||||
|
background: #fefaf9; |
||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); |
||||
|
padding: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索表单（深度探索） */ |
||||
|
.search-formDE { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
gap: 15px; |
||||
|
flex-wrap: wrap; |
||||
|
row-gap: 8px; |
||||
|
} |
||||
|
|
||||
|
/* 单个搜索项（深度探索） */ |
||||
|
.search-itemDE { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索标签文字（深度探索） */ |
||||
|
.form-labelDE { |
||||
|
font-weight: 800 !important; |
||||
|
font-size: 15px; |
||||
|
text-align: left; |
||||
|
color: #333; |
||||
|
margin-top: 0; |
||||
|
font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif !important; |
||||
|
} |
||||
|
|
||||
|
/* 按钮组（深度探索） */ |
||||
|
.button-groupDE { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px !important; |
||||
|
} |
||||
|
|
||||
|
/* 按钮样式（深度探索） */ |
||||
|
.button-groupDE .el-button { |
||||
|
padding: 6px 10px !important; |
||||
|
font-size: 14px !important; |
||||
|
height: 36px !important; |
||||
|
} |
||||
|
|
||||
|
/* 文本溢出省略样式（深度探索） */ |
||||
|
.ellipsis-text { |
||||
|
display: inline-block; |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/* 开通/编辑指标复选（深度探索） */ |
||||
|
.indicator-checkbox-group { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
margin-top: 8px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.indicator-checkbox-item { |
||||
|
flex: 0 0 calc(20% - 5px); |
||||
|
box-sizing: border-box; |
||||
|
padding: 4px 0; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) { |
||||
|
background-color: #ff0000 !important; |
||||
|
border-color: #ff0000 !important; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) { |
||||
|
border-color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-checkbox__input:hover .el-checkbox__inner) { |
||||
|
border-color: #ff0000 !important; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-checkbox__input:focus .el-checkbox__inner) { |
||||
|
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2) !important; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-checkbox__label) { |
||||
|
color: #333 !important; |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
|
||||
|
/* 权限详情（深度探索） */ |
||||
|
.permission-detail-dialog { |
||||
|
--el-dialog-padding-primary: 15px; |
||||
|
} |
||||
|
|
||||
|
.detail-container { |
||||
|
background-color: #fff1f0; |
||||
|
border-radius: 6px; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
.hlid-item { |
||||
|
margin-bottom: 25px; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.expire-section { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.indicator-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.indicator-item { |
||||
|
padding: 6px 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.indicator-name { |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.expire-time { |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.expired-tag { |
||||
|
background-color: #ffccd5; |
||||
|
color: #f56c6c; |
||||
|
font-size: 12px; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 4px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue